Want to see something funny?

Forever Amber 2009

It’s my first-ever blog template (or a version of it, anyway: I couldn’t find the VERY first incarnation, but it looked much like this, with a few small differences): a Typepad theme, heavily customised by Terry, which stayed on my blog for a good few years.

I show you this because when I first started this blog series, quite a few of you asked for a post about blog design, so while I’m by no means an expert on this topic, here are some of my thoughts on blog design…

01. Keep it clean

People have lots and lots of different preferences for how they like blogs to look, and you’re never going to please everyone. One thing most people seem to agree on, however, is that they like the layout to be clean, uncluttered, and easy to navigate. And I know: it’s really, really tempting to cram your template and sidebar with every widget known to the internet. Twitter! Instagram! Facebook! Blog buttons! Animated gifts! Pictures of cats! The kitchen sink!

The fact is, though, that while it’s nice to have a great-looking blog, readers come for the content, not for the awesome font you used in the header, or the images in your sidebar. There’s nothing wrong with a site with “character” (which is what I was going for with that first design, up top),  but it’s better to try and do that without adding too much clutter.

Right now, the fashion (and yes, there are fashions in blog design, just like in anything else) is for very minimal designs, with lots of white space: you don’t have to make your blog look like that if you don’t want to (and there’s a good argument for taking it in a different direction, and making it stand out), but regardless of the look and feel you end up going for, it’s a good idea to cut the clutter, and only include those elements you think will actually be useful to your readers.

02. Keep it clear

Web usability is a a huge topic, and is something that could be a post in itself. I’m not the person to write that post, however, so all I’ll say here is that when you’re designing your site, the most important thing of all is that you make it easy for people to read and navigate it – and that means ALL people, including those who are visually impaired. Text and background colours are of the utmost importance here, and regardless of your personal taste, dark-coloured text on a light-coloured background is by far the easiest to read.

Light-coloured text on a dark background, on the other hand, can be almost impossible: if I come across a blog which uses white text on black, for instance, I’ll instantly hit the “back” button, because that can actually trigger a migraine for me – something about those scrolling white lines completely messes with my brain.

Font size and style is also important here, and while the existence of Google Fonts makes it tempting to use some fancy, flowing script for your post text, that’s only a good idea if you don’t want people to actually read what you write. Those fonts look pretty in headers and as titles, but for your actual posts, it’s better to stick to something clear and easy to read: fonts like Ariel, Helvetica and Times New Roman are popular for a reason…

Similarly, make sure your text is large enough to be readable, and dark enough to be seen. For some reason, I keep coming across blogs (particularly fashion blogs) with teeny-tiny writing, in a pale shade of grey. It makes my eyes hurt, so can you imagine how someone with a visual impairment would feel trying to read it?

03. Keep the capitals

This might be somewhat controversial, but I feel strongly enough about it to include it as a separate point: please, for the love of Gaga, use capital letters at the start of sentences and for proper nouns. I’m including this in a post on blog design, rather than in a post about writing, because there’s an ongoing trend for bloggers to write their posts in all lowercase, and I’m pretty sure most of them do it because they think it looks cute, rather than because they simply don’t know how to capitalise.

The thing is, though, capital letters aren’t there to make your sentences look ugly: they actually help to break up the text, so that when your eye scans it, it’s easier to read. A wall of text, all in lower-case, is much harder to read, and no matter how trendy you think it looks, it’s making it harder for your readers to understand you. And honestly, if you’re anything like me, that can be hard enough, without adding any other obstacles into the mix.

Also, this is probably just me, but just as I read TXT SPK as if the person is speaking Pidgin English, I read all-lowercase in a baby voice. Unless your shift key is broken, please keep the caps!

blog design tips for beginners: everything you need to know to design a beautiful blog, even if you don't have any design knowledge
04. Keep it consistent

This is possibly one of those “goes-without-saying” things, but keeping your design consistent across all of the pages of your site will give it a more cohesive, professional feel. Choose the colours you want to use for your text, logo, headings, etc, and then use them consistently. I touched on this in my post on photography, but I also recommend making sure all of your photos are the same width as each other, and as the text below/above them. You’ll rarely find a successful blog – particularly a fashion or beauty blog – which uses tiny images, so don’t be afraid to make your images big enough to be seen. On that note, though…

05. Keep it quick

This is another point I touched on in my last post, but how quickly your blog loads is just as important as how it looks. The problem is that many of the design elements which help make a site visually distinctive, can also really slow it down. Huge images, lots of widgets, tons of pointless clutter – all of those things will make your blog slow to load, and it doesn’t matter HOW good it looks if people don’t hang around to wait to see it (and trust me, they won’t….).  I spoke a bit last week about the importance of re-sizing images, but reducing clutter, as described in point 1, will also help your site load faster.

06. Keep it compatible

This tip is perhaps one of the most important, and it’s about making sure your blog is compatible with different browsers and mobile devices. A lot of people make the mistake of testing their design only on the browser/monitor or device they use personally, forgetting that different people use different browsers, differently sized monitors, different resolutions, etc. An increasing number of visitors will also be viewing your blog on their phone or tablet (I do almost all of my blog reading on my phone, these days…), so it’s really important to make sure they can actually SEE it.

This all sounds complicated, and can BE complicated if you’re the one coding the site from scratch. Luckily, most of us don’t have to do that: most bloggers simply buy a ready-made theme (As I said in my introduction, I like ThemeForest for WordPress themes, but I know you can find Blogger themes on Etsy, and there are tons of other sites which provide ready-made templates: WordPress.com has tons of free ones) and many of those themes are designed to be compatible with different browsers, and fully responsive, so they can be viewed on different screens or devices.

