designing special feature pages

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