1. Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris

2. MAKING COLOR CHOICES  How to choose a color scheme?  Monochromatic  http://meyerweb.com/eric/tools/color-blend  Choose from a photograph or other image  http://www.colr.org  Begin with a favorite color  Use one of the sites below to choose other colors  http://www.colorschemedesigner.com  http://www. colorjack.com  http://www.colorsontheweb.com/colorwizard.asp

3. Copyright © Terry Felke-Morris USE OF COLOR Appealing to Kids & Preteens 3 Appealing to Young Adults Appealing to Everyone Appealing to Older Adults

4. Copyright © Terry Felke-Morris EXAMPLES  http://nkunorse.com/ http://nkunorse.com/  http://www.delta.com/ http://www.delta.com/  www.pg.com www.pg.com 4

5. Copyright © Terry Felke-Morris CHECKPOINT 1. List the four basic principles of design. View the home page of your school and describe how each principle is applied. 2. View http://www.walmart.com, http://www.mugglenet.com, and http://www. sesamestreet.org/muppet Describe the target audience for each site. How do their designs differ? Do the sites meet the needs of their target audiences? 5

6. Copyright © Terry Felke-Morris USE OF GRAPHICS & MULTIMEDIA File size and dimension matter Provide for robust navigation Antialiased/aliased text considerations Provide alternate text Use only necessary multimedia 6

7. 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. 7

8. 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 8 Do you really need to see a photo of my dog right now?

9. Copyright © Terry Felke-Morris NAVIGATION DESIGN  Make your site easy to navigate  Provide clearly labeled 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  “Skip to Content” Hyperlink 9

10. Copyright © Terry Felke-Morris WWW.NKU.EDU  Provide clearly labeled navigation in the same location on each page  Breadcrumb Navigation  Site Map 10

11. Copyright © Terry Felke-Morris WIREFRAME  A sketch of blueprint of a web page  Shows the structure of the basic page elements, including:  Logo  Navigation  Content  Footer

12. Copyright © Terry Felke-Morris WEB PAGE DESIGN PAGE LAYOUT Place the most important information "above the fold" Use adequate "white" or blank space Use an interesting page layout 12 This is usable, but a little boring. See the next slide for improvements in page layout.

13. Copyright © Terry Felke-Morris WEB PAGE DESIGN PAGE LAYOUT(2) Better 13 Best Columns make the page more interesting and it’s easier to read this way. Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.

14. Copyright © Terry Felke-Morris PRIME PROPERTIES  file:///J:/INF286/Prime/Chapter4/index.html file:///J:/INF286/Prime/Chapter4/index.html 14

15. Copyright © Terry Felke-Morris PAGE LAYOUT DESIGN TECHNIQUES Ice Design ◦ AKA rigid or fixed design ◦ Fixed-width, usually at left margin Jello Design ◦ Page content typically centered ◦ Often configured with a fixed or percentage width such as 80% Liquid Design ◦ Page expands to fill the browser at all resolutions. 15

16. Copyright © Terry Felke-Morris DESIGN FOR THE MOBILE WEB Design Considerations: Small screen size Low bandwidth Font, color, and media issues Awkward controls, limited processor and memory Functionality 16

17. Copyright © Terry Felke-Morris ICE DESIGN  http://www.league.org/ http://www.league.org/  www.nku.edu www.nku.edu 17

18. Copyright © Terry Felke-Morris JELLO DESIGN  http://www.pbs.org/ http://www.pbs.org/  http://www.officedepot.com/ http://www.officedepot.com/ 18

19. Copyright © Terry Felke-Morris LIQUID DESIGN  https://moodle.org/ https://moodle.org/  Read page 207 19

20. Copyright © Terry Felke-Morris WEB PAGE DESIGN LOAD TIME  Watch the load time of your pages  Try to limit web page document and associated media to under 60K on the home page 20

21. Copyright © Terry Felke-Morris DESIGN CONSIDERATIONS  Above the fold  Place important information above the fold.  www.nku.edu www.nku.edu  White space  Prime Properties  file:///J:/INF286/Prime/Chapter4/index.html file:///J:/INF286/Prime/Chapter4/index.html  Avoid Horizontal Scrolling  www.nku.edu 21

22. Copyright © Terry Felke-Morris WEB PAGE DESIGN SCREEN RESOLUTION Test at various screen resolutions ◦ Most widely used: 1024x768, 1280x800, and 1366x768 Design to look good at various screen resolutions ◦ Centered page content ◦ Set to either a fixed or percentage width 22

23. Copyright © Terry Felke-Morris WEB PAGE DESIGN BROWSER COMPATIBILITY Web pages do NOT look the same in all the major browsers Test with current and recent versions of: ◦ Internet Explorer ◦ Firefox ◦ Chrome, Safari, Opera ◦ Design to look OK in commonly used browsers (like Internet Explorer) and implement new technologies (like CSS3) in modern browsers (like Safari & Firefox) – Progressive Enhancement 23

24. Copyright © Terry Felke-Morris WEB DESIGN BEST PRACTICES CHECKLIST http://terrymorris.net/bestpractices 24 Page Layout Browser Compatibility Navigation Color and Graphics Multimedia Content Presentation Functionality Accessibility