When you’re looking for a theme, always, always go for a responsive one. Responsive themes change size so that no matter the size of the screen you’re viewing the blog on, it will still display properly. For instance, if you look at this site on a wide-screen monitor, you’ll see the post plus sidebar (or three rows of posts, if you’re looking at the homepage). If you view it on an iPhone, however, you’ll see a variation of the design, which still looks much the same, but which fits into the much smaller screen available for it. With a non-responsive design, all you see on an iPhone is whichever part of the site fits on the screen -normally a part of the header and a small section of the post: not good for readers.

07. Give it some character

So you have your clean, clear, compatible template  – the only thing remaining is to give it some character, to make it stand out from all of the OTHER clean white blogs out there. There are lots of ways to add identity to a blog theme, but I’d say the most important one is to get yourself a decent logo/banner, and make consistent use of colours and fonts throughout the site. You might also want to consider using these same “branding” elements on your social media, too, to make your brand even more memorable.

I’d add a final point – Keep it Concise – but we all know I’d NEVER be able to take my own advice, don’t we?

25 Comments
  1. Dear Amber
    Thank you for this blog series! Whenever I am reading a new article about blogging here it makes me want to start blogging immediately – although I have no idea what I should write about 😉
    I just had to smile at the “Keep the capitals”-part because compared to my first language (German) where every noun has to be capitalised English uses very few capitalisations.
    Please continue your blogging tips. Maybe I can need them one day 🙂
    Best wishes
    Lisa

    1. It might not have a lot compared to some other languages, but English should at the very least have capitals at the start of sentences, and for proper nouns: there’s a trend whereby some people don’t do that, presumably because they don’t think it looks nice, or something, and it makes the text so much harder to read!

      As for what to write, I had no idea either when I started: I still don’t, a lot of the time, but I don’t let it stop me 🙂

  2. Completely agree with all your points here – the images being the same width I only cottoned into recently when I realised my favourite blogs did that… And it made such an immediate impact in terms of improving my blog design and visual appeal. Now I think about it a bit like fashion magazines – the images are big so you can look at all the stuff! While my blog design is only the best I can manage with a Blogger template, I’ve followed most of what you’ve said here and it looks a lot better for it. I’d add that a well designed header, however you can produce one, adds a great touch to a design too. I love seeing your older ones though – an interesting evolution!

  3. Yes to “Keep the Capitals” – and I’d add: please, please, please left justify your text! Don’t centre it so it looks like poetry. Don’t fully justify it to keep the lines neat. Don’t right justify it to look quirky. Left justified is easiest to read – it makes sense to our brains; we can follow the flow of the sentence; it gives the reader the simplest, most satisfying experience. I click the back button on anything centre justified because I know, no matter how well written it is, the words are not going to flow.

  4. I actually remember the first design! Has it really been this long? I have (apparently) been reading your blog for years now but haven’t commented much. I guess I should tell you at last how much I love your writing and your style – and your great sense of humour. Thank you so much for years of entertainment and for sharing bits and pieces of your life with us! I wish the very best for you and yout family.

    -L-

  5. I found your blog in your first design days and have been a reader ever since. I’ve so enjoyed it through the years. Also, I’m loving this series of yours. I’m looking forward to more.

  6. I loved the last 3 designs you had. All really nice and functional for your readers.
    I agree with all your tips, and I’ve actually mentioned some of these on my blog series last year. 🙂

  7. I just happened upon this blog through Shoeperwoman from a post on Pinterest (time thief!!!) I just wanted to say your blog posts about ‘how to blog’ shows how generous a person you are. I’m a teacher who teaches Fashion to teens and I spend a lot of time collecting fashion resources for my students that are more than just retail stores. I was hoping to find useful tips for my students to start blogs themselves and here…I found three…no, four!!!

    There are people who share resources and there are people who are terribly chintzy with sharing anything!!! I am confident my students will endear themselves to your retro-modern fashion style and articulate writing style. I’m having fun reading your blog in a Scottish accent (imagining your voice not my boring Canadian accent). Looking forward to reading your blogs with my students

  8. Thanks for those tips! I am suffering from this ‘neighbor’s blog theme always seems greener’ 😀 I have changed my theme about 3 times in a month, but it is so hard to make up your mind!

    On a different note, have you made a post about ways to follow? I used to be a GFC type of person and that worked for me so well as I opened one page (google reader) and could see all the updates from my favourite blogs. RSS or bloglovin’ just do not do the trick for me!

  9. I like to emphasize the 4th fact. Not only beginners but some experienced designers also do this mistake. The key is to think from visitors point of view.

    Thank you,
    Mark,
    CRD Media

  10. Amber, your blog is absolutely gorgeous! As a beginner, I hope to get my blog as beautiful as yours in the future! xoxo! I would love some extra tips or suggestions!

  11. Love the before and after! I was renumbering my first HTML only fan site for Buffy the Vampire Slayer last week. Nearly 20 years ago now!! Great tips.

    Thanks Amber!

    NK // diywptips.com

  12. I love the article and I definetely agree with keeping it clean, there’s nothing worst than heading to a website and it’s all messy and confusing!😖 Thanks for the fantastic article as well, I love it!💕✨

Leave a Reply

Your email address will not be published.