Creating a full-page multimedia feature, from design concept to coded implementation. Presentation for the CoPress College Web Design Camp 2009, by Jackie Hai.

1. Designing Special
Feature Pages
College Web Design Camp 2009
Session Six
By Jackie Hai
July 9, 2009

2. Examples
http://www.amherstwire.com/features/13th-hour-reprieve

3. Examples
http://www.smh.com.au/interactive/2009/congo/index.html

4. Examples
http://www.lasvegassun.com/news/topics/water/

5. Examples
http://www.boston.com/news/specials/kennedy/

6. 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

7. 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)

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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/

17. 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