Designing Special Feature Pages

Designing Special Feature Pages College Web Design Camp 2009 Session Six By Jackie Hai July 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 elements Wall-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 do Cookie-cutter template → Multimedia buried → ← Ad Ad → ← Unrelated content ← Long, unformatted text http://www.washingtonpost.com/wp-dyn/content/article/2009/05/31/AR2009053102510.html

Step 1 Organizing 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 2 Page 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 3 Adding 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 4 Typography 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 5 Converting mock-up to code Use the "float" property to line up divs side by side. Assign each major block to a CSS div Smaller blocks are nested inside larger ones

Step 6 Testing 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 styles One-shot design on the fly The "style" attribute can be placed in any HTML tag to override pre-existing CSS definitions Pros: Simple solution for customizing CMS pages Don't have to mess with site templates Cons: Time-consuming to make page-wide style changes

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/

Takeaways Great 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 narrative Use 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

Designing Special Feature Pages

by Andrew Spittle on Jul 13, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 49

Statistics

Designing Special Feature Pages — Webinar Transcript