Navigation & Interface Website Designs Electronic Writing & Publishing Dr. Bowie.

Slides:



Advertisements
Similar presentations
Internet Basics Instructors : Connie Hutchison & Christopher McCoy.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Web design criteria University of Stellenbosch. What is on a web page? Navigational elements Text Graphics.
© 2010 Delmar, Cengage Learning Chapter 4 Working with Links.
Interface / navigation COM 366 Web Design & Production.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Day 9 Navigation Heuristic evaluation. Objectives  Look at some simple rules on navigation  Introduction to Heuristic Evaluation.
Copyright 2003 The McGraw-Hill Companies, Inc CHAPTER Application Software computing ESSENTIALS    
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.
THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.
Navigation & Interface Website Designs Dr. Bowie.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
211 Multimedia Web Design Lesson 7 Planning / Designing a Site.
Microsoft Expression Web - Illustrated Unit B: Creating a Web Site.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Slide 1 Consider the page layouts for: Layout design – does it look balanced and even Size of box relative to its importance – the Heading (or title) of.
Web-designWeb-design. Web design What is it? Web-design features Before…
Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist
Ball State University Digital Media Repository …a project of the University Libraries Scholarly Resources for Teaching, Learning, and Research Ball State.
The Internet. An interconnected network of computers globally Computers are able to communicate and share information with one another from remote locations.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
© 2011 Delmar, Cengage Learning Chapter 5 Working with Links and Navigation.
© 2005 Pearson Education Inc. Publishing as Longman Student Resource Guide: Reading and Evaluating Internet Sources Active Reading Skills, 1/e Kathleen.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.
Chapter 1 Review Chapter 2 Whatcha Gonna Do???
 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.
Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.
Urban Farming ( Urban Farming ( BK FarmyardsUrban Farming URL S: The.
Principles of effective web design NOTES Flo Morris-Duffin.
MODULE 3 Internet Basics © Paradigm Publishing, Inc.1.
History Internet – the network of computer networks that provides the framework for the World Wide Web. The web can’t exist without the internet. Browser.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Please open a file manager window and Dreamweaver.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Web Site Development - Process of planning and creating a website.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Presentation by Jason Schlemmer. Making the website clear – explain who you are and what you do.
MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance.
{ User Centered Design Final Presentation Donia Canaveral }
UNIT 3 – WEB DESIGN FINAL PROJECT – DAY 2 Exploring Computer Science – Lesson 3-11.
COMP 143 Web Development with Adobe Dreamweaver CC.
Working with Links and Navigation
Section 6.1 Section 6.2 Write Web text Use a mission statement
2.2 Internet Basics.
Microsoft PowerPoint This is the introduction to PowerPoint.
Web-based structures, links and testing
Working with Links and Navigation
Section 7.1 Section 7.2 Identify presentation design principles
Basics of Website Development
Web-design.
Microsoft PowerPoint This is the introduction to PowerPoint.
Web Design and Development
Layout - you need to understand that a simple navigation bar:
Windows Internet Explorer 7-Illustrated Essentials
Page plans A01 Design.
Browser Engine How it works…..
HCI and Hypermedia/WWW
Creating a Website.
CMP Creating Your Personal and Small Business Web Sites
University of Warith AL-Anbiya’a
Microsoft PowerPoint This is the introduction to PowerPoint.
Presentation transcript:

Navigation & Interface Website Designs Electronic Writing & Publishing Dr. Bowie

Type 1: Long list of links Name descriptive: site design (especially homepage) is a long list of text links Design outdated, but common before 2000

Type 2: Simple rectangle Rectangular shape, designed to fit in browser window (no scrolling) with 1-2 graphics and categorical links Common today May be similar to other types

Type 3: Short L Similar to short rectangle in shape, but often larger Has clear header bar & left menu bar that are one piece or related Common late 1990’s to early 2000’s, being replaced by “Long L” type

Type 4: Long L (or high density) Has header and left menu bar of “Short L” May have links in header area Has high density of images, links, and info Common since 1997, but often becomes more dense over time

Type 5: Portal type Horseshoe or inverted U style Has “Long L” plus a right link menu Explosive growth in early 2000’s, becoming more and more popular

Type 6: The Blog Normally an two or three column layout with 1-2 narrow columns for navigation and one wider content column Includes a larger header region Common since the “birth” of blogs for blogs, but more recently is being used for a variety of “non- blog” sites

Other types Lots of other types exist, but most sites lean towards these most common types Example: m/ m/

Designing your Structure Make all links obvious Utilize the “rhetoric of departure” and “rhetoric of arrival” –rhetoric of departure: let people know where they are going by crafting links with clear destinations –rhetoric of arrival: let people know where they have arrived with site design Compose clear and brief links and menu items Reveal the site structure with your design (map-like) Provide “clear, brief, and highly conspicuous orientation information” on the main page (Farkas & Farkas 350) Include basic orientation information including links to main page on all pages Use a consistent interface design Make each page clear in the site structure Organize information by common patterns (alphabetical, numerical, chronological, see Jeney 44)

Consider Navigation Methods Website navigation methods: how people find their way around the site –Landmark: route-based strategy that relies of geographic features draws on the use of consistent navigational links, use of in-text links, use of “breadcrumbs” navigation structure –Global: mental map-based strategy that includes cardinal directions and distance measures includes the use of browser controls like “go” and “history,” use of the search engine on the website, use of a site map, use of browser “find” command, and the use of the URL address bar to type in URLs

Think about what types will work for you! Have Fun Source for slides 2-5 : Rayn et al. “The Evaluation of US State government homepages..” IJHCS. Also used Farkas & Farkas “Guidelines for Designing Web Navigation” TC and Jeney textbook chapter 3