I guess there are basically two sides to this blog redesign series … the artistic side, and the more tech related side. We’ll be kind of jumping back and forth week to week from one to another – this week it’s the artistic. You know, the fun stuff! 😉 I have six blog tips to share plus a worksheet to start making some design choices.
So far in this series, we’ve talked about getting a vision for your branding so you can know what you’re aiming for, and then the next week we covered where to blog and how to get set up, and this week we’re going to be getting into design tips. Then over the next couple weeks we’ll start combining your branding and these tips to start really building your site.
All of the tips today are going to be with one aim in mind: Distracting vs Enhancing. We want all the aspects of our design to enhance our content, not detract or distract. Also, bear in mind that these are tips, not rules. I hope you’ll enjoy them and find them useful – I definitely had fun writing it!
DESIGN TIPS
1 ‣‣‣ The garnish shouldn’t be larger than the food
So, if you’ve been following this weekly series all along, then you’ll remember that your blog is like a dish: the content (your posts) is the food, and the design of your blog is the plating/garnish. Garnish can’t make up for lack of actual food … but it makes a huge difference in how the food is presented – and received by the eater/reader.
I don’t know if any of you are FoodNetwork fans, but I simply loooove watching “The Next Food Network Star”. It combines a couple of things I love – cooking and branding. Each contestant is their own brand, trying to win a spot for their own new show on FoodNetwork. Anyway, on a recent episode Alton Brown cautioned one of the contestants, “Watch out, you’re about to put a garnish on that plate that is bigger than the food.” And, as we continue to think of your blog as a meal, that is the exact same caution I want to give you.
Your blog’s design shouldn’t distract or overwhelm your content. If your design is so busy/cluttered/overwhelming/eye-catching (and I don’t mean that last one in a good way) that it is difficult to focus on the actual content of your posts, then your design is doing the exact OPPOSITE of what it should be doing. A few examples of some easy ways to overwhelm your blog with “garnish”:
– music that starts playing as soon as you load the page (trust me, a huge % of people will leave right away)
– busy/jarring/dark/overwhelming backgrounds
– lots of random font color/size changes throughout your writing
– so many sidebars, each full of ads and widgets, than your content is slimmed down to a tiny sliver
– etc.
“Garnishes” should be tasteful, and should be the supporting actors – not upstaging the lead role.
On to tip 2!
2 ‣‣‣ White space is your friend
White space can make a huuuuuge difference on your blog. Imagine the difference in looking at a busy/cluttered blog, where your eyes narrow as you try to find your way through all the busy-ness to find the content … vs. a blog where your face relaxes when you look at it, the content itself catches your eye, and you are drawn into reading. The amount of white space is often directly related to making the difference between these two. And, as was mentioned earlier, it comes back to the difference between distracting and enhancing. Which blog are you going to linger on longer?
Always remember that the part of your blog that you want people to really take note of and remember is your content. It’s the heart and soul of your blog. Give the eye space to relax. Don’t crowd your blog. White space in the background, white space around text, around pictures, around design elements – it helps to let these things really stand out on the page. Now, there is definitely a spectrum of how much white space you may choose to have on your blog. I’m going to put a few screenshots below of blogs that use white space well to make sure they don’t detract from their content. (You can click any image to be taken to their blog). Each has it’s own unique style and branding, but note the common thread of white space:
Bearing in mind the importance of white space, think carefully about backgrounds. I would encourage you to do one of the following to help highlight your posts:
1 – Have no background (white space only)
2 – Have a background that includes a lot of white + one neutral (like mine)
3 – Have a background that uses color only very subtly (probably best for blogs with a muted palette)
Now, my fellow bright color lovers, don’t despair. This does not mean you are doomed to a boring blog. It just means there are probably better ways to show those bright colors than in your background. In fact, those colors will jump off the page best if you stick with no background. Obviously there are blogs that have designs that don’t follow any of these guidelines. But the thing is … it’s a lot easier to come up with a good design that highlights your content following these. And it’s a lot easier to create a design that competes and overshadows your content if you don’t follow these.
For instance, on Lori’s blog, In My Kitchen, In My Life, which is the “guinea pig” example for this series as we go through and redesign her blog, she has a dark blue kind of marbled background. Observe, below, the difference it makes simply by removing the background, and how much more the gorgeous photo in her post jumps off the page:
See how much more the content of the post catches your eye in the on with the white background? Now, you may be saying, “But a white background looks boring!” Fear not! There are many, many ways to put interest in your design — ways that won’t compete with your content the way a busy background easily can. We’ll be getting into those in future posts. 🙂
On to tip 3!
3 ‣‣‣ Do your own thing – don’t copy someone else’s style.
I want to mention this one specifically here since I just showed some screenshots of others’ blogs. The key to a good blog design is not in finding a blog you like by someone else and trying to mimic their style. Remember that the goal of your design is to highlight YOUR content. Their blog is designed to highlight their content. You wouldn’t want to copy someone else’s posts and claim them as your own – so don’t copy someone else’s design either. And anyway, knock-offs just aren’t as good. Your final product will be so much better if you discover your own style rather than trying to mimic someone else’s. Ok, ’nuff said on that.
4 ‣‣‣ Limit your choices: colors, fonts, mediums
It’s a really good idea to limit your design choices. Now, keep in mind, this is limiting your design, not limiting your posts! If you want to have photos in one post, and your paintings in the next, that is fine. But your design itself should have choice limits. I recommend the following limits in your design choices:
‣ Fonts: Up to three: one serif, one sans-serif, and one script. (Serif means a font with those little extra lines that poke out on the end of the letters. Sans-serif means the letters don’t have those extra details. Script means it’s more like handwriting/novelty fonts… examples are below.)
One more note on fonts. Just because a font is free, does not necessarily mean it is free for commercial use. Make sure you have the proper licence for the fonts you use. For example, Kimberley Gershwein has a lot of fun fonts available here on dafont – they are free downloads for personal use, but for commercial use you must purchase the license. Happily, it is just $5! One of the fonts that is going to be a part of Lori’s branding is by Kimberley. So make sure you have the proper license on your fonts.
‣ Colors: Up to three. (You can get away with a little more if you’re counting black/white, or if you have multiple shades of the same color.)
‣ Mediums: Choose one main medium for your design. (Again, this is for design, not for post content. If you’re going to have a photography banner, don’t have buttons that are pen and ink illustrations. Or if you want watercolor paint sidebar images, use that in your banner as well. Have one major medium you’re using in your design, rather than mixing and matching. By the way, mixed media counts as one medium. For instance, collage of vintage images and graphic design. Just make sure you make the mixture consistent throughout your graphics.)
These limits will help to keep your look branded, recognizable and unique – as well as giving a clean look to allow your content to stand out.
On to tip 5!
5 ‣‣‣ You’re not trying to appeal to everyone
I’ll be honest. My FlourishCafe creative biz & blog are never going to catch on with a huge following in the teen goth skater guy community. Yeah, surprise, surprise, huh? I remember when I first launched … I was also designing some jewelry and accessories at that time. I went to a downtown park with some friends to do a photo shoot of a scarf-wrap that I had made. While we were taking the photos some goth/skater guys walked by and called out something about my “ghetto scarf”. And while it never feels great to have something you’ve made ridiculed by others – it really didn’t both me. Why? They weren’t my target audience. Frankly, I would have been disturbed if those teen guys had wanted to wear my ruffled and be-ribonned scarf. I wasn’t trying to appeal to them. So the fact that my product didn’t appeal to them was no big cause for concern.
The same is true for your blog. You’re trying to reach out to your target audience. If that target audience is middle aged women who are interested in yoga, then don’t worry whether 20-something men who play hockey will love your site. This applies to your content, to your design, to everything. Now, I’m not talking about being rude or bashing other audiences on your blog – I’m just saying that you should write and design your blog for YOUR target audience … and if it’s not someone else’s cup of tea, don’t worry about it, they are the target audience somewhere else. If your readership isn’t particularly trendy, don’t worry about having to change your blog’s color scheme to fit Pantone’s color guidelines each season. If your readership isn’t into cats, then maybe don’t put LOLCats all over your blog. If your readership is on a tight budget, don’t worry whether millionaires will find your money saving tips useful.
Now, some things apply to practically all target audiences – like the ability to read/see your content, which is why tips like having plenty of white space and not overwhelming with garnish are fairly universal. But many options, like which colors to choose, what style to go for, etc. will depend on your taste, and your target audience. If you just try to broadly appeal to everyone you won’t be as successful at getting in touch with that niche target audience that you want. Look back at your branding printable and read your description of your target audience. Think about them in your blog’s design, and in your posts. In fact, a good way to come up with valuable content is to think about the problems your target audience faces – and offer solutions in your posts. Is your target audience knitters? Offer tips on keeping yarn organized. Is you target audience gamers? Review your favorite little-known games and tell people where they can find them. Is your target audience creative women? Offer them tips on how to re-design their blogs. (Wait, that’s what I’m doing!;) Because in the end, a blog is about the reader, not about the writer. Yes, be authentic and be yourself. But it’s the difference between blogging about how hungry you felt at work today vs. blogging a recipe you made that really hit the spot after a long day at work. Both are “about” you, but one is for you, and one is for your readership. Think about your readers, both in your content and in your design, and don’t worry about whether it appeals to everyone else.
Ok, are you ready to finally start making some design decisions??? Here we go!
6 ‣‣‣ Make decisions that fit your branding statement
I’ve designed a little worksheet to help you keep track of your design choices – in particular, your fonts, your colors and your medium. I tried to keep the worksheet simple and plain to not interfere with your own design process. Unlike printables, which I have offered before, this one is a jpeg to be used in your image editting software, so you can type with different fonts, and get your exact colors and such, rather than hand writing it. I tell you what, it is SO handy to have a file with your specific hues saved so that you don’t have to try to find “that blue” on the color wheel each time.
I put a place to write out your branding statement, which you crafted from the first part of this series (if you haven’t seen that yet, it’s an important step! You can click here to go back to that post) because all of your choices should reflect your branding statement. Look back at your branding printable, at the colors that resonated with you, the answers you gave, and start there to make your design choices. For instance, looking at Lori’s answers from her branding printable, here is the sheet I filled out for her blog, In My Kitchen, In My Life, which I am redesigning in this series:
Do you start to get a flavor for her site, looking at that? Her serif font is more classical looking, it almost reminds me of columns. Her script font looks like what you might see in a neatly hand-written letter. I think this fits her branding statement “classic and cultured done simply and down to earth” well. As for her medium – I decided not to illustrate her blog, like I illustrated mine, because that sketchy almost-cartoonish feel of my illustrations definitely doesn’t fit her branding statement. As I looked back through her posts, I saw that she had lots of great photos. Some of them I believe she took herself, and some of them her son, who is a budding photographer, took. I started compiling these photos, and fixing up the lighting in my photo editting software – and the colors for her blog that she had mentioned just jumped right out at me! You can see the images, though small, at the bottom of the worksheet. Since she has so many nice photos that reflect her style so well, I thought it would be good continue that and use photography as the medium for her blog. And on the colors … yeah, you can see I cheated a little and used four instead of three. This is because the navy blue is so close to black, and as I mentioned black and white can be “givens”. In general, though, I recommend sticking with 3 colors.
So, here is your own design board to fill out. Make sure you put your branding statement at the top – and have fun playing around to decide on your new design choices! Just right-click the image below and save it to your computer so you can edit it.
I hope that these tips and worksheet have been helpful for you!
I’d be very curious to hear about some of your design choices.
Leave any questions, comments or thoughts below, I love to hear from you!
You can also check out the rest of the posts from this series, here:
Part 1: Discover your branding with “The Drawing Board” Printable
Part 2: WordPress vs. Blogger
Part 3: Design Tips + Design Worksheet (That’s today’s post!)
Part 4: Themes, Coding and Stylesheets
Part 5: Making your own graphics
Part 6: 7 Blog Layout Tips to Engage your Reader
Part 7: Blog Page: The Must-haves and the Panache
Part 8: 25 WordPress Tips
Part 9: The Big Reveal
Part 10: 7 Ways to Promote and Market Your Blog
