How to Design Web Design
IntroVisual impression of some websites can keep attention and stay in memory of visitors for a long time. Why is that? What’s making a good design? How they do it? Let me try to answer these questions and uncover the secrets of “looking good” web design.
There is a crucial difference between static graphic design on printed media and web design, but let’s start with some common principles of visual design.
Basic Graphic Elements of Visual Design
- Color – there are millions of different colors recognizable by human eyes. All colors have the same properties:
- Hue – rainbow spectrum of different color tones in the visible range of our color vision (from the borders of infra red to the borders of ultra violet).
- Saturation – intensity of color from almost black and white palette to highly saturated color.
- Lightness – value of light from deepest black to brightest white.
- Transparency - visual impression of some value of light passing through the color. The opposite property of transparency is opacity.
- Gradient – smooth chromatic transition from one color to another. Gradients can be complex and include many different colors, even contrast combinations.
- Shape – 2-dimensional or simulated 3-dimensional object. Shapes can be geometric like circles, squares, lines, rectangles etc. and complex organic forms.
- Texture – simulated surface of visual patterns on objects.
- Font - complete set of typographic characters matching the same particular style.
- Size – dimensions and proportions of objects used in design.
- Direction – visually suggested alignment and flow of objects: horizontal, vertical and oblique.
- Scene – space limited by some boundaries where we can place elements of our design, e.g.: browser’s window.
CompositionLayout of design elements on the scene called composition. The art of composition is essential driving force of the “good” design. There are major principles of design composition:
- Expediency – relevance and consistency between design elements and informational content on the scene. For instance, if your website is dedicated to science, please don’t include religious symbols in your composition. Everything must serve its purpose.
- Style - consistency of design elements throughout entire set of pages on your website. For example, using different fonts on every page of your website can ruin entire style of your website.
- Balance – impression of visual parity between various design elements on the scene. Design elements can be arranged in symmetrical order or asymmetrically to shift the balance to particular place of composition on purpose.
- Focus - design elements can be arranged in particular order to draw attention to some area of the scene. Focus creates center of the interest to make something more important than its environment.
- Contrast – conjunction of opposite elements. Contrast can be between colors, e.g. black and white, green and red, yellow and blue etc. Shapes also can create contrast combinations, e.g. triangle placed on the set of wavy lines.
- Harmony – composition of design elements with similar properties, e.g. harmonic colors or round shapes. Harmony creates feeling of unity and completion.
- Movement – visual flow of design elements on the scene. Movement creates a visual suggestion in particular direction on the scene.
- Rhythm – regular sequence of design elements on the scene. For example rhythm can be created by repetition of the same element with its contrast variation through particular number of the repetitions.
- Proximity – space around key design elements on the scene. Using different proximity we can create groups of various elements, e.g. elements related to each other can be placed in closer proximity and vice versa. Space between design elements is very important. Tightly stuffed elements can create confusion and compromise usability. The right use of proximity creates transparent balance and breathing space of entire composition.
- Unity – visual connection of design elements on the scene. Unity creates perception of composition as a whole. If some of design elements look like orphans on the scene, it means the unity of the entire composition is compromised. Sometimes unity can be broken on purpose, just to create a shift of attention.
Distinctions of Web DesignAs it was mentioned in the beginning there are some differences between graphic design on static media and web design:
- All colors on computer screen actually emit light unlike reflected light of static paper media. Therefore it would be impossible to make the perfect match between the same image on paper and computer monitor.
- Web design deals with interactive and dynamic media of computer screen. All basic design elements including scene (browser’s window) can be changed automatically or by user’s actions.
- Images used in web design must have much smaller resolution than images printed on paper. Normal resolution for the web is 72 dpi (dots per inch), for prints it's 300 dpi and even bigger.
- When we designing for print, we can use any fonts we like. But for the web we can't do it, because every computer system has its own set of fonts. There is a pretty big chance that fonts you have on your system can absent on others. Therefore we have to specify list of fonts in their priority order in CSS file, e.g. font-family: Helvetica, Arial, sans-serif;. If you want to use some unique font in your web design you have to use it as an image.
Wabi-Sabi of Web DesignThere are some secrets of how to make your web design "looking good" using ancient Japanese sense of beauty:
- Simplicity and utility – just stay away from oversaturated and aggressive colors, avoid unnecessary elements, and don’t overuse graphic effects such as extensive shadows, massive outlines etc.
- Imperfection (on purpose) – can be achieved by avoiding strict symmetry and patterns, avoiding monotonous surfaces and textures, and by mixing them with organic light spots or shadows etc.
- Small elements – temperate adding of pixel-small details to your design elements can spice it up and give it feeling of natural fractality.
- Golden ratio – magical number known as “phi” φ =1.618 is the mathematical proportion that human mind perceives as the most beautiful.
- Incompleteness – try to leave a potential space for content in your web design composition. Content must play the suggested role of completeness.