We’ve heard your requests for more informative blog posts, so we’re starting a series called Blogging 101. In this series, you’ll find how-to guides, information, and tips from other 20sb members who might call themselves experts on these subjects. If there’s a topic you’d like to see covered, please send a suggestion to blogs@20sb.net!
—
Today’s Blogging 101 lesson is brought to you by Erini!
So you know what you want to say, you’ve got your blog set up–but what about what your blog looks like? Blogs are just as much a visual representation of you as they are a written one. An overly complicated design or poor color choices can kill a blog regardless of content. So today we’re going to talk about how to make smart design choices to really make your blog shine.
Keep it simple!
There’s a great quote in the fashion industry by Coco Chanel saying to remove the last accessory you put on. This is also true with design too. Do I really need 20 social media icons? How cluttered is my sidebar? Do these animated gifs really enhance my site?
An overly cluttered site is just distracting, and the sidebar is super easy to just dump anything and everything. When I first go to do any work on my site’s design, the sidebar is one of the first places I look. Is all the information there crucial? I, personally, keep a 1-2 sentence bio, only the essential social media icons, promoted badges/ads, link to my archives, and a little disclaimer (which could get moved to the footer).
Readability is key.
I cannot stress that enough. We need to be able to easily read and navigate your blog from the site itself. Readability is all about where your eye is going on the page–the hierarchy of information/design. Color and sizes can work to build hierarchy. (You can read a brief bit about it and see good examples here.)
When choosing colors, it’s best to pick colors that are complementary or analogous. (Read up about that here.) Test your colors. Put them right next to each other. Use one as a background color and the other for text. Do they seem to live in harmony and work off each other, or are the vibrating? Can you even read it? If you have to strain at all, then no. Pick something different. And in all honesty, for large bodies of text, just use black on white, or something close to it. You want what is most comfortable, and it’s not going to ruin your design.
Picking fonts is just as important. Certain fonts are good for headers and headlines, but are terrible for body copy. Handwritten fonts fall into this category. Display fonts should never be used for body copy. The size of your font is also important for readability. I generally keep my body copy at 14pt, depending on the font. Serif fonts are going to be easier on the eye for long pieces of text. Also, remember to choose a web safe font. Not all the fonts on your computer are suited for the web, nor will they even be available. (I use Google’s web fonts for most of my projects.)
Pick a (good) theme
There are SO MANY themes out there. In fact, stay tuned for an upcoming post on how to pick a great theme. But some the main thing you should ask when picking a theme: does this have the functionality I need, and how customizable is it? If you know CSS, then pick a theme based on its structure–if not, then look at the whole package. Most good themes will also come with support from the developer, which does mean dropping a little cash for a good theme. (Of course, yes, there are good free themes out there if you know where to look.)
These tips should be helpful as you work on your blog design. You can definitely hire someone to do it for you, but just know that with the right tools, you can do it yourself.
The last tip with blog design that I’m going to leave you with is this: never, ever, ever have an automatic music player on your blog. I don’t care how much you love that song and how much it fits the theme or message of your site. Nothing will make your site hated more.
Erini is one of the 20SB Executive Board members, and has been building websites for roughly 14-15 years. Along with freelancing, she also is the director at a school which focuses on digital programs and web development. She blogs at AdorkableMe.com.
