Copyright © Terry Felke-Morris 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 1 CHAPTER 5

Copyright © Terry Felke-Morris Overall Design Is Related to the Site Purpose 2 Consider the target audience of these two sites.

Copyright © Terry Felke-Morris Hierarchical Organization is the most popular *  A clearly defined home page  Navigation links to major site sections  Often used for commercial and corporate websites 3 * Linear & Random are other methods

Copyright © Terry Felke-Morris 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 4

Copyright © Terry Felke-Morris Contrast 5 Website by Tian Fang

Copyright © Terry Felke-Morris Repetition 6

Copyright © Terry Felke-Morris Alignment 7 Website by Ashley Dix

Copyright © Terry Felke-Morris Proximity 8 Website by Liana Valentino

Copyright © Terry Felke-Morris Are you convinced about accessibility? Why? 9

Copyright © Terry Felke-Morris 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

Copyright © Terry Felke-Morris Design for Accessibility Web Content Accessibility Guidelines 2.0 WCAG 2.0 Based on Four Principles (POUR) 1. Perceivable Content must be Perceivable 2. Operable Interface components in the content must be Operable 3. Understandable Content and controls must be Understandable 4. Robust. Content should be Robust enough to work with current and future user agents, including assistive technologies 11 ◦ ◦

Copyright © Terry Felke-Morris Writing for the Web Read Section Making Color Choices  choose a color scheme e.g. (Adobe Kuler)  Choose from a photograph or imagephotograph or image  Begin with a favorite color or company color

Copyright © Terry Felke-Morris Use of Graphics & Multimedia Re-read section 5-7 because it is a lot of information to consume. Review them occasionally as a checklist. 13

Copyright © Terry Felke-Morris 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. 14

Copyright © Terry Felke-Morris 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 15 Do you really need to see a photo of my dog right now?

Copyright © Terry Felke-Morris 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 16

Copyright © Terry Felke-Morris MORE IMPORTANT TOPICS: Will discuss at beginning of chap 6 * wireframes * page layout techniques * browser compatibility Design for mobile devices: Chapters 7 &11 17

Copyright © Terry Felke-Morris Other can’t-miss strategies 18 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 Checklists Be sure to confer with the checklists at the end of the chapter while creating websites and afterwards… 19 Recommended online source Design for non-designers