Web Site
Design Principles
Source: Principles of Web Design, Joel Sklar
1

Websites that suck


http://www.webpagesthatsuck.com/biggestmistakes-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-webdesign/
2
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?
3
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
4
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?
5
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
6
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?
7
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
8
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
www.wisconsincheese.com
• 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
9
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
10
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
11
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
12
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
13
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
14
Pages Viewed on Smaller Canvas
Text extends
beyond screen
15
Flexible Resolution Design

As the screen resolution changes,
the content expands to
accommodate the varying screen
width
16
Design for Graphics
http://www.belden.com
http://www.nationalgallery.ie
http://www.emerils.com/emerilshome.html
17
Design the Whole Site

Plan the unifying themes and structures

Colors
Fonts

Page Layouts




Know your Audience
Create smooth transitions
Use a grid to provide visual structure
Use active white space
18
NASA Web Site
19
NASA Web Site for Kids
http://kids.msfc.nasa.gov
20
Create Smooth Transitions



Plan to create a unified look
Reinforce the identifying elements
Avoid random, jarring changes in format
21
Design Examples
http://www.dell.com
http://www.ups.com
22
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
23
Use of White Space
24
White Space Enhances Clarity
http://www.mars.com
25
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
26
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
27
Paper Based Reading Pattern
28
Screen Based Reading Pattern
29
Areas of Screen Importance
Company logo / navigation bar
Consistent
appearing
links
Most important and current information
Changing
Features
Suitable for reading content
30
Areas of Screen Importance
http://www.I2.com
http://www.siebel.com
31
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?
32
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
33
Hard To Read Links
http://www.jaguar.com
http://www.ludwig-drums.com
34
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
35
Identical Text and Graphics Links
36