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.

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. 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. 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. Logos Fashionblogs

5. Logos Architecture / Art / Living blogs

6. Logos Food blogs

7. Logos Lifestyle blogs

8. Grid
•
Hierarchy
•
Make choices, don’t try to put
all information in the header
•
Organise your content
•
Where’s the fold?

9. Examples of grids
•
2 columns
•
Social icons
•
Portrait of blogger
•
First blogpost: images
•
Simple navigation
neginmirsalehi.com

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. Examples of grids
• 3 Columns of the same width
• Navigation not important in this
design
• Images. images, images
cottds.com

12. Examples of grids
• 1 Column
• Lots and extremely
big images
• A lot of scrolling
winstondandwillow.com

13. Organise your content with categories and icons
spoonforkbacon.com

14. Consistent style in photography
joythebaker.com

15. Make your own images by using graphic overlays
www.aprilandmay.nl

16. Strong typography, graphic and clean
www.creatorsofdesire.com

17. Choose your own style and be consistent
www.annadellorusso.com

18. Use typographic overlays
sunniebrook.com

19. h
Determine atmosphere and convert this into
photography and recognizable graphic styles
goodbeerhunting.com

20. Strong identity, original
fringeandfrange.com

21. Identity by use of stamps
ztrdg.nl/

22. Consistent photography
puurhomemade.nl

23. Good usability, interesting way of
building columns
artistsandalgorists.com

24. Backgrounds
Very determinative way of using background,
be cautious in your choices
misspandora.fr

25. Backgrounds
If you use it: choose something subtle

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. Readable line spacing
Max 9 to 14 words

28. Hierarchy in text
Vary with font format and font weight

29. Font size
Readability text

30. Line spacing
Use enough spacing

31. Readability font
Use fun or display fonts for
headers, not for bodytext

32. Use enough contrast
Using light text on black
background is harder to read

33. Center text
Be selective, not with
bodytekst

34. Use of capitals
Be selective, only short texts

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. Fonts for logos
Where do I get them?
Free fonts on dafont.com

37. Choose your color scheme
Get inspired on Adobe Kuler
https://kuler.adobe.com

38. Make a style document

39. Organise your images
Make collages/moodboards
Choose a style and be consistent

40. Use Apps for image processing
Picframe
Instant: Polaroid Photos

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. ….At last
Make your blog personal!