When it comes to designing your blog's layout, simplicity is key – especially if you're a beginner.
Your overall blog design should be kept simple and clean. Content should always be the main focus of your blog, but having a clean design layout is important. Your goal should be to make it easy for your reader to navigate your site, and find the content they want to read or see.
There are lots of great articles on ProBlogger about design (and a great on here on IFB about color combinations), but one in particular said that among other things, you should design your blog to make these things clear to the reader:
Where am I?
Where should I begin?
What is the most important thing on this page?
But you can easily sabotage your readers' ability to navigate and find what they're looking for with a cluttered, distracting blog design. Here on IFB, we've rounded up 6 simple blog design tips that can benefit bloggers of all levels. Check them out below and let us know your thoughts in the comments.
Make Sure Your Header is Simple
Your blog's header is the first thing a new reader sees, so make it good! I personally prefer simple font-based or typography headers with the blog's name in them (ex. Into The Gloss), but the right images can be fun as well. Also, don't make them too tall so they take up valuable real estate at the top of your page – you should be able to see your first post title and some content before the fold.
Use Full Width Images
If you post outfit pictures, collages, or any images on your blog, they should ideally be the full width of your content column. And hopefully it goes without saying that all your images should be the same width.
Uniformity is key to simple blog design; you want the eye to flow easily over images (although there shouldn't be too many).
Use a Blog Design with One Sidebar
I really find that blogs with a main content column and one sidebar are more clean-looking and appealing. They're also easier to read; your eyes aren't “confused” about where to go, they naturally go first to the widest column where your content is. Interestingly, eye tracking studies show that readers generally view pages in an “F” pattern – first horizontally across the top, then down a bit and across, then vertically down the left side of the page. If you look through some of the images in the studies, a left sidebar generally gets left out of what the reader looks at altogether because the eye goes first to the content. So why have it?
Make Sure You Have Content Before the Fold
Generally readers focus most of their attention above the fold (how often do YOU scroll down?), and sometimes don't' even go further to see what else is on your page, or even finish your article, so make sure a reader can get the main idea of your first post before having to touch their mouse. Repeat visitors and engaged readers will usually scroll down, but readers who come from search engines want to find what they were looking for quickly without scrolling down, so make sure they can. (Analyze your stats to see which pages get the most search engine traffic, then make sure key information is at the top of those posts.)
Place the Most Important Information at the Top
This advice follows from the previous, but it's worth an extra look. Did you know that your about page is the second thing people look for when they get to your blog? Make sure the link to your about page is prominent, and if you have a widget in your sidebar with a photo and some “about” text, make sure it's near the top of your pages. Also, place your social buttons near the top of your pages, as well as your navigation bar.
Use a White/Light background
Too much contrast on your pages make them difficult to read – stick with a white or very light background for your page and ALWAYS a white background for your content areas.
How have you tweaked your blog design to make it better? Any other tips? Let us know in the comments below.
Editor's Note: This post was originally published on June 21st, 2013 by Grechen Reiter. It was updated on December 26th, 2017 by Laura Kell.
Great article! Also, to make sure that all posts have a good set of social sharing buttons.
Really great tips! That point about eye-tracking is really interesting, going to read the article now. I have a simple header, everything’s black and white with a hint of colour but what I find hard is to translate my personality to the page. I don’t want it to look like everyone else’s but I don’t want to make the page very busy looking either. I feel like it’s just so plain right now.
If anyone has tips, I’d greatly appreciate it!
your header is good! maybe add a little color? but otherwise, your site is great, very clean 🙂
Thanks Grechen! I think you’re right, a little bit more colour is what I need 🙂
Your blog is amazing!!!! The header is perfect,I viewed it in mobile so the background was white but your post are top notch❤
Just looked at your blog and I love it! You just gained a new follower(:
I don’t have any sidebars, do you think I should use the right one?
Melissa – you don’t have to use sidebars at all, i do think they help organize all the “extra” stuff though.
I think I follow most of the rules!
However, I like to start a post with a photo, before I write something… what you said got me thinking… maybe I’ll change that 🙂 But even so.. I feel that some people will just not read, anything at all.. no matter where you write..or how much you write.. Depends on what everybody looks for, I guess…
thank you for the tips!
I think I hit most of these (though, my sidebar might be a little messy?) Any tips/advice/critiques always welcome!
I really loved this post! I’ve been fiddling around with my layout lately because I knew I wanted to change something, but wasn’t very sure what to change. I loved this post because the tips were really helpful and helped me narrow down what I should change, but if anyone has any suggestions, I’d really appreciate it!
Coco and Picasso
great article!!! very usefu, thank u so much for the tips
GIVEAWAY ON MY PAGE www.thestyleoflucia.com
Great article! I have to agree, simplicity is very crucial in a blog. When I see a blog that is very cluttered or colorful I tend not to read it. I just like to be able to read it easily and too many colors can be distracting from the text.
A font that is easy to read. Cursive fonts, no.
Font color that is neutral. Shocking pink is very difficult to read!
thanxxx 😀 …so this article confirms that I have done a good job until now? I hope so! I leave the floor to the readers, pass to my place and let me know what you think! Have a nice weekend!
Yay, my blog does all of these!
i think i hit most of this tips…
do you guys think i should add some more stff in my sidebar? or filled enough?
i honestly agree 100 percent with these tips! simplicity simplicity when it comes to a blog design! Also, crisp photos definitely draw me into a blog 🙂
totally just went and retweaked my entire blog, thanks for the tips! xx
These are great tips. I have taken the strategy of following the formula of top fashion magazines and Retailers sites that I like. I’ve learned there is a reason I love these sites and it is their ease of readability and ease of navigation.
We recently gave our site a mini-makeover so it’s great to see some of the changes we made on the list of things to-do. Some of the list we have always been doing but it was fun to play around with our site to give it a new look and the ‘relaunch’ has been a lot of fun.
I’m sure everyone is very busy but any feedback would be greatly appreciated! Love it or hate it? 🙂
http://sexandthesuburb.com/ (I don’t usually leave my site since I read not to previously on IFB but this time it seems right to haha)
I agree with all of these tips the only thing I haven’t done is place the most important information at the top, but I will get to it, as I’m redesigning my blog.
I love this post, it’s so interesting how making a few slight adjustments can make your blog look so much more visually pleasing.
I must say though, I disagree with images having to be the same width as the content. For landscape images, yes, absolutely, but for images in portrait format it’s just too much. This usually makes them so big that I can’t see the whole picture on my screen at once and I have to scroll down to see the rest. Personally I find it annoying and disproportionate.
Olive, I typically feel the same! What I do is (in photoshop), merge two portrait images into 1 jpeg. This way they’re still the same width, but aren’t disproportionate either! So best of both worlds. (That’s just how I personally cope with keeping them all the same width while not having a MASSIVE portrait.)
Great Article❤ I really need to change my header :/ Maybe some of you fantaboulous fashion bloggers can tell me what to tweak?
Great tips! Love it, sometimes it is hard to come up with this stuff alone.
great tips how can make my blog better ?
Great advice for someone just starting a blog like myself! I’m finding this site very useful, THANKS!!
Hi, thanks for sharing these tips. The points you mentioned will definitely help me improve my blog. Thanks again 🙂
Your Blog is best and thinks is so different.
I’m just working on redesigning my blog and getting it back on track after a long hiatus! I’m working with Blogger and I can’t figure out how to remove the shadow on the background of the blog! Any help?
Thanks again for helping me in improving my blog. As i am beginner so, it really help me.
Awesome tips you have shared, here i just want to add one more that there must be comprehensive ‘about the author’ section at the end of each blog post in order to add a professional touch to your blog and writing as well.
Through this way, it would be easier for your readers to know the author without visiting the other pages of your blog.