1. Web Page Design Principles
Balance, Emphasis, Color and Rules for Design

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
Ask students if they can think of other types of balance: texture and no texture (smooth), size and scale, elements of a composition.

3. Balance in Page Composition
Three different types of balance when laying out pages
Symmetry
Asymmetry
Radial symmetry

4. Symmetrical or Formal Balance
You can usually identify at least one of three lines of symmetry.
Horizontal
Vertical
Diagonal

5. Symmetrical Balance
The rectangle has three lines of symmetry: horizontal (blue), vertical (red), diagonal (yellow)
The triangle only has one line of symmetry: center or vertical. You can draw two other lines of symmetry from any of the vertices to the center of the opposite side.

6. Examples of Symmetrical Balance

7. Examples of Asymmetrical Balance

8. Examples of Radial Balance

9. Emphasis Emphasis: To express with particular stress or force
What message is stressed in this slide?

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.

11. Color and Contrast
Using color can enhance or detract from a composition.
Color wheels help determine which colors are in greatest contrast.

12. Color Wheels
Analogous colors are adjacent to each other on the color wheel.
Complementary colors are opposite each other on the color wheel.

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.

14. 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.

15. 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

16. 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?

17. 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

18. 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 pixels tall

19. 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

20. 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

21. 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

22. 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?

23. 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”

24. 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

25. 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

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!!