Graphic Design Principles
Download
Report
Transcript 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