Download Graphic Design Principles

Web Page Design Principles
Balance, Emphasis, Color and Rules for Design
Balance
 Balance is the act of comparing or
estimating two things, one against the
other, and the contrast between:
 Empty space (white space) and filled space
 Text and images
 Color and no colors and different colors
 Textures against flat colors
© 2005 Macromedia, Inc.
2
Balance in Page Composition
 Three different types of balance when
laying out pages
 Symmetry
 Asymmetry
 Radial symmetry
© 2005 Macromedia, Inc.
3
Symmetrical or Formal Balance
 You can usually identify at least one of
three lines of symmetry.
 Horizontal
 Vertical
 Diagonal
© 2005 Macromedia, Inc.
4
Symmetrical Balance
© 2005 Macromedia, Inc.
5
Examples of Symmetrical Balance
© 2005 Macromedia, Inc.
6
Examples of Asymmetrical Balance
© 2005 Macromedia, Inc.
7
Examples of Radial Balance
© 2005 Macromedia, Inc.
8
Emphasis
 Emphasis: To express with particular stress
or force
What message is stressed in this slide?
© 2005 Macromedia, Inc.
9
Color Definitions
 Hue is another word for color.
 Chroma is the intensity or purity of color.
 Tint is a color mixed with white.
 Tone is a color mixed with gray.
 Shade is a color mixed with black.
© 2005 Macromedia, Inc.
10
Color and Contrast
 Using color can enhance
or detract from a
composition.
www.lighthouse.org/color_contrast.htm
 Color wheels help
determine which colors
are in greatest contrast.
© 2005 Macromedia, Inc.
11
Color Wheels
 Analogous colors are
adjacent to each other
on the color wheel.
 Complementary colors
are opposite each other
on the color wheel.
© 2005 Macromedia, Inc.
12
Color in Design
 Use color to label or show hierarchy.
 Use color to represent or imitate reality.
 Use color to unify, separate, or emphasize.
 Use color to decorate.
 Use color consistently.
© 2005 Macromedia, Inc.
13
A well designed website should:
 Be attractive and pleasing to look at and read
 Be well organized
 Be self-explanatory – the user should be able to
understand the focus of the message being
conveyed without much trouble
 Contain text and graphics that are carefully
linked to eachother
 Contain design and content that are appropriate
for the targeted audience.
© 2005 Macromedia, Inc.
14
17 Rules of Good Web Design
 Rule #1 – Website must be easy to read and
consistent throughout
 Easy navigational structure
 Complementary color scheme
 Graphics with consistent look and feel throughout site
 Easily accessible hyperlinks
 Use background colors that don’t hide text or strain
the eyes
 Change the layout only if necessary
© 2005 Macromedia, Inc.
15
17 Rules of Good Web Design
 Rule #2 – Know your target audience
 Target audience is any potential interested
visitor to the site
 Consider age, gender, occupation, etc.
 What is central theme you want to convey?
© 2005 Macromedia, Inc.
16
17 Rules of Good Web Design
 Rule #3 – Make your site’s navigation
user friendly
 Visitors should be able to find what they
want in your site within 3 mouse clicks – if
not they will likely leave the site
 Rule #4 – Use white space
 Allow for some “breathing room” between
text and graphics – don’t clutter
© 2005 Macromedia, Inc.
17
17 Rules of Good Web Design
 Rule #5 – Determine website’s page size
 One of web designer’s biggest headaches
due to different monitor resolutions and
browsers
 Minimum resolution on most computers
today is 800x600
 Safe page size is no more than 800 pixels
wide and 600-1000 pixels tall
© 2005 Macromedia, Inc.
18
17 Rules of Good Web Design
 Rule #6 – Lay out website using tables with
invisible borders
 More professional look
 Eliminates headaches of trying to keep elements aligned
correctly
 Keep tables <785 pixels
 Rule #7 – Use fonts that will display correctly
 Arial, Courier, Georgia, Helvetica, Times New Roman
and Verdana are the best because they are installed on
most computers
 Less popular fonts only work if the viewer has those
fonts installed on their computer
© 2005 Macromedia, Inc.
19
17 Rules of Good Web Design
 Rule #8 – Keep text consistent
throughout website
 Font size 8-14
 Left-aligned except titles – center works best
for titles
 Don’t underline in your page because
hyperlinks will underline
 Use same color for titles throughout and
same color for text throughout
© 2005 Macromedia, Inc.
20
17 Rules of Good Web Design
 Rule #9 – Research Competitions’ websites
 Be consistent with the industry
 Rule #10 – Make site look professional
 First impressions of viewers are important
 Rule #11 – Proofread for spelling, grammar
and design mistakes
 Have someone else proofread it for those items
© 2005 Macromedia, Inc.
21
17 Rules of Good Web Design
 Rule #12 – Revise, Revise, Revise
 Rarely will it be “right” the first time
 Building site is work in progress – always
look to improve site, remove inconsistencies,
etc.
 Rule #13 – Create well designed website
architecture
 Decide how the pages are going to fit
together – what will navigation structure look
like? Hierarchy?
© 2005 Macromedia, Inc.
22
17 Rules of Good Web Design
 Rule #14 – Use consistent graphic types
 If using photographs – use only photographs
 If using cartoon images – use cartoons
 Add “alt” text to all graphics
 Rule #15 – When in doubt, apply the
“KIS” rule
 When design decisions are tough, revert to
“KIS” – “Keep it Simple”
© 2005 Macromedia, Inc.
23
17 Rules of Good Web Design
 Rule #16 – Follow guidelines when
working with colors
 Maximum of 2-3 colors throughout website
 Think of how houses are finished – one
dominant color and then trim colors
 Choose colors that go with theme
 Dark color text on light background is easier
to read than the opposite
© 2005 Macromedia, Inc.
24
17 Rules of Good Web Design
 Rule #17 – MOST IMPORTANTLY – Have
a paper plan
 One of the worst habits you can develop as
a web designer is to start building your site
without planning the design on paper
 Use web page planning form
 Less time consuming than creating and
undoing the site on the computer
© 2005 Macromedia, Inc.
25
Summary
 The basis of good page design is use of
design elements and their thoughtful
application in the form of design
principles.
 Clearly identify what you are trying to
accomplish— use design to convey your
message.
 Follow the Rules!!
© 2005 Macromedia, Inc.
26