Attention to design details implies that the same care and attention has been spent on the other (less visible) parts of the product.

ALA: In Defense of Eye Candy


Creating a Graphical User Interface is always a challenge, because people have different sense of aesthetic. There are however few guidelines that if you stick to, there is a good chance you are successful. This article is gist of the following books modulo my experience:

  1. Visual Design for the Modern Web Penny McIntire
  2. The Design of Sites: Patterns for Creating Winning Web Sites, Second Edition Douglas K. van Duyne; James A. Landay; Jason I. Hong
  3. Easy Web Design Mary Millhollon; Jeff Castrina; Leslie Lothamer

Some of the techniques described in those books are outdated, because the web design accelerated from the time they were written, but there are things that are still valid.

Visual Harmony

This is one of the most important rules in my opinion. Visual harmony defines whether or not a page looks good. An effective design is a balance between serenity and stimulation. The page needs to be serene enough just to convince the user it’s easy to use, but in other hand it also needs to be stimulating enough so end user wants to use it. If page is too serene then it might become boring, too much of stimulation and the page might become visually chaotic. To illustrate this rule, let’s stick to the architecture for a moment. Which one of the following has more to do with harmony? example image I think you’ve already knoaw the answer, it’s quite intuitive. The right balance between serenity and stimulation is the key to reach visual harmony.

Techniques for providing Visual Harmony

  1. Repeat Elements - In general, repetition of colors, layouts, blocks of elements, the same graphics, fonts, kinds of buttons etc. provide visual consistency. Repetition of elements is like a rhythm in music.
  2. Manipulate Contrast - You can use contrast either to divide page into logical sections or highlight important elements on the page. It’s the very basic instrument to provide visual harmony.
  3. Chunk Related Information - Organize related elements on page into chunks, this also helps to make the overall impression that page is simple. One of the options would be to take boostrap that contains components that you can reuse.
  4. Align Elements - Align as much as possible. The more you align, the more consistent page looks.

example image

Clear forms

Some important things to keep in mind:

  1. Put the focus on the first element on the form.
  2. When describing the field forms, use familiar language so users do not have to figure out what it is about.
  3. Required fields must be marked on the form.
  4. If some field has special format, prefill the input with example text, or force the input to be exactly what you need.
  5. Reduce the amount of typing required, use suggestion drop down lists - simply do not ask users for the information you’ve already might have.
  6. Intelligent error handling - don’t wait till user submit the form to show the error, in case you already know that something is not correct.
  7. Make all functionality available from a keyboard.

In general, forms needs to be simple, clear, visually well-aligned, and what’s most important intuitive.

Progress on the page

Not so long time ago, when almost all actions on the page were displayed as the result of its reload, the fact of progressing was indicated by the browser. It was good enough for users to sit tight and wait for the result. Nowadays, the technology allows for the page to load content through ajax/websocket and the progress of the operation is not so obvilus. Without progress indicator end users might be frustrated waiting for result, and wondering if the operation was already started or not.

Error messages

Good error messages can contribute to building good page reputation. example image

Good error messages should consist of the following information:

  1. What happened
  2. Why it happened
  3. What should user do in order to correct the problem

Colors

Choose one or two main colors and use scheme generators to figure out rest of colors for you page:

  1. http://colorschemedesigner.com/
  2. http://www.colorschemer.com/online.html

Stimulation

  1. Audio effects - this is not a visible trend in the web, but I think adding a subtle sounds for specific actions on the page might become a trick that makes the difference.
  2. Paralaxing - http://www.alquimiawrg.com - open and move mouse over the page
  3. Scrolling effects - http://www.sony.com/be-moved - open it and just scroll
  4. Fancy input texts etc - http://tympanus.net/Development/TextInputEffects
  5. Fancy buttons etc - http://tympanus.net/Development/ButtonStylesInspiration
  6. and probably many many more…. the human imagination is endless.

Here are some website examples, nontrivial and creative in terms of stimulation:

Summing up

Designing web page is a challenging task. There are few rules that you can stick but that does not guarantee a success in 100%. If it comes to me, I’m following three rules:

Bonus: if you are looking for inspirations, take a look at codrops