Web Design Tips To Build a Website Your Customers Will Love

Building a strong online presence is key to growing your small or medium-sized business. It all starts with launching your website but goes on with managing it effectively, generating traffic, and growing your audience and customer base. Whichever stage of the online journey you’re in, we have tons of tried-and-true practical tips on how to set up your online presence for greatness this year – both from our team and from guest authors.

We’re kicking off our Successful Online Presence for Small Businesses series with a guest post by Michelle Schulp, a graphic designer and frontend developer with a passion for user experience design. She also happens to be one of SiteGround’s WordPress Ambassadors. She has lined up some smart tips on how to build a website your customers will love that you can learn and start applying right away, even if you’re not a designer yourself. Dive in!

When it comes to building a website, the first question most people have is how to improve the design. In many cases, hiring a designer is a great idea. They have a lot of training in visual communication and problem-solving and their talent can provide a huge return on investment.

But it’s okay if you don’t have the budget for a designer yet. There are many aspects of design that you can learn to apply to your own right now.

The Power of Why: A Designer’s Secret Weapon

Before getting into any specific tips, it’s important to understand what design really is. One of the biggest myths about design is that it’s all about the way the site looks. While it’s true that designers often use visual styling as a tool, design is about more than just decoration. Rather than focusing on “making it pretty” at the very end of the process, designers are focused on identifying and solving problems from the beginning.

Design adds value by making sure all decisions are made with intention. The most important question a designer is trying to answer is not about what a site looks like, but Why something is being done. Designers don’t start with “What should this button look like?” but rather “Why do we have a button?”. By gaining a clear understanding of the entire problem, they can devise the right solution, including something creative that may not have been obvious if they were just looking at superficial details.

Knowing Your Win: Goal Setting and Calls To Action

Now that you understand the importance of Why in the design process, it’s time to turn that knowledge to your own site. In order to provide an ideal user experience for your customers, you need to be able to answer this question: Why are people visiting my site?

It sounds simple, but the question can be deceptive. When asked, many people will provide several different answers: get an account, buy a product, fill out a contact form, sign up for a newsletter. While it’s true that customers might have many options when it comes to interacting with your site, there is always one primary action that represents the most success to your business.

For a store, that might be purchasing a product. For a service provider, that might be contacting you about a service. For a membership site or social network, that might be creating an account. This action is also known as your Primary Win, and it should align with the goals of your audience.

You may have other ways that customers can interact with you (for example, as a service provider, you may also have a newsletter in addition to a contact form. As a digital product seller, you may also have a support forum in addition to a shopping cart) and these are known as secondary actions. These may have their own calls to action, but they should not distract from your Primary Win. Having many options may seem like it’s helpful by giving your customers a choice, but too many different calls to action make it hard for your customers to know how to engage with you.

Once you know your Win, you can start looking at your Calls To Action, or the language that encourages people to interact with your site. Your website probably has several different calls to action. These can be as simple as an “Add to Cart” button on a product or a “Sign Up Now” form, or they can be as complex as custom landing pages designed to convert different audiences. Make sure to evaluate each of these areas to ensure that your Primary Win is clear, and your language, content hierarchy, and design patterns are guiding your customers to taking action.

Don’t Make Me Think: Patterns & Hierarchy

The internet has been around for a while, and certain common patterns have evolved that people who are browsing the web have come to expect. For example, most websites have a header, where your company name or logo resides, usually in the upper left corner for Left-to-Right languages. The site navigation is usually found in the header or along the left side of the screen. Most websites have a footer as well, where additional navigation, legal notices, and contact information is found. The primary content is found in the middle, with supplemental content in a sidebar or aside.

User Experience expert and author Steve Krug discusses these principles in his book Don’t Make Me Think, considered one of the gold standards on web usability. He reminds us how the more mental hoops your customers have to jump through to accomplish their goals on your site, the more frustrating the experience becomes, and the less likely it is that they’re going to stick around. In general, be sure to follow these established patterns when laying out your site, to make it easier for your customers to navigate.

The content itself should also follow a hierarchical structure where the most important elements on the page are given the most visual weight. Headlines are usually larger and bolder than content, featured stories have larger images than supplemental stories. You can use visual design elements like color, typography, shape, and imagery in order to support your hierarchy, but this is often a part where website owners struggle.

Visual Design: Less Is More

When it comes to making decisions about colors, fonts, and other visual elements of your site, which of these sounds more like you?

Perhaps you’re excited by the possibilities and you dive right in, adding splashes of color everywhere, trying out a bunch of new fonts, and overcrowding your pages with tons of graphical embellishments and icons and backgrounds and effects. Or, maybe you find the endless options overwhelming and you’re unsure where to begin, so you struggle to even get started adding any content at all.

In both cases, you will benefit from the guidance of a few simple rules following the principle of Less Is More.

Limit your color palette to a neutral color (like black or dark gray) with 1-2 accent colors, which are usually determined by your brand colors. If you are planning on using these accent colors for text or backgrounds, make sure there is enough contrast that your content is readable. Adobe Color and Color Safe are great resources if you need help creating a beautiful, accessible color palette for your site.

When choosing fonts, pick one font for your primary headings and one font for your main (body) text. The font for your body text should be easy to read in smaller, denser paragraphs, while the font you choose for your headings can take on a little more personality since it will be displayed in larger sizes. Google and Typekit both offer font-pairing tools that can let you experiment with different combinations. Make sure to think about the weight and color of your type as well! Thinner, lighter fonts become harder to read at small sizes, as do very bold fonts.