Layout Principles

IMD09117 and IMD09118 Web Design and Development Unit 7

Layout principles continued

Basic design principles

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

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

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 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

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.

Layout Principles

Technology

Apply layout principles for conservation and infrastructure

Plant layout,Factors influencing plant layout,Types and principles of plant layout

DOM 102 : Principles of Operations management Process Flows & Facilities Layout

05. Yusuf Hendra Yulianto - The Principles of Layout and

Basic layout principles

Layout, principles

8-2-06 Update - Princeton Principles BW Header Print Layout Final 6x9 Desktop

National 4/5 Graphic Communication Layout techniques Design principles Design Elements DTP terms

DOM 102 : Principles of Operations management Process Flows & Facilities Layout

Examples of plant layout and design - Jackson · PDF fileExamples of plant layout and design Principles of plant layout and design will apply to most industrial situations. The following

Warehouse Layout Optimization with FlexSim · PDF fileBIG Warehouse Layout Principles Setting the right warehouse layout is one of the most important enablers to achieve safety, high

Instructions for Magazine Layout Assignment Page 1 · 2014-08-07 · ASSIGNMENT 1 PublishINSTRUCTIONS ing Principles and Practice ACP2079 Instructions for Magazine Layout Assignment

Rich Layout from First Principles

Overview Major principles of designing digitally: consistency and hierarchy o And their relationship to the design principles Layout Break Grids Expectations

Design and Layout - g · PDF fileand principles of design and layout. Knowledge of common design techniques is critical in producing a layout and evaluating the visual quality of a

The Principles and Practices of Graphic Design · 2013. 7. 19. · Basics of composition 34 Form and space 38 Symmetry/asymmetry 40 Basic principles of layout 42 Styles of layout

Layout Principles 1

Principles of Ethical Conduct Revised Layout

Principles of Layout and Line Design - ADDVALUE - Nilesh Arora

ven-principle approved layout 06-30 · The Self-Regulatory Program consists of seven Principles. These Principles, described below, correspond with the “Self-Regulatory Principles