Web Design Concepts

I've had some time in the web design profession (both personally and professionally), but I found this book to be of particular interest to me: The Principles of Beautiful Web Design.

It walks through the design process through the systematic (yet beautiful) selection of layout, colors, textures, typefaces and images; I think this method works well with my way of thinking.

Some of the new findings in this book:

Layout

• The layout design process should produce a design comp (the comp is the simulation of the printed material before the final print, it refers here to the design mockup of the site, before the HTML phase)
• The design process is composed of 2 main phases: the Discovery and the Implementation
• Three rules are important to be met in order to make the design (good):
  1. Users are pleased by the design but drawn to the content (so a balance must be met)
  2. Users can move about easily via intuitive navigation (so if you can't manage to navigate the site with ease, probably you won't navigate
  3. Users recognize each page as belonging to the site (even with different sections, the soul of the site must be seen)
• A particularly useful ratio for the design is the Golden ratio (the 1:1.618) which many myths circle around it, but in all cases it gets a good looking ratio for the site balance
• ... while a simpler way is to use the Rule of Thirds (divide the sketch to 3 vertical panels and divide them to 3 horizontal panels) and try to snap your design components to it.
• Balance must be maintained in the site design (either in the symmetrical or the asymmetrical designs), the balance occurs when you feel that the total weight of all the elements are bound to a single point, not by just their shapes, but by their shapes, sizes and color.
• Unity is another concept that helps keeping the site together, a unified design is a design that works as a single unit (mentally), it can be achieved using:
  1. Proximity, or that related components are kept closer to each other
  2. Repetition, where items with repeated design are more considered as a single unit, as the unordered list
• Emphasis, on the other hand deals with getting a single item dominant in the design (a focal point) through proper:
  1. Placement, using the center of the container to draw attention to it
  2. Continuance, where the eye is sliding over continuous objects until it hits its ending, where an object might be placed for emphasis
  3. Isolation, as any object that stands out from the group demands attention from the viewer eye
  4. Contrast, the more common way to draw attention by keeping the change between elements as large as needed; in color, shape or size
  5. Proportion, where by unreal scaling of elements (or real but exaggerated) you draw attention to it
• Enough of design theory, some of the implementations that are commonly used are the left column navigation, right column navigation, and three column navigation
• The least used design element while being one of the more important is the white space, it is crucial to have enough white space in the design
• A good idea is to keep a Morgue folder where you keep all the designs related to your current design to help you in the inspiration
• A choice between the Liquid-and-fixed width designs should be based on:
  1. A Liquid design adapts better for different screen resolutions, while on larger screens can cause too-wide lines and most of the time causes awkward or hard-to-manage white space
  2. A Fixed design better handles white space and spatial relations between items, while risking being too-large or too-small on different screen resolutions
• Some stats that are useful: Browser Statistics and Display Statistics