Website Mockups: 5 Things to Avoid when Creating Your Website Design
Website Mockups: 5 Things to Avoid when Creating Your Website Design

A plethora of tools let you create web designs that are both professional and affordable. Yet, so many companies still pay little attention to the importance of good design. This is especially true for companies that are very technical, or not technical at all. Often, these sites are hard to use and/or visually unappealing.

If you, too, don’t believe in the importance of design, you may find the following stats interesting. Almost all consumers (94%) base their first impression of a company on the design of their website. And over half of them (52%) will come back to your site because of how good your design is. That’s because good design establishes your credibility and makes you look trustworthy.

Design isn’t simple icing on the cake. It can have a significant impact on your customer acquisition. So do spend the time and resources needed to make your website look good. Step one: let’s look at what you should absolutely not do when creating your website design.

Removing “White” Spaces

Bad design often starts with trying to squeeze a lot of content in a small screen. I’ve had many customers in the past asking me to “reduce white spaces” between elements on the page. Often, the goal is to show visitors all the information as soon as they land on the website, before they bounce.

Those white spaces are margins, and removing them can actually hurt your bounce rate. Let’s compare this to a real-life situation. Imagine you enter a store to buy a TV, and the sales person comes right up to you. They start bombarding you with tons of information about the product they want you to buy. They don’t even give you time to digest the first point that they move on to the next. How will it make you feel? Probably overwhelmed and wanting to escape as fast as possible. If, on the other hand, they give you one piece of information, wait for your next question and let you browse the products at your pace, you’ll likely stay. That’s what the margins are for.

Each section of your site should only convey one or two pieces of information. If customers want to learn more, add “learn more” buttons that lead them to other pages with more detailed information. Add plenty of space between different pieces of content to let your visitors breathe and progress at their own pace.

If you’re trying to pack content on a page for SEO purposes, don’t. You do want to make sure specific keywords that you want visitors to use to find your website appear on the page. But there is no need to overload the page with said keywords, it will have little impact. In fact, having a higher number of pages on your website may help you more with SEO than having a lot of keywords on the page. But overall, try to avoid obsessing over SEO when designing your site. Focus on providing a good user experience. It will get you much further.

Using Poor Color Combinations

You’ve likely heard about color psychology, or the impact of color on human behavior. Color can change the way we perceive things, from enticing us to buy a product to changing the taste of food. It’s a real thing, and it’s very important when it comes to website design. We did a whole article about how to choose color for your logo based on your brand and vision, so start there. Once you have your logo colors, you can use them to guide your choice of color combination for your website. And that’s when things can start going sideways.

Designers with limited experience often make the mistake of doing too much with colors. They take the logo colors and add them all over the website as a way to reinforce the brand image. That’s a mistake. Here is a good example:

The use of orange and teal is so prominent that you don’t really know where to look. The logo becomes almost invisible in the sea of colors around it. We also can’t see a clear call to action since the background is overtaking the attention. Always use accent colors in sporadic and strategic ways.

Another common mistake is the use of too many different colors. A website shouldn’t have more than 2 to 4 accent colors. Beyond that, your website will look too busy and the colors will compete with each other for the viewer’s attention. The Gravitr website does use more than 4 colors, but we do so in very subtle ways so as to not distract the viewer. Our website is otherwise mostly white. This is what I like to call the “Google” strategy.

Knowing how to use colors in a way that is pleasing and harmonious is an art. The bottom line is, when it comes to colors, if you’re not an experienced designer, don’t trust your instinct. Instead, hire a pro or follow design conventions. Conventions often seem boring but always are the most successful strategies.

Doing Too Much

Most towns have a small tacky store, so I’m sure you’ve seen one before. They have too much clutter in the window, which includes at least one neon sign, and the store sign features 3 different fonts and as many colors. You know the kind? These stores often make us feel overwhelmed from just looking at them. They can be charming sometimes, but in a “that’s interesting…” kind of way. They don’t inspire trust or professionalism, that’s for sure!

Well, sometimes website designs can feel like small tacky stores. That’s another common mistake many junior designers make. It often starts from a good intention: they do “more” to show they’re going above and beyond. But the result often misses the mark. They add too many different text sizes and fonts, for instance. They use too many different styles of illustrations. They place background patterns and colors everywhere to fill blank spaces. And so on.

One specific mistake I want to focus on is stock photos, and more specifically stock photos featuring people. Often customers ask us to “fill” some sections of their website with stock photos. For instance, they would ask to add a photo of “multiethnic group of people in a meeting” on their career page, because they don’t have a team photo, or an office. That’s a bad idea. Stock photos are not only useless, they can hurt your visitors’ trust. Customers are going to start wondering if your company is real, or if you’re hiding something behind all these dull images. You can use stock images of nature, buildings or animals. Placing your app inside a stock photo of a phone or computer is also fine. But stay away from “people stock” as much as you can.

The best designs in the world are often the simplest. Think Nike, Apple, Google. Don’t be afraid to be “too simple” or to have blank spaces. Only add design elements when it makes sense. That is when you are trying to convey an emotion or idea. And keep your fonts to 3 different styles at the most. If that’s not enough, then you have too many elements on your page. Simplify. 

Changing Style All the Time

In 2014, AirBnB changed its logo and design. It was a big deal, and the press talked about it for several days. More recently, MasterClass did the same thing and created a whole ad campaign to announce the change. Every time a major brand changes its design, it seems to be a major story.

Why is it so significant, you may ask? Because the consistency of their design is at the core of who they are, not only overtime, but throughout their marketing assets. Consistency enables two things within your customers’ mind that will increase sales.

First, it creates familiarity. People are instinctively drawn by things that look familiar to them. If you’ve ever been in a grocery store in a foreign country, you know the feeling. As soon as you get in, your eyes seem to focus on the brands you are used to, skipping the local options altogether.

Second, consistency means stability. When customers keep seeing the same brands year after year, it gives them the impression that the company is stable and strong. And that means they can trust it.

Yet, more often than not, companies hurt their revenue with inconsistent design. They’ll use one type of design on their homepage, but then choose different color schemes for their landing pages or emails. Customers may get confused and wonder if it’s the same company. Worse, it may look like you’re just patching work from different designers because you’re not investing time in your brand. And if you’re not investing in your brand, how do they know you’re investing in the quality of your product? And here is how your customers’ trust starts plummeting.

Forgetting Conventions and Accessibility

If I asked you where the logo of a company is on a website, you would tell me at the top left corner, right? That’s because websites follow design conventions that are useful for viewers. It makes viewers feel that a website is familiar, even if they’ve never seen it before. And as we discussed above, familiarity creates trust, which in turn increases sales.

Other mistakes I see, although less often, are website designs trying to “be different.” I understand the intention: you want your website to stand out so that people remember it. As a result, you put a logo to the bottom right, and the call-to-action button at the top left, why not. But the lack of convention will hurt your sales much more than the uniqueness of your site will help them.

Instead, use the actual content of your site as a way to differentiate. We shared a post recently about how to tell a good story. In the article, we cover the importance of following a structure when telling a story. That’s because when people read a story that follows a specific pattern, they can focus on the true meaning of the story. Website design is similar. If visitors see the website structure they expected to see, they’ll focus more on the content of your site.

The last but definitely not the least mistake I see relates to Accessibility. So many website builders remove accessibility features from their site, including younger me. They do it because they don’t like how the features make their site look, or because it blocks them from implementing a specific design. The main reason why you shouldn’t do this is that it will keep many people away. There is something very frustrating about a website that prevents you from zooming in. It immediately makes me want to bounce. But the other reason is that it will hurt your SEO. Google now uses an Accessibility rating to decide how to rank your website on their search engine. The good thing is, it also provides a tool to help you make your site more accessible.
Now the best way to create an effective website mockup is to hire a professional who’ll know how to avoid these pitfalls for you. Hire one on Gravitr, and get a perfect mockup within a couple of weeks!

Notify of

Inline Feedbacks
View all comments