Supercharge Your Funnels By Leveraging the Power of Branding and Visual Design

Parisa Vassei      Thursday, November 2, 2017

Share this page with a friend

Amongst the FunnelHacker™ community, the consensus is that ugly funnels convert. While I won't disagree that ugly funnels can convert, my goal is to convince you that branding and visual design play a vital role in the success of your funnels, and business as a whole. 

 

Consider the following statistics: 

"B2B brands that connect with their buyers on an emotional level earn twice the impact over marketers who are still trying to sell business or functional value."

"Color increases brand recognition by up to 80%."

"Versus traditional messaging, "professional, social, and emotional benefits" marketing has a 42% lift in perceived brand benefits."

"B2B decision makers consider the brand a central (rather than marginal) element of a supplier's value proposition."

"More than 84% of communication will be visual by 2018."

"Visual IQ is rising faster than any other form of IQ."

"8 seconds is the average amount of time before a person gets distracted."

"Posts that include images produce 650% higher engagement than regular text posts."

Branding and visual design have the power to enhance your funnels and skyrocket your conversions. A striking brand and intuitive design can attract your user, keep them engaged, and ensure that they're able to successfully complete your desired action: whether it be opting into a list, purchasing product(s), signing up for a service or completing an application for a high ticket offer. Here's are 5 reasons why you should never overlook design: 

1. Increased Brand Recognition. Brand recognition helps you establish trust which is essential for your funnel's success. It also helps create customer loyalty making future sales and conversions far simpler to achieve and less expensive. 

2. Emotional Marketing. Through the use of colors, typography, animations, and more, visual design and branding can help tell a powerful story and create a lasting emotional connection with the end user. Marketing is all about relevancy and context, so it's not difficult to see how these elements can have a positive impact on these metrics. 

3. Competitive Edge. Powerful branding and visual design can help you stand out in a crowded marketplace. Unless you're operating in a true "blue ocean" (a concept from "Blue Ocean Strategy" by W. Chan Kim), you'll likely have many competitors, likely ones with that are more competitively equipped. Branding allows your funnels to shine in a crowded marketplace.

 

Related Article

 

4. User Experience. Strong visual design spans quite a bit more than typography, colors, and graphics. A well-designed funnel that provides a stellar user experience will make the conversion process simpler and lead to increased sales and conversions. 

5. Investment. Businesses often wait until they're somewhat established to pursue branding and design due to the notion that it's cost-prohibitive, yet neglecting these aspects is, in fact, more costly. Think about your overall traffic strategy. Driving traffic is either expensive or a long, arduous process and at times, both. Once you've filled your funnels, you'll want to engage with them and create a lasting impression so you can reap the benefits well into the future.

 

Still not convinced? 

Despite their reputation for less than stunning, but highly-converting funnels, ClickFunnels decided to focus on visual design and branding by hosting their first-ever Design-A-Thon that I had the fortune of attended in Boise. Along with 29 other talented designers hand-selected by Russell Brunson and his team, we spent two full days (and by full, I mean jam-packed, up to 14 hour days) designing premium templates that are showcased in the top spots along with the Cookbook funnels and in the Marketplace. ClickFunnels is one of the most profitable, rapidly-growing SaaS companies of our time and it was clearly worth their time to focus on design as evidenced by the Design-A-Thon, featuring of our premium design templates, and many of the recent updates made to their platform.

 

Convinced, but not sure where to begin? 

Let's start with the basics. I know that design isn't everyone's strength or passion, so here are some quick ways you can really improve your funnel designs quickly. While professional design services will provide the greatest return on your investment, many people are surprised to find that a few key improvement can drastically enhance their funnels. Here are 10 elements you can focus on to level up your design skills: 

 

 

1. Typography.

Your funnels should not use more than 2-3 fonts. Why not? Having too many variations in your typography can make your funnel look cluttered and your messaging appear hazy.

- Make sure your fonts are legible! Flowery, ornate fonts can be beautiful and have their place, but use them sparingly if you choose to use them at all. As a rule of thumb, I'd recommend avoiding cursive fonts unless they really fit your branding (if it's playful, whimsical, or luxurious for example) and even then, prioritizing legibility over flair because it doesn't matter how gorgeous your typography is if your users can't read your copy easily. Use these fonts for headings (and generally in larger sizes) so they remain legible.

