Leonie van de LaarUI Designer Innovation Lab, Sanoma

@leonievandelaar

Design for blogs

February 21, 2014

Hands on basic design principles for bloggers

• Looking, looking, looking: different blogs and trends

• Logo design

• Grids on the web

• Typography for web

• Choosing colors and managing styles

• Styling images

What are we going to do?

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.)

Where to start!

Logos Fashionblogs

Logos Architecture / Art / Living blogs

Logos Food blogs

Logos Lifestyle blogs

• Hierarchy

• Make choices, don’t try to put

all information in the header

• Organise your content

• Where’s the fold?

Grid

Examples of grids

• 2 columns

• Social icons

• Portrait of blogger

• First blogpost: images

• Simple navigation

neginmirsalehi.com

• 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

thatgirlfromamsterdam.nl

• 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

Examples of grids

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

Determine atmosphere and convert this into ph 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, t be cautious in your choices

misspandora.fr

Backgrounds

If you use it: choose something subtle

• 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

Serif vs Sans serif

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

• Google webfonts are freehttps://www.google.com/fonts

!

• Use for bodytext readable font !

• Voor headers (and short sentences) you’re free to pick a fun font

Webfonts

Where do I get them?

Fonts for logos

Free fonts on dafont.com

Where do I get them?

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

Retromatic PicLab HD - Design studio

Apps that help putting text on top layer of image

Search for your perfect image processing App Enough on offer in the Appstore!

….At last

Make your blog personal!