Are you thinking about redesigning your blog soon? There are quite a few special things to consider with this type of website, and as I’ve just launched my new redesign, I thought you might appreciate some tips, resources and points to consider for a blog redesign (or bookmark this for later because you know you’ll eventually need to redesign!)
I looked through countless galleries of blog designs.
- 45 More Excellent Blog Designs (Smashing Magazine)
- We Love WP
- Best Web Gallery
- Elements of Design Gallery
I found these how-to resources valuable
- How to Blog Design Style Guide
- Meticulous Design the latest in a great series on Vivien’s research into designing her blog
Practical Examples
It’s nice to say “carry the style throughout every detail,” but I’m all about real, working, actual examples. How do you carry the style throughout the design?
I like to come up with several different visual elements for the style and work them in everywhere possible. What kinds of elements? Things like bullets, borders, dividers, icons, attention grabbers/signals and background graphics. Develop 2-3 of each of these items and vary their use. To keep consistent, particularly consider your use of line, shape and color with these elements.
You can see with my blog that I have the dark blue border on the sides and in the footer that divide the main content. I also have the purple dots that separate out the meta data for posts. I reuse the purple dots in the footer under the column titles, too.
For background graphics, I have used the little paint swish behind the comments and behind the post title. A slightly different variation of it can be seen behind the Search, RSS and footer columns.
For attention grabbers/signals, these are things say “Look at me! I have something important you need to know!” These would be placed behind/around posts titles, blockquotes, and perhaps used as a rollover in the navigation. In addition to the paint swish, I have stars/twinkles and an underline in the page/post title and I use hand-drawn lettering for important areas like the blog title, RSS, Search and as a signal for where the footer Extras begin.
Even though icons already exist for things like RSS and ShareThis, I created my own that match the style of my blog.
Details
Below is a quick list of details to think about with a new blog design. Smiley Cat’s Elements of Design gallery is great for these things.
Typography
This includes the body of the site, sections, headings, image captions, blockquote and/or pull quotes. Limit it to 2, maybe 3 fonts.
Comment Style
Comments can be very minimally designed with only a simple border in between them, or they can be much more elaborate, like my comment area. Pay attention to styling permalinks, dates, numbers, total comment count, in addition to whether to include Gravatars (what about an alternate for the default grey avatar?).
Post Meta
Post meta includes things like the date, author, category, tags and related articles. For my design, I set this information apart and made it stand out by changing the color of the text and putting an implied box around the content (implied because it’s really only a series of dots, but it looks as though it’s a box). I used a divider I had created to blend well with the style, as mentioned above.
Icons
Design your own? Find a suitable collection already created? Which pieces need icons anyway? Custom smilies? Maybe you use icons as a primary way to navigate?
Lists
Bullets, line spacing, color, size – does the list need to stand out?
Misc and Still to Think About
- Favicon
- Image captions
- Trackback links
- Comment form
- What else can you think of?
yay for being on a single page
Peter,
Hi! Not sure exactly what you mean :/ What are you glad is on a single page?
Thanks for the tips! I really need a new design!. Viviens website Meticulous Design is great.
I believe the keyfactor in blog design is usability.
Great roundup of things designers should not forget about when designing a blog. I guess you can add menu styling to that. I like how you decorated yours. And also link styling, and not just image caption but image styling as well.
Thanks for the mention, and Sander, thanks for the compliment too :-)
I like your new design. Speaking to that and your previous post, I’ve noticed the hand-drawn look being utilised by several web designers now, which I see as being anti-web2.0, but at the same time more versatile than the grunge look you mentioned.
Sander,
I love it when Vivien breaks things down into the little details. She’s very good at that. I agree, usability is very important when designing a blog (or any website for that matter!). It helps to notice the way you interact with a new blog.
Vivien,
Menu styling! Yes! And links, too. I can’t wait for more of your meticulous designs series. Are you planning to do one on image styling, too? The only one that comes quickly to mind is Jacob’s blog with the pencil outline.
paul,
Thank you! I find it interesting that you distinguish between hand-drawn and grunge. I guess I thought of hand-drawn as a subsection of grunge, but that’s not why I designed my blog the way I did. This is very much the style that I admire (way before it was a trend) and this is pretty much the only place I have the freedom to create like this. And I know that designers (my primary target) will appreciate the details, even if, as many have said, it’s not their particular preference for a style. Have you seen Smashing Magazine’s collections on grunge and hand-drawn sites?
Lauren, yes I am planning on covering more design details, including the images, so stay tuned ;-)
Wow, Chris Glass’s use of icons is impressive!
I am so slow! I didn’t realise Jacob’s images were emulating the pencil! Makes sense though.
Hmm, trying to think of things that are more about style than content, but they’re so related. Like whether you even want a sidebar on pages, if not, do you make the content area larger, or make two equal columns?
Footer, is it big with useful stuff or small with just copyright etc - even if it’s small, make it look like the end of the page, maybe invert the colours or something. Or as you have, a bottom border (in the swishes).
What can you do to make people say “Ooh…”? I saw a cool RSS icon recently. It was poking out from under the header, it was hand-drawn style (already cool enough to click on), then when you hover on it, it pulls down a little more - very cute.
Ooh, just thought of two other things - forms: custom submit buttons are cool (like the ones on Design Adaptations and Problogger). I also quite like search forms that don’t have a sumbit button, just hit enter.
Vivien,
Yay! If you remind me (or I remember) I can edit this post and link back to them.
Kris,
Jacob explained that pencil thing once and I just happened to be in on that conversation. Because it’s such a fat pencil, it’s a little hard to get if you don’t make the connection with his logo (you knew that was a pencil, too,right?). I was having trouble separating content and design, too. This post was actually about twice as long because I got into sidebar and footer content! Where did you see that RSS icon? Do you have a link? I like those forms that don’t have a submit button, too, but I don’t think that’s very user friendly (since we love to talk about NIELSEN here—is Esben listening?) :P
Yeah, I wonder about the search form too. Mine just says “Search…”, it used to say “Type and hit enter to search…” and my husband told me I was being too condescending. However, I might change it back if I start promoting my blog offline. It’s easy for people who read blogs all the time to know what to do, but for some people, if they spend less time on the net, they might not get it.
No, sadly I can’t remember where I saw that RSS icon. I’ve been to the places that I thought might have led me there, I actually looked through some of my history too, but I have no idea what it was except a blog belonging to a female.
Kristarella, is this the site with the RSS icon you were talking about? It is poking out of the header, but doesn’t pull down on the hover though.
In any case, I stumbled upon this site a few days ago (couldn’t find the bookmark, so had to search through the History as well), and I quite like its design and typography.
Hey Vivien - that could be it and I mixed up the sliding idea with another site, I love the way the text shows up on hover! (I thought I was subscribed to Yvonne’s site, but I wasn’t, woops!)
Actually I’m not sure now if I’ve seen an icon that slides like that - it was an idea I had at some point for my blog, but I didn’t use it.
I also saw a totally cute icon of a hand drawn girl holding an icon, it was cool. I don’t think it was this one, but these icons are similar.
Kristarella, are you following my steps surfing the Web?
I saw this site a few days ago with a cute RSS icon.
Haha, I thought things were about to get freaky, but no… I haven’t seen that site. I’ve seen the RSS icon on Smashing Magazine though.
Ok, I think it might have been All for women that I saw the girl rss on, in which case it is the same as the previous link… dang my memory is off!
ah, ok. I though that the sitting guy-RSS must be available for download somewhere. That girl RSS is cute. Thanks for the links.
Vivien & Kris,
I’m so glad you feel comfortable to carry on a conversation without me. I’ll just listen in and take a peek at those links
I do like the way Yvonne’s is hand-drawn and the rollover is unique, too.
Very useful post. Thanks,
Busby´s last blog post: Kinetic Shadows Design Studio
Busby,
Thanks. Glad you enjoyed.
One Trackback
[…] Small details of a blog design – Lauren of Creative Curio discusses the small details following her own blog redesign. […]