Design for Blogs
Upcoming SlideShare
Loading in...5

Design for Blogs



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

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.



Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Design for Blogs Design for Blogs Presentation Transcript

  • Design for blogs Hands on basic design principles for bloggers Leonie van de Laar UI Designer Innovation Lab, Sanoma February 21, 2014 @leonievandelaar
  • 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
  • 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.)
  • Logos Fashionblogs
  • Logos Architecture / Art / Living blogs
  • Logos Food blogs
  • Logos Lifestyle blogs
  • Grid • Hierarchy • Make choices, don’t try to put all information in the header • Organise your content • Where’s the fold?
  • Examples of grids • 2 columns • Social icons • Portrait of blogger • First blogpost: images • Simple navigation
  • 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.
  • Examples of grids • 3 Columns of the same width • Navigation not important in this design • Images. images, images
  • Examples of grids • 1 Column • Lots and extremely 
 big images • A lot of scrolling
  • Organise your content with categories and icons
  • Consistent style in photography
  • Make your own images by using graphic overlays
  • Strong typography, graphic and clean
  • Choose your own style and be consistent
  • Use typographic overlays
  • h Determine atmosphere and convert this into photography and recognizable graphic styles
  • Strong identity, original
  • Identity by use of stamps
  • Consistent photography
  • Good usability, interesting way of 
 building columns
  • Backgrounds Very determinative way of using background, be cautious in your choices
  • Backgrounds If you use it: choose something subtle
  • 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
  • Readable line spacing Max 9 to 14 words
  • Hierarchy in text Vary with font format and font weight
  • Font size Readability text
  • Line spacing Use enough spacing
  • Readability font Use fun or display fonts for headers, not for bodytext
  • Use enough contrast Using light text on black background is harder to read
  • Center text Be selective, not with bodytekst
  • Use of capitals Be selective, only short texts
  • Webfonts Where do I get them? • Google webfonts are free ! • Use for bodytext readable font ! • Voor headers (and short sentences) you’re free to pick a fun font
  • Fonts for logos Where do I get them? Free fonts on
  • Choose your color scheme Get inspired on Adobe Kuler
  • Make a style document
  • Organise your images Make collages/moodboards
 Choose a style and be consistent
  • Use Apps for image processing Picframe Instant: Polaroid Photos
  • 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
  • ….At last Make your blog personal!