Good vs bad web design
Advertisement
This presentation is the property of its rightful owner.
1 / 21

Good vs. Bad Web Design PowerPoint PPT Presentation


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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Good vs bad web design

Good vs. Bad Web Design


Graphic design tips

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.


Graphic production

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.


Navigation design

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


Visual design

Visual Design

  • Accomplish two things:

    • Look appealing

    • Show people how to navigate around the site


Visual design1

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/


Color type graphics

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


Color type graphics1

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


Color type graphics2

Color, Type & Graphics

ACME Medical

Illuminating your future

with advanced medical technology.

ACME Medical

Illuminating your future

with advanced medical technology.


Color type graphics3

Color, Type & Graphics

  • Mix fonts wisely.

    • Headings, subheadings, body text

  • Don’t use too many (< three).


Color type graphics4

Color, Type & Graphics

  • Use graphic elements efficiently.

    • Big photos = Big files

    • Consider download time

  • Break up the page with graphics.


The grid system

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/


Establishing visual priority

Establishing Visual Priority

  • Equal size = equal importance

  • Your job to define the order of importance.


Good vs bad web design

  • Examples


Web critique

Web Critique

  • Audience

  • Purpose

  • Layout & Design

  • Page Names

  • Overall Quality

    Oklahoma Wheat Commission

  • http://www.state.ok.us/~wheat/


  • Login