..... 4 traditional design rules

These four design rules ...

  1. Contrast
  2. Repetition
  3. Grid & Alignment
  4. Proximity

... have been and are standard knowledge for architecture and design for decades and surprise - surprise - they apply also for digital design.

I know or better I expect that already at that point one or two readers’ hackles get up - and you think hey come on I am a designer I will be free and do not need rules and guidance.
Perhaps it might be helpful for you that I often mention at this point ‘The Code is more what you call guidelines, than actual rules … !’ But I firmly believe that it’s important to learn the rules.
Because then you can
a) deal and design better than others
and you know
b) which rules you might break (if you have a good reason for it).

1. Contrast

A difference in lightness, brightness and / or hue between two colours that makes them more or less distinguishable.
Using and finding a good color contrast is actually very important not just for the accessibility reasons and design reasons. More people than most think are either color blind or much more often color deficient. by the way Color blindness is more prevalent among males than females, perhaps that might be reason why so many men wear such ‘unique’ color combinations.But also for every other person who watch your design ensure that your color contrast is adjusted accordingly provides added responsiveness and accessibility. Testing your website color contrast is a good practice and quite easy. There are several tools on the web - like this one by Jonathan Snook  - snook.ca  

But there is a mathematical formula which tells you whether the contrast is sufficient or not..

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Brightness Difference: ( > 125)

Color brightness is determined by the following formula:

The difference between    1st YIQ value   and     2nd YIQ value     should be more than   125.

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color. YIQ - The Y component represents the luma information, and is the only component used by black-and-white television receivers. I and Q represent the chrominance information. YIQ is the color space used by the NTSC color TV system, employed mainly in North and Central America, and Japan.

Colour Difference: ( > 500)

Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

2. Repetition

Repetition shows up in designs as repeated elements that appear throughout the interface. Elements that can be repeated with effectiveness are more or less every visual element:

  • colors
  • fonts
  • typography
  • shapes
  • lines
  • backgrounds
  • textures
  • white space
  • icon
  • iconography
  • graphics
  • images
  • spatial relationships
  • etc.

Repetition is a common part of nature and learning.Repetition gives your viewer a sense of site recognition and consistency. Using repeated elements, mainly main design element and also others the same, similar or slidely variant across all pages adds a repetitive continuity that enhances the flow of the website. Flow is created by the rhythm of elements as they appears in the design and throughout the site. Repeated use of elements, which have a common attribute, create a pleasing visual pattern, and slight variations to a simple repetition will enhance the visitor's curiosity and attention.

3. Grid and Alignment

A proper grid and alignment in your designs will make them visually more appealing and will also make it easier for users to scan.

All of the elements in your design will have to be aligned in some way, whether this is just plain text, icons, images and interaction elements Grids will help you solving alignment issues or decisions in your design, but what we need to focus on here is how the different elements, groups of elements or particular modules in your design work together. A good grid and alignment leads us to make conscious decisions about where elements are placed and how they interact with each other. Creating good alignment bridges the visual gap between every element in your design, helping us to create relationships between the elements that we have.
The primary consideration for making design alignment decisions should include analysis of typical user interaction patterns, including eye tracking testing. One of the oldest and well known study shows that most viewers follow an "F" shaped pattern while scanning desktop interfaces at its mainly the same on smaller screens the smaller the screen gets the less we see this F shape.http://www.usability.gov/get-involved/blog/2010/03/eyetracking.html If you never ever developed a grid here is a great tool by Rasmus Schultz - it focus less on a PSD - but I am sure it will be helpful for a lot of young designers - Grid Designer by Rasmus Schultz

4. Proximity

Proximity states that elements that are close together are perceived to be more related than elements that are further apart.

Proximity in design or architecture means that comparable or associated elements should be gathered together, while those that are unrelated or different should be separated. The physical closeness and let's call it neighbourhood between elements create a level of emphasis.
An ancillary effect and side benefit of following the proximity design idea is that it brings along other factors such as isolation, similarity, eye movement and direction, continuance, and persistence of vision.

White space
White spaces, also named often negative spaces, even it has a different color, are the areas and parts of the page which left free. White space works often much better to separate and order content elements than lines or borders. A great side effect by working with white space is you get a clean design which also looks valuable and unobtrusive. Often I hear from clients that this is just lost space – you do not lost space you win clarity. By not cramming a page full of text, images and border elements you do not be at risk of looking crammed, crowded and distracting.


Paying attention to the contrast, repetition, grid and alignment, and proximity - these principles help you to organize content elements utilizing space, order, size, relationships, color, and effective use of white space and sectioning – especially if we talk about typographic elements – here I see most often mistakes and gaps. If you do not pay attention to these even the easiest text and lists becomes very hard to read, consume and to understand.

I follow three simple rules in my live and job:
Do the right thing, do the best you can, and always show people you care.


Popular posts from this blog

Basics for designers

Swim-lane-diagram a great tool for alignment and process planning

B2B - Collaborative Decision-making