Designing Article Pages

Uploaded on

College Web Design Camp 2009: Session 4

College Web Design Camp 2009: Session 4

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Jake–

    Fantastic presentation. Love how you go into grid-based web design. Using ALA as an example is sweet. (and of course, I'm with you on knocking NYT)

    If I could add my 2¢:
    • Slide 15: don't let the eye drift. There is such a thing as too much white space. Use borders to help this. e.g. A white background for the text and a slightly darker one for the white space would help.
    • Obviously you can't cover everything, but one thing I'd stress is: black on white text. Don't be tempted by anything else. There's a reason we do this – it's much easier to read long blocks of text that are black on white. It just is. Sorry to offend any design priorities, but usability trumps on this on IMHO
    • Just having the article is sweet. The way the NYT (and many other newsorgs) design their pages with many text-wraps sucks. However, long chunks of text are hard to read. IMHO, there should be items to break it up. Sidebars, photos, multimedia, etc… Again, Slide 15 – it's hard for the eye to find where to start, which means you can get lost reading.

    …and I'll stop talking/writing. Really sweet presentation sir! If I don't get to sit in tomorrow, best of luck!
    Are you sure you want to
    Your message goes here
    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. 18 June 2009 College Web Design Camp 2009: Session 4 Designing Article Pages Jake Paul
  • 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. Hierarchy An arrangement or classification of things according to relative importance.
  • 4. Good hierarchy
  • 5. Bad hierarchy
  • 6. Whitespace The space between elements in a composition. Also called “negative space,” but not because it’s bad.
  • 7. Macro/micro whitespace
  • 8. Passive whitespace
  • 9. Active whitespace
  • 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. But some constraints are good
  • 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. Too many distractions
  • 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. Enough distractions
  • 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. Adding passive whitespace
  • 18. Adding active whitespace
  • 19. Adding hierarchy
  • 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. Other considerations Article pages show up in searches a lot because they have fairly static content
  • 22. Search optimizing Use dynamic metadata
  • 23. Search optimizing Display the article title in the page title
  • 24. Search optimizing Direct readers who arrive on your site via search with a brief note in the footer
  • 25. Comments Place comments below whatever related article links It might be useful to paginate comments to avoid having really long pages (
  • 26. Printing Don’t put a print link on your article page
  • 27. This is not at all definitive
  • 28. Thanks for listening