- Use "reasonable" font sizes. While your audience and design goals may influence what reasonable font sizes are, make sure your fonts aren't too small for your end user to read, or too large that they take up excessive space and become distracting. Also, never forget to optimize your fonts for mobile. You can set mobile-specific font sizes for some elements, so be sure to use these settings whenever possible. What looks awesome on desktop may be an eyesore on mobile and vice versa. Not sure what your audience resonates with? Create a split test.

- Gain inspiration from font pairing resources. ClickFunnels uses Google Fonts and there are several font pairing resources such as: Typo.io, FontPair.co, and Canva.com/font-combinations. Finding font pairings can be tedious and not all fonts in these resources are supported fonts, so I've created a free typography share funnel.

 

2. Colors

- Use colors to invoke an emotional response. Blue is often used to establish trust. Yellow is often used for attention or warnings (think of signs that may have used yellow), red can be used to convey a sense of power or passion. Orange can be "fun" and be used for creating an energetic experience. Green often works well for natural elements. Black is used often in luxury brands and can be used to convey value, prestige or exclusivity. There are many resources for color psychology that you can access through a quick Google search.

- Apply color theory when creating palettes. This one sounds complex but it absolutely doesn't have to be. There are a wide variety of tools online that assist with color palette generation. They apply the concepts so that you don't have to. A few of my favorite resources are: Coolors.co (which also lets you upload an image and derive color palettes from it), Color.adobe.com, and Klart.co/colors (data-driven color palettes).

- Use 3-5 colors in your funnels. Your images can absolutely have more colors, but keep a consistent palette throughout your funnels to create a more polished and professional aesthetic. Too many colors can create distractions and dilute your message. The same way, excessive use of fonts and font styles can. Generally speaking, less is more when it comes to design.

 

3. Gradients

Gradients can add a unique touch and create dimension when used as backgrounds for sections, buttons or other elements. With that said, gradients should be used sparingly as they can make a design look sloppy or cluttered when used in excess. You can find gradients at: grabient.com, webgradients.com, and uigradients.com. You can create gradients using a graphics program or you can use custom CSS. Here, I'm going to focus on using gradients as section backgrounds. First and foremost, make sure your desired section doesn't have an image background as that may conflict with the gradient style. Next, you'll want to select a gradient from one of the resources above. While many modern browsers support gradients, using one of the resources that provide a "prefixes" option will have the absolute best cross-browser compatibility. I'll take a sample gradient from Grabient for this example. Next, you'll want to go to the Custom CSS area and enter the following code: 

