Designing Special Feature Pages


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing Special Feature Pages

  1. 1. Designing Special Feature Pages College Web Design Camp 2009 Session Six By Jackie Hai July 9, 2009
  2. 2. Examples
  3. 3. Examples
  4. 4. Examples
  5. 5. Examples
  6. 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. 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.'s Economic Stimulus 101: Pull together related stories in a topical page • (e.g. Matt Thompson's "Newsless" concept: blogtest/sample.html)
  8. 8. What not to do Cookie-cutter template → Multimedia buried → ← Ad Ad → ← Unrelated content ← Long, unformatted text
  9. 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. 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. 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. 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. 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. 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. 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. 16. Useful tools and plugins Expanding Text: Shadowbox JS: WordPress Gallery Slideshow:
  17. 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