ArchiveBlog class 12 October 2013
Blog Class: the design of your blog



Let’s lay down some groundwork on layout today! The design of a blog is something I consider equally as important as text and photography. It’s what makes a first impression and what holds your content together – in a way it’s like an outfit for your articles! Me and Kelly Nederlof (one of the two This chick’s got style girls! She also co-organized the Blog Class Event) teamed up to share some ways to get your design style fine-tuned.

Surely it’s a matter of taste, but what we usually agree on, is that good design instantly tells new visitors and potential advertisers who you are, what your blog is about and what makes you unique. It should also be easy to navigate, fast and recognizable. A lot to take in! Let’s go over some pointers that might help you in the process of deciding on a graphic style, whether you’re just getting started or are contemplating a make over. And if there’s anything to take away from it all it’s: don’t let bad design hurt great content.


Use your taste as starting point
Create a Pinterest (or, old school, a file on your laptop) where you store images that appeal to you in terms of typography, color, graphic style. After a week you’ll notice the direction it’s going in – there might be a repeating pattern in shapes, prints and colors that you gravitate towards.

See what’s out there
Spend a morning visiting as many blogs as you can handle. Leading blogs, smaller ones, corporate blogs and perhaps even online stores. See what blogs in different segments like fashion, food, technology, travel do design wise. All to get a sense of what you like and – equally as important – what you don’t. No idea where to start? Hop over to Bloglovin and check out highly ranked blogs from different niches, as they must be doing something well. To put these impressions to use, make print screens or a list of specifics that appeal to you. Like a dotted line to separate blog posts, a visual archive under each post, the way categories are marked, etc.

Define your key message
If someone visits your website for the first time, what do you want them to see/think/feel within the first five seconds? Really make the effort to pinpoint what you want visitors to take away from your blog. What content are you most proud of, what are your unique selling points, what’s the key message of your blog? Make your design emphasize aspects that are characteristic of you and your blog.

Start with a clean slate
It’s easier to start with a blank canvas and add well thought out features from there, than to tweak your (already existing) design little by little. If you start out as minimal as possible, you’ll only include features that really have a function for the way your content should be presented.

Go easy on trends
Trends? No. Contemporary? Yes. Decking out your blog in palm tree print or pineapples (just throwing in some trendy P-words) isn’t the smartest way to go, it will feel outdated soon. It’s all about finding balance between timeless style and adding a few winks to what’s hot right now. Like a hand written font or an Instagram slider or a scrapbook-y feel with features being ‘taped’ to the background. If the overall feel is timeless, you could even switch up the more stylized accents every now and then.


Hiring a designer or not
If you’re not exactly tech savvy (nothing to be ashamed about, I’m sure you have others skills! I, for example, couldn’t change a HTML code to save my life but I’m an OUTSTANDING hoola hooper and make a mean eggs Benedict. See?) there’s still a path to a perfect design. Find out, usually credited at the bottom of a website, who designed your favourite blogs and contact them. If that price tag is too hefty, try to get in touch with a multimedia student who’s looking to develop his/her portfolio and might work with you for a friendly price. I’ve had my design custom created by my media agency and often turn to my dear friend Kim for advice She’s a graphic designer at ELLE (and occasionally manages to squeeze in a cool freelance design job… just saying!) and has impeccable taste in design. And clothes. And food. And men. Anyway, perhaps there’s someone in your inner circle who’s on the same page, style wise, and can help you out.

Finding (free) templates and widgets
If you do have the skill set to work on a design on your own or simply want to start out on a smaller budget, WordPress and Blogger both offer plenty of free templates that you can tweak to suit your taste. Just have look at the many YouTube tutorials out there! There are also countless of websites where you can purchase templates for around 100-200 dollars and those where you can download (so it’s free, wheee!) social media buttons – like here.


A blog header
Well, hello! A header is an easy, quick way to introduce yourself and your blog name. I’d keep it simple and focus on typography so it won’t be outdated soon and you can use the same logo for business cards and other branded products. And there’s still plenty of space on the rest of your homepage to add playful touches.

An about me page
Whether blog about news, food, fashion or keep a diary online, every word probably comes from your brain. So readers love to know who you are, what your background is. This doesn’t have to be a resume, for example also add some photos or fun/smart/quirky personal statements that make people remember you.

Custom social media buttons
Social media is a key to the success of your blog. It’s where you keep in touch with readers in a quick, constant way and gain exposure for your posts. So make sure your design allows you to be tracked down on Instagram, Facebook, Twitter, Vimeo, Pinterest, Bloglovin and Google+. Design custom widgets yourself or download them on any of the thousands of websites, like here.

Links to ‘older’ and ‘newer’ posts
Make it as easy as possible for visitors to browse previous content. You don’t want all those wonderful articles to get lost in the archives after all! Add visible links or graphically designed arrows to scroll to previous and next posts within each article.

Reserve your rights
Don’t forget to mention all rights all reserved.


I’d suggest picking neutrals like black, white and grey and one signature colour. A black background with white letters might give your readers a headache, and bright neons might be outdated after a while, so I’d opt for an accent shade that’s sleek, mature and a bit more neutral like forrest green, peach, rusty red, navy.

Note that not every font can be used on the web. Typically we see Arial, Courier New, Georgia and Times New Roman a lot. Google Fonts works well too. It provides high-quality lettering that you can include in your pages using the Google Fonts API. (Not the juiciest reading material, I get it, but you could find more here). Size wise, I’d opt for 9 or 10 – put the readability to the test on different channels like an iPad, laptop and your phone.