#section-1234 {
background-color: #FFFFFF;
background-image: -
webkit-linear-gradient(180deg, #FFFFFF 0%, #6284FF 33%, #FF0000 66%, #ffffff 100%);
background-image: -
moz
-linear-gradient(180deg, #FFFFFF 0%, #6284FF 33%, #FF0000 66%, #ffffff 100%);
background-image: -o-linear-gradient(180deg, #FFFFFF 0%, #6284FF 33%, #FF0000 66%, #ffffff 100%);
background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 33%, #FF0000 66%, #ffffff 100%);
}

Where you'll replace #section-1234 with your section ID which you can get by going into your section settings and clicking on the hashtag symbol in the bottom panel (#) to get the CSS selector ID. 

 

Related Article

5 Ways to Create Scarcity In Your Funnel

Tuesday, December 11, 2018

 

4. Textures & Patterns

Like gradients, textures and patterns can make sections or elements in your funnel stand out. Unfortunately, when used incorrectly, they can also make your design look a bit amateur. My suggestion here is to use them sparingly and use textures and patterns that are modern and clean. Simplicity is often better unless you're targeting an audience that would truly connect with a more "busy" aesthetic.

 

5. Animations 

ClickFunnels has built-in animations, but l these often get overlooked. How can you use these successfully? Let's say your funnel displays testimonials as social proof. You can use animations to have a stack of testimonials fade in, one by one as the user scrolls. This creates a unique effect and also serves as a pattern interrupt. If your funnel has a lot of images, you could try animated a few key images as your user scrolls.

- Use animation to draw attention to your buttons. ClickFunnels features built-in button effects. My favorite button animations are glow and bounce.

- Use animation to educate. Let's say your funnel outlines various steps in your process or the benefits of your product or service. You could animate these so they come in, one by one, capturing more of your user's attention and keeping them focused.

- Use animations to highlight an important feature, product or service. When most elements are static, an animated element will stand out. You can use this to really draw attention to a particular product, service or feature.

- Using a single animation or a few key animations can enhance your funnel without making it seizure-inducing! 

 

6. Shape Dividers

Standard funnels can look a bit "blocky" and a great way to break that up is by introducing shape dividers into your sections. This can be done by creating a background with a shape divider in Photoshop or any graphics program or programmatically (if you're feeling inspired to conquer custom CSS) using a tool such as Clippy.(https://bennettfeely.com/clippy/). You'll need to grab a section ID (say, #section-1234) and use the following code in the Custom CSS: 

#section-1234 {
-
webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

This code creates a triangular section divider. This works pretty well, but I'd recommend testing it on mobile to make sure you have adequate spacing so that your content doesn't get cut off when viewing from a mobile device. You can add additional padding or empty rows to prevent text from being cut off.

With more complex shapes or steeper angles, I'd recommend using the shape dividers on desktop only and creating separate sections for your content on mobile so the text doesn't get cut off. 

 

 

7. Graphics & Images.

Graphics and images can be used to invoke emotion, establish trust, increase brand recognition, create a polished, professional appearance and much more. Here are my top tips regarding graphics + images:

Unique/custom is always ideal, but not essential for success. In terms of images, it's great to have professional images taken because they're uniquely yours and tend to be the most relatable. Since they've been created for your brand, they won't be used by your competitors. You'll notice that a lot of popular stock photography images are used across many sites meaning that the likelihood that your competitor will use the same image can be high in some niches. The same concept applies to graphics and branded elements. 

When custom isn't an option, consider affordable but tailored solutions. Examples are graphics from CreativeMarket.com, DesignCuts.com, Envato Elements (elements.envato.com), or stock photography from resources such as Shutterstock.com, GettyImages.com (though this tends to be more expensive), Stocksy.com, or DepositPhotos.com to name a few. Paid resources can have greater selection than free resources and a lower likelihood that your competitor will be using the same elements. 

When paid options are not an option, consider free graphics or image resources. I'd recommend looking at: Pixabay.com, Unsplash.com, and Pexels.com. With these resources, you'll want to be extra cautious to read the terms to ensure that the content you obtain is acceptable for commercial use. 

 

8. Emojis.

This one is simple but awesome. Emojis can increase conversions by invoking an emotional response and creating a pattern interrupt, making your content stand out. Neil Patel swears by them (Source: https://neilpatel.com/blog/emoji-marketing-how-to-use-emoticons-to-increase-your-conversions/) and if they're good enough for Neil Patel, they're certainly good enough for me. 

 

9. Responsiveness.

Pay close attention to how your designs translate across devices, and don't forget mobile. A significant percentage of your users will be coming from mobile, so be sure to test your funnels on mobile. In addition to ClickFunnels' built-in mobile view, here's a tool that's awesome for testing your design at different resolutions: http://quirktools.com/screenfly/. 

 

10. Inspiration

Feeling stuck? Get inspiration from a variety of sources. Dribbble.com and OnePageLove.com are fantastic sites for design inspiration. Pinterest and Instagram can be immensely helpful as well. Tired of online sources? Get out in nature, travel, explore, and draw inspiration from museums, galleries, art, music, etc. Inspiration is all around you if you keep your eyes and mind open.

 

My recommendation? Implement a few of the strategies listed above and focus on improving your designs. You don't need to apply all of these concepts at once, and in fact, in many cases, you shouldn't. With design, less is often more. Keep it simple and focus on your content and conversions and leverage the power of branding and visual design to enhance these elements. Not sure how your audience will respond? Never forget to split test…

 

Articles By The Author


Comments