Friday, April 29, 2011

Learning the basic principles of UI / web design

If you're already savvy with the technical sides of web sites (html, javascript, css, jsp) but you still feel awkward with the design sides, then you are not the only one. I was in this situation when I had to build a web application from scratch and I had only 2 days to learn web design principles. Thanks God finally all the shareholders were happy with the results. The user panels voted my design better than a design from a professional designer.

So I'd like to share with you which books that I read in 2 days to learn web design:

The Non-Designer's Web Book
Discuss the CRAP (Contrast, Repetition, Alignment, Proximity) design principles. These principles apply also for print designs/ desktop publishing, which is also my hobby. Also contains some examples of good & bad designs and practical suggestions (e.g. avoid aliasing in the images, use sans-serif fonts etc).






Don't Make Me Think
Discuss usability principles:
• be straightforward as possible (such that the users doesn't have to think)
• users scan the web instead of read
• users don't make optimal choices, they don't read all the information, they just guess and satisfice
• users don't read explanations
• if the users find something works they stick to it (e.g. people used to the menu layout in common Windows application), avoid surprise

Also some design principles:
• clear visual hierarchy/structure
• clearly defined areas (e.g. navigation menu, content etc)
• conventions (e.g. colour scheme)
• make it obvious what's clickable
• minimize noise / minimize items in your web






Web Design for Developers
A book from the pragmatic programmer series. For developers who have never built a website. contains choosing colors & fonts, mock design, photoshops, how to apply css.






Web Design in a Nutshell
A classic book, which I read years ago. Discusses basic factors which affect your design such as screen resolution, browser, flexible vs fixed-width layout. Also contains references for (x)html, css, image formats, etc.






Please leave comments if you know any interesting books to learn web / UI design.

In near future I will write blogs about web design for mobile devices, so stay tuned!

No comments: