1 / 19

Chapter 17 Designing for the Web

Chapter 17 Designing for the Web. Ryan Galloway Andy O’Neil Joe Ahn. Introduction. Five aspects of web design Design principles for web sites 2. Designing web sites 3. Designing home pages and interior pages 4. Design issues for web pages 5. Writing the content of web pages.

bing
Download Presentation

Chapter 17 Designing for the Web

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. Chapter 17Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn

  2. Introduction • Five aspects of web design • Design principles for web sites 2. Designing web sites 3. Designing home pages and interior pages 4. Design issues for web pages 5. Writing the content of web pages

  3. 1. Design Principles for Web Sites (HOME-RUN) • High-quality content • Often updated • Minimal download time • Ease of use • Relevant to user’s needs • Unique to the online medium • Net-centric corporate culture

  4. 2. Designing web sites • Designing the web site structure • Helping the users know where they are • Helping the users navigate around the site • Navigation aids

  5. Designing the web site structure • Most common is the hierarchical structure • Several points to consider • How deep and how wide should the hierarchy be? • Is it better to divide a block of information into several short pages or leave it as one long page? • Can several web pages be combined into one larger one? • Does the structure of the site reflect the structure of the tasks the users want to carry out? • How should the site content be grouped?

  6. Deep Hierarchical Structure Shallow Hierarchical Structure

  7. Helping the users know where they are • Clearly label each page • Have a logo in the top-left corner and the name of the site

  8. Helping the users navigate around the site • Three types of links • Structural navigation links • Associative links • “See Also” links • Text links • Should be distinctive and consistent • Should be discriptive • Other alternatives to text links • Buttons and selectable graphical images • Drop-down lists

  9. Navigation aids • Site maps • Breadcrumb trail • Geographical or visual maps • Navigation bars • Drop-down lists

  10. Site Map and Simple List Breadcrumb Trail and Rows of Tabs

  11. Single Line of Tabs and Drop-down Lists

  12. 2. Designing home pages and interior pages • Home page: Tells the users where they are and what the site does. Contains all or some of the following • Name or logo of the organization usually in top-left corner with tagline • Name of the site • Navigation aid • Summary of news, promotions, or changes • Summary of key content for first-time visitors • Search facility for experienced users • Some sites use a flash page

  13. Interior pages: Contains all or some of the following • Typically contains more content and less introductory and navigational information • Logo and name of site may be smaller and less intrusive but still helps the user stay oriented • Link to homepage • Links to pages within level of hierarchy

  14. 3. Design issues for web pages • Widgets on web pages • Scrolling • Designing for different screens and platforms • Using the screen area effectively • Improving download time • Using style sheets • Designing for accessibility

  15. Homepage that needs scrolling

  16. 4. Writing the content of web pages • Keep text to a minimum (about 50% of what would be included in print form) • See if the introductions are necessary • Use numbered or bulleted lists and tables for organizing information • Check whether the text actually adds value from the user’s point of view

  17. Help users to scan • Use headings and subheadings as appropriate • Use meaningful headings • Bulleted and numbered lists help • Highlight and emphasize important issues and topics

  18. Dividing long blocks of text into separate sections • Could be done using same page with associative links • Split text into chunks where each chunk relates to a different topic

  19. Questions?

More Related