6 Web Design Principles That Will Boost Up Your Conversion Rates

Swati Tiwari
11 Jan 2022
5 min read

If everything is important. Nothing is Important. You know that already right? So tell me, what the one important thing for today? Got it? Great! Now tell me what's the one thing that your website must do for you?

Book Calls?

Download your ebook?

Buy Something?

Read your blogs?

Go through your testimonials?

Contact you? and so on.

There are so many things one can do on your website but what’s the one thing that you want them to do? Figure that out and give utmost importance to only “that” on your website. Yeah, you don’t want to be pushy and that’s where design can help. Web Design Principles can help you layout everything on your website in the manner that your “one thing” always stands out while giving a adequate share of importance to the rest of the content or actions as well.

This just doesn’t help you become a better Entrepreneur, It also helps your customer get a smooth experience on your website and make the buying decision quicker

Visual Hierarchy

What do you want your user to look at first? then second? and then third? Yes - that’s it. Define these and your all set rock all the pages and sections of your website.

Need Inspiration? Look at Gumroad - They Clearly want you to look at the picture of a confident artists that sells procreate brushes and then to the headline that make the visitor believe that anyone can earn online and they should consider clicking on the “Start Selling” button.

I also admire that you look at the navigation bar at the last, what does this signify? That you can look at the nav only of you are just not yet ready to “Start Selling”. Most websites these days have so many irrelevant links on their nav which just isn’t solving the purpose. So why put them in the first place? Place your elements strategically and put an end to these shenanigans.

Source: gumroad.com

Another Good Example is the Homepage for Fullstory

Source: Fullstory

Golden Ratio

Source: Companyfounder.com
Source: Companyfounder.com

Let’s make your images impactful. By making it interesting.

No business owner has ever wanted their images to be not interesting, like there are multi billion dollar businesses running solely on images. So how do they do it?

With the help of the magical ratio 1:1.618.

You just have to divide the image, text content, logo mark or whatever it is that you want to be impactful, into two parts in the ratio of 1:1.618. It’s seems complicated but it’s not, here are some examples to look at

Image Source: companyfolders.com

The Golden ratio isn’t just a mathematical expression to divide the subject and the background it is also associated with familiarity, unconscious recognition of elements in the nature that blends in the vision smoothly giving a pleasant experience to the eye.

It also helps you with the layout of you website giving you guidelines to create hierarchy and draw your users attention the way you want.

Source: NN Group

Challenge: See if you can map out the Golden Ratio in this Image.

Impactful Images - Photo by Jamie Street on Unsplash

Less Options & Clean Design

Why mess your homepage when you can drive an impact just by using powerful imagery, strong headline and just one CTA. Yes, exactly that’s all you need to achieve the clean, subtle, impactful look on your website. Petal’s homepage is ground breaking on all new levels. If your think you can’t get a website like Petal’s your wrong. Good photography, copy, colors, and fonts are all you need.

It also follows the Hick’s law which states that the more choices a person faces, the longer it takes them to make a decision. Remember your last visit you a restaurant that handed over a 8 page menu with all their starters, main course, mocktails, desserts, etc. If only you asked your server for the top or their best dishes in whatever diet type you are Non-Vegetarian, Vegetarian, Vegan, Alcoholic, Non-Alcoholic, etc. Wouldn’t it make the decision process so much more easier and pleasurable?

In an actual restaurant your server are there to hep your customers, but in an online experience, only design and copy can help them. So invest in them thoroughly

One way to solve the above mentioned problem as a restaurant business is to add filters and sorting right on the Hero Section of your homepage so users can look for what they are actually looking for.

Source: Petalcard.com

Hick's Law is a fundamental principle of User Experience (UX) design. The law states that the more choices a person faces, the longer it takes them to make a decision. Like many psychological concepts, Hick's Law makes sense intuitively; I think we can all agree that it's harder to choose between 15 different flavors of ice cream as opposed to five flavors. But what does it have to do with design?

