Reeckon

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.