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

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

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.

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.

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

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

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

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

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

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?

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”

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

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

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