Source: lattice.com

It's all about the user experience. Time is our most valuable resource; when visiting a business's website, we need to find what we're looking for and make decisions as quickly as possible. If there are too many calls to action or menu pages or services to choose from, the experience becomes overwhelming. At the extreme, it's downright frustrating. The takeaway here is simple: when it comes to decision-making in design, simplification is almost always the answer.

More prominence on “The One Thing”

The one thing changes with every screen. What might have been important on the Last Screen might not be on this one. Look at this example by Zendesk, here the most important thing is to get a free trail - you can tell by the prominent use of the cta “Free Trail” - You can see the “Free Trail” button twice on the same screen. Understand how important this is from the sales perspective to the company. Now look at their demo page

Source: Zendesk.com

The moment you enter they urge you to fill the form by placing an auto focus cursor on the first name block and if you click anywhere else on the page it gives you a reminder, “please enter your first name”. Understand that this happened even when I haven’t clicked on the “Watch Now” button to submit the form. This is also a very good example of user journey mapping. You tell your visitor exactly what you want then to do not only on each page but also on each section or screen.

Not difficult to achieve with the help of Visual Hierarchy Principles like Color, Scale, Position, Depth, and Motion - More on that on another blog

Good Contrast and Motion

Good contrast is all about making your top most priorities for the website work and blend together.

Look at Zendesk’s Homepage - How beautifully the different colors of the Hero Text blend in with the background green.

Source: Zendesk.com

The contrast in design refers to when similar elements stand out from each other because of their different features. Color, size, or shape can all be used to create contrast. Enhancing readability is one of the contrast's most crucial functions in web design. Elements may blend and become challenging to distinguish if the contrast is too low.

Contrast is sometimes leveraged to highlight particular visual design components. High colour contrast is frequently used in site design, for instance, to make crucial elements like buttons stand out.

Motion is also use to create higher contrast and grab attention to the most important elements in the design. It’s a delightful for users to come across a website that uses subtle micro interactions and only necessary animations. Why do I say ‘only necessary’ because I’ve seen highly interactive annoying websites that just stops you from consuming content and making the scrolling and the loading experience super slow. No offence to motion, I love it. But I believe it should be delightful and not over whelming.

Source: crusheditorial.com

C‍rush Editorial designed by Timothy Ricks https://www.timothyricks.com/ is an absolutely sunning example of what I mean by delightful and not overwhelming. The subtly typographic and micro interactions just makes the entire visit enjoyable and for all the good reasons. This does involve you to get an experienced developer help you with your websites but it’s truly worth it.

Consistency with Colors, Fonts, Patterns, Copy, Spacing, and Style

‍You have an amazing product and story to share with the world but it won’t work out if they don’t recognize you, you as in your brand. It’s the brand that you build, creates a legacy and in order for it to be memorable to people, you have to make sure you are consistent across all touch points with your customers including your website, marketing material, bill boards, social media, etc

Source: dribble.com
Source - Properly on Dribble

In order to do that - you need a style guide with every detail mentioned with great detail.

Think how you never miss on recognizing apple or tesla. It’s the brand consistency that matters over anything else.

Everything from colors and fonts to the words and layout represents your brand. But those design elements don’t need to be noisy, cluttered or overdone to still draw attention and make a lasting impact.

Be the first to know

We have a lot coming!

    What Describes You the Best

    We respect your privacy. Unsubscribe at any time.

    Free Stuff

    Grab Some Great Resources & Templates

    Guide

    Great Move’s Brand Strategy Guide 2024

    Download Now
    Guide

    The Ultimate Guide to Nailing Your ICP

    Download Now
    Brand, Design, & Webflow Template

    OnPeeP - Electric Cars for the future - The all in one Brand Kit

    Get it now
    Brand, Design, & Webflow Template

    Happen - Electric Cars for the future - The all in one Brand Kit

    Get it now
    Brand Identity Template

    Brand Style Guide Template

    Get it now