1 / 19

Learning Outcomes

Chapter 5. Learning Outcomes. In this chapter... common types of website organization principles of visual design your target audience clear , easy-to-use navigation Improve the readability of the text use graphics appropriately apply universal design to web pages

francesjohnson
Download Presentation

Learning Outcomes

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 5 Learning Outcomes • In this chapter... • common types of website organization • principles of visual design • your target audience • clear, easy-to-use navigation • Improve the readability of the text • use graphics appropriately • apply universal design to web pages • layout design techniques • best practices of web design

  2. Overall Design Is Related to the Site Purpose Consider the target audience of these two sites.

  3. Hierarchical Organization is the most popular * • A clearly defined home page • Navigation links to major site sections • Often used for commercial and corporate websites * Linear & Random are other methods

  4. CRAP Design Principles • Contrast • Add visual excitement and draw attention • Repetition • Repeat visual elements throughout design • Alignment • Align elements to create visual unity • Proximity • Group related items

  5. Contrast Website by Tian Fang

  6. Repetition

  7. Alignment Website by Ashley Dix

  8. Proximity Website by Liana Valentino

  9. Are you convinced about accessibility? Why?

  10. Design to Provide for Accessibility “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee • Who benefits from increased accessibility? • A person with a physical disability • A person using a slow Internet connection • A person using an old, out-dated computer • A person using a mobile phone • Legal Requirement: Section 508 • Standards: WCAG 2.0

  11. Design for Accessibility • Web Content Accessibility Guidelines 2.0WCAG 2.0 Based on Four Principles (POUR) • Perceivable Content must be Perceivable • Operable Interface components in the content must be Operable • Understandable Content and controls must be Understandable • Robust. Content should be Robust enough to work with current and future user agents, including assistive technologies • http://www.w3.org/TR/WCAG20/Overview • http://www.w3.org/WAI/WCAG20/quickref

  12. Writing for the WebRead Section 5.5 Making Color Choices • choose a color scheme e.g. (Adobe Kuler) • Choose from a photograph or image • Begin with a favorite color or company color

  13. Use of Graphics & Multimedia Re-read section 5-7 because we’re moving fast thru the next slides.

  14. Graphic Design Best Practices(1) • Be careful with large graphics! • Remember 60K recommendation • Use the alt attribute to supply descriptive alternate text • Be sure your message gets across even if images are not displayed. • If using images for navigation provide plain text links at the bottom of the page. • Use animation only if it makes the page more effective and provide a text description.

  15. Graphic Design Best Practices(2) • Choose colors on the web palette if consistency across older Windows/Mac platforms is needed • Use anti-aliased text in images • Use only necessary images • Reuse images • Goal: image file size should be as small as possible Do you really need to see a photo of my dog right now?

  16. Navigation Design • Make your site easy to navigate • Provide clear navigation in the same location on each page • Most common – across top or down left side • Consider: • Navigation Bars • Breadcrumb Navigation • Using Graphics for Navigation • Dynamic Navigation • Site Map • Site Search Feature

  17. MORE IMPORTANT TOPICS:Will discuss at beginning of chap 6* wireframes * page layout techniques* browser compatibilityDesign for mobile devices: Chapter 11

  18. Other can’t-miss strategies • Above the fold: the most attention-getting items placed in first 600px vertically • White space: Placing blank space around blocks of information. Increases readability. Allows items to stand out.

  19. Checklists Be sure to confer with the checklists at the end of the chapter while creating websites and afterwards… Recommended online source Design for non-designers http://www.designforfounders.com/tips-and-hacks

More Related