designing special feature pages
TRANSCRIPT
Designing Special Feature Pages
College Web Design Camp 2009Session Six
By Jackie HaiJuly 9, 2009
Examples
http://www.amherstwire.com/features/13th-hour-reprieve
Examples
http://www.smh.com.au/interactive/2009/congo/index.html
Examples
http://www.lasvegassun.com/news/topics/water/
Examples
http://www.boston.com/news/specials/kennedy/
Common design elementsWall-to-wall graphical content, no ads
Bold typography
Rich colors and textures
Multimedia in A1 section
Print-style page design and layout
Attention-grabbing intro
Content organized in chapters
Why make feature pages?Break down a complex story into navigable parts
Present multimedia-rich content in a unified package
Create an "evergreen" resource• (e.g. AmherstWire.com's Economic Stimulus 101:
http://www.amherstwire.com/features/economic-stimulus-101)
Pull together related stories in a topical page• (e.g. Matt Thompson's "Newsless" concept:
http://newsless.org/blogtest/sample.html)
What not to doCookie-cutter template →
Multimedia buried →
← Unrelated contentAd →
← Ad
← Long, unformatted text
http://www.washingtonpost.com/wp-dyn/content/article/2009/05/31/AR2009053102510.html
Step 1Organizing story elements
1. List all multimedia and text pieces to be used 2. Choose a lead multimedia and/or text piece
3. Rank remaining content by relevance/importance 4. Break long text into chapters
Step 2Page layout/wireframing
Give each element its own layer in Photoshop to speed conversion from mock-up to code.
Story elements are building blocks of the feature
Keep hierarchy in mind when arranging elements: give the most compelling content the most screen real estate
Step 3Adding graphics and color
Use the eyedropper tool to pull colors from photos for use in the page design.
Colors should be bold but complement, not overwhelm, content
Avoid stock/clip art; use images originating from the story
Step 4Typography and white space
Uncluttered feel improves retention of focus
Guide the user's eye by drawing attention to the right places
Limit to 2-3 fonts for simplicity and unified design
Step 5Converting mock-up to code
Assign each major block to a CSS div Smaller blocks are nested inside larger ones
Use the "float" property to line up divs side by side.
Step 6Testing and accessibility
Don't let this happen to you!
Perform cross-platform checks early and often
Test on all major browsers, on Windows and Mac
Design pages to fail gracefully
Inline CSS stylesOne-shot design on the fly
Pros: Simple solution for customizing CMS pagesDon't have to mess with site templates
Cons:Time-consuming to make page-wide style changes
The "style" attribute can be placed in any HTML tag to override pre-existing CSS definitions
Useful tools and plugins
Expanding Text:http://www.dagondesign.com/articles/expanding-text-plugin-for-wordpress/
Shadowbox JS:http://sivel.net/wordpress/shadowbox-js/
WordPress Gallery Slideshow:http://wordpress.org/extend/plugins/wordpress-gallery-slideshow/
TakeawaysGreat design can't fix weak content, but bad design can ruin great content Compelling presentation adds value and raises news above mere commodity level Lead with your most sensory-engaging elements Break down information into chapters to form a narrativeUse inline CSS styles to rapidly deploy one-time designs
Test thoroughly before launch; even the best laid out feature page is useless if it breaks for half your audience