Website Design Part 1
Upcoming SlideShare
Loading in...5

Website Design Part 1






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Website Design Part 1 Website Design Part 1 Presentation Transcript

  • Website Design
    Understanding the Basics
  • Core Principles
    • Know your audience and why they are coming to your site
    • Think usability above all else.
    • No one is reading your website.
    • Measure your results.
  • The Homepage
    Users spend an average of 30 seconds on your home page. Here’s what you need to communicate in that time:
    What site they have arrived on
    What benefits the organization offers them
    Something about the organization and it’s products/services
    Choices and how to get to the most relevant section
    • Do you Know Where You are?
    • What are the benefits of this organization to you? (WIIFM)
    • Can you tell me something about recent developments?
    • Do you know how to get to relevant sections?
  • Page Elements
    • Basic Page Elements that Users Look For:
    • Perceptible menus, with some graphic or color delineation, across the top and usually on the left
    • A Home button in or near the menu on the far left of all pages except the homepage
    • A logo in the upper-left corner of all pages (clickable to the home page)
    • An open search field in the upper-right corner of all pages
    • A shopping cart icon in the upper-right corner of all pages
    • A login/out feature in the upper-right corner of all pages.
    • Utility navigation at the very top or very bottom of pages that is subtle and visually weaker than the main/global navigation
  • Utility Navigation
  • Sections and Headings Save Time
    Headings that describe the information below them save users time
    Offer white space, borders, and color to help users see the sections and the topics
    Chunk information
    Provide headings for each section
    Be careful not to make the headings look so big or colorful that they look like an add or promotion
  • Interlude – Sound Smart Definition
    Information Architecture –
    The combination of organizing, labeling, and navigation within an information system
    The structural design of an information space to facilitate task completion and intuitive access to content
    The art and science of classifying and structuring websites to help people find and manage information
    Source: Rosenfeld, L and Morville, P (2002). Information Architecture for the World Wide Web (2nd Edition) Sebastapol, CA: O’Reilly Media, Inc.
  • Navigation
    Navigation should be consistent, simple, and persistent
    Branding and marketing in menus confuses people
    A link is a promise. The link name sets the user’s expectation for what is to come
    Use the most specific words you can for links. Try to avoid using links titled “more”, etc.
    Links should change colors when clicked
    Use breadcrumbs
  • “Yahoo” Style navigation may satisfy your various coworkers, who all think their stuff belongs on the home page, but there is a reason why Google is the preferred search engine
    Avoid Branding in Navigation. It doesn’t make sense to your user
  • Fundamental (and boring) elements
    Contact Us – only 2% of users ever look at the contact us section of a website. However, contact adds credibility to your organization, and helps users who can’t find the information they are looking for
    Privacy Policy – users almost never look at the privacy policy, but it adds to your credibility and should be included in the utility navigation
  • Images
  • Characteristics of “Good” Images
    High contrast and high quality
    Cropped, rather than overly reduced, when necessary to fit a small space
    Not excessively detailed; easy to interpret
    Highly related to the content on the page, exciting
    Smiling and approachable faces
    People looking at (or at least facing) the camera
    Clear instructions or information
    • Smiling Face, looking at the camera
    • Medium quality, contrast
    • Highly related to the content
    • Easy to interpret
  • Characteristics of Ignored Images
    Are low contrast and low quality
    Are too busy for the space
    Look like advertisements
    Are not related to the content or only slightly related
    Are boring
    Include people or objects that are generic or obvious stock art
    Are cold, fake, or too polished
    • Picture does not include faces
    • Is not related to the program, and is not easy to interpret
    • Is boring
    • Generic and obvious stock art
    • No relation to the program
    • Faces are not looking at the camera
    • Picture is only slightly related to the content
    • Picture is boring
  • Do’s and Don’ts of Web Design
    Do make sure that links change color when visited
    Do NOT have a link open in a new browser window – you’ll only frustrate your customer (exception: PDFs and other documents)
    Do NOT include vaporous content and empty hype
    Do make sure you content is scan able and easy to read
  • Do NOT use Flash
    Do keep videos and other multimedia elements short
    Do include videos that enhance your content.
    Do NOT include videos simply because you can
  • Do limit the amount your user has to scroll
    Do NOT use splash pages
    Do make sure your content is current and valid
  • Typography – The Basics
    Use sans serif fonts
    When in doubt, use Verdana
    Limit the number of font styles (and color)
    For a general audience, use 10-12 point font
    For a senior audience use 12-14 point font
    Black text on white background is the most readable, followed by blue text on white background
  • Writing for the Web
    Content should be the focus of your design. Content and headers are noticed first – even before images.
    Make sure your content is scan able
    Highlight key words
    Use concise and descriptive titles and headings
    Use bulleted and numbered lists
    Use simple, conversational language
    Tone down marketing hype
    Summarize key points and pare down.
  • Measure & Test
    Always measure your site and test your users against your expectations
    For measuring, use Google Analytics or a similar program to find out what pages are being most looked at, how long people are spending on each page, and where they are coming from.
    Conduct regular usability tests with your users. Don’t simply rely on surveys. Ask your users to conduct certain tasks/find certain information and watch how they go about doing it. Is your site set-up to be usable?