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

 

1lowres

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.


THE BRAINSTORM PHASE

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.


GETTING STARTED

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.


MAKE SURE TO INCLUDE…

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.


OTHER SPECIFICS

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

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

Images
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?

Navigation
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

46 comments

    How to Design Your Own Tattoo Tattoos are not only an intricate form of art; they are also a manifestation of self expression. Like a picture, a tattoo speaks volumes. That is why it is important that you choose one that has a significant meaning for you. Although there are many tattoo designs available, these images may be a vague representation of who you are. So, if you have the talent and the skill, you can design your own tattoo freehand. But what if you are not that skilled at drawing? Do not worry; you can still design your own tattoo without having to draw it. How? A vivid picture in your mind is all it takes. Your very own idea of the image, size, color and other details are all the information needed. Now that you’ve made up your mind of what your tattoo image should look like, all you have to do is find some help. Go and browse the web. One of the best ways to find some help with your design is to go browsing the web for sites that provide a platform for custom tattoo design contests. The contest mechanics and rules are set by your own detailed design information. Most websites that offer this medium do not collect any fees, just the set prize offer for your design. Although, there is a minimum prize set, the administrator will help you in setting the prize based on your required tattoo design. Remember, the higher the prize you set, the more artists will be drawn to join your contest. If this happens, it will create a wider selection of tattoo designs to choose from. All you need is to find what is best for you. The artists who join the contest will design hisher work based on the detailed information you provide. So it is important that you give the exact details of your idea. These artists also work on your feedback, so they may be willing to make some modifications to come up with the piece you want. Once, you have chosen the best artist, you will get exclusive rights to the design, and get a copy and a stencil so you can take it to any tattoo artist that can do your tattoo. Moreover, there are other sites that offer handson programs in creating your designs. These sites have libraries of designs so that you can develop your own version of a design by mixing and matching any design you want. It is not comparable to a custom tattoo design but you could create something that you like. Just keep in mind not to stick to one design, and learn to be creative. But if you’re really not up to the challenge, these sites also offer temporary tattoos. What is convenient with these nonpermanent tattoos is you can change the design after it wears off, so it saves you from having any regrets. Using this kind of software requires a fee. There are also some technical details before you can download the software. Check for any specifications before downloading this tattoo designing software. Still, if you really want to be original then a custom tattoo design is fitting for you. Though you did not draw it yourself, the idea of the design is to your own liking and is based on your individuality as a person. A tattoo artist just helps you put some life into your design. Kristen Dunn is a tattoo enthusiast and professional tattoo designer who has created thousands of thought provoking, elegant, and funky tattoos for her clients. She has a vast collection of custom designs to her credit. Winner of several awards and accolades, Kristen is now a founding member of the world’s largest custom tattoo design community at CreateMyTattoo. View her tattoo collection or read more on her blog here.

    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.
    http://www.negeso.nl

    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.
    http://www.negeso.nl

    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.
    http://www.sitementrix.nl

    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.
    http://www.sitementrix.nl

    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.
    http://www.negeso.nl

    nice post :-)

    nice, nice :-)
    check my blog
    http://www.searchyourfavorite.blogspot.de

    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.
    http://thinkworkandgo.blogspot.com/

    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.
    http://www.negeso.nl

    Southalicious

    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.

    Bedankt!

    XOXO
    Nancy
    http://mrsstilletto.blogspot.com

    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..
    redvelvetandmarineblue@blogspot.nl

    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.
    http://www.negeso.nl

    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?

    laviniah

    Very informative, I’m taking notes x
    http://www.bffbestfootforward.blogspot.co.uk

    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

    http://Www.creativityandchocolate.com

    Handig dankjewel!!

    Zoals altijd weer hele handige tips! ;)

    http://www.style-chameleon.com

    Super useful tips!
    xoxo, Peppi
    http://www.thefashionjunki.com

    Supertips!

    Great tips!

    http://www.FashionSnag.com

    that’s just so useful! awesome post!

    http://glamourgirl-bg.blogspot.com/

    Hele handige tips!

    Great tips,

    xo’ M
    http://blvckorsomething.blogspot.nl

    Veel handige tips! Dank je wel! x
    rougeuse.blogspot.com

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

    Spark&Bark

    xx

    Thank you! very useful!

    Super handige tips zeg! bedankt!
    1310bynora.com

    super handig alweer! thanksss so much!

    http://shopaholicoverhere.blogspot.nl/

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