The process of developing a website can be long and tedious, but the end result should be rewarding. As a web designer it’s very easy to spot sites that were well-thought out and others that were not. Throwing something together too quickly without much of a plan leads to a lot of redesigns and mistakes. I’ve narrowed down my design process into five basic categories. This helps me organize my thoughts in order to optimize my work flow. Here’s my 5 steps…
1. Client Interview
I’ve found out the hard way that the interview may very well be the most important step. You need to find out all the information you possibly can about your client and their business. Whether you do this in person, over the phone, or by email it’s important to have a plan. You should have a list of questions you need answered. The less info you get here, the more frustrating the entire process will be for both you and the client.
Danny Outlaw of Outlaw Design Blog provides a fantastic starting point for just such a questionnaire. His Free Resource, Pre-Design Questionnaire can be easily used and tweaked to suit your needs. If you can get your client to completely and truthfully answer these types of questions then you will be well on your way.
I’ve often found the most difficult part of the design process is getting content from the client. It’s a good idea to encourage them to write out their ideas. A lot of times putting pen to paper will help your client gather their thoughts. Also, find out a good deal about pre-existing logos and marketing they’ve done. Is the logo vector format or high enough resolution to use? Do they have colors, or a theme already established that they like? Find out about the company’s goals and direction. Do they want a corporate feel, or a “Mom and Pop” feel? What do they want to get out of having a website? Do they need dynamic content? A content management system? You get the idea; customize a questionnaire like the one from Outlaw Design Blog and you can avoid many of the most common mistakes.
2. Research
You already know more about your clients wants and needs, now it’s time for you to sit down and do your homework. Try to find out as much as you can about the company itself.
Make sure to take a look at their websites. I am by no means suggesting that you copy their site, but merely look for inspiration and direction. You can learn a lot about your client’s needs by looking at what others in the industry have already done.
At this point you should know the client’s likes and dislikes, and you should have a grasp of what their business is all about. You can begin to gather your thoughts and brainstorm how their site will shake out. Which brings us to the next step.
3. Sketch
If you are anything like me then your first inclination is to go right to the computer and start designing. But, if you do that you’ll miss a very important part of the creative process. Sketching and writing out your ideas in a notebook is a great way to let your imagination run wild. People are generally more creative when they are not limited by the constraints of doing it on the computer.
So grab any old notebook and start jotting your ideas down. Then sketch out the actual layout of the design. The good part here is you can write notes as you go and be as messy as you need to be. Afterall, you’ll be the only one seeing this. I prefer to box in the different areas of the site: the header, nav, content, # of columns, footer, etc…
This is a great time to experiment with different layouts and themes. Keep sketching till you have something you like and your ideas begin to really take shape. It’s at that point, you can then fire up the computer.
4. Mock-up
It’s time to bring up the design program you use to mock-up websites. I personally love to use Photoshop, although I’m thinking about switching to Fireworks. It’s during this step that you’ll pull together your sketch and draw it out in one of these programs.
I think it’s important to continue to organize your thoughts. I keep most of the components that will be in different divs in separate layers. I definitely keep in mind how the design will function when I try to put it in code later. You can put real content in the design if you have some already, if not I often use simple dummy text. Firefox has a nifty little plug-in for just that sort of thing, it’s called Dummy Lipsum.
When I’ve got a design that I believe me and the client will like, I save the file as a PDF. Often times I will use different layer comps in Photoshop to show a couple of options to the client.
Next up, I send the file(s) over, usually by email for their review. I fully expect to have some changes and usually write a second mockup into the cost of the design. At any rate, continue this design process until you design something you and the client agree on.
Slice up and optimize any images you will be using for the coding of the site. Then bring up the coding program that works for you.
5. Code
This part of the design process consists of coding and testing your site. I use Dreamweaver to code my sites, but any old text editor will do the trick. I begin writing the CSS and testing out the site as I go.
In order to avoid some of the common pitfalls of the default padding and margins in browsers, it’s a good idea to use some kind of CSS reset. I usually use the one provided by Eric Meyer. Check it out here. I also commonly use PHP scripts that pull data from a MySQL database in my sites. In order to test everything locally I’ve installed a simple WAMP Server. Which is quite the time saver over trying to set that up manually. If you have a Mac or Linux system I’m sure there are similar options.
It’s also key to check your design as you go on many different browsers. Especially IE, which can cause you plenty of issues. Browser Cam provides a nice option for doing this sort of thing. Once you’ve rocked out a nice site, it’s time to take things live.
Buy the hosting, upload everything, then more testing. One of the things that I love to do is to ask someone in my family to surf around the site while I watch. You can learn a lot about usability by watching someone else use the site. If they are fairly computer illiterate, all the better. You really can’t assume that most of the people using the site will have the same amount of computer experience as you. In most cases they won’t. Focus on the areas that need improvement, that get the user lost or confused. Rework the kinks, tweak some things here or there and ask for your clients’ final ok.
That should be about it. Well, at least until more changes or maintenance come your way. The main point to focus on is breaking projects into smaller parts. Projects are much more manageable when they are done within reasonable chunks. It may take longer at first, but in the long run your sites will be done faster and more efficiently.
Sharing is Caring
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
MyInkBlog
Email Updates
Twitter
Facebook
Flickr
Designmoo
Digg
Stumble Upon
August 17, 2008
Very interesting read, sketching ideas is vital in my opinion as well, you dont realise until you do sketchs how vital they actually are in the design process, sometimes i can spend hours tweaking which isnt good or change whole parts of a design, i normally check other sites for navigation inspiration and colours and layout and what information they are displaying to the user. note it all down along side notes from the client
Good Stuff. Max
August 17, 2008
Max, I’m glad you agree about the importance of putting things down on paper. I used to breeze through that, and it would only hurt my design in the long run. Thanks for reading and dropping me a comment!
August 17, 2008
a very useful tips. pretty interesting too.this must be read my everyone!!!
NaldzGraphics’s last post was… Create a Blue Vector Character from Pencil Sketch to Coloring
August 18, 2008
Thanks NaldzGraphics!
August 18, 2008
Great read. As an “older” person transitioning from a career in Land Development Design to Web Design, the process can be overwhelming. Sometimes I think I’m just “out of touch.” But articles like these are a real help, if not an inspiration. Thanks.
August 18, 2008
Rick, web design can definitely be overwhelming, but if you’re reading blogs like this, it probably means that you have a passion for it. Keep plugging away, and your skills will continue to improve. Their will always be more to learn, which is one of the reasons, I love this field!
August 18, 2008
Great article. I wish I’d come across this kind of information when I first started web design as a freelancer. I especially agree with the ’sketching’ part, it’s always best to put down first design ideas on paper, as it seems easier to be ‘creative’ like that. Anyway, thanks for the article, well done.
August 18, 2008
Couldn’t agree more… great article, it is a great reminder. When i often find myself stuck on something or coming across difficulty it is due to neglecting one of these areas.
Aaron Irizarry’s last post was… aaroni268: Working on a white-label search-marketing product… yay!
August 19, 2008
good web design overview thanks! really well presented i like the images etc
neil’s last post was… Design Utopia Site Live!
August 20, 2008
Great article. About the fireworks switching that you mentioned, i tried this twice but i can’t help it. I use photoshop for so many years and i just can’t heh..
Gerasimos’s last post was… MooFlow Image gallery for MooTools
August 20, 2008
I found the earlier tips more useful than 4-5. Everyone knows to mockup and code, but many designers dont’ take the time to interview their clients or research properly.
Tom Ross’s last post was… Create ‘Bionic Diver’ Using Photo Manipulation
August 20, 2008
I agree with what Tom Ross said. Tips great and I’m very thankfull for those links about pre-designed questions to interview your client.
Cheers!
August 23, 2008
thx for the article. You site is getting better and better…
Andre’s last post was… After Effects Projekt: The Dark Knight
August 28, 2008
Really nice post. One tool you might find useful during the sketch/mock up procedure is Axure (http://www.axure.com/tour.aspx). It helps you do the sketching plus adding some case scenarios (login forms, search results etc.)… anyway hope that helps!
Giannis T.
Giannis T.’s last post was… Vote for usability (or How Design Can Save Democracy)
September 3, 2008
That link to the Pre-Design questionairre is fantastic, what a superb idea, I really like how you have presented your article as well, nicely put together.
The initial consultation process is all too often glossed over by designers who just want to put something together using a recently discovered technique or style.
February 9, 2009
Hi, great post! I started creating websites from the sketching process. I thought it was just something that I only did but finding out that it’s an actual design processs, makes me feel much more eager to learn web design. Considering I’m skilled in product design and using web design for my work, it’s such a massive help from these type of blogs to get the expertise required to build fantastic websites. Only tutorial I’m very eager to learn is, how can I setup an easy form for a user to register or login and upload pictures and videos on my website. That’s something I’ve struggled with for quite sometime, if anyone posts an easy to learn tutorial then I’d definitely recommend this blog to everyone I know, guaranteed:)
Thank you.
February 9, 2009
@Naweed Thanks for the comment! I would look into using a CMS to have users register and upload media. Check out some of the big open source projects like Wordpress or Drupal, or even my recent favorite SilverStripe.