Unit 3, Lesson 8

Principles of Design

AOITWeb Design

Copyright © 2008–2013 National Academy Foundation. All rights reserved.

A website’s design creates a first impression

• What is your first impression of this site?• Do you immediately know what the site does?• Do you know who the site belongs to?

There are five elements of effective web design

• Content

• Functionality

• Navigation

• Visual design

• Media (graphics, video, animation, and audio)

Can you give a specific example of how one of the photo book websites you looked at in the beginning of this lesson was successful with each of these elements?

Content is logical, accurate, web-friendly

• Logical, labeled categories

• Up-to-date, accurate, nonoffensive

• Clear, concise bullet points

• Contact info included• Clear instructions

where needed• Obvious links/visited

links• Text: high contrast,

consistent, correct size, no movement Does the web page on this slide meet

these criteria?

Functionality makes sites easy to use

• All links work

• Works on all of the major browsers

• Pages load quickly

• No registration needed to view basic information

• Back button not disabled

• Site map and/or site search engine available

• Short, memorable URL

Describe an error you have experienced while surfing the Internet.

Navigation is clear, logical, persistent

• Clear, logical site navigation persists throughout the entire site.

• Additional shortcuts or navigation methods are used as needed.

• Logo in the top left corner always leads to the home page.

Have you ever found something really cool on the web that you then weren’t able to find again?

Home Page

My Class Grading Newsletter

Comments Classmates

Visual design is professional and pleasing

• The site clearly represents the purpose.

• All pages have a consistent look.

• A coherent, elegant color scheme represents the company or products.

• The background color or design is simple and does not interfere with the body of the page.

Media enhances a site

• Meaningful graphics, video, animation, audio, and links to social media

• Not too many bells and whistles

• Highest quality media, optimized for the web

• Appropriate, consistent, andrelevant buttons and icons

• Not done “because you can”or “because everyone is doing it”

Apple.com has a lot of graphics. Why is the site still appealing and logical?

Review: The five areas of good web design

Element What to Aim For

Content Simple, audience-appropriate, and organized, and only necessary elements are included

Functionality Works on every browser and platform, with no errors

Navigation Consistent on each page, and the path is always clear

Visual design Intuitive, easy to read, consistent, clearly illustrates message/purpose

Media Use of media is relevant, meaningful