Presentation on theme: "Web Page Design Principles"— Presentation transcript:
1 Web Page Design Principles Balance, Emphasis, Color and Rules for Design
2 BalanceBalance is the act of comparing or estimating two things, one against the other, and the contrast between:Empty space (white space) and filled spaceText and imagesColor and no colors and different colorsTextures against flat colorsAsk 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 pagesSymmetryAsymmetryRadial symmetry
4 Symmetrical or Formal Balance You can usually identify at least one of three lines of symmetry.HorizontalVerticalDiagonal
5 Symmetrical BalanceThe 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.
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 ContrastUsing color can enhance or detract from a composition.Color wheels help determine which colors are in greatest contrast.
12 Color WheelsAnalogous 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 readBe well organizedBe self-explanatory – the user should be able to understand the focus of the message being conveyed without much troubleContain text and graphics that are carefully linked to eachotherContain 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 throughoutEasy navigational structureComplementary color schemeGraphics with consistent look and feel throughout siteEasily accessible hyperlinksUse background colors that don’t hide text or strain the eyesChange the layout only if necessary
16 17 Rules of Good Web Design Rule #2 – Know your target audienceTarget audience is any potential interested visitor to the siteConsider 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 friendlyVisitors should be able to find what they want in your site within 3 mouse clicks – if not they will likely leave the siteRule #4 – Use white spaceAllow for some “breathing room” between text and graphics – don’t clutter
18 17 Rules of Good Web Design Rule #5 – Determine website’s page sizeOne of web designer’s biggest headaches due to different monitor resolutions and browsersMinimum resolution on most computers today is 800x600Safe 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 bordersMore professional lookEliminates headaches of trying to keep elements aligned correctlyKeep tables <785 pixelsRule #7 – Use fonts that will display correctlyArial, Courier, Georgia, Helvetica, Times New Roman and Verdana are the best because they are installed on most computersLess 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 websiteFont size 8-14Left-aligned except titles – center works best for titlesDon’t underline in your page because hyperlinks will underlineUse same color for titles throughout and same color for text throughout
21 17 Rules of Good Web Design Rule #9 – Research Competitions’ websitesBe consistent with the industryRule #10 – Make site look professionalFirst impressions of viewers are importantRule #11 – Proofread for spelling, grammar and design mistakesHave someone else proofread it for those items
22 17 Rules of Good Web Design Rule #12 – Revise, Revise, ReviseRarely will it be “right” the first timeBuilding site is work in progress – always look to improve site, remove inconsistencies, etc.Rule #13 – Create well designed website architectureDecide 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 typesIf using photographs – use only photographsIf using cartoon images – use cartoonsAdd “alt” text to all graphicsRule #15 – When in doubt, apply the “KIS” ruleWhen design decisions are tough, revert to “KIS” – “Keep it Simple”
24 17 Rules of Good Web Design Rule #16 – Follow guidelines when working with colorsMaximum of 2-3 colors throughout websiteThink of how houses are finished – one dominant color and then trim colorsChoose colors that go with themeDark 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 planOne of the worst habits you can develop as a web designer is to start building your site without planning the design on paperUse web page planning formLess time consuming than creating and undoing the site on the computer
26 SummaryThe 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!!