1 / 21

Good vs. Bad Web Design

Good vs. Bad Web Design. 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.

Gabriel
Download Presentation

Good vs. Bad Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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/

More Related