1 / 18

Web Design

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 audience Take time to plan your user’s experience Graphical User Interface (GUI) Web design is all about interaction Clicks

daryl
Download Presentation

Web Design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Graphical User Interface Navigation

  2. Website Prototyping • Plan your website • Take time to plan the goal • And outcome for your site • Based on target audience • Take time to plan your user’s experience • Graphical User Interface (GUI) • Web design is all about interaction • Clicks • Scroll • Search • Watch/listen/sign-up/buy • Read/write/respond

  3. The User Experience • User Interface Design • Make sure they know where they are • Make sure they get what they want from your site • Information Architecture • Site map (flowchart) • Structure to provide user with best access to information • Must be effective for user

  4. User-centered Design Process -1 • Top priority is to meet the needs of the user • Stages of the planning process: • Define goals andstrategy • Why does this site exist • Research • Research the target audience • Andwhatthe user expectsfrom the site • Create user scenarios • Information architecture • Flowchart or site map

  5. Flowchart or Site Map

  6. User-centered Design Process -2 • Sketching • Organize content and site navigation • Post-it notes • Wide Site Structure • All navigation shows (good for small sites) • User can easily jump to any main page with 1 click • Deep Site Structure • Offers only afew main navigation options • More secondary links • Topics are grouped and categorized together

  7. Wireframe the Layout of Each Page • Typically black and white sketches with placeholders for all elements • Includes: navigation, graphics and content

  8. User-centered Design Process -3 • Mockups • Typically these are created after a wireframe • Used to explore the visual development of the site • Layout • Color scheme (color family) • Graphics • Headers • Logos • Navigation • Menus • Buttons • Imagery • Content

  9. Full Page Layout- Mockup

  10. Main Page Components

  11. Header with Navigation Navigation Bar Logo and Header

  12. Left Navigation Bar and Content Area • 180 px width • 50 px height

  13. 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

  14. Model Site • Home page and 2 sub-level pages • Header and page layout is unique on the home page • The two sub-level pageshave 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

  15. Site Organization • Main site folder • .html files • images folder

More Related