Sunday, February 7, 2010

Steps in designing user interfaces for the web

In my experience on designing user interfaces for the web, I generally follow the following steps:

1) First I do story boarding (on a white board or piece of paper) with my concept. Say its a website, I try to draw every single page and all the features and icons (the icons wont look good here but this is just to brainstorm). Before implementing any idea, I try to form a user-group (group consisting of my friends and maybe even potential customers). If I don't know who exactly the customers are, this is the step I try to find them. After all, if there are no customers who might pay for our product, then whats the point of doing it.. =) . I show them the storyboard (paper/pencil mockups) and ask for their suggestions. I don't necessarily change my design to cater all the suggestions but I atleast note them down. This step helps me to flush out any obvious holes in the design.

2) Then, I do some basic wireframing (I have found to be the best wireframing tool) so that the paper/pencil drawings are captured digitally. The advantage of using wireframing tools is that it helps me get two steps closer to reality. After creating the wireframe, I ask for inputs from my user group.

3) Then, I grab icons and interfaces from the web (close enough to what I envision my user interface is going to be) and create a photoshop mashup. I dont design the icons/fonts/interfaces from scratch but just create a mashup using whats existing. Sometimes I just copy bits and pieces from existing designs.. Isn't there a saying "Good artists design, great artists steal =). This photoshop mashup would have colors/fonts/icons/layout, very close to how its going to implemented. I m not a guru in photoshop, so I get help from friends of mine who know photoshop or sometimes I even go and hire a cheap photoshop designer and I sit with him to transfer the ideas in my mind to photoshop. I show the final photoshop design of all the pages to the user/customer group and get their opinions. If I m not satisfied with a particular color/font/icon/layout, its easy to change them at this step. Now I m one step closer to the final product. I freeze the design/layout/font/colors/icons at this step.

4) Now that I have frozen the design/layout/font/colors/icons, I go ahead and implement them (code them).

Infact I would recommend you to skim through this blog post I wrote a while ago for non-technical entrepreneurs to help them build websites to sell their products.

No comments:

Post a Comment