IMD09117 and IMD09118 Web Design and Development Unit 7

Layout principles continued

Basic design principles

Proximity Alignment Repetition Contrast

Version A

Unit 7

2008 Napier University

Repetition
Repetition creates a unified statement The opposite is episodicity The repetitive element may be a bold font, a thick rule line, a certain bullet, colour, design element, particular format, spatial relationships etc. It gives consistency.
Version A Unit 7 2008 Napier University

Repetition
An effective way of repeating a structural element is to use a line or rule. Reinforces structure and provides lines along which the eye can travel. Rules can interfere with one another and direct the eye in more than one route.

Version A

Unit 7

2008 Napier University

Repetition
Adding a light rule at the top and bottom of the screen will add order to the pages. Making the lower rule a lighter weight will help to lead the eye through the display.

Version A

Unit 7

2008 Napier University

Repetition
Structural repetition is particularly important in user interfaces to online information systems. Navigation system needs to be the same in place and function similarly throughout Visual invariance maintains visual momentum across displays.
Version A Unit 7 2008 Napier University

Repetition
Typefaces in headlines and subheadings and the space around them. Graphics used should be similar in style. Differing image styles harder to create a feeling of consistency. A unified graphic language creates a personality for a system http://www.buyarock.com
Version A Unit 7 2008 Napier University

Repetition
Consistency from the spacing between controls as well as the size of controls Use of grids that help with the vertical and horizontal spacing. Roughly 5-7 divisions in the horizontal spacing. Pulling a design element outside of the borders unifies two or more pieces, or foreground and the background.
Version A Unit 7 2008 Napier University

Repetition
Repetition adds visual interest. Decide if you can you make the repetitive element stronger. Find the existing repetitions and make them stronger. Create repetitions to enhance the design and the clarity of the information. Make sure that it is not overwhelming.
Version A Unit 7 2008 Napier University

Repetition
http://www.417north.com/v7/ http://www.bbc.co.uk/science/humanbody/ http://www.napier.ac.uk

Version A

Unit 7

2008 Napier University

Contrast
Contrast is the most dynamic of the visual techniques. Opposite is harmony. Sharpening can be associated with contrast and levelling with harmony. Contrast and harmony are differing ends of a continuum.

Version A

Unit 7

2008 Napier University

Contrast

Contrast is effective ways to add visual interest to screens or pages. Harmony is a way of constructing safe , balanced and attractive solutions to design problems and often advised for inexperienced designers.

Version A

Unit 7

2008 Napier University

Contrast
Contrast Instability Irregularity Complexity Fragmentation Intricacy Exaggeration
Version A

Harmony

Unit 7

2008 Napier University

Contrast
Contrast Instability Irregularity Complexity Fragmentation Intricacy Exaggeration
Version A

Harmony Stability Regularity Simplicity Unity Economy Understatement

Unit 7 2008 Napier University

Contrast
Contrast Activeness Boldness Accent Variation Distortion Harmony

Version A

Unit 7

2008 Napier University

Contrast
Contrast Activeness Boldness Accent Variation Distortion Harmony Stasis Subtlety Neutrality Consistency Accuracy

Version A

Unit 7

2008 Napier University

Contrast
Contrast Depth Juxtaposition Randomness Sharpness Episodicity Harmony

Version A

Unit 7

2008 Napier University

Contrast
Contrast Depth Juxtaposition Randomness Sharpness Episodicity Harmony Flatness Singularity Sequentiality Diffusion Repetition

Version A

Unit 7

2008 Napier University

Contrast

Contrast is created when two elements are different. Contrast by any of the perceptual qualities: size, value, orientation, texture, shape, position or colour.

Version A

Unit 7

2008 Napier University

Contrast
If the two elements are not very different, they are said to conflict. Effective design creates no more contrast then is necessary. Variation along only one dimension at a time.

Version A

Unit 7

2008 Napier University

Contrast

Contrast
Contrast organises your information. Use contrast in your titles, heads, and subheads and page segments Use contrast to help create a focal point for a page. Also use strong alignment and proximity to reinforce your focal point.
Version A Unit 7 2008 Napier University

Contrast
All contrasts should be intended to fulfil a specific communication goal. Often with a GUI this is to provide critical state feedback. Active, selected or focussed elements need to be contrasted with the surrounding areas.
Version A Unit 7 2008 Napier University

Contrast
The most important information should be prominent enough to emerge from the design and secure the user s attention almost involuntarily. Less important information may require focal attention and conscious effort to extract.

Version A

Unit 7

2008 Napier University

Contrast

Version A

Unit 7

2008 Napier University

Contrast
Avoid excessive contrast. Too many differences: sizes, fonts, widgets and in particular garish colours.
http://developer.gnome.org/projects/gup/hig/1.0/lay out.html http://www.colorado.edu/AmStudies/lewis/Design/us able.htm

Version A

Unit 7

2008 Napier University

Contrast
http://www.colette.fr/index.php http://www.artcenter.edu/ http://www.nationalgeographic.com/educa tion http://www.blueman.com.br/#

Version A

Unit 7

2008 Napier University

Summary
The four basic design principles of proximity, alignment, repetition and contrast will help to design interfaces. The principle of repetition is that you repeat some aspect of the design throughout the whole piece. It gives consistency.
Version A Unit 7 2008 Napier University

Summary
Contrast is one of the most effective ways to add visual interest to screens or pages. You can contrast by any of the perceptual qualities. If the two elements are not very different, they are said to conflict.

Version A

Unit 7

2008 Napier University