Asset 5

Hi, I'm Chris the technical director at Niftic-- and a fan of highly-crafted coffee, rock climbing, and impeccable execution.

I’ll be the first to admit that I LOVE flat web designs. I’ve always veered toward simple and minimal designs, particularly when those designs serve a purpose. I’m not intending to vilify trends or imply that following them will hurt your website. Oftentimes a trend, when executed well, can be extremely impactful. However, designers must remember WHY the trend is being used. Don’t use a trend simply because it’s what everyone else is doing. Ask yourself what your website’s purpose is and have your design be an extension of that.

BIG TYPE is a huge trend on webpages.

visual website optimizer website

VWO uses BIG TYPE to quickly navigate the customer to the website’s purpose— “Increase your website sales and conversions.” VWO clearly states exactly what they can do for their customers in a bold way. But just because large fonts work well for call-to-action pages doesn’t mean it will work well for every site. Actually, using big type unnecessarily can lead to confusion and hurt the conversions on your website.

Always ask “WHY?”

The most important question you can ask yourself when designing a website is: If I could have my customer accomplish one thing in this session, what would it be?

Some examples may be:

—Sign up for newsletter

—Make a purchase

—Read an entire article

—Look pretty

—Show expertise

When you’ve asked yourself what your website’s purpose is, you’re ready to make your website work for you. Understanding the main purpose will help shape the rest of your business decisions.

Let’s look at the example of making a website look pretty. Here’s the website for Sagmeister & Walsh:

Sagmeister and Walsh Homepage

Oftentimes beautiful websites don’t actually convert, at least not in conventional ways like an increase in revenue. A website like Sagmeister & Walsh serves a different purpose than generating sales, they wish to tell a story and create social proof. Design firms can benefit from this type of website design because highlighting impressive projects is the best way to get hired. For others, the pretty approach just doesn’t make sense.

Take an e-commerce site for example. Granted, the website is attractive, but the most important function is usability, not appearance. The customer must be able to find the “add to cart” button and navigate the site with ease if they desire to make a purchase.

Before I delve into techniques to improve your site conversions, quickly write down your answer to the question: If I could have my customer accomplish one thing in this session, what would it be?

Now…the techniques!

#1. Ask

Do not forget to ask your customer to do what you want. Otherwise they’ll have no idea what you want to accomplish. This step is often overlooked but it’s the most crucial. Don’t forget to ask!

Noah Kagan has a coffee challenge that consists of going to cafe and asking for 10% of your coffee. Somehow this sounds both easy and terrifying. It’s nerve-wracking, but it shows the importance of asking. We get caught up in proper social protocol and forget that we can ask abnormal questions. Ask for what you want!

On a website, this ASK is usually a call-to-action. Think back to the one thing you want your customer to do and turn this into your call-to-action. Look at the dropbox homepage for a great example:

Dropbox CTA

Dropbox’s goal is getting consumers to sign up for their service. They made the ask simple and understandable.

#2. Dominance

Your website is made up of visual elements: your logo, pictures, content, etc. These elements battle for the attention of your audience. As a designer, it’s your job to emphasize which elements are most important. How you choose to emphasize each element relates to dominance.

Dominance in design is the relation of each element in terms of size, saturation, orientation, and more. Each page of your website will have a dominant element followed by subdominant and subordinate elements. After defining the goal of your site, you can use contrast to make the goal dominate the consumer’s attention.

ribbon landing page

Ribbon uses dominance perfectly on this page. The contrast of color, saturation, and size draws our attention to easiest and the Sign Up Free elements first. The inclusion of the demo video showing a payment further reinforces what it is ribbon does. Like dropbox, Ribbon wants sign-ups and they emphasize this with great use of visual weight and well placed saturation.

#3. Social Proof

“Studios have discovered that they can increase the perceived ‘funniness’ of a show by merely playing canned laughter at key ‘funny’ moments. They have found that even though viewers find canned laughter highly annoying, they perceive shows that happen to use canned laughter more funny than the shows that do not use canned laughter.” —Robert Caldini, Influence 

We can all agree that canned laughter is irritating, but it’s successful because the audience doesn’t have to work as hard. They listen for the laughing cue and know they’re supposed to laugh too. Humans are wired to follow. I’ll admit I start throwing all my money when I see “Used by 3 million companies, including Google” for a SAAS service.

You’ve all seen the bars I’m talking about. Look at the one on Balsamiq’s site:

socialproof

 

I KNOW and identify with those companies! Why wouldn’t I use Balsamiq?!

But if you don’t have billion dollar companies using your product, how do you build social proof?

—Add social share buttons

—Include customer testimonials

—Boast about guest appearances. An appearance on local news or a site like “Techcrunch” can go a long way in the eyes of consumers.

#4. Flow

Flow refers to how a reader moves through content. On text-saturated pages (like tuts+) most users will follow a ‘Z’ or ‘F’ pattern down the page. This has to do with how we’ve learned to read and skim though content.

F Pattern shown with eye-tracking

As web-designers we can choose the flow of our pages. They do not necessarily have to fit the ‘Z’ or ‘F’ pattern. By including infographics, images, and using dominance, we can direct consumers’ attention to the information we choose.

Flow is most useful when youre telling a story or selling a product. Think about the sales process. What information does the user need to know first, and what can you add to make a conversion more likely? To do this, create a pitch or a slideshow that could help convert these customers in person. Then take that flow and transfer it to your webpage.

#5. Typography

Don’t forget the fonts! Many web-designers use generic fonts with little to no added thought. But typography is one element of design that can make an average page look extraordinary. This is where we can combine the ‘pretty site’ with the one that converts.

Let’s look at an example:

pelican

 

I love the combination of fonts used for Pelican Books. The header is humanistic and warm, while the page maintains a clear call to action and dominance. Typography can be difficult to master, but what’s most important is maintaining consistency. With a website, use a tool like typecast to test different web fonts, find a combination that supports your brand image and is readable. Then maintain it!

Check out Smashing Magazine for a more in-depth look into typography. The site features examples to help you choose the perfect font for your site.

Conversions should be the goal of your website. Design and brand image are extremely important, but the end goal should be getting conversions.

 

While designing your site, remember to:

—Define WHY. Think of what each page should accomplish.

—ASK the customer to signup, purchase, subscribe, etc. Ask for what you want.

—Use DESIGN PRINCIPLES to direct attention.

 

Bonus

Ill send you a few quick suggestions for your website for free