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