How to Design a Professional, High-Converting, Minimalist Site In Minutes

by Derek Halpern · 18 comments

Black and White picture with a multi-colored eye

I’ll tell you straight up:

I’m not a designer, and I’ve never been a designer.

But there’s a simple formula I use for whipping together designs that work, and almost anyone can follow it.

It’s pretty cool, and when you use this formula, you’ll have both a web design that looks great and converts well.

Step 1: Find An Awesome, Unique AND Readable Font

What makes a site work?

It needs to look like everything belongs… You don’t want any page element to appear as if it was added in last minute.

(Unless of course you want that element to stick out).

So, the first step in making your site work is this:

Find a nice, unique, and readable font, and use that font for your logo.

Then, use that font for your sidebar headings.

I do that on Social Triggers, and I receive compliments about my design regularly.

If you’re not looking for that unified of a look, you can do what Pearsonified does.

There, he uses one font for his logo, and another font for his sidebars. And it looks amazing.

Here’s Pearsonified.com design:

PEarsonified.com

Here’s my Social Triggers design:

SocialTriggers.com

But you’ll notice one thing…

Step 2: Choose Font Colors That Work

My site is minimalism at its best, whereas Pearsonified makes great use of colors.

How can you find colors that work well together?

I suggest you check out Colour Lovers. There, you can see color palettes, and then this is how you use them:

  1. Choose one color for links
  2. Choose one color for sidebar headings
  3. Choose one color for “action” (like a buy button, for example, should stand out from the rest of your design).

With my site, I happen to choose black for everything because, well, I like it.

Whereas with Pearsonified, he has his link color, his logo color, and primary colors highlighting each section of his sidebar.

Whatever you decide, the less colors you use, the easier it is to make them work (unless of course you’re a pro like Chris Pearson, heh).

Step 3: Add More Spicy Details (but not too many)

Design is all about the details—especially when those details mesh with your design, and create a unified look.

On Pearsonified for example, you’ll notice how he adds a custom bullet icon in his sidebar. It makes that list of links stand out from the rest of his site, so it works.

See it here:

Pearsonified.com Custom Bullets

On my site, I use small little arrows, and that works for me because of my focus on minimalism.

See it here:

Social Triggers sidebar

Step 4: Here’s Where The Conversion Part Comes In…

Follow this simple tutorial, and add email sign-up forms in each of those 4 places.

If you’re not building an email list, you can also ad advertisements in those same places, and they will work well.

And You’re Done

Find nice fonts, choose the right colors, spice your design up… just a little bit… and you’re set.

What do you think?

About the Author: Derek Halpern ran marketing at DIYthemes, and is the founder of Social Triggers. To get more tips on how to be confident, sign up to his list here.

If you enjoyed this article, enter your email below to get free updates!

{ 18 comments }

Kunal

Great Tips Derek!! After visiting your site and pearsonified in the past, I made conscious effort to follow your footsteps. That has helped me a lot.

Dave Doolin

Yep, sans serif in headers, serif in text. Or vice versa.

I’m going much more minimalist on my next redesign (August). Design is related to fashion, and minimalism is definitely “in” right now.

Himanshu Chanda

Any design can go out of trend pretty soon …. what stays is minimalism

Jacques

Something to remember though is that a minimalism isn’t the absence of design, in fact, it’s the exact opposite.

Himanshu Chanda

+1 for you Derek. At times we dive into design to an extent that we forget conversions. Design enough to retain the eye and the rest has to go on conversion! #WIN

Trenton Scott

Great article! I think you’re spot on in thinking that it’s all about typography and colors. With a minimalist design, the whole point is to focus your visitors’ attention onto your content, not the design. By making good aesthetic decisions up front and creating a clean/coherent design, you make it much easier for people to find and share your content.

I’m a huge fan of your theme on Social Triggers — it’s very unobtrusive and well-organized.

The timing of this article couldn’t have been more perfect — I published a similar article on my blog (also minimalist) on Why A Minimalist Website Design Is Better. Check it out and let me know your thoughts:

http://rainleader.com/2011/06/less-is-more-why-a-minimalist-website-design-is-better/

Earl Kallemeyn

Thank you for the advice about fonts as logos. Most logos today look cheap, because they are cheap. They make you and your product look cheap. With
a little research you can buy a font from a reputable font company like Typotheque and use it as your signature font, as you suggest. You don’t have to buy all the weights, just what you can use. I did this with their Plan and Brioni typefaces, and they continue to impress me the more I use them. I use them for my own look for my letterpress shop, and will use them for website also. There are other fonts and other foundries you can use also, and $100 buys you so much quality when you buy a typeface! Just do some research, and ask a qualified graphic designer for input and you will be well rewarded.

Derek Halpern

The font I use for Social Triggers was free, and it looks great!

Earl Kallemeyn

Free fonts can be great, however type design is one of the most minimal and exacting of creative disciplines, and extra jollies and flourishes that might look good at first may start to wear on you and your readers as time goes on. Just something to keep in mind when making your choices. Free or not it’s important to look first at the readability of a font, and all that that entails, that’s why as a confirmed do-it-yourselfer I recommended professionals for type design. Like heart surgery you don’t want to shop on price for the most important things in life, which is what type is to me. BTW Nice thing about using type faces is, you can change them out as fashions/tastes change, without changing your ‘pure typography’ look.
ps Keep up the great work!

Mezanul

Thanks Derek for your great tips. I am working on a new design for my website and your tips will surely help me a lot.

At this moment, I am using FF Tisa Web Pro by FontFont for my body text and Ronnia Web Condensed and Ronnia Web by TypeTogether for the headings. I am thinking about reusing the same fonts in my redesign. What do you suggest? Does this combination goes well every time or should I experiment more?

Thanks again.

mashengky

i love the pearsonified design.. can I get it?

Wilson

The great thing about reading this blog and every single post is that you never find the fluffy posts that you read in other blogs that I rather not mention their names. You guys actually give actionable content. I appreciate it that!

It time to put some of this real shiznits to action…talk to all you later.

Sander de Jonge

Even a financial advisor can use Thesis…see the result by clicking on my name here.

Davon Smith

Very informative and helpful for me. I’d like to read this for number of times. Let me get started.

Chukwuka Okwukwe Chukwuka

Hi! Derek, how do I add custom bullet icons to my Thesis theme powered blog?

Regards,
Chukwuka.

thomas bodetti

In some ways, the idea of keeping it simple really is the best course of action, readers, sometimes just want to consume material, not buy stuff, all day, I think when people want to buy something that is what they do consuming information now that is something that you can design for and should design for, meeting the needs of your consuming public that makes the most sense.

fritz b

FYI, http://www.pearsonified.com is now listed by a number of AV programs as a threat site. Explanation?

Sergio Felix

Hey Derek,

Great stuff, I think I need to create some graphic buy buttons instead of just using a link in text mode.

I’m pretty sure I’ll get a higher conversion rate by modifying this, thanks!

Sergio