Great versus Terrible Web Plan - PowerPoint PPT Presentation

good vs bad web design n.
Skip this Video
Loading SlideShow in 5 Seconds..
Great versus Terrible Web Plan PowerPoint Presentation
Great versus Terrible Web Plan

play fullscreen
1 / 21
Download
Download Presentation

Great versus Terrible Web Plan

Presentation Transcript

  1. Good vs. Bad Web Design

  2. Graphic Design Tips • Use no more that three focal points. • Big, medium, small • Break the page into a few functional areas. • Use colored areas to break up the page visually. • Avoid using fonts set smaller than 12 point. • Use standard computer system fonts for text. • Create style guides for a consistent look.

  3. Graphic Production • Build all Web graphics in 72 dpi. • Save graphics that have a mix of text, flat-colored graphics and photos as GIF files. • Save all purely photographic images as JPEG files. • Slice graphics into pieces and save each piece in either GIF or JPEG files to optimize performance.

  4. Navigation Design • Differentiate the visual design of non-clickable and clickable elements • Use rollover animation on buttons to enhance interaction and usability • Always place buttons in the same location on the page and don’t change their appearance • Always label icons and buttons by their function

  5. Visual Design • Accomplish two things: • Look appealing • Show people how to navigate around the site

  6. Visual Design • Consistency is the key! • Home page layout • Subpage layout • http://www.lopuck.com/ • http://www.resultswithstyle.com/default2.asp • http://www.apple.com/

  7. Color, Type & Graphics • Choose colors that are appropriate to the subject matter. • Use a limited color palette. • Quicker delivery over the Internet • Smaller file size • No more than seven

  8. Color, Type & Graphics • Use fonts to set the mood. • Serif fonts • Stability, security, professionalism and longevity • Ex. mutual fund Web site • Large blocks of text • Sans serif fonts • Forward thinking, cleanliness and agility • Ex. advanced medical-imaging machines • Short blocks of text and headers

  9. Color, Type & Graphics ACME Medical Illuminating your future with advanced medical technology. ACME Medical Illuminating your future with advanced medical technology.

  10. Color, Type & Graphics • Mix fonts wisely. • Headings, subheadings, body text • Don’t use too many (< three).

  11. Color, Type & Graphics • Use graphic elements efficiently. • Big photos = Big files • Consider download time • Break up the page with graphics.

  12. The Grid System • Use a grid to lay out your Web page. • Limit to vertical or horizontal • http://www.idea.com/ • http://www.awinfo.com/

  13. Establishing Visual Priority • Equal size = equal importance • Your job to define the order of importance.

  14. Examples

  15. Web Critique • Audience • Purpose • Layout & Design • Page Names • Overall Quality Oklahoma Wheat Commission • http://www.state.ok.us/~wheat/