-
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.
-
8/14/2019 3 Introduction to the Principles of Design v1
2/11
Introduction to the Principles of design Page 2 of 11
TPP Web Page Design WFD Program
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.
-
8/14/2019 3 Introduction to the Principles of Design v1
3/11
Introduction to the Principles of design Page 3 of 11
TPP Web Page Design WFD Program
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/
-
8/14/2019 3 Introduction to the Principles of Design v1
4/11
Introduction to the Principles of design Page 4 of 11
TPP Web Page Design WFD Program
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.
-
8/14/2019 3 Introduction to the Principles of Design v1
5/11
Introduction to the Principles of design Page 5 of 11
TPP Web Page Design WFD Program
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/
-
8/14/2019 3 Introduction to the Principles of Design v1
6/11
Introduction to the Principles of design Page 6 of 11
TPP Web Page Design WFD Program
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
-
8/14/2019 3 Introduction to the Principles of Design v1
7/11
Introduction to the Principles of design Page 7 of 11
TPP Web Page Design WFD Program
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/14/2019 3 Introduction to the Principles of Design v1
8/11
Introduction to the Principles of design Page 8 of 11
TPP Web Page Design WFD Program
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.
-
8/14/2019 3 Introduction to the Principles of Design v1
9/11
Introduction to the Principles of design Page 9 of 11
TPP Web Page Design WFD Program
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/
-
8/14/2019 3 Introduction to the Principles of Design v1
10/11
Introduction to the Principles of design Page 10 of 11
TPP Web Page Design WFD Program
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/
-
8/14/2019 3 Introduction to the Principles of Design v1
11/11
Introduction to the Principles of design Page 11 of 11
TPP Web Page Design WFD Program
Further Reading
http:/ / www.digital-web.com/ articles/ principles_of_design/