Layout Principles

IMD09117 and IMD09118 Web Design and Development Unit 7

Layout principles continued

Basic design principles

Version A Unit 7 ©2008 Napier University

Proximity

Alignment

Repetition

Contrast

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.

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.

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.

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.

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

http://www.buyarock.com/

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.

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.

Repetition


http://www.417north.com/v7/

http://www.bbc.co.uk/science/humanbody/

http://www.napier.ac.uk

http://www.417north.com/v7/

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.

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.

Contrast


Contrast HarmonyInstabilityIrregularityComplexityFragmentationIntricacyExaggeration

Contrast


Contrast HarmonyInstability StabilityIrregularity RegularityComplexity SimplicityFragmentation UnityIntricacy EconomyExaggeration Understatement

Contrast


Contrast HarmonyActivenessBoldnessAccentVariationDistortion

Contrast


Contrast HarmonyActiveness StasisBoldness SubtletyAccent NeutralityVariation ConsistencyDistortion Accuracy

Contrast


Contrast HarmonyDepthJuxtapositionRandomnessSharpnessEpisodicity

Contrast


Contrast HarmonyDepth FlatnessJuxtaposition SingularityRandomness SequentialitySharpness DiffusionEpisodicity Repetition

Contrast


Contrast is created when two elements are different.

Contrast by any of the perceptual qualities: size, value, orientation, texture, shape, position or colour.

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.

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.

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.

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.

Contrast


Contrast


Avoid excessive contrast. Too many differences: sizes, fonts, widgets and in particular garish colours.

http://developer.gnome.org/projects/gup/hig/1.0/layout.html

http://www.colorado.edu/AmStudies/lewis/Design/usable.htm

Contrast


http://www.colette.fr/index.phphttp://www.artcenter.edu/ http://www.nationalgeographic.com/

education http://www.blueman.com.br/#

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.

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.

Technology

Layout Principles