Your SlideShare is downloading. ×
  • Like
Designing Special Feature Pages
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Designing Special Feature Pages



Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


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