Basic Principles of DESIGN

1
Basic Principles ofDESIGN
Bristol Community CollegePaula MaillouxSources
The Non-Designers Design Book The Non-Designers
Web Book Ron Woolley, www.dtp-aus.com
2
Basic Principles of DESIGN
Looking at DesignElements on the Web Page

• Type
• Color
• Shapes
• Lines
• Graphics

3
Basic Principles of DESIGN
The FOUR Basic Principles

• 1 Alignment
• 2 Proximity
• 3 Repetition
• 4 Contrast

4
Basic Principles of DESIGN
Alignment gives the layout a clean and organized
feeling

• Centered Text
• Left justified Right
  justified
• And Justified are all examples of Alignment
• Never combine Centered with any other
  Alignment
• Its best to choose one alignment and use it
  for the entire page

5
Basic Principles of DESIGN
Alignment

• All elements should be visually connected
• Avoid arbitrary placement
• Turn off borders
• Organization is the key

6
Basic Principles of DESIGN
Proximity

• Items that are related to each other should be
  intellectually grouped together
• Organizes information
• Provides a clear structure and brings balance
  to the layout

7
Basic Principles of DESIGN
Proximity

• Use Heads, Sub heads, Type Faces (light, bold,
  semibold, etc.) as tools to help group items
• Keep visual space between elements
• Unity and Organization are the key
• Do not be afraid to use White Space, but do
  not use too much

8
Basic Principles of DESIGN
Repetition

• Select a constant aspect and repeat it
  throughout the web site to tie disparate parts
  together
• A few elements of Repetition are
• Fonts, Color, Bullets, Texture, Graphics, and
  Format

9
Basic Principles of DESIGN
Repetition

• A layout without Repetition feels and looks
  bland
• Consistency, or developing a unified theme, is
  the key

10
Basic Principles of DESIGN
Contrast

• Creates a Focal Point to pull the viewer in
• Avoid elements that are similar - if
  everything has equal priority, then nothing
  has priority
• What is not the same - make different

11
Basic Principles of DESIGN
Contrast creates INTEREST
Contrast in weight BOLD BOLD ITALIC ITALIC NORMAL
emphasize TYPEEMPHASIZE typeemphasize
typeEMPHASIZE typeemphasize typeemphasize TYPE
12
Basic Principles of DESIGN
LOOK HERE
Contrast by Emphasizing TypeBlahbity blah blah
blah. Blah blah blah blahbity blah. Blah blah
blah blahbity blah blah blah. Blahbity blah blah
blah. Blahbity blah blah blah. Blah blah blah
blahbity blah blah blah. Blah blah blah blahbity
blah. Blahbity blah blah blahbity blah blah.
Blahbity blah blah blah. Blah blah blahbity blah
blah blahbity blah.
13
Basic Principles of DESIGN
Contrast by Emphasizing a GraphicBlahbity blah
blah blah. Blah blah blah blahbity blah. Blah
blah blah blahbity blah blah blah. Blahbity blah
blah blah. Blahbity blah blah blah. Blah blah
blah blahbity blah blah blah.
14
Basic Principles of DESIGN
and still more CONTRAST in Shape,
Position, or Color

try some COLOR COLOR COLOR COLOR
The silver fox jumped into the blue lake
Position
Position
15
Basic Principles of DESIGN
Contrast TIPS

• Two elements on a web page should be displayed
  differently
• Balance, or arrangement of items,
• is the key

16
Basic Principles of DESIGN
A Word about TEXT

• Sans Serif type works better than Serif
  (opposite from Print)
• Background should not interrupt the text
• Text should be big enough to read, but not too
  big
• Columns of text should be narrower than in a
  book to make reading easier on the screen
• Give breathing room around text

17
Basic Principles of DESIGN
A Word about COLOR

• Color creates contrast
• Warm colors (reds, oranges) come forward -
  command attention
• Cool colors (blues, greens) recede

Warm COLORS
Cool COLORS
18
Basic Principles of DESIGN
A Word about BUTTONS

• Pleaseno big, dorky buttons

19
Basic Principles of DESIGN
A Word about NAVIGATION

• Primary goal is to make it easy for visitors
  to get the information they need - the key is
  Organization
• Whatever style you choose, make it clear and
  simple to follow
• Beware! Do not sacrifice clear communication
  for unclear cleverness.

20
Basic Principles of DESIGN
LOOK at the WorldLike a DESIGNER
Visualize Look at the work of others - What
catches your eye? Criticize Separate good from
bad - What style do you like? Analyze
Study the world around you - What looks
good?
21
Basic Principles of DESIGN
Some Web Design TipsThe Donts

• Busy distracting backgrounds that make text
  hard to read
• No blinking anything, especially text
• its annoying!
• Avoid animations that never stop
• Unclear or complex navigation
• No focal point OR too many focal points on a
  page
• Avoid side scrolling

22
Basic Principles of DESIGN
Some Web Design TipsThe Dos

• All Principles of Design apply
• Link colors coordinate with page colors
• Create clear and consistent Navigation
  throughout the site
• Use repetitive elements to make each page look
  like it belongs to the same site
• Check Spelling!

23
Basic Principles of DESIGN
What is the ULTIMATE Goal when
designing? Good Communication
24
Basic Principles of DESIGN
Some Web Design ResourcesFor More TIPS

• virtuallastchapter.com
• go to Examples
• urlsinternetcafe.com/classroom
• go to Robins Web Design Tips for tips
• from Robin Williams on Good and Bad
• Web Design features

25
Basic Principles of DESIGN
Some Web Design ResourcesBooks

• The Non-Designers Web Book
• Robin Williams John Tollet
• Robin Williams Web Design Workbook
• Robin Williams, John Tollet David Rohr