Transcript Page Composition

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