Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— 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 and strategy Why does this site exist Research Research the target audience And what the user expects from 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 a few 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 Logo and Header Navigation Bar

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

15

16

17

18 Site Organization Main site folder.html files images folder


Download ppt "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."

Similar presentations


Ads by Google