The Blueprint For Beautiful Blogs That Convert: Lessons From Professional Designers Rafal Tomal & Alex Mangini
Blog design can be scary.
You might have seen the recent psychological study (link below) making it’s round on blogs about the importance of design.
A bad blog design can have people leaving almost instantly, before they even check out the content.
So what’s a blogger to do?
How about learn from two of the most talented WordPress designers in the game today!
Here’s the link to that study, it’s called “Trust & Mistrust of Online Health Sites”.
Blog Design That Converts
Blogs with bad design often are guilty of many numerous “party fouls” of blog design, some of which include…
- Bad layout/structure
- Hard to read
- Difficult to navigate
- Colors are puke inducing
- Widgets everywhere…
You can’t really blame most bloggers: many of them consider themselves writers much more so than designers of any sort, so how are they supposed to know what’s a necessity and what isn’t?
That’s why I wanted to ask the guys that do know better.
So below I’m proud to feature two very talented young WordPress designers who’s whole business is designing damn good looking WordPress sites that convert.
Time to take notes.
Note: All links below were added by me, none of them are affiliate links, I support the people I interview :)).
Who Is Rafal Tomal?
Rafal is a guy I’ve wanted to interview about effective design ever since I started following his work, he is seriously that good.
Now head designer at Copyblogger Media (which includes a whole bunch of beautiful sites outside of Copyblogger.com itself), Rafal has definitely proven himself time and time again at creating awesome looking sites for some of the biggest marketing blogs in the world.
We can probably learn a lot from him…
1.) So let’s start with the basics of good blog design: When it comes to a WordPress blog, what are the foundations for a good looking design that keeps people around and gets them to subscribe?
What specific tactics did you employ (and learn) while working on the Copyblogger blog to increase conversions? (Color choices, layout, etc.)
“KISS – Keep It Simple, Stupid!” We are all familiar with that phrase, but it’s not so easy.
There is always so much content to show and so many messages to convey that we forget about this rule during the process of working on our websites.
Sometimes, we just have to take a step back, review everything and decide what is most important.
You have to take your visitors’ hand and walk them through your website rather than leaving them alone and letting them choose.
If people don’t know where to go, they will always find an exit. You don’t want to take this risk.
It really takes time to realize you have to keep your website clean and simple. The more experienced I become, the cleaner and simpler my designs become.
When it comes to design specific tactics, I’m trying to focus on typography and white space. It’s pretty important, especially for blogs where we have a lot of content.
Usually people want to use every free space and fill it out with the copy.
I think you should keep white space and use it to organize the look of your blog. It helps the reader to focus on the content, and you want people to feel good while reading your blog.
Colors: Of course you should try to keep a dark text on a white background and use a different color for headings.
Layout: A standard blog layout with the sidebar on the right side works best because people know it. It’s good to experiment with the homepage, though.
Do some testing. See what works the best for your blog.
Takeaway: I’ve talked about keeping it simple on this site before, so I’m glad to see Rafal back me on that belief.
I like Rafal’s take on whitespace: it doesn’t all need to be used, it just needs to be inviting, so that your content doesn’t look like a burden to read.
That’s an important part of design so many people need to get right: if you content looks “scary” (hard to read), people are gone, never to return, all because of something stupid like bad blog typography.
Rafal mentions maintaining a “clean” blog, and I had to laugh because that is the exact word that I use when I try to describe a blog design that I enjoy.
In fact one of my upcoming posts focuses on this “clean” aspect of design and uses the phrase way too often, so me and Rafal are definitely in agreement here!
You should find his advice comforting in regards to the layout as well: you don’t have to “change the game” with your blog’s layout, the classic content/sidebar is still cool and loved by many.
As long as your blog looks “inviting” to read and doesn’t scare people away with clutter and microscopic font sizes, you can design the rest of your blog to add personality and put your content at the forefront.
2.) Now let’s talk about what NOT to do, as I’m sure you’ve seen some scary examples in all your years of design work!
What are some huge mistakes that you often see bloggers make with their design, and what’s the worst horror story of a design that you’ve encountered?
Yeah, there are so many badly designed blogs out there and I’m thankful for that!
That’s the reason why we have a lot of work and sell so many WordPress themes through StudioPress. Just kidding… ;).
Content is the most important on the blogs.
You want to make sure it’s displayed correctly and is easy to read.
One mistake I’ve seen throughout my career is a small font size and a bad leading/line height.
It’s recommended to use at least 14px font size with 20px-22px line heights.
Another mistake I frequently notice is having too wide of a content area.
It is much easier and faster to read short lines of text and small paragraphs (see Copyblogger.com).
If your landing page has no sidebars, be sure to shrink your content area or display it in two columns.
Try to avoid as many distractions as possible.
It is not easy to focus on the article content if the sidebar pops up (banner ads).
Also, some bloggers try to push social media too much by filling their blog with social icons and “share this” plugins.
Yes, social media is important but try to keep it subtle and visible but not too offensive.
Takeaway: All great tips, especially on the content spacing.
Rafal gives us some particulars here with both font size and line heights, which effect the “readability” of your blog a lot more than you might expect.
Landing pages should be more narrow, akin to how a narrow email works better and gets people to stay on board.
Check out Copyblogger’s guide on “landing pages” itself to see how to properly do this.
I also like the idea of avoiding distractions.
You have to ask yourself: if you are at anything below 1,000 subscribers, what is your main goal?
Answer: Get more subscribers!
Why hinder your chances with disctractions?
Let the content be clean and center stage, and as people are engaged and reading, have the hot spots ready with opt-in forms, such as at the bottom of long posts (like this one ;)).
I’d also recommend having your opt-in forms contrast your background.
On this site, the “content area” and background are both light, so I used dark opt-in forms to stand out but still match the overall design.
This is an effective tactic that I’ve noticed on many blog: I highly recommend using it.
3.) Lastly, you are also known for your business designs, such as the designs for the Scribe SEO software and the Premise WordPress plugin. Obviously a design for a business or product page is going to be a bit different than a blog.
That being said, what is your number one goal when designing a beautiful product or business page? What design choices did you make in order to keep these product pages informative and useful, but also optimized for sales?
For all service/product websites, you should treat the home page as the landing page.
You have a few seconds to interest the potential customers with your service/product before they quit.
While working at Copyblogger Media, I also learned that educating your potential customers about the service/product is very important before asking them to spend money on anything.
This is the interdependent role of copy and design.
We know that our products are great but we can’t show all of the features at one time because that would be boring.
Again, keep the design simple and clean, avoid too many distractions, educate your customers and lead them through the purchase process.
You also want to minimize the number of the steps the visitors have to take to make a purchase.
We, at Copyblogger Media, have already mastered the entire process ;).
Takeaway: Nothing like a little confidence ;).
The big focus on business pages: inform and convert.
Make it easy to understand the benefits.
Make it easy to move along to the next step of buying.
Create the homepage to capture attention (in a good way), you don’t have much time before people are gone.
4.) (For fun) What has been you favorite site to work on in your time with Copyblogger media? What are some sites that you are really impressed by and take inspiration from?
The redesign of the Teaching Sells member area is one of my favorite recent projects.
You can see some screenshots on my Dribbble account :).
We had a very busy schedule in October and we had to come up with a new concept of the user interface in a relatively short time.
The Copyblogger team gave me carte blanche to design exactly what I had in my mind.
I wanted to create something original and creative.
With my obsession for details I spent a countless number of hours on it. It also took a lot of time to code it and implement it on the current system.
Fortunately, everyone liked the new design. We improved both usability and the look of the Teaching Sells member area.
The entire layout is fluid and works great on mobile devices.
Yes, I loved this project!
Takeaway: Rafal does some damn fine work!
Actually, I think the real takeaway here is that the devil really is in the details.
Branching out to more than blog design, if you want to succeed like Rafal in your field, small details can be a big factor.
You don’t get to designing sites like the examples above with a “throw it together” work ethic.
It shouldn’t turn you into a nervous wreck, but remember that it’s okay to sweat the small stuff!
Who Is Alex Mangini?
Another designer I knew would be perfect for this post was Alex of Kolakube.
I’ve been a big fan of his personal designs and the skins over at Kolakube due to how they incorporate good design in with “smart” design aspects as well: his sites are always built to convert.
I’m also a little bit biased because he did some customizations on this site :).
1.) So let’s begin with the essentials: what are the foundations for a good looking blog that converts? What specific tactics do you employ in your designs in order to build subscribers?
How about keeping people around and reducing bounce rates?
This is the problem I feel many people have: combining “good-looks” while preserving conversion rates.
Some people aren’t designers, and some people aren’t copywriters.
You’ll hear all the time that design doesn’t matter, it’s really only in the copy.
You’ll also hear that you should never let design dictate copy, but the other way around.
Well, rather than signaling one of them out and deciding which thing (copy or design) to focus on, give each the same amount of attention.
Make them work for each other. Create the mindset that your copy will not convert without a beautiful design, and that your design will look ugly without well-written copy.
That means giving attention to every last pixel on the screen, spacing out every line perfectly, adding style to input forms and writing only what needs to be written, without the fluff.
Keeping things as simple and direct as possible goes without saying.
But what goes overlooked I feel, is adding personality.
Something people will remember after they leave your site, or subscribe to your email list.
Something that will leave an impression in their minds.
That’s why I believe in designing and personal branding so much.
When’s the last time you heard someone rave about how well-written sales copy was?
I’d be willing to bet you hear “how awesome” something is designed all the time though.
Takeaway: Alex hits the nail on the head when it comes to the importance of design here.
Yes, content, we get it: but what about the user experience?
Branding and design make up a big part of that, and if you are running a blog, it’s far more of an interaction than just reading.
It really is a user experience.
So if you are not taking your design seriously, you could be hindering that experience.
And that could be hindering your blog’s success.
2.) Now we should definitely talk about what to avoid doing. In your time as a designer, what are some of the biggest “no no’s” in blog design?
Are there any common things that you’ve seen bloggers do that can destroy their conversions?
When people go to your site, they should always be left in awe by how cool your design is.
Bold colors, a cool graphic/logo, amazing typography — something that will make them remember you.
Capitvating people with great design is just as vital as capitvating them with persuasive copy.
When it comes to destroying conversion rates, I feel like the biggest mistake people make is putting weightless content on there blog, over content that holds some real weight.
A few things I consider to be weightless (as in, provide no value to your site):
- Advertisements + images that look like ads
- Content sliders
- Over-emphasis on social networks
- Recent posts/comments lists
- Getting people to subscribe through RSS
…and these “weightless” things tend to get placed over things that do have weight (do provide value to your site). A few examples:
- Ads placed above optin forms
- A giant, featured content slider above the rest of your site
- Twitter/Facebook widgets/bars all over the place
- Using too many mediums for subscriptions (RSS, email, Feedburner, using every social network imaginable, etc.)
If you just look at your site, take away a few important things that you believe are absolutely essential and cut out the rest — you’ll have just created a much simpler and direct experience for your readers.
Takeaway: Sensing a pattern here?
Both Rafal & Alex could design a WordPress site to have practically anything they wanted…
Yet they keep stressing a streamlined experience and getting rid of clutter.
Are they perhaps on to something?
Is Leo Babauta, author of the 200,000+ subscriber ZenHabits blog on to something with his clean design?
Point is: you can be memorable and clutter free at the same time.
I like to think that my site’s design is “bold”.
Bright colors (probably too many actually :)), bold features, and liberal use of textures.
Yet, at the same time, if you look closely, it’s actually quite simple.
There isn’t much in the way of widgets: you can subscribe, or check out some popular posts.
I don’t list categories, I don’t have much in the way of links, other than to resource pages at the top.
How can you get rid of “weightless” content while still being memorable?
Make the parts that do matter so creative that people will be drawn to them and won’t forget them anytime soon.
My personal example is my feature box (not surprisingly designed by Alex!).
It really pops out, giving some much needed life to my site, and yet it also holds a huge part of my site together: it’s the main way that people subscribe.
You can be clean and memorable, you just need to realize where to let your branding shine and where to keep things simple and easy for readers.
3.) For Kolakube, you’ve obviously had to approach a “business” style design. What did you do there differently than you did for blogs? What are some key elements of a business site that can help increase sales and conversions?
You have to know what is supposed to be accomplished (gather a lot of buzz, build an email list, sell something, etc.) and then build every last detail of the site to achieve the goal.
Without having a clear purpose in mind, you’ll end up messing a lot of things up.
That’s what happened to me on Kolakube, and why I ended up doing 3 major design revisions in under a year.
I had no focus, no main goal and did not know where I wanted the site to be in the future.
And that’s really my best advice I can give you when creating a “business” website that converts and sells: know what the hell you’re actually doing.
If you want to sell something, sell something awesome.
If you want to get hired, put ridiculous emphasis on you and your work.
If you want to build an email list, make it clear that you have an amazing newsletter.
Now, if you’re doing all those things — you have a business.
Takeaway: Alex provides some great insight on design for a business page long before the work gets started.
What are you trying to accomplish?
Define and conquer is the name of the game in web design: you can’t do everything at once.
You can’t do everything at once well.
4.) (For fun) What has been your favorite design that you’ve created thus far? What about it made it special for you?
I made the design when I was 15, and it was probably the design that really started to get my name out there.
The reason it’s so special to me is because I made it without really know what I was doing at such a young age, and it was such a big hit that it sparked my passion for creating awesome designs to this day.
Takeaway: You always remember your first ;).
Well, this has been over 3000+ words of what I hope was extremely useful content for you.
I know I learned a whole lot and will continue to learn about good blog & web design through following Rafal’s & Alex’s new projects
I’ve also got some exciting news for a future post!
You might have read this post and got inspired to make changes, but aren’t too familiar with doing blog customizations yourself, or how you should go about making a blog that fits the advice above.
I will be taking what we’ve learned here and creating a post on how to create a great blog design that converts with a “starving artist’s” budget.
I know a lot of bloggers don’t want to invest the funds for a multi-thousand dollar custom site design, so I’m going to show you how to best implement these practices for pennies! (They obviously won’t look as amazing as Rafal’s & Alex’s work, but hey the compromise has to come somewhere ;)).
So if you read this post and got inspired, grab the free updates, the next post will be going over how to best incorporate this knowledge yourself on an extreme bootstrap budget.
I also have a question for you before you go…
What are some WordPress designs that you really enjoy, or get inspiration from?