Design for Blogs

465 views
342 views

Published on

This presentation shows trends in design for blogs. It includes hands on tips on how to make your blog look professional and inspiring.

Target audience: bloggers without design experience

-----

I participated in the course 'Bloggen is NET werken', initiated bij Sanoma, The Netherlands.

This course includes the principles on how to make a successful blog.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
465
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design for Blogs

  1. 1. Design for blogs Hands on basic design principles for bloggers Leonie van de Laar UI Designer Innovation Lab, Sanoma February 21, 2014 @leonievandelaar
  2. 2. What are we going to do? • Looking, looking, looking: 
 different blogs and trends • Logo design • Grids on the web • Typography for web • Choosing colors and managing styles • Styling images
  3. 3. Where to start! Step 1 Get inspired Step 2 Organise your content: choose your template Step 3 Make your logo Step 4 Finetune the typography Step 5 Define style elements (photography, overlays etc.)
  4. 4. Logos Fashionblogs
  5. 5. Logos Architecture / Art / Living blogs
  6. 6. Logos Food blogs
  7. 7. Logos Lifestyle blogs
  8. 8. Grid • Hierarchy • Make choices, don’t try to put all information in the header • Organise your content • Where’s the fold?
  9. 9. Examples of grids • 2 columns • Social icons • Portrait of blogger • First blogpost: images • Simple navigation neginmirsalehi.com
  10. 10. Examples of grids • 3 Columns • Left column: narrow, only for social and data • Centered column for blog items • Right column used for social, archive etc. thatgirlfromamsterdam.nl
  11. 11. Examples of grids • 3 Columns of the same width • Navigation not important in this design • Images. images, images cottds.com
  12. 12. Examples of grids • 1 Column • Lots and extremely 
 big images • A lot of scrolling winstondandwillow.com
  13. 13. Organise your content with categories and icons spoonforkbacon.com
  14. 14. Consistent style in photography joythebaker.com
  15. 15. Make your own images by using graphic overlays www.aprilandmay.nl
  16. 16. Strong typography, graphic and clean www.creatorsofdesire.com
  17. 17. Choose your own style and be consistent www.annadellorusso.com
  18. 18. Use typographic overlays sunniebrook.com
  19. 19. h Determine atmosphere and convert this into photography and recognizable graphic styles goodbeerhunting.com
  20. 20. Strong identity, original fringeandfrange.com
  21. 21. Identity by use of stamps ztrdg.nl/
  22. 22. Consistent photography puurhomemade.nl
  23. 23. Good usability, interesting way of 
 building columns artistsandalgorists.com
  24. 24. Backgrounds Very determinative way of using background, be cautious in your choices misspandora.fr
  25. 25. Backgrounds If you use it: choose something subtle
  26. 26. Serif vs Sans serif • In the beginning of screen typography the sans serif fonts were best readable. This had to do with low screen resolution ! • Nowadays displays are from a lot higher quality, and Serif fonts are good readable
  27. 27. Readable line spacing Max 9 to 14 words
  28. 28. Hierarchy in text Vary with font format and font weight
  29. 29. Font size Readability text
  30. 30. Line spacing Use enough spacing
  31. 31. Readability font Use fun or display fonts for headers, not for bodytext
  32. 32. Use enough contrast Using light text on black background is harder to read
  33. 33. Center text Be selective, not with bodytekst
  34. 34. Use of capitals Be selective, only short texts
  35. 35. Webfonts Where do I get them? • Google webfonts are free
 https://www.google.com/fonts ! • Use for bodytext readable font ! • Voor headers (and short sentences) you’re free to pick a fun font
  36. 36. Fonts for logos Where do I get them? Free fonts on dafont.com
  37. 37. Choose your color scheme Get inspired on Adobe Kuler https://kuler.adobe.com
  38. 38. Make a style document
  39. 39. Organise your images Make collages/moodboards
 Choose a style and be consistent
  40. 40. Use Apps for image processing Picframe Instant: Polaroid Photos
  41. 41. Apps that help putting text on top layer of image Search for your perfect image processing App Enough on offer in the Appstore! Retromatic PicLab HD - Design studio
  42. 42. ….At last Make your blog personal!

×