Designing for Web: The Process

Designing for the web is a lot like designing a professional piece of art. You don't just dive right into it, but you have to plan things out and make everything you do intentional and deliberate. In art, you 1) start with a concept and what you want to convey, then 2) make multiple sketches, then 3) receive critiques and revise your work, and then 4) work on what will actually be the final product, with critiques and revisions along the way. In the same way, designing for the web follows similar steps.

1. Assessing Needs
This is like the concept and message step of art. For a website, consider what information or message it is trying to convey. Is it informational? Calling people to action? Fostering online community? Also, how will each webpage be connected to each other? Your design will need to convey this message and allow for easy navigation.

I often fall into a rut when it comes to web design. Whatever I create seems too plain and static, not engaging enough. But just like in art, the way to get out of a design block is to draw inspiration from others. Websites with great web designs often inspire me to see what makes them so successful and to incorporate those aspects (not copy their design) into my own design. There isn't a specific website to go to, but just Googling best website designs (in general, or for certain features such as footers, landing pages, navigation, and so on) and browsing through the listed websites can be fruitful.

2. Wireframes
This is where the sketching session begins. Before working on the final webpage(s), you want to have everything worked out so that you know what you are doing. Sketch out every page of the website as you envision them. The more detail (especially in the content of each webpage) the better.

This step is probably the most tedious step in web design. The larger the website is, the more wireframes are needed. For me, it was very tempting to skimp on the content and design and go with the bare minimum, but accurate, detailed wireframes make the next step much easier and useful. There are programs you can use to create a very simple wireframe of a webpage (providing formatting, buttons, links, and so on) without any design element. These are much faster to use, but they do not provide the feel of the website.

3. User Testing
Yes, there is critiquing in web design as well. This is where other people look over your wireframes and treat them as if they were the real website. So if they want to click on this or that link, you supply them with this or that webpage that the link goes to. This is where the level of detail in your wireframes comes in. The more it conveys the future website look and feel, the more that your critics can give useful feedback. Yes, just like in art, your design will get ripped apart and dissected, but again constructive criticism enables you to make your design the best it can be. Should your design be completely demolished, you may have to redo your wireframes and website navigation, but if your design goes over well, you can move on to the to working on the actual face of the website.

4. Mock-ups
Finally, actually working on the computer! Mock-ups are done in an image-editing program, generally Photoshop or Illustrator or their equivalents. For mock-ups, you create an image of what the webpage will look like to exact pixels. Just like in art, critique is always around the corner, and extra sets of eyes help in improving your design. When the mock-up is finally done, you slice the image into the parts your programmer needs and hand them over to him or her. If you happen to also be the programmer, then you've still got a lot of work ahead of you!

posted by Lydia Chang