16 Web Design Principles You Need to Try + Current Trends!

A lot of people think that if you want higher conversions, you need to create quality content. And they’re right. At least, they’re mostly right.

Because you don’t just need good information in your content. You also need it to look good.

In this post, we’ll share 11 web design principles that are sure to boost your conversion rate.

More specifically, we’ll cover the following web design best practices:

Then once we’ve covered those core web design principles, we’ll look at 5 web design trends to make your content stand out this year.

By following these web design principles and trends, you’ll not only know how to make sure your content looks as good as the information in it, but also ensure your visual content is as current as possible.

Note: In a rush and feel confident with the web design principles listed above? Click here to skip directly to the web design trends!

But before we get into any of that, let’s check out why web design is so important in the first place.

The Importance of Web Design Principles

Many marketers already know the importance of content-based strategies for building leads like SEO, social media, or creating lead magnets.

But they often overlook the importance of building a website that’s also visually appealing. And while all those content-based strategies are still great tools to generate leads, web design can actually have a drastic effect on your conversion rates.

According to research from Stanford University, 75% of people say a website’s design is the top criterion for deciding if a company is credible or not. So it’s extremely important that your design looks professional and is easy to navigate.

But the simple aesthetic features of your site also plays a big role in conversion rate optimization.

According to GoodFirms, 38.5% of visitors will leave a website with an outdated design. And 34.6% will leave due to poor content structure.

visitors leave your site if it's outdated or has a poor content structure

So if you want the majority of people to actually read your blog posts, your content shouldn’t just be fun to read. It should be fun to look at, too. Not taking the time to design your site’s layout could cost you over one-third of your potential leads.

But what do you do if you weren’t born with a natural eye for web design? Should you simply accept your losses and focus on content?

Absolutely not.

Instead, check out these 11 web design principles that will give you an immediate and sustainable boost in conversions. Even if you’re a total beginner, these web design tactics won’t take long to master.

1. Follow Hick’s Law

Hick’s Law is a popular theory in the world of web design. Named after British psychologist William Edmund Hick, the law states that the time it takes for an individual to make a decision is directly proportionate to the possible choices he or she has.

In other words, by increasing the number of choices someone has to make, the decision time is also increased.

Hicks Law Graph

Psychologists Sheena Iyengar and Mark Lepper conducted the most famous study on Hick’s Law. They found that a display table with 24 varieties of jam attracted less interest than a table displaying only six varieties.

In fact, people who saw the larger display with 24 options were only one-tenth as likely to buy as people who saw the small display.

And what does that have to do with web design principles?

You can boost conversions by limiting the number of choices users have. A good place to start is your navigation bar.

You never want to have too many links to choose from in your navigation bar. Otherwise, the user will feel overloaded and lose interest in your site altogether.

In other words, don’t do this:

OverstockNav

The good news is that unless you’re running a large online retail store, you can likely keep your navigation bar simple. OptinMonster, for example, has a limited navigation bar with only one, simple dropdown menu:

OptinMonster navigation bar for web design principles

But Hick’s Law isn’t limited to navigation bars. Think about all the many different important decisions that users have to make on your website.

Here are just a few:

  • Skimming blog headlines to choose a post
  • Deciding whether to download your lead magnet, share your post on social media, or leave a comment
  • Choosing between making a purchase, reading product reviews, or browsing for more products

And these just scratch the surface of the hundreds of decisions that your users have to make on every web page they visit.

But if you’re starting to feel overwhelmed, don’t worry. There’s a simple way to use Hick’s Law in a pinch…

Add a Fullscreen Welcome Mat

All you have to do is install a fullscreen welcome mat on your homepage. A welcome gate covers the entire screen with a single call to action, so the user only sees one choice available at first. If they want to see more choices, they’ll have to scroll down.

The fullscreen welcome gate can be applied to any page on your site. When your visitor reaches that page and triggers the display rule, they’ll see an optin campaign that covers the entire screen. This allows you to get rid of any distractions that would draw viewers away from your call to action.

Overall, when applying Hick’s Law to your website, it’s important for you to know which actions are the most important for your bottom line. For example, do you want users to download your lead magnet, or do you want them to put a product in their shopping cart?

