1

Web Site

Design Principles

Source: Principles of Web Design, Joel Sklar

Websites that suck http://www.webpagesthatsuck.com/biggest-mis

takes-in-web-design-1995-2015.html 10 Principles of effective web design

http://www.smashingmagazine.com/index.php/2008/01/31/10-principles-of-effective-web-design/

2

3

Define the Purpose Why are you building the Web site?

Share Personal Information Publishing Special interest Job Listings Online shopping Product support

What is the goal of the site? Write a two or three-paragraph mission statement that briefly

states the site’s goals?

How will you judge the success of the site? What are the measuring factors you can use to assess the

effectiveness of the site?

4

Develop a Web Site that Stands Out

The challenge is to develop a web site that gains the attention of users who are already suffering from information overload

Gather ideas:

Explore other web sites; identify those that impress you

Describe design elements that contribute to that impression

Identify how information was presented: photos, text, video, sound

Describe what made the information easy to find

List the reasons you want to return

5

Identify the Audience

Produce an audience definition Who will read your page? What is it that users want?

Do they want information? Are they seeking entertainment? Do they have any biases regarding your message Do they want to download files? Are they looking for links to other Web sites?

How can you attract them and entice them to return for repeat visits?

What type of computer and connection speed does your typical visitor have?

6

Analyze Your Audience What does your audience have in common?

Are they male or female? What level of education do they have? What is their reading and vocabulary level? What level of technical aptitude do they have? Are they all in the same career / company? Are they international

How do they compare to the ‘average web user’? 16% are retirees 58% of new users are female Average household income is $46,000 65% are married or have a domestic partner 24% have completed college or university 61% expect to increase their online spending

7

Build a Team

What skills do you need to build the site? Server Administrators HTML Coders Designers Writers and Information Designers Software Programmers Database Administrators Marketing

Who will create the graphics, code the pages, and write the text?

Do you have the talent and economic resources that you need?

8

Identify and Collect Your Content

•Text – typically the primary content of a web site• chunk information for readability• use active voice and a friendly tone• remove transitional phrases

as stated previously similarly as a result

•Photographs – can personalize and familiarize the unknown• select high quality, relative pictures that will add value• can be used to deliver a message or prompt an action

9

Other Content Types

•Multimedia – adds action, excitement, and interactivity • combination of text, graphic images, animation, audio, or video• require considerable investment of time and other resources to develop

•Animations – are widely used to attract attention and enliven web pages with rotating objects, scrolling text, or advertising banners

• use them subtly and sparingly• excessive amounts become distracting and annoying

•Audio –an effective, low bandwidth alternative to video• can persuade, inspire, personalize, motivate, or sooth

•Video – incorporates the powerful components of movement and sound• efficiently delivering quality video is the most challenging

www.wisconsincheese.com

10

Plan the Web Pages

Organize your information

• the initial, visible screen provides the first glimpse of your Web site and the opportunity to “hook” your visitors

• create web pages no longer than two screens of information

• provide links at the top to select areas within the page so information can be readily accessed

Establish a Visual Connection

• create a consistent look and feel, which unifies and strengthens the web site’s visual identity

11

Plan the Web Pages

Color Scheme

• as a general rule, limit the numbers of colors in your scheme to three.

Layout

• consistent layouts of pages and page elements create unity

• location of navigation links and search mechanism should be consistent

• sketch your layout (using a grid)

major text blocks

photos

navigation controls

headings

12

Web Browsers

The two most widely used browsers are:

Netscape

Microsoft Internet Explorer

HTML has a set of rules called its syntax.

A web browser interprets the HTML code to determine the text’s appearance.

Different browsers might make different choices, resulting in varying interpretations of the way the HTML file is displayed

13

Coding for Multiple Resolutions

A computer monitor’s screen resolution is the horizontal and vertical width and height of the computer screen in pixels

The three most common screen resolutions (traditionally expressed as width x height) are 640 x 480, 800 x 600, 1024 x768

User screen resolution is a factor over which you have no control

14

Fixed Resolution Design As the screen resolution

changes, the content remains aligned to the left side of the page

•The negative white space on right hand side fills the remainder of the screen

15

Pages Viewed on Smaller Canvas

Text extends beyond screen

16

Flexible Resolution Design

As the screen resolution changes, the content expands to accommodate the varying screen width

17

http://www.belden.com

http://www.nationalgallery.ie

http://www.emerils.com/emerilshome.html

Design for Graphics

18

Design the Whole Site

Plan the unifying themes and structures Colors Fonts Page Layouts

Create smooth transitions Use a grid to provide visual structure Use active white space

Know your Audience

19

NASA Web Site

20

NASA Web Site for Kids

http://kids.msfc.nasa.gov

21

Create Smooth Transitions

Plan to create a unified look Reinforce the identifying elements Avoid random, jarring changes in format

22

http://www.dell.com

http://www.ups.com

Design Examples

23

Use Active White Space

Use white space deliberately in your design Create breathing space between headers and subhead Separate paragraphs Place ‘gutters’ to separate columns

Good use of white space guides the reader and defines the areas of your page

Active white space is an integral part of your design that structures and separates content

24

Use of White Space

25

White Space Enhances Clarity

http://www.mars.com

26

Impact of Color

Use color to enhance your web site’s purpose and personality

Warm colors (red, orange and yellow) tend to be associated with activity and power

Cool colors (green, blue and purple) suggest tranquility and peace

27

Design for the User

Keep your design efforts centered solely around your user

Design for interaction Design for location Guide the user’s eye Decide whether the user will read or scan

28

Paper Based Reading Pattern

29

Screen Based Reading Pattern

30

Areas of Screen Importance

Most important and current information

Company logo / navigation bar

Consistent appearing links

Changing Features

Suitable for reading content

31

Areas of Screen Importance

http://www.I2.com

http://www.siebel.com

32

Plan the Navigation

Provide enough location information to let the user answer the following navigation questions:

• Where am I? • Where can I go? • How do I get there?• How do I get back to where I started?

33

Navigation Guidelines

Place primary navigation elements in the same location on all pages

All secondary pages should include:

• link back to the home page

• logo or other type of site identifier

• page title

Ensure that links are functional, relative and worthwhile

Remove the link to the current page from the list of link options

34

Hard To Read Links

http://www.jaguar.com

http://www.ludwig-drums.com

35

Using Text-Based Navigation

Text-based linking often is the most effective way to provide navigation on your site

It can work in both text-only and graphical browsers

Always provide a text-based set of links as an alternate means of navigation

Limit information overload Create manageable information segments Control page length Use hypertext to connect facts, relationships and concepts

36

Identical Text and Graphics Links