Play around with the way you present images on your blog. They’re an easy tool to grab the readers attention and to spark interest for older or related articles. I present photos of similar posts at the bottom bar of each article, have an instagram slider on the side and a visual reference to my about me page – so visually I say something about myself, about my social channels and about previous work I’ve done on the blog. Since the amount of photos used can vary heavily per post, I use one opening shot with a click through system (which you know, if you’re reading this post!). Size wise, don’t make your photos so long that they don’t fit on the screen properly – you don’t want people to have to scroll down to see what shoes you’re wearing, right?

Improve the functionality and reader experience of your blog by simplifying the routes they can take. As it might be difficult to take distance from your blog and look at the design as a visitor, ask your friends for feedback. Try to avoid as many click-throughs as you can and make sure the most important, recent and best posts are easiest to find in an archive and in a well working search bar.

Hope this gave you some insights! What’s the key to a good design, in your opinion? Or anything that always turns you off with blog layouts? Tell me! And if you’d like, have a look at the Blog Class with 9 tips for fashion blog photographyBlog Class with pointers to improve your writing, and the Blog Class about how to monetize your blog. Photo is by Karen van Duijvenbode.

Let's talk


    Welkom bij Negeso CMS, wij maken uw webdesign, website, webshop, app en portal.Website bouwen met custom webdesign €1.999! Online offerte: website maken met Negeso CMS.

    Welkom bij Negeso CMS, wij maken uw webdesign, website, webshop, app en portal.Website bouwen met custom webdesign €1.999! Online offerte: website maken met Negeso CMS.

    Each Horticultural can build your own website with SiteMentrix. In SiteMentrix you can create your own online site, without technical knowledge, your browser and the mouse, or with your finger and your iPad or tablet.

    Each Horticultural can build your own website with SiteMentrix. In SiteMentrix you can create your own online site, without technical knowledge, your browser and the mouse, or with your finger and your iPad or tablet.

    Welkom bij Negeso CMS, wij maken uw webdesign, website, webshop, app en portal.Website bouwen met custom webdesign €1.999! Online offerte: website maken met Negeso CMS.

    nice post :-)

    nice, nice :-)
    check my blog

    I have only been blogging for a few months, and your tips have really helped a lot in the process!! Thank you for sharing all the information you are giving us!

    Wow, thank you, that’s such a compliment. That’s exactly what I hope to do with the Blog Class articles : )

    Super handig! Goed idee van de post!

    Stop by!
    STreet STyle Tube

    Cool post.

    Welkom bij Negeso CMS, wij maken uw webdesign, website, webshop, app en portal.Website bouwen met custom webdesign €1.999! Online offerte: website maken met Negeso CMS.


    Great post! Very interesting for the beginning blogger. What is the link for the custom social media buttons? Link is missing. Thanks!

    Ik ga er meteen weer mee aan de slag. Zo handig en helder! Ik wil al een tijd iets doen aan mijn blog, hij straalt niet uit wat ik wil en ik wil de lay-out graag verbeteren. Ik ben er alleen enorm onhandig in en probeer nu wat meer contacten te leggen met mensen die het wel kunnen en ik kijk of ik mooie foto’s kan laten maken. Qua ontwerp kan ik dankzij jouw tips ook al flinke slagen maken.



    Leuk dat je zo bezig bent met het verbeteren van je site. Veel succes!

    Great article. I think I covered most of these points, I hope so.

    goede post! Heb ik zeker wat aan..

    Welkom bij Negeso CMS, wij maken uw webdesign, website, webshop, app en portal.Website bouwen met custom webdesign €1.999! Online offerte: website maken met Negeso CMS.

    Handige tips! Mooie blog heb je ook! Ik verdiep me nu in de wereld van CSS, het thema dat ik nu heb, Oulipo, vind ik enorm mooi, maar zou het graag nog wat persoonlijkr willen maken. Weet jij eigenlijk hoe het zit met een eigen domeinnaam?


    Very informative, I’m taking notes x

    Wauw wat een artikel, erg handig. Ik vind het uiterlijk van een site ook heel belangrijk! Ik heb een vrij standaard lay-out en die onderscheidt zich niet echt van anderen. Ik denk dat ik daar zeker met jouw tips wat aan zou kunnen veranderen!

    liefs Mireille

    thank you, this is very useful.

    Love this post!

    Hi Yara,
    I thought it’s time to write a comment after all those years reading. ;)
    I reaaaaally loved your old design! I didn’t know any better. I mean this one is cool to, but the old ome was just pferect :) (and now I can’t see what Im writing cause the scroolbar is’t working :/)

    Hi Jana,

    Thank you for letting me know! Working on that issue as we speak :) So glad to e-meet a long term reader! I loved the old design as well, but after seeing it so many times I felt like doing something a bit different and cleaner : ) Hope you still like to visit the site! x

    Thanks voor de tips!

    Handige tips! Ik ben echt een kluns als het op lay-out aan komt. Bedankt!

    oh my Yara wat ben ik zo blij met deze post echt super leuk bedankt dat je het heb gedeelt .
    veel liefs

    Thank you for the great tips! I think I will have to make my blog design more minimal!

    Dankjewel voor deze leerzame post! Goed geschreven!

    Geweldige tips weer en een deel hiervan heb ik toen ook gedaan toen ik een design ging maken. Toch blijft het lastig om alle ideen naar je eigen design te vertalen. Xx

    Handig dankjewel!!

    Zoals altijd weer hele handige tips! ;)

    Super useful tips!
    xoxo, Peppi


    Great tips!

    that’s just so useful! awesome post!

    Hele handige tips!

    Great tips,

    xo’ M

    Veel handige tips! Dank je wel! x

    Great, I really like those advice because I’m still struggling with my design and want to change it!



    Thank you! very useful!

    Super handige tips zeg! bedankt!

    super handig alweer! thanksss so much!

Please fill in all fields
© chapter friday. all rights reserved