Every page on your site should achieve one main objective.

The more you can limit your user’s choices, the more you’ll increase your conversion rates.

2. Leverage the Rule of Thirds

The Rule of Thirds is a popular photography principle that’s also one of the core web design principles to know. With the rule of thirds, you’re supposed to visually divide an image or webpage into thirds. You do this by creating two evenly spaced horizontal lines and two evenly spaced vertical lines.

This gives your image or page a total of nine equal squares:

rule-of-thirds-min

According to the rule of thirds, the four middle intersections are strategic places of interest. When objects are placed at these points, it creates the most impactful image or design:

rule-of-thirds-intersections as a basic web design principle

In terms of web design principles, you can place the page’s most important elements at these intersecting points to boost conversions.

For example, Chris Lema’s homepage brilliantly uses the rule of thirds. He has a testimonial and his Start Here button on the two lefthand side points of intersection:

chris lema rule of thirds web design principle example

John Lee Dumas’s hero image contains a call to action button right on the bottom left intersection:

rule of thirds web design principles followed

And Kissmetrics also places their call to action button at the bottom left intersection:

kiss metrics rule of thirds web design principles followed

Notice how none of these websites place their navigation bar anywhere near the intersections. This helps to keep visitors focused on the main call to action on the page, rather than leading their eye to navigate somewhere else.

You don’t need to design your entire website strictly by the rule of thirds. Remember, none of these rules are written in stone.

Instead, you can use it as a guiding tool to strategically place your most important elements.

Try taking a screenshot of your website just above your header section and divide it up into nine equal squares. Then, you can decide if you want to make any tweaks to put your call to action in a better location.

3. Check for Images That Slow Your Site Down

It turns out that people are incredibly impatient, particularly when it comes to surfing the web. Just a 2-second delay can increase bounce rates by up to 103%.

So when it comes to the speed of your page loads, every second counts. That means you should check the impact any visual content has on your overall site speed.  Then troubleshoot any issues you find. You can check your site’s speed performance using any of these free tools:

4. Use Negative Space

In web design, there is both positive and negative space. Positive space is the space that contains all the elements on your site like text, images, background color, and so on.

Negative space, on the other hand, is all of the empty space in between that lets all those elements breathe. This includes space between all the smaller elements on your page like the space between paragraphs, between lines of text, and even the space between letters.

Paying attention to all of the forms of negative space on your site serves to keep everything clear, scannable, and easy on the eyes.

And of course, all of this leads to increased conversions.

Here’s an example from Flat.io. They use a ton of negative space on their homepage to keep the focus on the call to action:

Use more negative space example for web design

Here are a few tips for using negative space:

  • Increase the space in between your text’s letters as your text size gets smaller
  • Adjust your line-height to be approximately 150% of the font size for your main site web copy (even more for smaller text sizes)
  • Break up large blocks of text into smaller paragraphs to increase the negative space in between them
  • Add white space in between the larger elements on your site using big margins and padding

5. Consider F-Layout

Researchers have found that a user’s natural behavior when browsing the web is to read the screen in an “F” pattern.

Here is a heatmap that shows where the user’s eyes typically land on a webpage:

heatamap of how viewers read a page

And here is what that looks like as a wireframe:

f-wireframe-for-web-design

As you can see, people first look from left to right at the top of the screen. Then they scan the page downwards as they work their way into the content.

The area of a page that gets the least amount of visibility is the bottom right.

So what does this mean for boosting your conversions? You can take advantage of this behavior by placing the most important objects and calls to action along the F-shape lines. Then you can place objects of less importance in lower visibility areas.

6. Color Matters

When you’re choosing the color scheme of your site, don’t take the decisions lightly. The colors you choose are more powerful than making things “look pretty.” They also make your visitors feel a certain way.

Designer Tom Kenney states it best when he says:

“Colour is an often underrated aspect of web design but it can play a very important role in usability as well as convey the overall meaning of a brand as well as the overall mood of the website. Different color combinations can evoke different emotions and reactions.”

When choosing a color scheme for your website, make sure to choose a combination that evokes the emotion that you want your brand to convey.

One practical way to do this is by curating a Pinterest board with images that reflect your vision for your brand. Then you can upload a few of those images to Adobe’s Color Wheel:

adobe-color-wheel to help choose colors for web design

Once the image uploads, it will automatically create a color scheme for you based on the colors in the photo. This is a particularly helpful tool if you’ve never been good at picking out colors that complement one another.

After you’ve created your color scheme, there is one more important thing to keep in mind:

Use contrast to keep text, headlines, and call to action buttons noticeable and readable.

In other words, your font and button colors should be in high contrast with the background, like a white background with black text for example. And the elements that you want to highlight, such as Subscribe buttons, should be in a color that stands out from the rest of your site.

Let’s look at an example from SEMrush‘s homepage:

SEMrush contrasting colors web design principle

The background is a dark, navy blue. The text is white which contrasts nicely with the background. Then, their call to action (the Start now button) is an attention-grabbing red. This ensures that the visitor’s eyes are drawn directly to the call to action.

When it comes to choosing the right colors for your buttons, you may want to check out our article on which color button converts best.

7. Remember to K.I.S.S.

You’ve probably heard the “Keep it Simple, Stupid” mantra before. It’s great advice for most areas in life and is one of the core web design principles to follow.

Simplicity is super important when it comes to driving conversions. Any time you’re creating a page, ask yourself whether there’s a way to make it simpler. The result is usually more visually pleasing, and it almost always converts better.

But there’s another reason for relying on simplicity in your web design.

Similar to Hick’s Law is the fact that people can only handle so much information at one time. Visually, if we see too much stuff all crammed into one page, we get overwhelmed. Creating a great user experience on your website means getting rid of anything that isn’t absolutely necessary to the design.

Apple has one of the greatest examples of simplicity in web design:

apple-simplicity-in-web-design-principles

When you look at the whole screen, they use more negative space than positive. Your eyes have no choice but to be directed to their product making simplicity one of the most effective web design principles you can use.

8. Use the 8-Second Rule

The average human attention span is only 6–8 seconds (and shrinking). Yes, that is even shorter than the attention span of a goldfish.

But more importantly, it means you have up to 8 seconds to really engage your visitor before they lose interest. So make those seconds count.

Here are some tips for grabbing attention and boosting conversions within those crucial 8 seconds:

  • Use a large, benefit-driven headline that is brief and to the point
  • Use eye-catching imagery that conveys the main point of your page and draws the eye towards your call to action
  • Make signup buttons large, simple, and clear.
  • Use power words to make your copy more engaging
  • Incorporate multimedia such as video, audio, or other interactive content
  • Use hover effects on your buttons to make them more satisfying to click
  • Use animated exit-popups to re-engage visitors who lost interestmonstereffects

These small tips can go a long way into making sure you’re grabbing (and keeping) your visitor’s attention in the shortest amount of time possible.

9. Remember the Gestalt Similarity Principle

The Gestalt design principles can be best summarized by the famous psychologist Kurt Koffka:

“The whole is other than the sum of the parts.”

Deep, right? But what does it actually mean?

Basically, the human eye and brain perceive a unified design differently than they perceive the individual components of that same design.

The first Gestalt principle is the law of similarity, which says that people like to group similar objects together. It’s a mechanism that allows us to make sense of things and organize noisy environments.

In terms of web design principles, you can leverage this law by grouping items you want to be associated with one another, such as testimonial boxes, conversion buttons, or images.

For example, if you have an amazing testimonial and you want to use it to boost conversions on your optin form, you could place it directly below the form. Even if the testimonial wasn’t written specifically for to your lead magnet, the user will associate the two because they are in close proximity:

chris-lema-pay-per-minute with testimonial

In the image above, the testimonial isn’t directly related to the call to action. In fact, the testimonial suggests that “Chris is willing to reach out” when the main call to action is for you to reach out to him. But because the testimonial is close to the main image, the two are perceived to be related.

The law of similarity is also important for the user experience.

By grouping all of the main elements of your signup form together (without forgetting to use negative space), the user’s brain will be able to process the information quicker and more efficiently.

This is great for conversions because, as we saw earlier, people have very short attention spans!

10. Use Faces to Increase Familiarity

People love human faces, especially when they’re connected with a company. It helps consumers connect with brands in a way that business logos simply can’t.

As designer Sabina Idler says, “When we see a face, we are automatically triggered to feel something or to empathize with that person. If we recognize content on a website — such as a problem, dilemma, habit or whatever else — we feel connected and understood.”

Make sure to incorporate faces into your articles, case studies and testimonials, optin pages, and landing pages for a boost in conversions.

If you are the face of your brand, this is super easy to do. Sign up for a small photoshoot, and make sure the photographer takes plenty of horizontal shots with negative space on one side of you. That way, you’ll be able to place a call to action or some text there.

Here’s an example from Melanie Duncan:

melanie-duncan

However, if you aren’t the face of your brand, you can still use faces on your website by hiring models or using stock photos. Just make sure the faces you choose accurately represent your brand so your site’s visitors can relate to the face.

Note: When using models or stock photos, only use them for your homepage design when appropriate. For content like blogs, you should avoid stock photos because they come off as impersonal.

Vendeve, a social network for female entrepreneurs, does a great job of this by using faces that reflect their target demographic:

vendeve

11. Source High-Quality Images

If there’s one thing that can really drag down the quality of a blog post or piece of content, it’s low-quality images.

In fact, images can be the deciding factor for a potential lead becoming a lifelong customer.

MDG Advertising found that 67% of customers believe that high-quality images were very important when they made purchasing decisions. So instead of using boring images, try to find high-quality photos that develop positive associations with the content and that feel personal.

Remember: people like brands that they feel are similar to themselves. If your imagery is too stuffy or corporate, you’ll likely turn your visitors away.

Here are some of our favorite places for finding free stock photography that is high quality and personal.

Again, you should use stock photos sparingly. When you can, either take or create custom images. Most modern smartphones have great built-in cameras. Plus, image editing software like Canva lets you design high-quality images at a low cost.

If you’re in a pinch, though, the stock image companies listed above are excellent resources.

Ok, so now you have these basic web design principles locked and loaded. But just like in the world of fashion, web design trends flow and evolve.

So let’s take a look at the following 5 web design trends to make sure your content doesn’t only look good but is also keeping up with the times.

1. Micro-Animation

We all know how effective video can be at grabbing people’s attention. But lately, we’ve noticed the rise of something a little different: micro-animations.

Micro-animation Gif
Micro-animations are somewhere between a regular image and a Gif. They are small animations that look like a static image at first.

But when you look closer, they have subtle movement embedded in the image to attract the reader’s attention.

And these micro-animations aren’t exclusively for cartoon images, either. It’s become a popular web design trend to take a normal photo and add a touch of animation to it. Check out this micro-animation of bacon frying:

Bacon frying micro-animation

These tiny movements can go a long way to capturing (and keeping) your audience’s attention. If you’re looking to add a bit of variety to your images, micro-animations may be worth exploring.

2. Thumb-Friendly Navigation

It’s no secret that more people are surfing the web from their smartphones. In the world of eCommerce, mobile shopping is predicted to surpass shopping from desktop in the very near future.

As such, it’s time to update your site for mobile. And that doesn’t mean simply resizing your site’s images to fit neatly on a smaller screen. It also means helping out your users by making their navigation “thumb-friendly.”

As people scroll through your site and your site’s content, they are likely using their thumb or forefinger. That means your buttons should be placed in convenient locations and should be big enough to easily tap with a finger.

In 2016, Smashing Magazine produced this graph of thumb-friendly areas on a smartphone screen that is just as relevant today:

thumb-zone-mapping-opt

Make sure there is a clear call to action in the Natural zone on your homepage when the visitor arrives. As they scroll through the page, the button’s position will change and might fall into the Stretching and Hard areas.

But you can increase your user’s experience (UX) by placing buttons in the center of the screen. That way, those buttons are more likely to always fall in the Natural positions.

Finally, make sure you’re making any clickable elements large enough to access quickly. We’ve all looked at sites that weren’t updated for mobile and have had to zoom in to use buttons on mobile. And it’s a real drag.

Avoid this web design mistake by making sure any clickable element on your site’s mobile design is large enough for your users to click.

But you obviously can’t adjust your button size for each individual user. So how big do your mobile buttons need to be?

Google has done their homework and found that the average size for any clickable element on your screen should be 48 x 48dp. So check back in with your site on multiple devices to make sure your navigation is thumb-friendly for smartphone users.

3. Bold Colors

With so much noise online, it’s important to stand out. One trend that we’ve been seeing has been companies using bold colors to quickly captivate their audience.

A popular example of this comes from Egwineco.com:

eguineco-bold-colors-design

But we’re seeing this kind of bold use of colors everywhere. Bright reds, yellows, and oranges don’t just grab your attention, they demand it.

KickMyHabit does a really great job at contrasting a lot of different colors to entice their readers:

KickMyHabits bold color use

They use a dark purple to set the tone of the image, but rely on bright reds, blues, and even a contrasting white to highlight certain images and elements on the page.

But if you’re not feeling super bold, you can take the opposite approach. Which brings us to our next trend…

4. Black and White

Ok, so we know that this looks like the exact opposite to the last tip, but another popular trend right now is going for a simple black and white theme.

Nike has done this for a long time, especially with its black and white ads. They even use black and white for many elements on their site that don’t involve photos of their product:

Nike Homepage in black and white for navigation

In the image above, you’ll notice the header bar and the navigational features are all in black and white. The only color on Nike’s site is coming from the products themselves.

But creating an entire site based on this stripped-down color scheme is becoming a popular web design trend. Basecamp, for example, has made their entire website black and white with the exceptions of their call to action:

Basecamp web design trends back and white

This is a really cool web design strategy because you can draw your reader’s eye exactly where you want it. Basecamp uses bold yellow to show you their 5-star reviews (at the top) and the call to action (at the bottom).

You can mimic this by designing your site in black and white. Then you can use loud colors for your call to actions, your products, or anything else you want to make sure your audience doesn’t miss.

5. Accessibility

Whether your users are coming from mobile or desktop, it’s important that you make your site’s design accessible for those with low vision or who are blind. You can do this in a few ways, but one new trend has been to give user’s the ability to change the visual settings on your site to fit their needs.

Ubersuggest is one site that has been doing this. When you go to their homepage, you’ll see a subtle icon on the bottom left of the screen:

Ubersuggest homepage visually impaired icon

Clicking this icon allows users to change the visual settings of the site’s design:

Ubersuggest visually impaired accessibility

Using this feature, we can practically redesign the visual aspects of this site. So take the homepage for example with no changes made:

Ubersuggest homepage

And now let’s change the font size, colors, and increase the spacing a bit:

Ubersuggest after image editing

This is an exaggerated and simple example, but the sky is the limit with the kinds of changes you can make. You have many colors to choose from, you can highlight titles and buttons, and do pretty much anything you need to for the sight to be easier on the eyes.

Making your site’s web design accessible to people with visual handicaps helps an entire segment of your audience access your awesome content.

A Few Closing Words

Now that you understand these 16 web design principles and trends, put them to good use by taking a hard look at your existing design. Which web design principles are you currently using? Which ones are you missing?

Can you incorporate any modern trends into your current design?

Many of the problems you may have with your design are easily fixed with a few tweaks. You may even want to run a conversion rate audit to see where your site could use a boost.

But now, we’d love to hear about your web design experiences. Reach out to us on Facebook or Twitter with any cool web design secrets you currently use.

Or, if you’re in a learning mood, you can check out one of our many tutorials on YouTube.

And are you looking for ways to test out all these awesome web design principles? With OptinMonster, you can create or customize optin campaigns to grow your email list and boost conversions.

Don’t wait! Sign up for OptinMonster today.

Nathan Thompson
Nathan Thompson is a father, a writer, and a lover of travel (in that order). When he’s not wrestling with his kids, you’ll likely find Nathan giving his eyes a much-needed break from screens with a good book or planning a family trip with his awesome wife.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.