This past weekend, I had the pleasure of leading a session on Great Blog Design at BlogHer in San Diego, with the wonderful Cynthia from Nap Warden. Though I don’t do much designing anymore, it’s my background and my passion and I just love talking about it. Last year, I spoke on the evolution of my logo, so the powers that be at BlogHer must think me somewhat qualified. Thank you to them for that. And, thank you to the bloggers who attended our session — looking out at people having to sit on the floor and squeezing against the wall was pretty awesome. For those of you not there, here is a brief highlight of what we discussed…
• Good design is subjective, but there are certain elements that every good design must have: Legibility, good organization, a strong color palate and some negative space. (Please, don’t be afraid of the negative space!)
• Your header is the most important single element of your site and your first opportunity to grab people. If you are going to spend money on any single thing, this is it.
• Your navigation bar should contain the following links: Home, contact, about, subscription options, advertising options (if you offer them) and, perhaps, your other social media platforms. Don’t make people work hard to reach you.
• Please, for the love of God, don’t use black backgrounds, lots of animated gifs, small type or auto-music. The world will thank you.
• Use your footer! Think of it as a second navigation area, not just a dumping ground for crap.
• Evaluate your sidebars. Do you really need all those buttons and links? It’s valuable real estate and consider cleaning them up and linking to separate pages on your site instead.
• Fonts are so much more than just a way to present your words. They should enhance your site and help tell the story. Stick to no more than three and make sure the ones you really care about are saved as images and not text because not all computers will have that particular font loaded. Here are some resources to find great (and free!) ones:
• It’s amazing how many beautiful (and cheap) images are out there. You can really make them your own by purchasing vector images and taking away or adding elements. Here are some good places to start:
Remember that you only need a 72 dpi for websites, but if you’re going to be printing your logo, buy a higher resolution.
• Color can really make or break a blog. Play around with unexpected combinations and come up with a strong color scheme. These sites are really fun to experiment with:
• Be consistent across all social media platforms. Your Twitter, Facebook and whatever other sites you use should all echo your blog design.
Finally, a tip for design loving blog readers: If you read blogs through Google Reader, but miss actually seeing the blogs, this is the answer you’ve been waiting for: Logged into your Google account, go here and click on the Goodies tab. Once you “Put Reader in a Bookmark,” you will be able to read the posts from your reader, in their actual blogs. You get to see the blog post in the pretty design, and the blogger gets the page-view. Win, win for everyone.
Now, go and make your blog a more beautiful place.
Previous post: A Scene
Next post: These Chickens, This Life
{ 83 comments… read them below or add one }
I was just thinking I need a redesign to get rid of my textured black background. Thanks for the verification.
Also? I still don’t think we’ve met at any of the past 3 BlogHers, but there’s always NYC in ’12.
I love your blog design! Such great advice. Thanks for sharing. I hoped you were having a fantastic time at Blogher! I knew you would!
These are great tips! I think its time to ditch the illustration in my header but then I’m worried the space will look empty. Any advice?
I have been thinking about making some changes too. I guess I should make the time to get around to it.
Great advice. Just in time for the perpetual blog redesign I’ve been talking about since the day after launching my blog.
Great info here, Jill. Well done. I like the Google Reader tip, I didn’t know that. Your site design is really nice and clean. Makes me think I need to clean up my sidebar. Sucks that I couldn’t go to BlogHer, but thankfully it’s on the east coast next year..woo hoo!
I totally agree on making contact easy. I hate when I’m trying to contact someone directly (usually professionally) and there is no staff directory anywhere. Just wastes everyone’s time trying to get in touch with the right person.
I LOVED your session. It was my favorite one BY FAR. I am booking marking this post so I can review as I update.
For example, why do I not use my header? #dipshit
I can’t tell you (and Cynthia) how much I appreciated and enjoyed the blog design session, especially since I’ve been in the midst of redesigning my blog over the past few weeks. I came home and told my web designer (i.e. my husband) everything that needed to be changed. He said – yeah I know, I was reading your live-tweets during the session. Ha!
On another note, it was such a pleasure to finally meet you! You’re an absolute doll.
-Aimee
I loved meeting you– sad we didn’t get longer to talk!!
Great tips and ideas Jill.
I definitely have been thinking I need to come up with a new header/logo, but I don’t even know where to start or how to do it. Hopefully your tips will help.
I wish I had the money to just pay someone to do my blog design, but seeing that I’m a small time blogger right now, it just isn’t going to happen.
Do you have any tips/ideas for those that are smaller on the blog scale and just can’t afford some of the design stuff?
I’d be interested in the answer to your post too, Missy. I’m just starting out and am so totally lost!
I am interested in learning this too, but I would be willing to pay if the price was right. Right now I consider blogging my hobby which hopefully will lead to something more, so I know how important it is to grab an audience with great design. What do you suggest for those with zero tech skills and a small website support budget?
I’d start looking at inexpensive themes. Both WordPress & Blogger have really great ones that you can buy for less than $20. Start searching for “cheap blog themes” and see what you get. You really don’t have to spend a ton (or even anything) to have a great looking blog.
I guess it just seems like to get a really good header/logo, you need to have money to pay for one.
I do not do design nor do I even know where or how to start designing my own so my only option is to pay for it.
I do not know a whole lot about web design and I have done my own blog myself, but I have always felt it could be better and could look more professional.
It just seems like it is hard when you are a “small” time blog even though there are things you can do.
Yes! Google “blog themes” and you’ll come up with some beautiful ready to go themes, at a great price. Some are even free. You really don’t need to spend a fortune at all– it costs nothing to keep a site clutter free and I think that makes the biggest impact!
This is a great list for non-designers – love how you’ve got simple, key considerations here without all the stuff most of us can’t do.
Was great to meet you at BlogHer! It didn’t at all surprise me that your session was so full.
I’ll have to try that with google reader- thanks!
I have a totally new look coming for my blog and I can’t wait.
Ohhhhh, fun!!!!
Didn’t get to make it to BlogHer this year, so I’m so happy you posted this Jill! Thanks for all the great tips and hints, will have to try some on my blog.
Awesome tips, Jill. I have to try that tip for reading blogs in Reader, thanks!
Cynthia at Nap Warden did my blog make over back in the spring and I absolutely adore what she did for me. She was also great to work with and FAST!
Agreed. She’s awesome.
Great post, Jill. Some days I love my design, other days I think it’s too bright. This weekend someone tweeted me, “only you can put those colors together and get away with it”…still deciding if this is good or bad!
Totally a compliment. :)
Thanx. It must be that I need to redesign my blog as this is the second article I have hopped upon. Thanx for the inspiration and ideas
Thanks! Your post encourages me to be brave and kind of play around a bit before asking my DTS (domestic tech support, aka Husband) to implement my changes.
Yes, probably I could do it myself and be all empowered and shit, but who wants that when I could play you-are-my-minion with my husband?
Wish I’d be able to be at blogher & at the live session.
I must say. I’ve been having a heart attack ever since attending that session since it seems there is SOOOOO much wrong with my landing page. Having said that, it was BY FAR the most informative session i went to at BlogHer.
Well played ladies, well played!
YAY! So happy you thought so. So many of them don’t give real, take home stuff and that’s what we tried to do. Thanks for coming!
So happy you shared all this since I missed your class….and this was the ONE class I wanted to get to most! Dang 163 being closed!
xoxo
I see from Nap Warden’s post you mentioned my site? That ALMOST makes up fro not seeing you in San Diego OR Baltimore. xo!
Yes, we did!!! I love, love, love your design. But, it does NOT make up for not seeing you. Not at all.
I second (and third) other commenters who said this was one of the best sessions they attended at BlogHer. As a designer, I wish I could bottle your presentation and send it to all clients that I work with. You and @napwarden don’t come in a bottled version, do you?
Coming from an actual designer, that makes me so happy. And, if only we did… I could just pour myself on my family and take a nap.
Thanks for The tips. I look forward to using the Google Reader tip and I think I will remove some buttons from my sidebar. In case you haven’t heard, I’ve been whoring my blog a bit. :-) Oh and I wish I knew how to add social network buttons to my header, and or if you can use gadgets on pages….? (I use Blogger.)
I wrote this a couple years ago and it might help: http://www.scarymommy.com/social-media-icons/
Truly, Google is your friend. You can find the answers to any of this stuff just by looking!
Great tips!! Thanks for putting them up on your blog for those of us who couldn’t be at BlogHer.
I especially love the tip about “putting reader in a bookmark”. I’m on my way to go figure that one out right now!
Oh Jill, I learn so much from you. I was really sad to have missed your session but there was just no room left. This was the next best thing. Thank you.
Such awesome tips. And the session was even more fun!
Thanks for sharing your knowledge.
I know squat about web/blog designing but thank you, thank you for telling people to quit using black backgrounds!! It SO hard to read! (Now, could you tell them about how annoying the whole music thing is?)
Your session was fantastic. Definitely one of the best at BlogHer.
What great tips! Thank you for so generously sharing these with folks who didn’t get a chance to come to the conference!
Such a great session from two of my favorite people! Also – did you see me at the grocery store today? KIDDING, LIKE TOTALLY KIDDING.
Miss seeing your beautiful face though. xo
You make me laugh. When I’m not calling the cops on you.
Love the Google Reader tip! Thanks!
I had no idea you could do that with Google reader! It’s the reason I don’t use it. As an art director, the blog design is so integral to my enjoyment of a site.
I know, right?! It’s kind of life changing.
Very informative and helpful. thank you!!!
Ooo, I could kiss you for writing this post! La-la-la-LOVE your advice.
All I have to say is AMEN! I totally agree. And thank you for the tip on the google reader bookmark. That was MUCH appreciated.
That’s my biggest quibble with google reader! Love the tips and thank you for the recap!!
The Google reader tip is amazing, THANKS!
It’s really the best way to read blogs- I love it!
First, it was nice to met you at BlogHer. I’m sorry I missed your design session but video was calling my name. Thanks for the recap post. I love easy to read and navigate sites. It really does make the world a better place.
Great tips, and looking at your blog, I certainly give them weight. I’ve been talking about cleaning up my blog for a while now too. Guess it’s time.
I echo everything you’ve said here, but wanted to add design-seeds.com as a color resource. So cool…she takes beautiful photos and pulls color palettes from them.
Ohhhh, so cool!!! It’s amazing how many resources are out there!
Thank you for the great information. I cannot wait to start re-designing my blog.
THANK YOU for the Google Reader tip! I was absolutely missing SEEING blogs instead of just reading them!
Thank you!!! I attended the training at BlogHer, but was overwhelmed with all the infomation. I am desperate to update my blog design. Best training at the conference!
Great tips! I cannot wait to put them into practice, although I am always a little intimidated to mess with my wordpress theme. Thanks again.
Also, do you have any recommendations for good designers for a new header?
Nap Warden, who I presented with, is a great illustrator. I also really like Renee from Studio Bold. I would begin by checking who did the designs of sites you like– always is a good place to start!
Great tips! Your blog design is amazing!
Thank you so much. these are fantastic ideas. I really appreciate it. Im in the process of reading the book 31 days to a better blog. I think its helping me. at least I hope so, i need all the help I can get.
Fantastic advice!
Love the Google Goodies part! I had no idea!!
Thanks for the great tips! I was excited to hear someone other than “formal” blog designers suggest NOT using black backgrounds and music players. It’s so fundamental but no one believed me! LOL!
I think my favorite tips was about the “footer” being like a second header. I was always back and forth on the strength of my footer…but I’m excited to play it up now!
Also, someone asked about blog critiques in the session and I suggested going to The Blog Designer Network. You can just use the “Contact” tab if you’re interested in asking for advice on your blog design!
I’m so glad you piped in!! I was trying to remember your site and kept drawing a blank! Such a good idea.
Bless you for saying “no auto-music”. It’s so intrusive that it makes me automatically leave a site.
Love your design and so appreciate the help! Yours was– BY FAR– my favorite session this year.
Thanks so much for the great tips! I’m just starting a blog and can take all the help I can get :) I agree – no music!!
Thanks for sharing these tips! I really want to start a blog, and I am glad I saw this post first! :o)
Hi Jill, excellent information!
I just wanted to clarify one statement: “You can really make them your own by purchasing vector images and taking away or adding elements.”
As a designer you know this, but many don’t know that you can’t just buy an image and change it up (add/delete elements) unless the copyright holder provides you with that type of license to create what could be a derivative work. You know what kind of images to buy/license but I’m not certain everyone does and I don’t want people thinking you’re saying it’s OK to modify a copyrighted image without permission.
Also, 2 additional resources for excellent free images are:
http://www.morguefile.com (all in the public domain)
and the Flickr Creative Commons group. Sure you’ll need to do a little bit of research to determine which type of CC license you can use but it’s an easy learning curve.
Very good point– thanks for clarifying! And, I’ve never heard of that other site– thank you! There are never enough free images.
Jill,
I was one of the women squeezed in the back on the floor but I wouldn’t miss your session. And it was so worth it. You and Cynthia did an amazing job, I wish the session was longer!
I’m going to tell you honestly, I did not enjoy sitting on the floor and did not for the rest of the weekend BUT you gals were worth it and I would do it again.
Thank you so much for ALL the tips. You gals were down to earth and friendly, exactly what we all need. And thanks for putting all the resources here.
I kick myself for not meeting you, next time!
Long time fan and never stop,
~Allie
I’m so glad you came– thank you so much for the nice words! Totally made my morning. :)
So many great tips. Someday maybe I’ll be at BlogHer. For now, I will learn from afar. I’m going to try out that google reader info . . . and maybe when I have more than 4 subscribers (hehe) I’ll re-design. Loving even having a blog and getting to know all you uber-cool ladies!
P.S. My husband is in the process of getting a book deal, too. On a much smaller scale than yours, I’m sure . . . but he’s pretty rad, so hopefully it goes really well.
Cool tips, and again, thanks for sharing!
Congrats to your husband– that’s exciting!!!
Thank you, thank you, thank you for mentioning the (annoying) animated gifs and auto-music. I find on my dinosaur computer that it takes so long for these blogs to load that I just give up and look elsewhere.
Thanks for this recap. I missed your session to go to the small group faith blogger session. I’m not a faith blogger, but took the opportunity to listen to their conversations. Anyway, I hope to reference this info because I’m in the middle of changing my web design.
One day it will be nice to figure out why you look so familiar, but I won’t hold my breath on my part because I sat next to a woman at my daughter’s dance class for almost a year, only to figure out (IT TOOK ME ALMOST A WHOLE YEAR) that she was the same lady that lived on my block that I met one Halloween a few years ago that I wanted to get to know better. I wasn’t sure what house she was in, so I had been looking out for her for two Halloweens with no luck. Turns out, I had been talking to her all year (I even knew her Halloween plans) and I didn’t know those two ladies were the same woman. This makes me pretty hopeless to find our connection anytime soon.
Jen :)
We’ll figure it out… we just HAVE to!
Great recap – I so wish I had made this session. And auto-music just needs to be banned. Can you make this happen, Jill? Please?
I’m glad you re-posted I heard about your session from Angry Julie — bookmarking the sites as we speak – just say no to music – even on photo sites (I have one of those too) music=bad.
Fabulous tips Jill — I didn’t know about the Google reader in a bookmark tip. Thanks! :)
Thanks for the Google Reader tip. I will definitely try that one out.