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
![Page 1: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/1.jpg)
Leonie van de LaarUI Designer Innovation Lab, Sanoma
@leonievandelaar
Design for blogs
February 21, 2014
Hands on basic design principles for bloggers
![Page 2: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/2.jpg)
• 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?
![Page 3: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/3.jpg)
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!
![Page 4: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/4.jpg)
Logos Fashionblogs
![Page 5: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/5.jpg)
Logos Architecture / Art / Living blogs
![Page 6: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/6.jpg)
Logos Food blogs
![Page 7: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/7.jpg)
Logos Lifestyle blogs
![Page 8: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/8.jpg)
• Hierarchy
• Make choices, don’t try to put
all information in the header
• Organise your content
• Where’s the fold?
Grid
![Page 9: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/9.jpg)
Examples of grids
• 2 columns
• Social icons
• Portrait of blogger
• First blogpost: images
• Simple navigation
neginmirsalehi.com
![Page 10: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/10.jpg)
• 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
![Page 11: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/11.jpg)
• 3 Columns of the same width
• Navigation not important in this
design
• Images. images, images
cottds.com
Examples of grids
![Page 12: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/12.jpg)
• 1 Column
• Lots and extremely big images
• A lot of scrolling
Examples of grids
winstondandwillow.com
![Page 19: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/19.jpg)
Determine atmosphere and convert this into ph photography and recognizable graphic styles
goodbeerhunting.com
![Page 23: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/23.jpg)
Good usability, interesting way of building columns
artistsandalgorists.com
![Page 24: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/24.jpg)
Backgrounds
Very determinative way of using background, t be cautious in your choices
misspandora.fr
![Page 25: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/25.jpg)
Backgrounds
If you use it: choose something subtle
![Page 26: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/26.jpg)
• 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
![Page 27: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/27.jpg)
Readable line spacing
Max 9 to 14 words
![Page 28: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/28.jpg)
Hierarchy in text
Vary with font format and font weight
![Page 29: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/29.jpg)
Font size
Readability text
![Page 30: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/30.jpg)
Line spacing
Use enough spacing
![Page 31: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/31.jpg)
Readability font
Use fun or display fonts for headers, not for bodytext
![Page 32: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/32.jpg)
Use enough contrast
Using light text on black background is harder to read
![Page 33: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/33.jpg)
Center text
Be selective, not with bodytekst
![Page 34: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/34.jpg)
Use of capitals
Be selective, only short texts
![Page 35: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/35.jpg)
• 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?
![Page 37: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/37.jpg)
Choose your color scheme
Get inspired on Adobe Kuler
https://kuler.adobe.com
![Page 38: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/38.jpg)
Make a style document
![Page 39: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/39.jpg)
Organise your images
Make collages/moodboards Choose a style and be consistent
![Page 40: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/40.jpg)
Use Apps for image processing
Picframe Instant: Polaroid Photos
![Page 41: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/41.jpg)
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!
![Page 42: Design for Blogs](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7c4934a79595a768b45af/html5/thumbnails/42.jpg)
….At last
Make your blog personal!