Designing Article Pages


Published on

Published in: Design
1 Like
  • Be the first to comment

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

No notes for slide
  • Disclaimer: some people will probably be familiar, but I want to make sure we’re all on the same page.
  • Sketch first.
  • If it helps, think of it as designing a reading page
  • When someone is reading an article, they don’t need to see the most popular articles on your site. They need to read the article.
  • Macro whitespace
  • Go big on type. Micro whitespace.
  • This is not SEO in the usual sense - it’s not about making money. It’s about helping facilitate accurate searches.
  • If you have a print style sheet, have it remove things.
  • Designing Article Pages

    1. 1. 18 June 2009 College Web Design Camp 2009: Session 4 College Web Design Camp 2009: Session 4 Designing Article Pages Jake Paul
    2. 2. Overview Goals of Article Pages What design concepts will be useful? What do you want an article page to do? Design Implementation How do we make this happen on the web? What CSS rules should we use? Other Considerations How should we optimize for search, handle comments, and facilitate printing?
    3. 3. Hierarchy An arrangement or classification of things according to relative importance.
    4. 4. Good hierarchy
    5. 5. Bad hierarchy
    6. 6. Whitespace The space between elements in a composition. Also called “negative space,” but not because it’s bad.
    7. 7. Macro/micro whitespace
    8. 8. Passive whitespace
    9. 9. Active whitespace
    10. 10. Design is not math Numbers will only get you so far. What looks good is a subjective judgement, and in design you have to trust yourself to make it.
    11. 11. But some constraints are good
    12. 12. Creative brief The real purpose of article pages is reading. So make them easy to read. The most significant changes you can make involve minimizing distractions.
    13. 13. Too many distractions
    14. 14. Minimizing distractions Put everything that’s not the primary text up top or at the very end The middle of the page should be exclusively article text Avoid paginating articles
    15. 15. Enough distractions
    16. 16. Default styles Exact numbers will be unique to each design, but strong default styles help Put margins on header and paragraph elements, not on divs
    17. 17. Adding passive whitespace
    18. 18. Adding active whitespace
    19. 19. Adding hierarchy
    20. 20. Minimize distractions Put related media at the top of the page with the headline and photo Put related reading links and everything else at the bottom of the page But, if you have multiple photos, spread them out throughout the article
    21. 21. Other considerations Article pages show up in searches a lot because they have fairly static content
    22. 22. Search optimizing Use dynamic metadata
    23. 23. Search optimizing Display the article title in the page title
    24. 24. Search optimizing Direct readers who arrive on your site via search with a brief note in the footer
    25. 25. Comments Place comments below whatever related article links It might be useful to paginate comments to avoid having really long pages (
    26. 26. Printing Don’t put a print link on your article page
    27. 27. This is not at all definitive -readability/ http: // r_typography/ cles/detail/five_simple_steps_to_designing_grid_systems/ 007/03/18/oh-yeeaahh
    28. 28. Thanks for listening
    29. 29. Grid Systems /
    30. 30. Advertising An example of keeping it simple Fusion Ads
    31. 36. The old Daily Penn The new Daily Penn
    32. 37. Editorial Abstracts Use a couple sentences to pull the reader into the story
    33. 39. Social buttons and different approaches The Daily penn
    34. 45. Geodata What article types would it be useful for? <ul><li>Restaurant reviews </li></ul><ul><li>Sports events and tournaments </li></ul><ul><li>Articles from students studying abroad </li></ul>
    35. 48. Find more information at: