Web Page Design Principles
Balance, Emphasis, Color and Rules for Design
© 2005 Macromedia, Inc. 2
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. 3
Balance in Page Composition
Three different types of balance when laying out pages
Symmetry
Asymmetry
Radial symmetry
© 2005 Macromedia, Inc. 4
Symmetrical or Formal Balance
You can usually identify at least one of three lines of symmetry.
Horizontal
Vertical
Diagonal
© 2005 Macromedia, Inc. 5
Symmetrical Balance
© 2005 Macromedia, Inc. 6
Examples of Symmetrical Balance
© 2005 Macromedia, Inc. 7
Examples of Asymmetrical Balance
© 2005 Macromedia, Inc. 8
Examples of Radial Balance
© 2005 Macromedia, Inc. 9
Emphasis
Emphasis: To express with particular stress or force
What message is stressed in this slide?
© 2005 Macromedia, Inc. 10
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. 11
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. 12
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. 13
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.
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.
14
© 2005 Macromedia, Inc.
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
15
© 2005 Macromedia, Inc.
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?
16
© 2005 Macromedia, Inc.
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
17
© 2005 Macromedia, Inc.
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
18
© 2005 Macromedia, Inc.
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
19
© 2005 Macromedia, Inc.
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
20
© 2005 Macromedia, Inc.
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
21
© 2005 Macromedia, Inc.
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?
22
© 2005 Macromedia, Inc.
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”
23
© 2005 Macromedia, Inc.
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
24
© 2005 Macromedia, Inc.
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
25
© 2005 Macromedia, Inc. 26
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!!