Today is the first installment of Blogging Building Blocks! I'm delighted to be working with the incredibly lovely and talented Chaitra, from PinkPot, on this four part series. Each week Chaitra and I will be sharing tips on the fundamental elements of blogging. First up is blog design. I've got you covered with 5 steps to creating a blog design.

1. Create a rough design concept

First and foremost, I think it's really useful to envision a concept of roughly what you'd like your blog to look like. Are you a minimalist or slightly more eclectic? Do you want your blog to be vibrantly coloured or monochromatic? Do you want it to look bold or light and airy? What do you naturally gravitate toward?

When making this decision, I find it helps to try to think about your photography style. What colour palette is likely to be a recurring theme in your photos? Again, do you like minimalism in your photos? I've noticed that the most appealing blogs tend to correlate their photography style to their blog design nicely.

Once you've established the feel that appeals to you, then it's easier to start in on the details.

2. Find what fits the design concept and works well together

· Pick a colour palette that works to support your design concept:
While there's certainly no right or wrong here, it should be noted that the simpler the palette, the easier it'll be to avoid clashing with your photography. Additionally, make sure your colour palette is easy to see (testing it on a variety of monitors will give you the clearest idea of how it holds up).

· Find fonts that work well together:
Another thing to consider is how your fonts work with each other. Think about if your post titles, your sidebar titles and your post text really make sense together and, again, make sense with the overall design concept.

· Make sure your header fits with the theme:
The header of your blog makes a big first impression and can tie everything together. So it's worth spending some time making sure it looks professional. Drawing on the previous two points, try to pick a font and a colour palette that correlates with what you've got recurring throughout the blog. For example, while a colourful floral, cursive header would be beautiful, it likely wouldn't fit with an ultra clean, monochromatic design.

3. Make your style lines flow

· Create consistent alignment:
Creating clean lines in your blog will make it appear a lot more organized and easy for the reader to follow. Paying attention to details, such as widgets aligning with each other and text aligning exactly with photos makes all the difference. Additionally, justifying your text can give your blog an instant polished look.

· Create consistent image widths:
I find a blog always has a much nicer flow when its images are a consistent width. It just makes it easy for the eye to scan down the page with no interruption. I've got a super simple tip on how to set consistent image widths on my Designing A Blog: 10 Tips I Wish I'd Known post.

4. Create a clean space

· Consider a white background:
In order to make the most of your design elements, I think it's important to have a clean area to showcase them in. Albeit, not everybody has to have a white background, but the advantage is that it provides a clean (there's that word again), modern look that you're not likely to get tired of looking at. White works with any colour palette and allows your photography to pop nicely against it.

· Leave areas of white space/large margins:
White space is equally as important as any other design element. You may have the most beautiful details, but if they're all jammed together it's harder to appreciate them. There needs to be space both for your eye to rest and for those elements to stand out. Expanding the margins between your widgets and between your posts is a good way to create that white space.

· Select a profile picture that looks clean and professional:
I figure if you want your blog to be taken seriously, then you've got to take a serious profile picture (if you choose to include a picture at all)! That doesn't mean looking serious in your photo – no one's complaining about seeing those pearly whites – but rather, making sure you look put together and presentable and your backdrop looks nice.

· Search for attractive widgets:
When you've gone to all the trouble to design a beautiful layout, the last thing you want to do it fill it with a bunch of unattractive widgets. Blogger is especially difficult for that. A lot of the default widgets are outdated. Take the time to search for more attractive versions of widgets, such as a simple search bar or a better popular posts widget. It's a pain, but there are codes and tutorials out there.

· If you don't need it, get rid of it:
There's no sense filling your blog with clutter that doesn't serve a purpose. Ask yourself if you really need a widget before adding it. Consider removing info from the footer. If you're on Blogger, banish that navbar! I've got a post on 7 Things To Remove From Your Blogger Template.

5. Make yourself accessible

· Make sure your social media buttons are easy to see:
You've done the work on your blog, now you've got to get yourself out there! Social media is a great way to do it. Adding your social media buttons (particularly a Bloglovin' button) in a clearly visible place will make it that much easier for others to follow you.

· Create a navigation system:
One thing that can be easy to forget about is navigation. While it's great to have people following along with your newest posts, you also don't want all of your previous posts to disappear. As I mentioned in my Blog Navigation: Increasing Your Views post, adding navigation like tags/labels and archives will help to make sure your old work isn't lost.

Now, please get yourselves over to PinkPot to check out Chaitra's 15 Resources For An Awesome Blog Design! She's an absolutely amazing resource herself.

As you'll see Chaitra mention too, if you guys have any further questions about blogging tips you can tweet us using the hashtag #bbb. Thanks.


  1. Ah this is great! I've only just changed up the appearance of my blog and am still in the process of tweaking everything and working out all the technical stuff haha which I am hopeless with! Thank you for linking Chaitra's post! Having a look at it now and also some of the people she referred too! :) Em xx


  2. Such a useful blog post, I'm currently redesigning my website and this is a really valuable resource! Thank you!

    Jess - makingitupblog.com

  3. Great Tips! I already read all of your blog design posts lol I really happy with my blog right now, but we can always learn new things!


  4. Amazing tips! I love your posts on blogging because they make things simple even for HTML/CSS newbies like me.

    Morgan // www.blushingwit.com

  5. Yayy! Such an amazing post, super excited for this holly! Thank you xo

    - Chaitra | PinkPot

  6. Great post! I've changed my blog design so much over the last couple of years, still don't feel 100% happy with it!!

    Kate xo // www.beautybabbles.com

  7. Great post! I hate when the text is not justified...it makes me cringe lol!

    New in Makeup

  8. Thanks for this post. I find the whole designing thing really intimidating and am working on creating something I love, but I literally need someone to spell it out for me in the most basic way ever. Web design for complete dummies!!

  9. Haha. It's definitely my favourite way too.

  10. I think probably no one will ever be 100% happy. I've changed mine loads of times and I'm sure I'll change it loads more, but that's kind of the fun of it.

  11. Thanks Morgan. I try to make them easy to follow because I remember starting and looking at tutorials, thinking what the heck does that mean. I still think that often.

  12. Thanks Chaitra. You're the mastermind behind this project :)

  13. Thanks! I find it kind of fun learning how to do things even if you don't incorporate them.

  14. She's got some good stuff in there for sure. She always knows the best resources.

  15. Yeah, it can be super overwhelming for sure. I think it takes a fair bit of experimentation.