PBA Front-End Programming

Page Composition

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…?

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

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…?

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

Page composition

• Header variations

Page composition

• Breadcrumb navigation

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

Page composition

• Search

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”– …

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

Page composition

Page composition

• Page footers• Usually contains useful,

”static”, information– Author information– Copyright statements– Contact details– Useful general links– …

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)

Page composition

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!

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

Page composition

More than one template might be

necessary…

…but should have consistent ”look

and feel”

Page composition

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!?

Page composition

Page composition

• 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

Page composition

• The home page itself…• Four main elements– Identity– Navigation and Tools– Content– Timeliness

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

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!

Page composition