Thomas Watson, of IBM famously said, “Good design is good business.”
Who?
Well, even if you don’t know a lick about this Watson dude, the man spoke the truth.
Boo-yaa for old Watson, because …
Good design is good business, and as a blogger you need to stand out now more than ever, because …
1. Competition is fierce. You’re competing for eyeballs, remember?
You’re in the pit with other entrepreneurs and hungry, budding bloggers.
2. People are more in tune with good design than ever. They’re exposed to it everywhere and they know good from bad.
People ARE design savvy.
OKAY, let’s stop right here:
One of the things I want to do on this blog is inspire you to go out and kick ass. I really, truly do.
The other is to teach you what I know from years in business (read: design and marketing strategies) to enhance your online presence.
That’s it. My one-two punch and I just want to make sure it helps.
Now back to the recipe. Are you ready?
The formula is elementary, my Dear Watson.
Stone cold simple, really.
So, what’s the recipe for a crackin’ site?
Simplicity. Yep, that’s it, especially in blogging. So let’s focus on …
Color and minimalism:
I only use several colors on my site and here’s why:
In traditional branding color helps customers identify products. Think of the basic color schemes of the worlds largest brands: McDonald’s, Target, Starbucks, Coca-cola. They all use one or two main colors.
Would you say Coke or Target kind of own red? And how about Starbucks and that green?
Sites using a limited color palette are easier to recall and minimal color helps individual elements stand out.
2-3 colors is best. What might help is remembering the old 60-30-10 rule: When adding color to your blog or site, divide the color into percentatges:
60% is your most prominent color (e.g. black)
30% goes to the supporting team (e.g. red)
10% is left over for accent color (e.g. gray)
I don’t follow this to a tee, but you get the idea.
And allow room for White space. White areas catch the eye and stand out as obvious content areas. So give that site some breathing room.
Instead of tooting my own horn (that didn’t sound too good), I’m including several examples below of blogs done right.
Satya Colombo
I love the minimalist black & white look and his effective use of a highlight color. The side bar has a lot of info, but the look is clean and oh so functional.
Who says a design that is primarily black with tints of gray can’t look great? This site is a fine example of a minimalist look done right.
Really, really great use of white space and a clean, well-designed header that draws attention.
Also, notice how effectively Jeff has incorporated a link to his new eBook at the top, just below the header. Minimal use of color and white space rule the day here.
socialtriggers.com
I know Mr. Halpern is all the rage these days and I certainly get some juice from social triggers, but I really do love the spartan look of his site. He’s also effectively incorporated his Feature Box into the design. Nice, cohesive and Zen Habits simple.
Plus, as he has stated: “The less options you give people, the more likely they’re going to take action because they won’t be overwhelmed.” Clean, simple and to the point kinda rocks.
You might think Jen breaks the white space rule, but no! That cool background IS white space. And the real white areas (posts and sidebar) really stand out.
Notice how the design of the boxes works so well with the colorful background and how the site uses the light blue as an effective highlight color. Again, cohesiveness from top to bottom and because of that, we can bend the 60-30-20 rule a bit.
socialmouths.com
The look of Francisco Rosales’ blog is clean, elegant and designed for conversions. To me it’s a model site for incorporating opt-in forms, an effective footer design and an About page, or in his case a “Who Is This Dude?” page.
He also details some other great tips based on his conversations with Mr. Halpern here.
So, what guidelines do these sites follow?
a. Minimal use of color.
b. Clean, flowing side bars.
c. White space rules the day.
d. Cohesiveness from top to bottom (clean and consistent)
And with a feature box being all the rage these days, it’s nice to see a few bloggers who are effectively integrating this element into their blog structure.
Design is not just about making something look good. It’s about creating clean, functional navigation. An environment where the user is not overwhelmed, but drawn in.
I’ll be improving my site over the next few months and certainly think the fine folks mentioned above are good models to follow.
Do you have examples of effective blog design?
Have you changed your site design lately?
What are your thoughts on using a large opt-in box as part of your design?
Craig McBreen
Latest posts by Craig McBreen (see all)
- Your First Step to a Successful Brand? Be the Teacher. - December 1, 2016
- 3 Simple Lessons to Humanize Your Brand - November 17, 2016
- 4 Ways to Use Story in Your Marketing - November 10, 2016
Craig, meat and potatoes man. This is great!
Gosh darn it, I just finished my shite migration and now you put this out. Sheesh. Personally, everything I have read ( and you know I believe EVERYTHING I read) leans toward the large opt-in if it’s a subscribe button you are talking about. That I have now.
Minimalism is a stellar way to live and when done properly on a site it rocks. Just like Leo Babauta or The Minimalists have done. Clean. So I guess their 60-30-10 is white, grey and well maybe black.
I hear you about the white space and I think my site is going to have a little less but then it is set up in a news magazine format. There’s something appealing about that (at least to me). I totally agree on the colour (brand). Can the same apply to an image? I have 4 small cartoon stick men who represent the guilding principles of the site and they reside on the top left side of my header. Trying to be subtle about it but maybe I need a colour there. Hmmmm…..thanks for making me think a bit more about this.
The navigation piece is a good, no great, point.
Hey, that’s the great thing about this. You can change stuff if you need to.
Excited to see the commentary on this one.
Solid advice Craig.
Ralph recently posted..Have you discovered the methods to keep your writing real?
Hi Ralph,
Ah, I’m glad you mentioned The Minimalists. Love that site as well. White, gray and black works 😉
I like the use of the stick men and don’t think they necessarily have to be in color, but maybe a tighter integration with the logo might help.
Same with the news magazine format. I love that clean grid structure, man!But whatever elements you can do without … it’s often a good idea to take out, after some careful consideration of course. Anyway, we can certainly discuss this in detail when we talk.
For me, it’s all about ease of navigation 😉
Thanks!
I have always found full frontal nudity is usually a pretty good attention grabber. Not me of course, I don’t need that kind of attention.
I’m not one to notice too much, but subconsciously you know the ones that are visually appealing and the ones that are too busy. The minimalist approach works for me.
Good info, one of these days if I ever go self-hosted maybe I’ll pay a little more attention to this.
Good to see you Nirvana, hope your weekend went well.
Bill Dorman recently posted..I turned down one million dollars
Hi Bill,
Full frontal can be jaw-dropping or disgusting, right? 😉
Minimalist works great, especially in blogging. Cutting the clutter is always one of the first things I do with any client. When you go self-hosted remember this link! 😉
Weekend was great. Thanks Florida!
At least you didn’t say Lynyrd Skynyrd….:)
Bill Dorman recently posted..I turned down one million dollars
Ha ha, yes. Reminds me of high school and how much I hated the song “Freebird” 😉 It was a bit overplayed.
Timely info Craig, as I plan to make revisions to my site this week. I will keep the “look and feel”, because that’s something that people often comment/compliment me on. However, its functionality is sorely lacking, including share buttons, CTAs on various pages, shopping cart, etc. By next week, those things should be in place.
Great advice and tips. And I’m with you/Bill on the minimalist approach. Clear, clean, simple: I like that. Cheers! Kaarina
Kaarina Dillabough recently posted..Stop the madness!
Hi Kaarina,
Cool! Looking forward to seeing the changes.
Agreed. I think the look and tone of your site is great, so it sounds like you’re working on all the right things.
Thanks! Clean, clear and easy to navigate is the way to go.
Thanks so much for stopping by.
Hi Craig, Oops! I launched my redesign a week ago with…a rainbow theme! Not kidding. I tried a blue and black header image, but my design team vetoed it for my trademark rainbow colors.
That being said, the rest of the blog design follows your suggestions. Other than the header image, the color scheme is blue with hyperlinks in a teal color. I have lots of white space and a simple sidebar.
I haven’t used the Feature Box yet. I will look at the sample blogs you cite here for ideas on that.
You’re right, simple is better. My readers complimented the new design as being easier on the eyes. I like happy readers!
Thanks for this helpful information. I will keep it in mind for my next redesign!
Carolyn Nicander Mohr recently posted..The Debut of the New and Improved Wonder of Tech!
Hi Carolyn,
Well, those trademark rainbow colors could be considered brand equity, as people are accustomed to seeing that (something I didn’t discuss).
You are following minimal color usage everywhere else, and have a good dose of white space, which is great.
Yeah, I really like how well they integrated the feature box, especially Social Mouths.
Congrats on the new design and to more happy readers!
Thank you!
Thanks, Craig. I really appreciate your checking out my new design and your kind words. I’ve been thinking about this post since I read it and how it makes perfect sense. I also checked out the other blogs you recommended and can see how the clean design is compelling. Your blog design is a good example of that as well.
The redesign of my site took weeks of hard work but I think the work paid off.You’re right about the importance of design and how it shouldn’t distract from the content. Others who recognize this as an issue in their own blogs and are contemplating an overhaul should especially appreciate the blueprint you provided us with in this article.
Well done.
Carolyn | Wonder of Tech recently posted..Bin There Done That – How Tech Transformed a Life
Well said Craig and excellent examples, I wish more people got this concept. When it comes to web design, less really is more. I’ve had more debates and heated discussions with clients about this than I can count.
I find this idea applies even more when viewing sites on mobile or smart phones where screen space has to be used as effectively as possible. I’m in the middle of a total re-design for my own web presence and have removed all the color, the background image, the header, even the sidebar and footer and will replace everything with icons in a main page that makes everything look and work like an app.
I often use Zen Habits, Seth Godin’s Typepad blog and John Gruber’s Daring Fireball blog as great examples of minimalism. It forces people to see the content, not the distractions! Later…
marti garaughty recently posted..April 2012 abstract art wallpaper/calendar by marti garaughty
Hi Marti,
Thank you!
How many times do you win those dabates? 😉
You bring up a great point and something I am working on now as well. To make this place more smart phone and tablet friendly. Anyway, it sounds like a great blueprint to follow (your app-like approach).
Those are great models to emulate, but I wasn’t aware of John Gruber’s site. Thanks for letting me know about that one.
I look forward to seeing what you come up with at your place!
Being Irish, I win the debates about 95% of the time. But seriously, when they see my demos and examples they usually take my advice, the other 5% well… 🙁
The mobile thing is a BIGGIE for all of us with so many people viewing our sites/blogs via phones and tablets. A rock solid and simple solution is customizing the CSS of the latest default WordPress theme 2011. I might release mine once I finish the tweaks. Later…
marti garaughty recently posted..April 2012 abstract art wallpaper/calendar by marti garaughty
Good to know, Sir. Being a bit pugnacious is part of being Irish, right? … 😉
For now, I’ll probably just use WP Touch Pro for mobile. I’ll soon start on my own site overhaul though.
Thanks for your comments, Marti. Let us know when the new site is up and running.
Marti, My design team had to convince me that less is more a few weeks ago as I was doing my redesign. The head of my design team gave examples of sites like Dropbox and cosi.com as simple but enticing websites. Perhaps you could show your clients sites that are simple but make a bold statement.
Carolyn | Wonder of Tech recently posted..Color Your World with Tech!
hi Carolyn, Dropbox is another great example. Once I mention Seth’s blog and Leo’s Zeb Habits, they usually come around… 2 of the biggest readerships on the net and it’s pure content. Nice to “meet” you!
marti garaughty recently posted..April 2012 abstract art wallpaper/calendar by marti garaughty
Marti,
I’ve been reading Zen Habits since he started (actually way before I got into blogging and social and it was one of the few blogs I actually read). Anyway, it’s been very interesting watching Leo’s many iterations over the years, each design more spartan than the last.
Dropbox is a good one, and now I’m thinking, where would I be without good old Dropbox … use it many times each day.
Yes, Yes, Yes! Design is so very important, yet it often gets neglected. Oftentimes, people or businesses don’t want to spend money on good design and it shows. As you said, users are getting savvier and more demanding with design. If your site is clunky or cluttered, I think you make things just that much harder in the race for attention.
Great design examples. I especially love the Social Mouths redesign. Francisco did a fantastic job with it – bold, clean, and great calls-to-action. Another redesign I love is Jay Baer’s new site over at Convince and Convert. The calls-to-action are placed front and center on the site, BEFORE you get to the blog. Smart. And, the overall look and feel is contemporary and clean.
I could go on and on, but clearly, design is important. I hope people listen up!
Laura Click recently posted..How to Use Mind Maps to Build Better Content
Hi Laura,
“Oftentimes, people or businesses don’t want to spend money on good design and it shows”
–So true. Or they hire a designer on the cheap and then call you in to clean up the mess 😉
I agree with you on the Social Mouths redesign. Like you’ve written, it’s bold, but spartan, and easy to navigate. Very nicely done!
I just checked out Jay’s site today and it’s perfect for what he does. The logo and tagline are great as well.
I love the look of your site and blog and you certainly follow the rules outlined above. So, you’re a good model to follow too!
Thanks!
Thanks for the kind words about my site, Craig. That means a lot coming from a seasoned designer like you. 🙂 However, I know that there are some things I need to do to take it to the next level. The site is almost two years old and it’s time for some upgrades! But, you know the whole cobbler’s kids thing…
Laura Click recently posted..How to Use Mind Maps to Build Better Content
You’re welcome! Don’t tell anyone it’s two years old … they would never know 😉
It is very nicely done.
Agree with you, Craig.
I love the concept of minimalism and simplicity – those are the two concepts that support my blog and the idea behind my blog.
Design is important, but too many colors and too many flashy items can only distract the readers. A minimalistic approach is the key – deliver the content in a user friendly way, reduce the number of distractions and get more (and better) results out of each visitor.
I haven’t changed anything of my blog design – I used to change up things every month, back when I was with my old blog. But, nowadays I don’t do that. I just stick with the idea of minimalism.
Jeevanjacobjohn recently posted..Why and When You Should Quit Trying?
Hi Jeevan,
Well, you certainly do practice minimalism over at your blog. And, like Marti stated, I do think this is a trend, mainly because of the increasing market share of tablets.
You’re right. Design is not just pretty pictures, it’s more about a good user experience: Ease of navigation and a clear, concise message. I think many people miss this and go for the flash and use too many colors, etc.
It looks like you have that down 😉
Hey Craig
I think people really underestimate the design factor when they’re building their sites. I’ve written on this topic a few times myself, and I’m never short of examples of really bad design.
I’m a sucker for a good design, appeals to the artist inside me 🙂
As for my site, well it’s been through quite a number of iterations. I’m pretty happy now with the overall design, but have a few changes that I want to make.
Unfortunately my site is a bit like the cobblers son being the last to get new shoes 🙂 One day!
Jackie recently posted..How To Create A Bio Box That Converts
Hi Jackie,
And it’s usually because they go overboard, don’t you think? Too many colors, too many images and a focus on flash, not usability. I see this with corporate sites too. Just way to much going on. I always work with clients on Messaging first!
I like your color scheme and the header / logo is unique and something I always remember. It helps the you have that little green devil in your avatar as well 😉
“Unfortunately my site is a bit like the cobblers son being the last to get new shoes 🙂 One day!”
— Fix that with those baby steps we talked about 😉 Actually I have the same issues, but clients do come first!
Absolutely Craig,
When I work with clients on their sites, the primary focus is purpose. Why do you want that thing on your website, what is it going to do, does it meet the objective of the page. More often than not, they’ve picked up the magpie sydrome of seeing things on other peoples sites and thinking they need it too.
Thanks for the comments on the site…memorable is what I’m going for 🙂
…as for those changes…yep clients and workload comes first snap!
Jackie recently posted..Is Blogging Sucking The Life Out Of You?
You’re right about the magpie syndrome. Everyone has an affinity for shiny objects, right? 😉 People often point to a site they like and get fixated on that. It’s our job to go through those planning stages, so what they are paying for will actually help them 🙂
Yes, that is a very memorable design scheme you have going!
Hi Craig,
I have been working hard to fix my design. Slowly but surely I have been heading towards a more is less mantra because it really does make sense.
I think it is hard for some of us because we want to go with all the cool bells and whistles. It is easy to forget to try to read and visit our site as if we were a visitor.
Jack@TheJackB recently posted..Why Me Versus Why You
Hey Jack,
Loving the look of your site lately. I’ve seen your site change quite a bit since I arrived on the scene almost a year ago.
It is hard. My clients always want to go with the cool bells and whistles, but it’s important to focus on tone, then whittle down, then go to look and feel.
Thanks for stopping by!
I love Jeff’s header! It’s clean, eye-catching, and it uses the perfect combination of colors. Plus, typewriters will forever hold a special place in my heart. 🙂
I’m somewhat ashamed to admit that I don’t know much about design — only the basics. So, posts like this certainly help me out tremendously! Many thanks!
Jill Tooley recently posted..Why You Keep Failing (and the Only Way to Succeed)
Hi Jill,
Yes, his is one of my favorites, although some very young people might not recognize that artifact 😉
Glad it helped. I plan on more of these posts. You are welcome and thanks for the visit!
Hey Craig,
I love minimalism too, and the examples you’ve added are awesome. I have been doing my best to remove everything I don’t need. I’m not sure if I’ve succeeded, but I’m trying 🙂
Jens P. Berget recently posted..7 reasons that make mini sites a favorite of online marketers
Hi Jens,
Like I mentioned at your place … Love the new look and the way you’re whittling away over there. Less options … that’s the ticket 🙂 Looking good, my man!
Hey Craig,
Site re-designing seems to be a theme these days! You, Kaarina, Jack, Jens, Carolyn. And me! My coach and I are working on something new over the summer, something that is fully something-or-other which means it will be mobile as well! I’m excited about it. Thanks for these valuable tips!
Lori
Lori Gosselin recently posted..What’s Your Greatest Pet Peeve?
Hey Lori,
Indeed! And you’re welcome!
I’m really looking forward to seeing what you have in store! Very cool seeing so many blogs evolve.
Wow, very honored to be not not-minimalist-but-colorful site listed here. Truly an honor! The funny backstory is that I originally had a very clean and spartan design. Lots of white space. But it just didn’t fit my personality. I think that’s the one thing people forget in the equation. The design should appropriately represent you or your business.
Thanks Craig!
Jen Gresham recently posted..What’s the Source of Your Sunday Night Blues?
Hi Jen,
Your site is very colorful, but very clean and easy to navigate. I really like the way you’ve incorporated the colorful background into the design!
Perfect timing for me to read this post.
I just went through a blog revamp I did myself.
When I started my blog last year the plan was to simply “take some nice pictures with a DSLR and put’em up”. I was certain people would like it anyway.
But now, my revamp is an attempt to portray my entire essence. I want readers to know what I’m all about after the first few seconds they land on my blog. And this took a lot of research, reflection and planning. Certainly miles ahead of “just taking nice pictures”!
Check it out! http://www.alden-tan.com
Alden recently posted..Weekly round up!
Hi Alden,
I like it, especially the fact that a different photo loads on each page. Nice idea and I think it captures your essence.
Craig,
Again, as always, great stuff…
And I am right there with you. Simple. Simple. Simple. Simple. It’s so easy with Plugins and little blogging toys to get all crazy but Simple is always more effective.
I definitely believe in the Derek Halpern school of give them one option and they will take it, give them 10 options and no one will do anything.
And you’re doing a great job of that here.
Thanks,
Ryan H.
Ryan Hanley recently posted..eBooks, Podcasting and Why Marketing is Hard
Hi Ryan,
Thank you Sir. Greatly appreciate your content as well.
I’m all for spartan design and it’s really the only way to go with blogging. Looks like you’ve done a very good job of that over at your place too.
And yes. Simple, clean and don’t give your audience too many options!
Thanks for stopping by.