I received an email from a budding blogger and here's its crux.“I write good content, I promote it aggressively on social media, and I network with peers too. But the results are very poor. What should I do?”
From his perspective, the problem was almost negligible results DESPITE doing everything right. It's not just one case, but large numbers of bloggers face the same situation. Sounds a familiar story?
The big question is - “Why one does not get the results despite writing good content along with the application of generic best practices for a blog's growth?”
Sometimes, we manage to divert a decent volume of qualified traffic towards our blog with NO results!
In such cases, most of the times, the culprit is—a poor design. A custom-designed layout is not a guarantee of a high conversion rate. What matters is, how intelligently you design your theme.
Professional and business blogging requires careful crafting of the layout such that each page is designed with a goal in mind for maximum conversions. Apart from including regular theme layout principles, you need two more ingredients to convert the inbound traffic.
Let's see both these important elements that have the power to boost your on-page conversion funnels—instantly.
Applying Minimalism—The Right Way!
Whenever we talk about minimalism that's directly related to the web design, we often compare it with a stripped-down theme with almost no color or additional content sections.NO, minimalism is not about making a naked theme!
In this context, it's all about keeping the most important options for the visitors that are necessary for a conversion and removing all other elements. Human psychology clearly suggests that the more options and alternatives a person has, the more double-minded and confused he is.
If you want more subscribers, first you should work on removing unnecessary elements from your website. The more choices a visitor has, the more is the probability of a failed conversion.
Minimalism (in this context) is all about keeping the most essential elements on the web page that directly contributes in a conversion.
To understand it in a better way, let's see an example of minimalism. Below is the screenshot of the home page of Zoe. It's a perfect example of a minimalistic design that not only includes the essential elements on the web page but also keeps it soothing for the eyes.
The first thing you'll notice is the absence of some of the common or standard content sections normally present on a typical website.For example, almost every blog or a website includes a long primary navigation on the top.
In our example shown above, the designer has replaced the primary menu with a secondary call-to-action button. This eliminates one of the distractions so that a visitor can focus on the real stuff.
The primary copy is in large and bold text aided by secondary copy which is comparatively not that loud. The entire text is easy-to-understand and clearly explains the largest benefit for the prospect.
And, last but not the least is the primary loud and clear call-to-action button. It's unambiguous and precisely explains—what action a potential customer has to take.
Let's take a look at one more example.
Here, we can see the homepage of the Mocktotype website. Pay attention to the clutter-free design focusing purely on conversions.A one-liner persuasive copy—instantly—let you know about the primary benefit of the service. The goal here is to make a prospect understand what the website is all about—in an easy way.
The word 'free' when included in a call-to-action button, works like a charm. That's what we can see in our example landing page. When combined with the persuasive one-liner, it is bound to give you better conversions.
The whole purpose of showing both these examples is to give you an idea of what exactly minimalism means in this context. Stuffing endless colorful ads, social media streams, top commenters section, traffic stats section are some of the examples of wastage of the real estate available on a website.
This extra 'STUFF' not only occupies the precious space but also acts as a major distraction bringing down the conversion rates. So, here's the final summary of how minimalism can ensure you actually get subscribers.
- Make a list of existing visible elements on the web page.
- Assess the importance of each section relating it to the conversion goal.
- Eliminate unnecessary sections that don't help in conversions in any way.
- Carefully design each element without adding bells and whistles.
- Align them cleverly such that they complement each other pushing for a conversion.
- Test, test and TEST!
Applying Color Theory to Leverage Human Vision Sensitivity
Human brain and vision work in tandem and is very sensitive to colors and shapes. Intelligent web designers take advantage of this sensitivity and design key page elements in such a way that not only grabs the attention of the potential subscriber but also stimulates his nerves—in a positive way.Before we go ahead, you may ask, “What the heck is color theory and how is it going to help me get more subscribers?”
In simple words, color theory is a collection of several principles that explain how to use colors effectively in almost any process related to our day-to-day life. The three most common and important sections of color theory are:
- Color wheel
- Color harmony
- And, the color context
This will eventually lead to more conversions as the color-optimized sections will leave a positive impact on the visitors and will persuade them to interact with the elements (e.g. buttons, forms, downloads) included in the section.
Does it work?
Absolutely! Let me explain these 3 concepts with some illustrations so that you can grasp it clearly.
Color wheel: The first concept of color wheel is simply a visualization of how different colors originate from 3 primary colors viz., red, yellow and blue. Since web designers now have color pickers and color generators to assist in mixing and generating the desired color, we can safely skip its detailed explanation.If you're using a premium WordPress theme that includes a design options panel or a drag 'n' drop editor, you can easily find a color picker to choose the right color for the page element you're designing at a given time.
But the big question is, “Which color to choose for a given page element?”
That's where the next two color theory concepts can help you in coming up with the perfect combination of multiple color schemes for a group of key visual elements you're designing to grab subscribers.
Color harmony: So, let's see what color harmony is all about and how it can help us arrange different colored page elements in a better way. This concept simply explains how one can closely arrange different elements close to one other in such a way that they appear soothing to eyes and stimulates the viewer's nerves in a positive way.
In simple words, color harmony represents the arrangement of colored objects having the right color scheme such that they trigger comfort for the human eye. Color harmony exists in two forms viz., analogous and complementary. Let's understand each one of them through a graphic.
Analogous color scheme arranges different elements having color shades that are near to each other. Although the hue and saturation level of these colors is close to each other, the arrangement of elements makes the entire graphic—appealing and harmonious.How does this apply to a website design?
A classic example can be a feature comparison table consisting of cells on a squeeze page. If you're using an analogous color scheme for this table, it will be more effective, legible and pleasing to the eyes.
In other words, if you're grouping a large number of common or closely related web page elements with each other and that too in a limited space, using an analogous color scheme is the best choice.
Now let's take a look at the complementary color scheme.
A complementary color scheme is just the opposite of the analogous one! This color scheme involves the arrangement of two or more elements having completely different colors that are far apart from each other on the color wheel.The combination of these colors is such that it again creates a pleasing visual for the human eye.
Again, how does this apply to a website design?
If you're designing buttons with text, custom banners, or image sliders (carousals) for your website, use of complementary color scheme is highly recommended.
To understand it better, let's take the example of a green sign-up button we often use on a blog or a website. If I use an analogous color scheme for the same, the button's text will be illegible and will create an awful experience for the visitor resulting in a low sign-up rate. Here's an image to visualize this fact.
Now that you've got a fair idea about the concept of color harmony and the associated color schemes, let's move on the last section that'll compliment both the concepts discussed so far.In fact, the combination of color harmony and color context helps in generating highly-converting color schemes for both the sign-up forms and the custom squeeze pages.
Color context: This concept is all about how colors appear or behave when combined with different other colors and within a specific shape. This concept is directly related to the background and foreground colors used in the web page elements and their contrast.
We may opt for the right color scheme (analogous or complementary) for a given web page element, but what about their behavior and contrast intensity once they're used with each other?
A wrong color combination can act as a repellent resulting in a huge spike in your website's bounce rate. For example, if you're combining two extremely dark complementary colors for the text and its background, you're doing a huge mistake.
The content on such a web page will be illegible and a human eye cannot withstand such a type of color combination.
You can clearly see that the third example includes two complementary colors and both of them are dark. The end result is poor legibility that will easily annoy an average visitor.So, here's what we've learned from the color theory.
- Generate colors with the help of color picker application.
- Choose the right color scheme for each of the web page element.
- Pay attention to the behavior and contrast while combining two or more colors.
Hope you'll use these simple concepts to design better landing pages and sign-up forms for your website.