My Web Design Process – Part 1

Before graduated from University, i though i know a lot of thing about software life-cycle. Well, after step foot into real world of IT Industry, the thing that i know is i know nothing. Fortunately, working with couple of clients include small and medium size projects, several freelance projects and with my passion along, i quickly grasp the fundamental of design process. Below are the process how i used to iterate on each project that i have been involved with :

1. Very straightforward and basic. Gather requirements from the client. Learn how to scope and say no to the client. Understand what your client is looking for, include profiling he/her business environment. Aware of their competitors, buyers and their budgets. What sort of technology to be used? How long is the website is going to be up? 2-5 years? This steps are the most essential before you can start to design a website for them.

The power to say no is the one of the most important during requirement gathering. Note that, this process will be kept iterating like a spiral process model. Prove them that their idea might a bit off. You need to show them your professionalism. That’s your job. You worry you will lose your customer during argument of what the design should look like. Find a way to solve it. Discuss with them politely and again that’s your job. If you thought creating software is easy as baked a pie (even pie is not easy to baked), then you might have to consider another career path.

Give you a scenario.
Client A : Hey i want something creative, inspiring and cool to my buyers.
Me : Yea, ok. I will figure out how to make it.
Client B : Yea, i want more color. Something more colorful like web 2.0 style. Clean and simple.
Me : Yea. Colorful sounds good.
The design idea in my mind look something like this :

Some Good Layout Design

Marketer C: Can you design with a flash or something blink blink to attract the visitor.
Marketer D: Yea. More ads. That’s what we do.
After several conversation to add something that is weird and their it is cool.

Me : Oh come on. If i say yes. the web page will look like as below :

Worst Design Sample

2. With the above data collected, before you even start to sketch or design your website using “your little design tools”, you must define the workflow and process how user can get the most out of the website when their are visiting. Define the possible logical steps and the expected user behavior when their visiting your sites. Think of what information you want them to see within 10-20 seconds.

By workflow, let’s start with the root of the problem and from there to how users can navigate to the content that their wish to viewed. Normally i used several tasks and scenario type design. Using task and scenario type design can be tricky. You must not think as a designer or developer mind model because you know how and where to get the data that you needed.

Imagine as a user who does not know anything about the site content. Think as a user who only have less than 30 seconds to spend on your website. Nowadays, users are internet savvy. If their found your website a bit doggy like, poor design, and poor visual data arrangement the user might just left. You have lost one of your customer.
In my culture, if you don’t know how to do something, then the other guy will said. “Hey my grandmother can even do that.” That’s true, if any baby boomer generation how to use your website easily and get the data without frustrate them, you have done your job.

Let’s move on with out example :

*For example : Customer A visit http://www.example.com to check out what services did example.com offers and how much will it cost them. Do their have any special offers or credited reputation? How can i ask them a question regarding to my business need? any pricing models?

Workflow A :

1. Customer A visit example.com and reach main website.
2. Customer A look at the main page for services offering or pricing.
3. Their might be looking at the navigation bars or the middle section of the contents.
4. Found the link to the services offering and click on the link.
5. The web page shown up and display all the relevant information their are expecting to see, if not guide them in the very same page.

[The workflow above only cover for success scenario, we need more type of scenarios.]

I use open source Mind Maps tools, which are easy to show to clients in an simple and easy understandable concepts. Support Open Source!!

Note * : This workflow are an example. You can learn more from Microsoft Workflow Design process. It can be more details and you must try your best to cover all types of tasks and design. Sometimes, workflow cannot cover all the scenarios but the most important thing you must covered is what your business trying to offer and find a creative and easy way to reach your clients.

Question : You might ask, i don’t have much time for this workflow thing for my projects due to very limited time and budget.
Answer : Before you start any project, i recommended you to learn and figured out some standard templates for the workflow that you are going to used. It doesn’t have to be complicated, as long as it cover the most important thing that you wish your potential visitor to grab most out of it. Visit Microsoft Workflow Design process to learn more about workflow process.

Once, we have enough workflow and task scenario in hand we can start to sketch the layout design for the web page. For mine, i sketch around 5-6 different web layouts. Each layout have a different arrangement of data, function, navigation bar and etc. With all the workflow and each sketches, present it to your clients. Get feedback from. With the feedback received, progressively improve the design. Reply back again with the new design. Let them be part of the design process so that their can assume that where are the money spent.

Do not put any color on the layout design. The color process will be last step after you have a clear working copy of Web version. With the 5-6 paper sketch design, i will pick the best features and combine into everything and remove any redundant or ambiguity. I learn this process from Apple design process. More about it later on. Continue with part 2.

Tools i have been using :
——————————
Mind Maps tools
Balsamiq Mockups

Some of the very good book for user web usability :
—————————————————————–
Don’t Make Me Think : Steve krug
Designing Web Usability
Designing Web Interfaces : Principles and Patterns for Rich Interactions
Form that work

Some of the very good sites to refer to :
—————————————————
CSS Zen Garden
Smash Magazine
AlistPart
Stackoverflow