1. PBA Front-End Programming Page Composition

2. Page composition Now we know about – Colors – Fonts, texts and editorial style – Links and navigation – … How do we put it all together on a specific web page…?

3. Page composition No single page composition ”style” will fit all purposes… …BUT for mainstream web pages, a fairly common page composition ”pattern” has emerged over the years

5. Page composition Isn’t it boring just to use a ”standard” page layout…? Maybe, but consider – It is a well-established layout – Not all parts are mandatory – Still many degrees of freedom left (colors, graphics, text,…) – Can you really ”beat” the standard…?

6. Page composition Page header – Establish site identity – Global navigation (Home, about, contact,…) – Search, shopping cart,… – Home link (easy way home) – Acts like a ”miniature version” of the web site

7. Page composition Header variations

8. Page composition Breadcrumb navigation

9. Page composition Breadcrumb navigation – ”Where am I…?” – Particularly useful with large, deep, websites – Not really necessary on small websites – Enables the user to skip back to levels high up in the hieratchy tree – ”Doesn’t the Back button do that…?” – yes, but using the Breadcrump is easier

10. Page composition Search

11. Page composition Scan columns (what’s that…?) Columns at the edge of the page where users will ”scan” for useful information – Contact information – Advertisments – ”News of the day” – …

12. Page composition Main content area Hard to provide general rules, but – Include clear page title – Update breadcrumb navigation – Include go-to-top links on long pages – Use general rules for text formatting – Include dates where relevant

13. Page composition

14. Page footers Usually contains useful, ”static”, information – Author information – Copyright statements – Contact details – Useful general links – …

15. Page composition I have a web site to create, where do I start on page composition…? Create page templates to be filled with actual content Start with ”internal” page templates! Work from the inside towards the (unique) home page (landing page)

16. Page composition

17. Why not start with the home page…? Home page is ”unique”, only one instance Internal pages will occur in many instances The internal pages will thus dominate the users experience of the site Do not let the design of a single page ”hijack” the entire site design!

18. Page composition Internal page templates Created by Information Architect (and possibly Art Director) Main purposes – Logical fit to the information architecture – Provide consistency across the website – Establish ”look-and-feel” of the website

19. Page composition More than one template might be necessary… …but should have consistent ”look and feel”

20. Page composition

21. Secondary page templates In principle like internal page templates Help establish ”a sense of the vertical dimension in the site”… What does that mean!?

22. Page composition

23. Secondary page act as sub- section home pages They must provide navigation to underlying sub-section, and to main home page They should establish some level of identity – could be alternative landing pages

24. Page composition The home page itself… Four main elements – Identity – Navigation and Tools – Content – Timeliness

25. Page composition Where should your focus be…? – Does CNN need to establish identity…? – Does Google need to worry about timeliness…? – Does Coca-Cola need to worry about content…? The exact balance between the element will be completely situation-specific General design principles still apply Consistent with secondary and content pages

27. Page composition And finally…do not put a fancy Flash animation ”in front of” your website Users will be annoyed – some will go away, others click ”skip intro” Can prevent web crawlers from getting access to the real page – and thus the website! Avoid!

28. Page composition