2. COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7

3. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Context Design Evaluation 3 Fundamentals: Reminder

4. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 "Man is the great pattern-maker and pattern perceiver. No matter how primitive his situation, no matter how tormented, he cannot live in a world of chaos." Edmund Carpenter Introduction

5. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Harmony All elements fit together seamlessly Movement from one element to another is effortless When all blend into a satisfying whole Universal Principles (Howlett)

6. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Balance Universal Principles (Howlett)

7. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Simplicity Is not the opposite of complex Does not mean dull, boring Simplicity is Clarity Restrained Direct Universal Principles (Howlett)

8. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Any Comments?

9. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Home Page Index Page Contents page Search Page FAQ’s Page Standard Page Types

10. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Site title & paging buttons Page title Link to site home Local Links Text & graphics (main page content) Jump-to-link Footer Standard Page Elements

11. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Objective: To establish the basic layout for your pages, including the space Templates then set the placement for: Page titles Subtitles Navigation buttons Grids

12. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 From Grids to Templates

13. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Chunking Information Write for scannability: don't require users to read long continuous blocks of text (Nielsen 1997) Modularity

14. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Navigation Within Pages CW- After the action is taken, will users understand feedback? Telephone Test Fidelity ‘Greeking’ Paper prototypes Evaluation

15. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Template 1

16. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Template 3

17. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 1.Main content selections for this page 2.Page title 3.Person responsible for this page 4.Intranet-wide navigation (e.g., intranet home, search) 5.Last updated date 6.Intranet identifier/logo 7.Site navigation (e.g, major sections of this section of the intranet) 8.Confidentiality/security (e.g, Public, Confidential, etc.) 9.Site news items Which is Which?

18. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Back By 9.55 Monday Lecture at 11.00 (EC) & 1.00 (EC/A) Estore design Break

19. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Graphic Design Principles 1 Scale Size is important Proportion Visual Impact Contrast Too much Too little

20. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Hierarchy What comes 1st…2nd…3rd etc. Layering A sense of priority Emphasis & Focus Creates contrast Acts as a directional signal Graphic Design Principles 2

21. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 White Space (negative space) use of.. Colour Cultural conditioning Grouping consistent with common sense, logical organisation Graphic Design Principles 3

22. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Monitor size Scrolling Printing Wide Pages..loss of information Graphic Design Principles 4

23. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Universal Principles Grids (template) Consistency Evaluate Guideline checking as part of inspection Summary

24. COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 A Few Specific Guidelines Establish a high-to-low level of importance of information (hierarchy) Place logos, text, buttons etc., in a consistent position on all pages Make subtle use of unused space (white space) on pages Now find your own!