Design Principles

1
Design Principles

• Multimedia
• MED04-2
• November 2005

2
Simplicity
Keep it simple The power of good design is in
its simplicity Define the essence Barbara
Kuhr Creative Director - Asylum
3
Starting Off Why are you creating a website?

• What is the point to your site?
• How will creating a website support your idea?
• Who is your audience?
• How will your audience view your page?
• What are your goals for the site?
• What strategies will you use to achieve those
  goals?
• How will you measure the success of your site?

4
Visual Interface DesignPoints to consider

• For successful navigation design it is vital to
  consider the interface
• The Interface is the intermediary between users
  content
• Interface design is about constructing a visual
  meaning
• Metaphors are very powerful as a visual tool
• Need to have an understanding of colour theories
• Need to have an understanding of typography

5
Form v Content
Dont be seduced by form v content The designer
concerned with content is more likely to make a
meaningful contribution than the designer who is
primarily concerned with form Barbara
Kuhr Creative Director - Asylum
6
Web Design PrinciplesHierarchies

• The foundation of almost all good information
  architectures is a
• well designed hierarchy
• Louis Rosenfeld Peter Morvill
• Users understand hierarchies
• (family trees, scientific classification language
  etc..)
• It is comfortable to start at the top, at the
  most general level
• The user should be able to move to the next level
  which contains more specific information
• (menu bars, pop up menus, links)
• A user should always know where they are and be
  able to get back to the beginning (home)

7
Back Button
You have 3 seconds to convince a user not to use
the Back Button 3 seconds So get something on
the screen immediately - And make it really
interesting Jeffery Veen Interface Director,
Hotwired
8
Web Design Principles

• Navigation bars are best placed in the top right
  hand corner or along
• the top of the screen
• Establish the identity of your site on every page
• Establish white space on your page - pages
  should be uncluttered
• Design and navigation should be consistent
  throughout your site
• Navigation should appear in context
• People hate to scroll - break up your pages
  rather than having scroll bars

9
(No Transcript)
10
Colour
Primary Colours Red, Yellow Blue
Secondary Colours A primary colour
another primary colour Yellow Red
Orange Red Blue Purple Blue Yellow
Green
Tertiary Colours Primary colour
adjacent Secondary colour 6
tertiary colours (2 for every primary colour)
11
Using the Colour Wheel


Combining Primary, Secondary Tertiary colours
together you get the Colour Wheel
12
Triad Colour

The Four Triads

• Imagine an Equilateral Triangle floating above
  the wheel
• At each point of the triangle is a useable
  colour in design
• These hues work together to form a harmonic
  colour combination

13
Complimentary Colours

Hues that are directly across from one another on
the Colour Wheel When used together they
seem to make each other brighter and more vivid

14
Analogous Colours

A Monochromic colour set uses a single hue but
with varying tints and shades An analogous
colour set uses 4 colours next to each other
along the wheel .

15
Choosing Effective Colour Schemes

• Choose Colours that reinforce your message
• Understand your sites branding and audience
• Cool muted colours tend to give the perception of
  stability
• Strong vibrant colours tend to be more
  youthful
• Use a small number of colours in your palette.
• Too many colours distract the user
• Use contrast for readability
• Colours similar in value do not provide enough
  contrast and can be difficult to read
• Black text on a white background provides the
  highest degree of contrast
• Choose functional colours for your website
• Establish functional colours for elements that
  communicate contextual information such as
  headings and links

16
Common Colour Connotations

• RED Passion, Fire, Romance, Violence, Aggression
• Also means STOP or signals warning in most
  cultures
• PURPLE Creativity, Mystery, Royalty, Mysticism,
  Rarity
• Purple is associated with death in some cultures
• BLUE Loyalty, Security, Conservatism,
  Tranquillity, Coldness Sadness
• GREEN Nature, Fertility, Growth, Envy
• Also means GO and is often associated with
  environmental matters
• YELLOW Brightness, Illumination, Illness,
  Cowardice
• BLACK Power, Sophistication, Contemporary Style,
  Death, Morbidity, Evil
• WHITE Purity, Innocence, Cleanliness, Truth,
  Peace, Coldness, Sterility

17
What do you want to communicate?
Dont get too caught up with trends! The job of
design is to communicate a message. Make sure
your designs communicate that message Hold onto
it rigorously, like a bulldog to his bone! Lisa
Seaman Designer, Hotwired
18
The Message to Take Away
Interface Design is not just a list of guidelines
but the link between your ideas and your audience