3 Introduction to the Principles of Design v1

8/14/2019 3 Introduction to the Principles of Design v1

1/11

Introduction to the Principles of design Page 1 of 11

TPP Web Page Design WFD Program

Introduction to the Principles of Design

All designs have certain basic elements or building blocks chosen to convey themessage beyond the actual words or photos used. How we place those itemson the page determines the structure of our designs and affects the overallreadability and determines how well our design communicates the message.

The principles of design govern that placement and structure.

Graphic design encompasses the creation of a great many types of projects but

for our purposes we're focusing on the elements and principles of design as theyapply to typical desktop publishing projects including logos, ads, brochures,business cards, newsletters and most importantly Web pages.

Different instructors or designers have their own idea about the basic principles ofdesign but most are encompassed in the principles of:

Proximity Visual Hierarchy Balance Or Symmetry / Asymmetry Repetition Or Consistency Unity Contrast Dynamics Emphasis or Dominance White Space

Basic Design Principles

Basic design principles are used to organize or position the structural elements of

design. These principles are the fundamental concepts that will assist you tocommunicate the key theme of your composition. As such they can be applied to

each element of your design or to your composition as a whole.

It is necessary to develop a visual awareness to identify how these principles areused in the composition of every day design in:

Illustrations Photographs Animations Websites Billboards, and Posters

Developing a visual awareness will give you the skills necessary to analyze and

constructively criticize the design work you engage in. This will allow you to

develop a method of solving graphic problems in reference to the following basicprinciples of design.


2/11



Proximity

The basic theory of proximity is concerned with the arrangementor categorisation of elements that relate to one another. Tounderstand why, when elements of a similar nature are groupedtogether the information becomes a visual unit. This provides a

viewer with a visual clue as to the concept you are

communicating rather than being confronted with a scattering ofunrelated graphical elements. When a number of graphic

elements are close in proximity a relationship is implied. Ifelements are logically positioned they connect to form a structureto your design, this is also known as Visual Hierarchy.

Web page grouping problem examples

Grouping needswhitespace, its opposingforce, to exist. These

navigation buttons aregrouped so closelytogether, that the buttons

and labels are equidistant,which would definitely

The image on the leftshows two lists of the

same items. On the left,its difficult to wadethrough all the items as

they are equally closetogether, while on theright you see instantly that

certain items fit together

logically.


3/11



Visual Hierarchy

Visual hierarchy is the visual cues of content based on importance.These help a website visitor process information. A website is just amap, a map of information in which you need to help your visitorsview and process the information you are presenting based on

importance.

Human visual perception uses visual hierarchy every day in

natural life to take visual cues and create a mental model or map toprocess information more efficiently. This is why visual hierarchy is soimportant in web design, especially since humans have such a shortattention span!Some visual cues in web design are: Size Colour Contrast Shape Position whitespace (blank space in design, not

necessarily white)An example of visual hierarchy that is used on websites is headings(h1, h2, h3, etc.)

Read the article about the visual flow of a webpage at

http://www.webdesign.org/web-design-basics/design-principles/visual-hierarchy.4750.html

An example of good visual hierarchy in web design is http://net.tutsplus.com/,

The logo has visual hierarchy within itself. The tuts+ portion has a slightlybrighter border and background making it subtly more prominent to emphasize

the additional meaning behind tuts+. Just to the right, separated bywhitespace, is a much smaller tuts+ logo using color (a beautiful stop color,red) and contrast to create a relationship between these two elements and in turnguiding visitors to the desired destination

Even the footer for

this site, breaksdown into abeautiful visual

hierarchy thatmakes it easy toview and processextra information

most people wouldotherwise neverread. Take aminute or two and

find the visual cuestheyve used toaccomplish this

http://blog.themeforest.net/tutorials/visual-hierarchy-in-web-design/


4/11



Balance or Symmetry / Asymmetry

The principle of alignment focuses on the placement of graphicalelements and their relationship to each other and as a whole.Following the principle of proximity, alignment allows a visualconnection with elements in your design to be formed even if

they are not close in proximity. Alignment helps to create unity

and balance.

Balance is the concept of visual equilibrium. It is the combinationof opposing elements in a composition that results in visualstability. Most successful compositions achieve balance usingsymmetry or asymmetry.

Symmetry refers to the organisation of elements in which a

balanced visual hierarchy is achieved through the alignment ofgraphics along a horizontal or vertical axis. This means that yourdesign can be reflected precisely over a central axis like a

mirrored image.

In contrast, design elements that display an unbalanced visualweighting that are made up of elements differing in size, colour

and shape are organized and positioned against one another tocreate asymmetry.

Asymmetrical Balance Symmetrical Balance

Repetition

Repetitive elements throughout a design piece can be used toenhance and clarify information. Repetition adds visual interest toyour design, and helps to identify elements that belong together. It

can be considered a way of adding consistency to your design.

The consistent repetition of graphic elements works to create visual

unity. These elements can be as simple as colour, spatialrelationships, a shape, a texture or a typeface. Sometimes repetitiveelements are not identical in appearance but are in fact so similarthat their connection is clear.

Repetition acts as a visual key that ties your piece together--in otherwords, it unifies it. Repetition controls the reader's eye and helps youkeep their attention on the piece as long as possible.


5/11



Repetition in print design is much more common than it is in web design,however it can be equally effective. Repeating design elements helps create aconsistent look and improves branding. In web design a great way to achieve this

is by repeating elements in the header and footer. Check out a couple ofexamples below.

