Amongst the digital marketing community, the consensus is that ugly design converts better. This could mean ugly websites, ugly funnels, ugly sales pages, etc. While I won’t disagree that poor or outdated design (I suppose this is what others refer to as “ugly”) *can* convert, my goal is to convince you that branding and visual design play a vital role in the success of your websites, 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.” (Source: LinkedIn)
- “Color increases brand recognition by up to 80%.” (Source: University of Loyola)
- “Versus traditional messaging, “professional, social, and emotional benefits” marketing has a 42% lift in perceived brand benefits.” (Source: LinkedIn)
- “B2B decision makers consider the brand a central (rather than marginal) element of a supplier’s value proposition.” (Source: Forbes)
- “More than 84% of communication will be visual by 2018.” (Source: Reuters, Cisco Report)
- “Visual IQ is rising faster than any other form of IQ.” (Source: BBC)
- “8 seconds is the average amount of time before a person gets distracted.” (Source: Microsoft)
- “Posts that include images produce 650% higher engagement than regular text posts.” (Source: Adobe)
Branding and visual design have the power to enhance your websites 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 business’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 websites to shine in a crowded marketplace.
4. User Experience. Strong visual design spans quite a bit more than typography, colors, and graphics. A well-designed website or funnel is one that provides a stellar user experience, which 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 websites with users, you’ll want to engage with them and create a lasting impression so you can reap the benefits well into the future?
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 digital designs quickly. While professional design services will provide the greatest return on your investment, many people are surprised to that a few key improvement can drastically enhance their websites. Here are 10 elements you can focus on to level-up your design skills:
Your designs should not use more than 2-3 fonts. Why not? Having too many variations in your typography can make your designs 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. Many modern web builders uses Google Fonts and/or Typekit. If you need help selecting fonts, there are several font pairing resources such as: Typo.io, FontPair.co, and Canva.com/font-combinations.
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 (Sources: http://colorpsychology.org and https://blog.kissmetrics.com/psychology-of-color-and-conversions/).
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 designs. Your images can absolutely have more colors, but keep a consistent palette throughout your website to create a more polished and professional aesthetic. Too many colors can create distraction 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.
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. If you’re using Elementor page builder, there’s extensive built-in gradient support so you won’t need custom code or a graphics program. The websites linked above will generate the custom CSS for you. Gradients can be applied to whole sections, as image overlays, for buttons (like I’ve used here),
4. Textures & Patterns
Like gradients, textures and patterns can make sections or elements in your website 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. You can find textures and patterns at: Subtle Patterns (https://www.toptal.com/designers/subtlepatterns), CreativeMarket (creativemarket.com), and DesignCuts (designcuts.com).
Elementor and many modern website builders have built-in animation features, but l these often get overlooked. How can you use these successfully? Let’s say your website 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 site 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.
Use animation to educate. Let’s say your website 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 website without making it seizure-inducing!
6. Shape Dividers
Websites can often 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/).
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 & Imagery
Graphics and imagery 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 and 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, 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.
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. If they’re good enough for Neil Patel, founder of CrazyEgg and Kissmetrics, they’re certainly good enough for me.
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 websites on mobile. To simplify your browser testing, check out Screenfly.
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, and in fact, in many cases, you shouldn’t. As always, less is more. Keep it simple and focus on your content and conversions. Best of luck!