web design graphical user interface navigation. website prototyping plan your website take time to...

Web DesignGraphical User Interface

Navigation

Website PrototypingPlan your website

Take time to plan the goalAnd outcome for your siteBased on target audience

Take time to plan your user’s experienceGraphical User Interface (GUI)

Web design is all about interactionClicksScrollSearchWatch/listen/sign-up/buyRead/write/respond

The User ExperienceUser Interface Design

Make sure they know where they areMake sure they get what they want from your site

Information ArchitectureSite map (flowchart)Structure to provide user with best access to

informationMust be effective for user

User-centered Design Process -1

Top priority is to meet the needs of the user

Stages of the planning process:Define goals and strategy

Why does this site existResearch

Research the target audienceAnd what the user expects from the siteCreate user scenarios

Information architectureFlowchart or site map

Flowchart or Site Map

User-centered Design Process -2

SketchingOrganize content and site navigationPost-it notes

Wide Site StructureAll navigation shows (good for small sites)User can easily jump to any main page

with 1 clickDeep Site Structure

Offers only a few main navigation optionsMore secondary linksTopics are grouped and categorized

together

Wireframe the Layout of Each Page

Typically black and white sketches with placeholders for all elements

Includes: navigation, graphics and content

User-centered Design Process -3

Mockups Typically these are created after a wireframe Used to explore the visual development of the

siteLayoutColor scheme (color family)Graphics

Headers Logos

Navigation Menus Buttons

ImageryContent

Full Page Layout- Mockup

Main Page Components

Header with Navigation

Logo and Header

Navigation Bar

Left Navigation Bar and Content Area

180 px width

50 px height

Prototypes and User Testing

Rapid development of a site to demonstrate interactivity It’s impossible to use only print prototypes to fully

demonstrate user interaction A user needs to use a site to experience its interaction

Be willing to revise It’s unlikely you will get all aspects of the site and the

interaction correct on your first attempt Critiques from your team members are useful for improving

websites. Critiques are commonplace in the arts.

User testing is essential Usability testing is an important task Test the user’s ability to find information without confusion

Model SiteHome page and 2 sub-level pages

Header and page layout is unique on the home page

The two sub-level pages have the same layout

Navigation appears on top and bottom of page Project navigation is suggested to appear on the left side Rollover buttons should be active for the current page

Color theme appears in header text Button text and rollover button text colors Graphic bars designate specific areas of page

Placeholder images and text create a fully prototyped page

Site OrganizationMain site folder

.html files

images folder