In the world of web development, there is a great perceived divide between the roles of developers and designers. It goes with the common idea that creative people use more of the right side of their brain which is associated with random-intuitive, subjective thinking, and a better ability to look at the big picture. While on the other hand technical individuals are dominated by the left brain which is associated with logical-sequential, rational and objective thinking, and looking at smaller parts of the big picture.
However, developers and designers have a lot of commonality regarding their thought processes when it comes to their work. When a project is proposed to a designer or developer both must break down the project into its smaller parts and build upward in a logical-sequential way. Both must use creative problem solving skills that consider both the big picture and its smaller parts.
What is undoubtedly different are the tools used to accomplish the task. This article is meant to bridge the gap by explaining some design fundamentals for developers.
Layout Principles – The Grid
Grids are made up of horizontal and vertical lines that act as a backbone to page layout. Using grids in layouts has been a fundamental design principle for centuries. Not all design uses a grid; however, for designers to achieve layouts that have structure and consistency, grids are very helpful. Grid layout in web design and web applications are an important part of usability because they create predictability, ease of navigation and make layouts visually appealing.
For web, one commonly used grid is the 960 grid. This width is optimal for 1024 X 768 screen resolution sizes. For most layouts 2, 3 or 4 units are desired; therefore 12 and 16unit grids are ideal because they are easily broken down into these smaller units in a uniform way.
The following images were borrowed from 960 Grids
960 Grid with 12 Columns
960 Grid with 16 Columns
The following are examples of sites that use a grid based layout:
Typography
Typography is another important design fundamental and is an important aspect when creating good UX. Typography is not just about choosing a font; rather, it considers things such as typeface, font-size, font-weight, spacing, margins, line height and color. Typography patterns have been established for centuries and because users look for familiar patterns to quickly scan pages good UX integrates these age old patterns. Consider typography commonly found in newspapers: Largest font for the headline often bold, medium size font for sub-headline, smaller fonts for the article copy. It would only make sense that an online news site would follow the same pattern:
It is possible to drive an entire UI with typography alone. Consider the following examples from Google and UX Magazine that have little to no use of images:
Serif versus serif
A short and worthy note for design fundamental for developers is the difference between Serif fonts and Sans-serif fonts. Serif fonts have added detail on the ends of some of the strokes that make up the letters and symbols. Sans-serif fonts are simply fonts that are lacking serifs.
The following image was borrowed from Wikipedia
Time New Roman and Georgia are examples of serif fonts while Arial and Segoe UI are Sans-Serif fonts.
Color
Color is an interesting aspect of design because it can be applied to any element and can create or change meaning for that element.
Color Terminology
Painter Primary Colors – Red, Blue, Yellow
Print Primary Colors CMYK – refers to the four inks used in color printing: Cyan, magenta, yellow, black (key)
Light Primaries RGB - refers to an additive color model where Red, Green, Blue light is added together to produce a broad array of color. Computer screens, televisions, and other electronic systems use this.
Hue – means the actual color name from the pure spectrum of colors such as red, orange, yellow, blue, green, and violet.
Saturation – refers to the dominance of hue in the color. A color becomes desaturated when white is added to it.
Value – is defined as the relative lightness or darkness of a color. Value is significant when it comes to defining form and spatial illusions. For example, a contrast of value separates objects in space while a gradation of value creates contour.
Psychological Implication of Color
Color may imply meaning or emotion but this notion should not alone dictate color choice in a chosen palate. How people are affected by different color stimuli vary from person to person and can be culturally dependent. The job of the designer is to create meaning in colors by how they use them in design.