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 hierarchy tree
”Doesn’t the Back button do that…?” – yes, but using the Breadcrumb 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 composition Page footer
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. Page composition 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. Page composition 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. Page composition Secondary pages 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 elements 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 (bad for SEO)!
Avoid!

28. Page composition