Good vs. Bad Web Design

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
(No Transcript)
4
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.

5
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 dont change their appearance
• Always label icons and buttons by their function

6
Visual Design

• Accomplish two things
• Look appealing
• Show people how to navigate around the site

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

8
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

9
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

10
Color, Type Graphics

• ACME Medical
• Illuminating your future
• with advanced medical technology.
• ACME Medical
• Illuminating your future
• with advanced medical technology.

11
Color, Type Graphics

• Mix fonts wisely.
• Headings, subheadings, body text
• Dont use too many (lt three).

12
Color, Type Graphics

• Use graphic elements efficiently.
• Big photos Big files
• Consider download time
• Break up the page with graphics.

13
(No Transcript)
14
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/

15
(No Transcript)
16
(No Transcript)
17
Establishing Visual Priority

• Equal size equal importance
• Your job to define the order of importance.

18
(No Transcript)
19
(No Transcript)
20

• Examples

21
Web Critique

• Audience
• Purpose
• Layout Design
• Page Names
• Overall Quality
• Oklahoma Wheat Commission
• http//www.state.ok.us/wheat/