![Page 1: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/1.jpg)
Web DesignGraphical User Interface
Navigation
![Page 2: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/2.jpg)
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
![Page 3: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/3.jpg)
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
![Page 4: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/4.jpg)
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
![Page 5: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/5.jpg)
Flowchart or Site Map
![Page 6: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/6.jpg)
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
![Page 7: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/7.jpg)
Wireframe the Layout of Each Page
Typically black and white sketches with placeholders for all elements
Includes: navigation, graphics and content
![Page 8: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/8.jpg)
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
![Page 9: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/9.jpg)
Full Page Layout- Mockup
![Page 10: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/10.jpg)
Main Page Components
![Page 11: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/11.jpg)
Header with Navigation
Logo and Header
Navigation Bar
![Page 12: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/12.jpg)
Left Navigation Bar and Content Area
180 px width
50 px height
![Page 13: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/13.jpg)
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
![Page 14: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/14.jpg)
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
![Page 15: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/15.jpg)
![Page 16: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/16.jpg)
![Page 17: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/17.jpg)
![Page 18: Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target](https://reader033.vdocuments.mx/reader033/viewer/2022051618/56649ccb5503460f94994057/html5/thumbnails/18.jpg)
Site OrganizationMain site folder
.html files
images folder