Scribd Logo
Upload

Welcome to Scribd!

  • 151 views

    Web Design 1

    Uploaded by

    Will Kurlinkus
    The document discusses key principles of good web design, including usability, navigation, structure, and page design. It emphasizes that web design should make tasks obvious and easy for users to accomplish without unnecessary steps or confusion. Good design focuses on the goals and needs of primary users, limits levels of site structure, and provides clear visual hierarchy, navigation, and "you are here" indicators to help users orient themselves on the site.

    Copyright:

    © All Rights Reserved

    Web Design 1

    Uploaded by

    Will Kurlinkus
    151 views11 pages
    The document discusses key principles of good web design, including usability, navigation, structure, and page design. It emphasizes that web design should make tasks obvious and easy for users to accomplish without unnecessary steps or confusion. Good design focuses on the goals and needs of primary users, limits levels of site structure, and provides clear visual hierarchy, navigation, and "you are here" indicators to help users orient themselves on the site.

    Original Description:

    web design 1

    Copyright

    © © All Rights Reserved

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses key principles of good web design, including usability, navigation, structure, and page design. It emphasizes that web design should make tasks obvious and easy for users to accomplish without unnecessary steps or confusion. Good design focuses on the goals and needs of primary users, limits levels of site structure, and provides clear visual hierarchy, navigation, and "you are here" indicators to help users orient themselves on the site.

    Copyright:

    © All Rights Reserved
    151 views11 pages

    Web Design 1

    Uploaded by

    Will Kurlinkus
    The document discusses key principles of good web design, including usability, navigation, structure, and page design. It emphasizes that web design should make tasks obvious and easy for users to accomplish without unnecessary steps or confusion. Good design focuses on the goals and needs of primary users, limits levels of site structure, and provides clear visual hierarchy, navigation, and "you are here" indicators to help users orient themselves on the site.

    Copyright:

    © All Rights Reserved
    of 11

    Web Design 1: Bad Web Design

    Dr. Will Kurlinkus


    What Makes a Bad Website?

    1.  It’s foremost about usability.


    Can the user accomplish their
    tasks?

    2.  Who are the primary and


    secondary users of your
    website?

    3.  What are the top three tasks


    that users want to accomplish
    when they come to the site?
    Think in terms of use scenarios

    4.  What on this website impedes


    users from accomplishing https://
    those tasks? www.secondwindcoffeeh
    ouse.com
    Web Design: Don’t Make Me Think
    ¤  Don’t Make Me Think: Web design should be obvious and
    self-explanatory. Don’t create frustration and confusion.
    Let a user accomplish tasks as easily as possible.
    Remember that users always satisfice.
    Web Design: Home Page

    ¤  Goals: What is this website? What’s the company? How


    can I get from here to the place I need to be? Should
    spell out the big picture of the site.
    ¤  Clear navigation
    ¤  Clear imagery and logo
    ¤  Search bar
    ¤  Avoids needless words
    ¤  Resonates with target audience
    Web Design: Site Structure

    ¤  There generally should only have to be three levels of a


    site structure: Homepage>Level 1>Level 2>Level 3. That
    means 2-3 clicks ~30 seconds to get to what I want.

    ¤  Getting to these lower-level pages should be easy and


    obvious.

    ¤  Understanding what content belongs in what section


    and how to get a user to that content is one of the most
    difficult parts of web design.

    http://miamioh.edu/cas/academics/departments/english/
    Web Design: Page Structure

    ¤  Clear visual hierarchy

    ¤  Size, spacing, font

    ¤  Nesting

    ¤  Chunk pages into clear


    sections

    ¤  Avoid having too much on


    any page

    ¤  Beware of content below


    the fold

    ¤  Shell should stay roughly


    the same across pages
    Web Design: Page Structure
    Web Design: Navigation 1

    ¤  Let me get where I


    want to go

    ¤  Make terms obvious

    ¤  Give a search bar

    ¤  Navigation should also


    tell us where we are.
    ¤  .current { }
    Web Design: Navigation 2

    ¤  Sign Posting: Once I’m on a page I should be able to see the title
    of the specific page, have a visual marker of the page I’m on (a
    button is lit up), and know the path I took to get to that page
    (breadcrumb trail).

    ¤  Uniformity: When I click something, the title of the button should


    match the title of the page I’m sent to.
    Web Design: Trunk Test

    ¤  Usability: The Trunk Test: http://som.ou.edu/index.php/


    academics/future

    ¤  Imagine that you’ve been blindfolded and locked in the


    trunk of a car, then driven around for a while and dumped
    on a page somewhere deep in the bowels of a Web site. If
    the page is well designed, when your vision clears you
    should be able to answer these questions without hesitation:
    1.  What site is this? (Site ID)
    2.  What page am I on? (Page name)
    3.  What are the major sections of this site? (Sections)
    4.  What are my options at this level? (Local navigation)
    5.  Where am I in the scheme of things? (“You are here” indicators)
    6.  How can I search?
    What website would I choose?

    ¤  http://www.stellanova.com

    ¤  http://crimsonbakery.com

    ¤  Businesses without websites: Hurts Donuts, Classic 50s


    Drive In, Diamond Dogs,

    You might also like