web page design principles balance, emphasis, color and rules for design

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


Balance in Page Composition

Three different types of balance when laying out pages

Symmetry

Asymmetry

Radial symmetry


Symmetrical or Formal Balance

You can usually identify at least one of three lines of symmetry.

Horizontal

Vertical

Diagonal


Symmetrical Balance


Examples of Symmetrical Balance


Examples of Asymmetrical Balance


Examples of Radial Balance


Emphasis

Emphasis: To express with particular stress or force

What message is stressed in this slide?


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.


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.


Color Wheels

Analogous colors are adjacent to each other on the color wheel.

Complementary colors are opposite each other on the color wheel.


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


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



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



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



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



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



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



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



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



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



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



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


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

web page design principles balance, emphasis, color and rules for design

Documents

designuse color

purity of color

color definitionshue

contrastusing color

color wheelsanalogous

rules of good web designrule

flat colors

complementary colors