design for blogs
DESCRIPTION
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.TRANSCRIPT
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
Determine atmosphere and convert this into ph photography and recognizable graphic styles
goodbeerhunting.com
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?
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!