18 June 2009
College Web Design Camp 2009: Session 4




Designing Article
Pages
Jake Paul
jakepaul.com
Overview
Goals of Article Pages
What design concepts will be useful? What do you want an article page to do?



Design Imp...
Hierarchy
An arrangement or classification of things
according to relative importance.
Good hierarchy
Bad hierarchy
Whitespace
The space between elements in a
composition. Also called “negative space,”
but not because it’s bad.
Macro/micro whitespace




http://www.alistapart.com/articles/whitespace/
Passive whitespace




http://www.alistapart.com/articles/whitespace/
Active whitespace




http://www.alistapart.com/articles/whitespace/
Design is not math
Numbers will only get you so far. What looks
good is a subjective judgement, and in
design you have to ...
But some constraints are good
Creative brief
The real purpose of article pages is reading.
So make them easy to read.
The most significant changes you ca...
Too many distractions
Minimizing distractions
Put everything that’s not the primary text up
top or at the very end
The middle of the page should...
Enough distractions
Default styles
Exact numbers will be unique to each
design, but strong default styles help
Put margins on header and parag...
Adding passive whitespace
Adding active whitespace
Adding hierarchy
Minimize distractions
Put related media at the top of the page with
the headline and photo
Put related reading links and e...
Other considerations
Article pages show up in searches a lot
because they have fairly static content
Search optimizing
Use dynamic metadata
Search optimizing
Display the article title in the page title
Search optimizing
Direct readers who arrive on your site via
search with a brief note in the footer
Comments
Place comments below whatever related
article links
It might be useful to paginate comments to
avoid having reall...
Printing
Don’t put a print link on your article page
This is not at all definitive
http://bit.ly/thinkingwithtype


http://www.alistapart.com/articles/indefenseofreaders
http:/...
Thanks for listening
Upcoming SlideShare
Loading in …5
×

Designing Article Pages

348 views

Published on

College Web Design Camp 2009: Session 4

Published in: Design
1 Comment
0 Likes
Statistics
Notes
  • 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!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
348
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Designing Article Pages

  1. 1. 18 June 2009 College Web Design Camp 2009: Session 4 Designing Article Pages Jake Paul jakepaul.com
  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 http://www.alistapart.com/articles/whitespace/
  8. 8. Passive whitespace http://www.alistapart.com/articles/whitespace/
  9. 9. Active whitespace http://www.alistapart.com/articles/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 (nytimes.com)
  26. 26. Printing Don’t put a print link on your article page
  27. 27. This is not at all definitive http://bit.ly/thinkingwithtype http://www.alistapart.com/articles/indefenseofreaders http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://www.alistapart.com/articles/whitespace/ http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/ http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/ http://www.subtraction.com/2007/03/18/oh-yeeaahh
  28. 28. Thanks for listening

×