Taken from: http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/

http://www.1024media.com/

http://silverbackapp.com/


6/11



UnityUnity is the underlying principle that sums up all of the

principles and elements of design. Unity refers to thecombination of all elements successfully working together toachieve a sense of harmony in your design. This can beachieved through the consistent use of graphic elements. Using

repetition or patterns is one of the most basic factors in

creating a strong sense of unity.

Unity really is open to interpretation. Unity is something thattruly is a feeling of everything tying together to createsomething of a whole. There arent elements that dont fit inwith the mood or feelings of the design, unless thats arecurring theme. A great example of unity is the portfolio ofDave Werner, see below, where every page of the site features

hand writing, push pins, and all the manner of other things thatall tie together to make for a feeling of unity. There is nothingthat feels out of place and everything shares the same style:

Look at Dave Werners site at http://www.okaydave.com/

Example of unity in graphic design -emphasizes branding in these adverts

Taken from: http://astheria.com/design/the-elements-

of-design-applied-totheweb


7/11



Contrast

An effective use of contrast enables you to add interest to yourdesign by highlighting specific graphic elements. This will result in amore visually striking composition. To achieve this 'contrast' isemployed as a means of creating a visual hierarchy among different

graphic elements. It can be applied to graphic elements, as light,

dark, warm, cool, large, small; etc.

Contrast is most effective when it is strong; the focal point of adesign is usually a result of contrast where the eyes will naturally bedrawn. Here contrast can be used to direct the focus of acomposition. When used as a device to emphasize or highlight designelements it is important to remember that an ineffective use ofcontrast may result in confusion.

Here is a sample of the same design one with good contrast, one

with bad contrast. And just under each one is how they both look ingrayscale.

A quick way to evaluate your

design to see if there issufficient contrast is to convertthe entire thing to grey scale

momentarily and see if thedesign still looks clear and easyto read.

In Illustrator you do this byselecting your design, andselect: Edit>EditColors>Convert to Grayscale.

In Photoshop youll need toflatten your work then you can

select:Image>Adjustments>Desaturat

e. This will convert it toGrayscale.

In either case, youll want toundo this action once youve

had a chance to see how yourdesign looks put to this test.

Taken from:

http://www.gomediazine.com/design-articles/technique-theory/rule-three-contrast-contrast-contrast/


8/11



Dynamics

Dynamics is the arrangement of visual elements in a compositionto suggest the illusion of movement or direction. The effective useof dynamics in a design can add an emotive characteristic to yourdesign making it appear restful and calming or active and

energetic.

Dynamics can exist in four basic forms:

Creating a dynamic composition involves the use of patterns or therepetition of graphic elements and movement to be effective in itsexecution. The suggestion of motion by the use of repeated

structures creates dynamics.

RhythmicA steady rhythm that creates predictability andorder in a composition.

ArrhythmicFollows an unstructured rhythm to add visualinterest to a composition.

Random Without a structured approach or a defined orderthat creates spontaneity in a composition.

DirectionalThe use of graphic elements used in such as waythat implies a visual connection to lead the eyes to

move in a particular direction.


9/11



Emphasis or Dominance

Emphasis refers to the focal point or centre of interest of acomposition. This is an area that is visually dominant and eye-catching that a designer has emphasized through the cleverplacement of graphic elements.

Used effectively in combination with the principle of visual hierarchy'emphasis' can assist to establish a primary focus and an alternative

secondary emphases in another area of the composition.

Emphasis can be achieved by use of repetition to highlight and drawattention to a repetitive element. When used with 'repetition' theemphasis is usually a break in the basic structure or visual rhythm ofa pattern that causes your eye to pause or focus on a particular

element.

Contrast achieves emphasis by accentuating an area to visually

separate one element from another. Contrast in color, texture, scale,or shape attracts attention to a definite area, which may consist of

strategically positioned graphics to call attention to a single elementof your design.

Taken from: http://www.swinburne.edu.au/design/tutorials/design/design/#

An example of emphasis of dominace in web design by way ofcolour.

Click the link below to read about Emphasis in web design and other principles ofdesign.http://buildinternet.com/2009/01/five-minute-upgrade-using-css-borders-for-

emphasis/


10/11



Whitespace or Negative space

Whitespace or negative spaceis the space between elements in a

composition. More specifically, the space between major elements in acomposition is macro whitespace. Micro whitespace is the space betweensmaller elements: between list items, between a caption and an image, orbetween words and letters.

Macro wh itespace Micro whitespace

Taken from: http://www.alistapart.com/articles/whitespace/

Space and proximity are very important in any form of visual communication.Without them, you just have clutter. All the care you put into creating a color

scheme, typographic treatments and custom graphics wont get more than aglance unless it can be processed.Elements with room to breathe are

easier to identify, read and oftengive weight to their importance.

Andrew Bradshaw , who has done

some amazing work for Christianorganizations, employs this tacticon his portfolio site. Liberal use ofspace and carefully balancedelements give the site a very clean

appeal.

Find his site herehttp://andrewbradshaw.com/

Webdesigntuts.com has an excellent article about whitespace. What it is, how

to use it effectively in web design as well as further reading. Effective use of whitespace helps a designer produce a site that is useable. Click this link to

read the articlehttp://webdesigntuts.com/web-design/using-white-space-effectively-in-web-design/


11/11



Further Reading

http:/ / www.digital-web.com/ articles/ principles_of_design/

3 Introduction to the Principles of Design v1

Documents

Transcript of 3 Introduction to the Principles of Design v1