designing for the web l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Designing for the Web PowerPoint Presentation
Download Presentation
Designing for the Web

Loading in 2 Seconds...

play fullscreen
1 / 31

Designing for the Web - PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on

Designing for the Web. Web site design Web page design Web usability. Your Goal. Create a web site that is: useful compelling attractive easy to use satisfying. Web Development Team. Content provider Information architect Graphic designer Writer / editor Programmer Project Manager

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Designing for the Web' - robyn


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
designing for the web
Designing for the Web
  • Web site design
  • Web page design
  • Web usability

Web Design Guidelines by Scott Grissom

your goal
Your Goal
  • Create a web site that is:
    • useful
    • compelling
    • attractive
    • easy to use
    • satisfying

Web Design Guidelines by Scott Grissom

web development team
Web Development Team
  • Content provider
  • Information architect
  • Graphic designer
  • Writer / editor
  • Programmer
  • Project Manager
  • Usability Expert

Web Design Guidelines by Scott Grissom

mission statement
Mission Statement
  • What are you creating and why?
  • Who will use it?
  • What will they want to do?
  • How will you know if your site is successful?

Web Design Guidelines by Scott Grissom

site design
Site Design
  • Content
  • Organization
  • Navigation system

Web Design Guidelines by Scott Grissom

content
Content
  • What do your visitors want?
  • What information do you want to provide?
  • What do similar organizations provide?
  • What do you already have?
  • What do you need to create?

Web Design Guidelines by Scott Grissom

activity 1
Activity #1
  • Develop a mission statement
    • one sentence
    • must contain audience, purpose, and content
  • Develop an initial inventory of content
    • on your own

Web Design Guidelines by Scott Grissom

organization schemes
Organization Schemes
  • White pages
  • Yellow pages
  • Supermarket
  • Your computer

Web Design Guidelines by Scott Grissom

hierarchy
Hierarchy
  • no more than seven categories
  • three clicks and you are there

Home Page

Topic 1

Topic 2

Topic 3

Topic 4

Topic 5

Topic 6

Topic 7

1

2

3

4

5

6

7

Web Design Guidelines by Scott Grissom

navigation system
Navigation System
  • How do I get home?
  • Where am I?
  • Where else can I go?

Web Design Guidelines by Scott Grissom

examples
Examples
  • across the top
  • down the left side

Web Design Guidelines by Scott Grissom

additional navigation
Additional Navigation
  • Site map
    • overall view
  • Index
    • alphabetical list of terms
  • Search facility
    • requires special expertise

Web Design Guidelines by Scott Grissom

labels are important
Labels are important
  • Strive to make labels clear & concise
  • Be consistent
  • Follow convention
    • Home / Main
    • Search / Find
    • Contact Us
    • About Us
    • Help / FAQ
    • News / What’s New

Web Design Guidelines by Scott Grissom

activity 2
refrigerator

socks

living room

dictionary

milk

bureau

kitchen

bookshelf

bedroom

a live elephant

Activity #2

Web Design Guidelines by Scott Grissom

web page design
Web Page Design
  • KISS

Web Design Guidelines by Scott Grissom

home page
Home Page
  • What can I do at this site?
  • No scrolling should be necessary!
  • Attractive
  • This is your first impression

Web Design Guidelines by Scott Grissom

web writing
Web Writing
  • remember visitors only scan
  • keep it short
    • at least 50% of normal text
  • use headings
  • use bullet lists
  • put conclusion first

Web Design Guidelines by Scott Grissom

common page guidelines
Common Page Guidelines
  • dark text on light background
  • limit visitor scrolling
  • limit use of images
  • limit use of animations

Web Design Guidelines by Scott Grissom

be aware of browser features
Be Aware of Browser Features
  • Back button
    • do not provide your own
  • Colored links
    • do not change default
  • Bookmarks
    • provide meaningful title

Web Design Guidelines by Scott Grissom

proofread
Proofread
  • errors will kill the professional appearance of your site
  • use a spell checker
  • use a grammar checker?
  • ask someone else to check grammar

Web Design Guidelines by Scott Grissom

web usability measures
Web Usability Measures
  • What are some indications of ‘user friendly’?
  • Ease of learning
  • Improved user performance
  • Low user error rate
  • User satisfaction

Web Design Guidelines by Scott Grissom

web design guidelines
Web Design Guidelines
  • Know the user
  • Involve the user during design
  • Design a navigation system
    • Where am I?
    • How can I get home?
    • Where else can I go?

Web Design Guidelines by Scott Grissom

usability evaluation strategies
Usability Evaluation Strategies
  • Checklist
  • User testing
  • Usability inspection
    • bring in a usability expert

Web Design Guidelines by Scott Grissom

usability checklist
Usability Checklist
  • Are all links correct?
  • Is there a link to home on every page?
  • Is navigation consistent on every page?
  • Does each page have an appropriate title?
  • Did I proofread all content?
  • Create user profiles
    • can they do what they will likely want to do?

Web Design Guidelines by Scott Grissom

user testing
User Testing
  • Identify appropriate users
  • Select appropriate tasks
  • Watch, listen, but don’t talk!
  • Ask volunteers to complete a survey

Web Design Guidelines by Scott Grissom

a typical survey
A Typical Survey
  • Strive for unbiased questions
  • Use a rating scale 1-5

Finding the information was:

difficult 1 2 3 4 5 easy

Appearance of the site was:

ugly 1 2 3 4 5 beautiful

Overall, the site was:

really sucky 1 2 3 4 5 excellent

Web Design Guidelines by Scott Grissom

some sample sites
Some Sample Sites
  • Let’s take a look at some of your favorite sites….

Web Design Guidelines by Scott Grissom

activity 3
Activity #3
  • Go to a competitors site
  • Kick the tires and look for usability problems
  • What do you like?
  • What do you think will cause problems?
  • What do you hate?

Web Design Guidelines by Scott Grissom

additional resources
Additional Resources
  • Usable Web
    • the mother of all sites
    • http://www.usableweb.com/
  • Yale Web Style Guide
    • http://info.med.yale.edu/caim/manual/contents.html
  • Link Checking Software
  • Xenu's Link Sleuth - freeware
    • http://home.snafu.de/tilman/xenulink.html

Web Design Guidelines by Scott Grissom

summary 1
Summary (1)
  • Web site design
    • start with a mission statement
    • plan and organize the site
    • design a navigation system
  • Web page design
    • be concise
    • be consistent
    • proofread

Web Design Guidelines by Scott Grissom

summary 2
Summary (2)
  • Web usability
    • you are NOT the typical visitor
    • find out what problems the typical visitor has with your site
  • Web Usability Evaluation
    • discover usability problems BEFORE it is too late

Web Design Guidelines by Scott Grissom