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
hi April!
i’m very happy that you share with us your tips: also if you are talking about blog, i read and think them as tips i can use also when i design other things!
and i have to admit that i have always problem with “white”: it scares me!! exactly as when i have a new notebook, and i feel like i CAN’T write on it, because it’s so perfect like this, and sure i will “ruin” it ahah
but in the last year i understand that a white page, or a white wall, have to be a point to start, not something to keep like that, so i started to play with white also in my work..
about your post, i think i don’t really understand what you mean when you say “MEDIUM” (tips4): it’s just another word for “layout” or something else?
Thanks Fede! So glad this can be helpful in other areas! :)
In art, “medium” means what material you use to create the art. So, for a painter, the medium is paint. When I do my drawings, my medium is pen and ink. If someone does chalk art, their medium is chalk. It’s just what you use to actually make the art. I’m using it a little more broadly, here, to apply to blog design – and on Lori’s blog, what I’m going to use is photography. I hope that helps? And I know what you mean about an empty notebook, I feel the same way!! But, like you say, white space can actually be worked into your art for a nice effect. :)
Sooo excited here! This process really does continue to feel like a pregnancy, and right now I feel like I have just had an ultrasound and been given a snapshot of my developing baby. I LOVE what I see! You have captured my style so well — I can see that already.
Oh, I am so glad to hear you like how it is coming along!! It’s definitely a fun project building your site. :D
You managed to verbalize all of the important design elements I’ve been learning from “studying” what sets my favorite blogs apart from the rest. Thanks for giving us tangible guidelines!
Wonderful, I’m so glad it fits what you’ve seen in observation. Thank you! :)
This series just keeps getting better and better. And I love the idea of that printable to have something you can hold in your had to keep everything for your blog together. :) And tip #5 is pretty huge for me. Not everyone is going to “get” my blog, and that’s probably a good thing. :)
Oh, I am so glad you’re finding it helpful, Shaina! Thanks for your comment :D Yeah, #5 can feel a little scary at times. :) But like you said, not everything is for everyone, and that’s probably a good thing. :)
Oh, I love this post April! It’s fabulous. I too have a question about “medium”. I feel like I’m having trouble figuring out what mine would be because I’m not an artist… as in I don’t paint or draw (very well at least) and I’m not a photographer so I’m not sure what else there is that would be considered a medium. Now I do realize that ideally the photos you use on your blog should be good photos so that’s something I want to work on and get better at. Would that mean that’s something I should go with for my medium or am I totally off track? Thanks so much for this series! It’s great!
Good question on choosing a medium, that’s not something I really got into much in this post. There are a huge number of mediums to go with. Obviously, if you have a medium of art that you already do (like drawing, painting, etc.), then there’s a natural answer. But if not, there are still options you can do.
There’s graphic design, obviously, where you make your graphics entirely on the computer … this is especially good for doing sharp lines, geometric shapes and such. (For instance, the Miss Modish banner is graphic design.)
Another option, like you mentioned, is photography. Having great blog post photos is definitely a good thing to aim for, as it makes a huge difference in how your blog looks. From doing product photography, I’m sure you are familiar with the basics of good photography (using filtered/shaded natural lighting, using a steady hand or tripod, employing interesting angles, adjusting brightness in a photo editing program, and cropping effectively.) And you don’t need a fancy camera for great blog shots. If you’re going to be working on that for your blog, that’s definitely something you could do. Or another option is using some public domain photos. I’ll be getting into this more in a later post. Photos are automatically under copyright, but some artists choose to make their photos available as “public domain”, which means they can be used for personal or commercial uses freely. Google “public domain photos” and you’ll come up with some great sites, like this one: http://www.publicdomainpictures.net That’s a good source for great photos. The food photo I used in the background of the tip #1 image was from that site. The rest are my own. Just make sure the photo owner has officially made them public domain to be sure you’re using them properly.
Another medium idea would be some kind of mixed media, like I mentioned. For instance, mixing vintage images with graphic designs. Again, there are lots of vintage images that are in the public domain. You’d have to look up the specific dates, because I don’t remember for sure off the top of my head, but old book illustrations from something like 100 years ago and earlier would be public domain. Mixing those with graphic design can have a neat effect. For instance, here is a print in my shop where I’ve mixed vintage public domain images with graphic design: http://www.etsy.com/listing/96141806/whimsical-home-art-12×18-poster-come-on Or you could even just use vintage images in a less altered way.
Another mixed media idea would be if you did doodles on photographs. I’ve seen this done in really cool ways. And the nice thing is that the doodles don’t have to be perfect.
Anyway, I hope that gives you a couple ideas, anyway. If you want a longer list of just general artistic mediums, here is a big list: http://en.wikipedia.org/wiki/List_of_artistic_media Good luck! :)
Just went and checked out your blog — did you draw the illustration in your banner? Love it!! I think you’re on a great track there :)
No, I bought it. I tried the illustration thing, but then decided not to go with it since it’s not really me. I’ll check out the other medium options, but as far as I can tell right now, photos and maybe a bit of graphic design will be the route I’ll probably take. Thanks for the link to the photo website. I’m definitely checking that one out too!
April you are yet again the best! I updated my background to something a little less busy and dark to something that actually has my new colors in it and helps to bring out the white space (I think!) I am going to start re-evaluating my photos for my tutorials too, they are so busy how they are. I’m still a long way from being 100% happy with how it looks, my meat and potatoes need a little more work but I’ve only just begun so its still a process :-)
April
Thank you for this post. It is really great! I have a question that I thought you might be able to answer. I’m an interior designer not a graphic designer but I am interested in learning how to do some graphic design myself. My main goal would be to create downloads & blog posts that are visually pleasing. Do you have a recommendation for a starter software?
I recommend GIMP – you can find out more about it in this post from later in the series: https://www.theflourishingabode.com/2012/08/diy-blog-design-making-your-own-graphics.html
April,
The gold nugget for me here was your tutorial on taking a drawing and digitizing and editing it in Gimp. I do sketches and doodles and am even thinking on doodling on pics of my products. Thanks again, I’m enjoying your blog very much!
April,
This is a great series! I revamped my blog about a year or so ago, with a new style, banner, colors, etc. It’s been great! I haven’t really wanted to change that, but I follow you through several outlets and wanted to support you by giving it a read. Going through, I think I am ready for a change. My problem is not so much in how to set up one blog, as it is to tie everything together. I guess I’m eccentric- I have interests all over the place! I currently have 4 (yes, FOUR- two in Blogger and two in Tumblr) separate personal blogs I have running, and may have some future blog “jobs” for my church. Not to mention my public FB page, etc! Whew! I’m thinking it may be worth it to somehow tie them all (at least the personal ones) in together… But I’m not sure how to do that? Any tips for a girl with a lot of irons in the fire?
Oh, I know exactly where you’re coming from. I’ve had as many as three shops at one time, and various blogs. I think sometimes we try to do everything that we are good at. However, sometimes in running a business you have to give up something good to move on to something great. I’d recommend you figure out which aspects get the best response and have the most opportunity to grow. Then work on really defining your branding for that, and only keep aspects of your projects that fall under the canopy of that branding. Weed out the rest. I closed two shops, a blogs and a website when I decided to fully focus on FlourishCafe.com. It was sad to let some parts go that I had worked a lot on – but once I did, things really started booming in a way they never had before. It takes some research and some hard thinking/planning, but I think it’s the way to grow. That’s my two cents, anyway! Good luck :)
I found some great HTML color mix-and-match charts here… the first page linked gives html color names recognized in any coding (you can hit “shades” and get the six-letter code for the exact shade you want).
http://www.w3schools.com/tags/ref_colornames.asp
“Next Reference” lets you adjust lighter and darker shades of the exact color you chose (pick 2 and write down the six-digit code):
http://www.w3schools.com/tags/ref_colorpicker.asp
“Next Reference” after that allows you to “Mix” 2 colors and shades of your choice to give you the entire html color palett spectrum between them:
http://www.w3schools.com/tags/ref_colormixer.asp
Really handy for working within a one- or two-color pallet as suggested!
Hello April! Fy name is frances, and i’m 14 years old. I started working on a blog last night (wordpress), but i’m very confused, and there are a lot of things that i need help with, for example: changing my title heading, getting the “About Me” column on the right side at the top instead of at the bottom of the page underneath my posts :-/ please can you help me? My URL is http://beanjardine.wordpress.com/
regards, frances xx
p.s. i LOVE your blog :)
Hey, how you install your custom fonts?
to obtain in touch with the organization and inquire easily can offer a coupon to my website.
Share this stop smoking video Logic e-cig coupon along with your pals on Twitter or StumbleUpon.
I’m amazed, I have to admit. Rarely do I come across a blog that’s both equally educative and engaging, and without
a doubt, you’ve hit the nail on the head. The problem is something
too few folks are speaking intelligently about. Now i’m very happy I came across
this during my search for something relating to this.
Thanks for another fantastic post. The place else could anybody get that kind of information in such a perfect
method of writing? I have a presentation subsequent week, and I
am at the search for such information.
I wish I could design my own theme and make beautiful graphic for my blog… need a lot of skill and techniques to do that
thank you for sharing this tips
There are many different types of games and many different interests.
The Yakuza Lords game world has five cities with four neighborhoods each.
If you pre-order a game before release, you can often get special bonuses with your purchase.
Sadly, the game will not run on certain devices, as listed in the game blurb:.
This takes the stress off of managing these things,
so that you can keep planting and focus on defending your lawn. Even one person making it to Hawaii with the zombie virus,
infection, gene or whatever ultimately causes zombie-ism, will leave the
Hawaiian population on that island scrambling.
Game apps are specially designed by developers to be played
over i – Phones. Click here for full details of my system, how to perform
each tasks, and a You – Tube video demonstration.
It does not hurt for a Gallente player to choose a faction that helps with his
engineering skills, as many of the drone related skills fall under this discipline in
the game.
Hi there!I could have sworn I’ve been to this blog before but after checking thrrough some of the post I
realized it’s new to me. Anyhow, I’m definitely happy I found it and I’ll be book-marking annd checking back often!
Feell free to visit my website :: Rune Reading
Woah! I’m rwally enjoying the template/theme of this blog.
It’s simple, yet effective. A lot of times it’s
difficult to get that “perfect balance” between user friendliness annd visual appearance.
I must say you’ve done a amazing job with this.
Also, the blog loads extremely fast for me on Intenet explorer.
Exceptional Blog!
Visit my pagve … Psychic readings
If you can, schedule to quit while you’re on vacation or on a
holiday. Jumping to the conclusion that the Electronic Cigarette Prince edward island cigarette was
the cause of the fire before it is confirmed by the fire department investigator
could present a risk for patients of the hospital.
While there are lots of methods that aim to help people quit smoking like nicotine lozenges, chewing gum, counselling,
patches and other cesssation methods, one significant alternative is
hypnosis or hypnotherapy.
Użyteczne podstswowe dane: )
Again…ty so much for this education….much appreciated.