Design for Blogs
Upcoming SlideShare
Loading in...5
×
 

Design for Blogs

on

  • 249 views

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.

Statistics

Views

Total Views
249
Views on SlideShare
248
Embed Views
1

Actions

Likes
1
Downloads
1
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 neginmirsalehi.com
  • 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
  • Examples of grids • 3 Columns of the same width • Navigation not important in this design • Images. images, images cottds.com
  • Examples of grids • 1 Column • Lots and extremely 
 big images • A lot of scrolling winstondandwillow.com
  • Organise your content with categories and icons spoonforkbacon.com
  • Consistent style in photography joythebaker.com
  • Make your own images by using graphic overlays www.aprilandmay.nl
  • Strong typography, graphic and clean www.creatorsofdesire.com
  • Choose your own style and be consistent www.annadellorusso.com
  • Use typographic overlays sunniebrook.com
  • h Determine atmosphere and convert this into photography and recognizable graphic styles goodbeerhunting.com
  • Strong identity, original fringeandfrange.com
  • Identity by use of stamps ztrdg.nl/
  • Consistent photography puurhomemade.nl
  • Good usability, interesting way of 
 building columns artistsandalgorists.com
  • Backgrounds Very determinative way of using background, be cautious in your choices misspandora.fr
  • 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
 https://www.google.com/fonts ! • 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 dafont.com
  • Choose your color scheme Get inspired on Adobe Kuler https://kuler.adobe.com
  • 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!