Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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 Copyright © Terry Felke-Morris 1 Overall Design Is Related to the Site Purpose Consider the target audience of these two sites. Copyright © Terry Felke-Morris 2 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 Copyright © Terry Felke-Morris 3 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 Copyright © Terry Felke-Morris 4 Contrast Website by Tian Fang Copyright © Terry Felke-Morris 5 Repetition Copyright © Terry Felke-Morris 6 Alignment Website by Ashley Dix Copyright © Terry Felke-Morris 7 Proximity Website by Liana Valentino Copyright © Terry Felke-Morris 8 Are you convinced about accessibility? Why? Copyright © Terry Felke-Morris 9 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 Copyright © Terry Felke-Morris 10 Design for Accessibility Web Content Accessibility Guidelines 2.0 WCAG 2.0 Based on Four Principles (POUR) 1. 2. 3. 4. 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 Copyright © Terry Felke-Morris 11 Writing for the Web Read 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 Copyright © Terry Felke-Morris 12 Use of Graphics & Multimedia Re-read section 5-7 because it is a lot of information to consume. Review them occasionally as a checklist. Copyright © Terry Felke-Morris 13 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. Copyright © Terry Felke-Morris 14 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 Do you really need to see a photo of my dog right now? Goal: image file size should be as small as possible Copyright © Terry Felke-Morris 15 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 (i.e. dropdown menu) Site Map Site Search Feature Copyright © Terry Felke-Morris 16 MORE IMPORTANT TOPICS: Will discuss at beginning of chap 6 * wireframes * page layout techniques * browser compatibility Design for mobile devices: Chapters 7 &11 Copyright © Terry Felke-Morris 17 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. Copyright © Terry Felke-Morris 18 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 Copyright © Terry Felke-Morris 19