It happens I’m asked about my web design workflow, what my process is like from start to end, and I’ve decided that I would like to share it with you - or at least give it a shot. Many people won’t agree with me, and definitely would say that it isn’t the optimal design process, but I’m sure, that the optimal design process is relative - differs from person to person.
Phase 1 - planning
If it is a customer job it is important for me, that they have done their homework - the planning. Who do we want to reach? What existing web sites do we like? What features should the web site offer?
Phase 2 - sketching
With the planning in mind we now know whom we want to reach and what the sites expression should be like. In this phase I don’t consider if the content boxes should have rounded or straight corners, the headlines serif or sans, I think in a greater perspective - placement of menus? Column design? Boxed design?
I find some paper starting to roughly sketch my ideas of the layout in small sizes (Ex. 4×3cm), and when I have a result I’m quite happy with I draw it in a bigger size. Now I go closer into details - actual straight lines, sketching headline typography (serif, sans). In this phase I still don’t really use much time thinking in precise distances, just roughly sketching, and keep doing it until I have a result I like.
Phase 2.5 - presenting the design
In most cases I don’t do this, but if it is a customer job and a bigger website you can choose to make a beautiful hand drawn sketch and present it to the customer, sketching the different parts of the web site (forums, articles, archive view etc.).
Phase 3 - photoshopping with contrasts
I still don’t think in colours - I think in contrasts. I start by making a new document, look at my sketches and start making the design in layers, layer groups etc., using only black and grey colours. During this process I choose what fonts I’m going to use, the precise distances between the design elements, the line spacing, font size, round straight corners. I keep designing and changing the layout until I have a final result I’m happy with - still only black and grey colours.
When you’ve done all this, you might want to create some copies of the file and design different parts of the website like earlier (forums, articles, archive view etc.).
Phase 3.5 - presenting the design
Again, if working for a customer, this is where you would present the design. Start out by making clear that the final result won’t be all black and grey, and explain that you’ve worked with contrasts.
During this customer meeting it’s a really good idea to take notes on what they would like to have changed, they’re point of view regarding colour choice etc. After all they are the ones who has to live with the design when you’re done.
Phase 3.7 - make changes
If it’s a customer job and they had comments on the design, this is where I would make changes to the design, still only using contrasts. Present, make changes, present make changes until both parts are happy with the result.
Phase 4 - colours
The colour phase is very, very important! Choose your colour theme carefully, having the group of people who is going to use the site in mind. Here I normally make a great choice - should I use one or two breaking colours or should I choose a flat area colour? Explaining my two terms:
- Breaking colours:
This type of colour theme is having a single or two colours to use for breaking the colourless look - you can use the colours for headlines, lines in the design, links, link hovering etc. - Flat area colours:
This is using colours for the bigger flat areas, like choosing a brown for the menu background and a light cyan for menu separators etc.
When I’ve chosen which type of colour theme and colours I want to use in the design I start matching colours with the different greys in the design, so the contrast is kept.
Phase 5, 6 …
Your job might end here, after making the design in Photoshop. Else this is where you would make the design in xhtml/css, cross-browser testing, CMS-integration etc.
The end
This little walkthrough of my workflow is based on designing new web sites and not redesigning - if you are to redesign a web site you have to think much closer into reusing the old look, placement of menus etc.
I hope this article will help some to think more closely about their own workflows and consider where they can change some things to optimize the time usage etc. Maybe someone also has places to point their fingers at my workflow and could help me optimize mine. Please comment and share your experiences, workflows etc.
28 comments
MenZa Says:
Very nice. I, personally, do everything in one go; In Photoshop (and code if afterwards, obviously).
Good article, del.icio.us’ed.
03/04-2006 | 13:56
tim Says:
Nice post. My workflow is a bit different from yours though. As I am currently designing a new theme for Wordpress, I’ve decided to share the methodology I’m going through.
(note: if the link doesn’t display properly, follow the link on my name)
hope it will be useful to somebody :-)
12/04-2006 | 14:44
Kevin Cannon Says:
Hey,
I’d love to see some screenshots of the design during the various stages you’ve described.
- Kevin
12/04-2006 | 16:11
lars koudal Says:
Hiya, great post. I have been working on a similar article for my own homepage, and it’s interesting to see how our workflows differ.
I would also like to agree with Kevin, that I would love to see screenshots from the various stages.
Thank you again for a good article.
13/04-2006 | 13:08
The undersigned Says:
Thanks for the comments - I think I’ll, next time I’m doing a design, keep this in mind and make a big walktrough with picturess from each phases.
Lars: Must say that I’m looking forward to read your article!
13/04-2006 | 17:48
Letter Never Sent » Blog Archive » Tips on Getting Started With Web Design Says:
[…] Know a few good tricks. Most web designers have a bag of tricks they use over and over. Little things like how to build a website that looks good, but is actually very simple. For example, check out Cameron Moll’s pretty website. As a well-known web designer, he knows how to make things look pretty sharp, but if you look closely you’ll see that his site is actually not that complex. It’s basically a header image, a background, and a two column CSS layout. There are a few complexities, but it doesn’t get much easier than that. If you look at this project he did recently, you’ll see that he uses many of the same tricks. While the site looks very nice, the actual architecture is not that difficult. It’s a navigation element, a large header, and three columns beneath the header. Cameron’s most effective trick is that he’s a whiz with Photoshop, which makes everything else he does look pretty snazzy. Most good designers are very good with Photoshop. I highly recommend spending lots of time in that application as it can account for 60-75% of your success with clients and projects. In my experience, most of the actual ‘designing’ is concepted and performed within Photoshop anyway. I don’t even mess with the HTML part of a project until everything is created in Photoshop. This guy has a similar workflow, which he outlines here. Buy, borrow, or steal a copy of Photoshop if you don’t already have one. It’s a necessary tool that everyone uses. […]
14/04-2006 | 0:34
The undersigned » Blog Archive » Preparing the next workflow article Says:
[…] At the moment im sketching ideas for the next design update for webdesignbook.net. Im keeping in mind that I want to use this redesign to make a »My web designing workflow« update, including pictures from each phase. […]
14/04-2006 | 15:04
Viking KARWUR Says:
Nice articles… Thanks for Sharing…
14/04-2006 | 15:56
The undersigned » Blog Archive » Small updates Says:
[…] Still working on the redesign of webdesignbook.net and related to that, the updated article about my web designing workflow. […]
17/04-2006 | 17:50
The undersigned » Blog Archive » My web designing workflow - Part 2 Says:
[…] As earlier requested, and as I promised, I have now collected a few pictures and photos from my design process of webdesignbook.net. I won’t go in depth in the phases, but if you haven’t already read my earlier post, My web designing workflow, I suggest you read that, and then watch this post again - trust me, it will make much more sense! […]
22/04-2006 | 22:37
Daniel Says:
Don’t forget a cup of coffe at the end ;)
19/05-2006 | 1:40
The undersigned Says:
Yeah, coffee is important ;) but not only in the end :D
19/05-2006 | 7:15
The undersigned » Blog Archive » 9rules submission Says:
[…] If you liked my articles about my web designing workflow (part one - part two), you might want to read April Zero’s shot at a similar article as well. […]
21/05-2006 | 14:56
The undersigned » Blog Archive » Webdesign mockup using Photoshop Says:
[…] In addition to my webdesigning workflow articles (here and here), I was encouraged by pnts to show an example of how I handle the photoshopping steps. […]
22/05-2006 | 14:32
Fresh » lo faccio per i clienti… Says:
[…] nella speranza che un giorno ci si renda conto del lavoro che c’è dietro un sito. ognuno ha un proprio metodo e stile di lavoro ma resta il fatto che non si tratta mai di tirare due righe su un foglio, buttare un po’ di colori a caso in photoshop e frullare tutto in flash… Thomas Silkjær un designer danese ha postato sul proprio sito tre interessanti articoli sul workflow nella costruzione di un sito: prima parte (solo testo) seconda parte (testo + foto) terza parte (mano a photoshop!) […]
23/05-2006 | 12:27
Bas Says:
Wow it’s really funny to see you use almost exactly the same ‘flow’ as I am :) This kinda makes me think I’m on the right track doing what I’m doing ;) But I don’t use the contrast approach, I’m gonna try that and see how it works out. Nice and short article, good read, but I’m curious about how you convert the final look to html/css especially when it comes to keeping fonts like they are in the design. Grtz
23/05-2006 | 13:49
Photoshop Weblog » Webdesign Workflow Says:
[…] Photoshop wird natürlich auch im Webdesign verwendet. Jeder hat dabei seinen eigenen Weg. Eine Vorgehensweise zeigen die Artikel My web designing workflow Teil 1 und Teil 2 sowie der Beitrag Webdesign-Mockup auf theundersigned.net. Schreibe einen Kommentar! […]
06/09-2006 | 8:44
Photoshop Weblog » Blog Archiv » Webdesign Workflow Says:
[…] Photoshop wird natürlich auch im Webdesign verwendet. Jeder hat dabei seinen eigenen Weg. Eine Vorgehensweise zeigen die Artikel »My web designing workflow« Teil 1 und Teil 2 sowie der Beitrag Webdesign-Mockup auf theundersigned.net. […]
28/09-2006 | 12:12
Kurt Tasche Says:
Great info. This is an excellent design flow for web design. I’m anxious to learn more.
12/12-2006 | 9:29
Shan Arakkal Says:
Clear view. Nicely Done. Helpful.Cheeeers..
24/01-2007 | 6:15
kwaku offei bekoe Says:
i will like the info giving out here. i think webdevelopers should continue sharing resourceful info like this all the time
31/01-2007 | 18:51
Il workflow di un sito web « Cheat Sheet Says:
[…] My web designing workshop su TheUndersigned: da non perdere anche la Part 2, che illustra un caso pratico e Webdesign mockup using Photoshop […]
24/03-2007 | 20:15
» Workflow Choices BoDo: Business of Design online » Blog Archive Says:
[…] My web designing workflow by The undersigned […]
30/04-2007 | 4:59
John Says:
Hey, I like the workflow you have provided. Atleast for someone like me. It is very useful to see what others do and how they do it.
I’m grateful.
Cheers,
John
www.XpertDesigns.net
03/08-2007 | 6:54
saç ekimi Says:
nice
13/02-2008 | 22:50
Rafiq Mirza Says:
Hi,
You have done a great effort to share your flow of designing. I am new and a learner. Your artical will help me develop my own ideas to manage my design work scope.
Thanks again
Rafiq
19/02-2008 | 8:06
Ja Says:
Does using just contrasts limit your designs?
And how did this website get designed using the contrasts method?
09/05-2008 | 16:17
Harya Dimas Says:
very interesting. your article has give me some ideas to re-evaluate my own workflow.
09/07-2008 | 6:40
Leave a Reply