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 • 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 • 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 • Accomplish two things: • Look appealing • Show people how to navigate around the site
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 • 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 & 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 & Graphics ACME Medical Illuminating your future with advanced medical technology. ACME Medical Illuminating your future with advanced medical technology.
Color, Type & Graphics • Mix fonts wisely. • Headings, subheadings, body text • Don’t use too many (< three).
Color, Type & Graphics • Use graphic elements efficiently. • Big photos = Big files • Consider download time • Break up the page with graphics.
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 • Equal size = equal importance • Your job to define the order of importance.
Web Critique • Audience • Purpose • Layout & Design • Page Names • Overall Quality Oklahoma Wheat Commission • http://www.state.ok.us/~wheat/