10 website design tips for a stunning and usable website

A good website serves a lot of purposes. It’s an information hub without seeming too wordy, it offers convenience without being too complicated, and it helps capture new customers. The way your website looks influences all of these factors. In fact, your site’s design influences how your visitors read its content, interact with its features, and take the action you want them to take. 

How do you make your website design work for your company’s purpose? How can you encourage your visitors to take action? These 10 website design tips can help you strike the perfect balance between design, content, and encouraging your customers to do what you want them to do, whether that’s buying a product or contacting your company.

1. Establish a visual hierarchy

Your website’s visual hierarchy describes how you arrange all the website elements your visitors see. It also encompasses each website section’s color, size, and how it looks when paired with other elements on the page. This all works together to highlight some items and make them look more prominent than others. As such, visual hierarchy is how you direct visitor attention to the most important parts of your website.
Visual hierarchy is why most websites have a big headline of some sort at the top and small things like a privacy policy statement at the bottom. To better understand how this works, you can break down the concept of visual prominence into five parts. This infographic from Orbit Media further explains the main principles behind visual hierarchy.

From orbitmedia.com

This table shows that your most important elements, such as your company’s logo or headline, should be large and appear toward the top of your page. They should also be boldly colored in ways that contrast the rest of your page, and plenty of white space should surround them. This immediately draws visitors to these key elements, which will then tell your visitors what you do and why they should choose your business.

2. Make the most of your headers, headings, and subheadings

Within the visual hierarchy, headers and headings merit special attention for usability. Perhaps most important is the heading at the top of your page. This heading should be descriptive while telling website visitors whether they’re in the right place. If other sections of your page have subheadings, they should be similarly descriptive. In under 10 words, clearly explain the page’s intent and how it ties into your services.

Here’s an example: If you sell handcrafted jewelry, you could write, “Jewelry made right from home, by hand, just for you” as the main heading on your homepage. Subheadings could then be “Shop for jewelry” or “Learn more about my business.” Under each of these subheadings should be a link to another one of your web pages. For example, your “Learn more about my business” subheading should precede a link to your About page.

Photo by Domenico Loia on Unsplash

Your header itself — not just the text below it — provides another great opportunity to engage visitors. Make your header a navigation bar that lists your key sections, and consider adding dropdown menus for each section. For example, an audiologist’s office might include a “hearing aids” section with dropdowns including “hearing aid basics.” Your dropdown menus should include at most seven items — any more, and your visitor may become overwhelmed with choices.

Additionally, your header should include your logo and exclude your social media links. You’ll learn why in the upcoming web design tip about navigability.

3. Use the right colors

Where color psychology plays a large role in your branding, there are two concepts which matter more for website colors: visual saliency, which makes objects stand out, and luminance contrast, which refers to the difference between the background and the object. That’s not to say you should go against your brand’s colors on your website. If anything, you’ll need to find the hues within your color palette that stand out most strongly against your website’s background color and other features. A study from EyeQuant shows why.

EyeQuant compared Sephora and Uniqlo website product pages to see which page’s call-to-action (CTA) button drew more attention. The Sephora page’s CTA button was smaller than the Uniqlo’s, yet the Sephora button got more visitor attention in the first three seconds. That’s because Sephora’s button boasted more visual saliency and luminance contrast.

Photo by Format from Pexels

On the Uniqlo page, the large product photo stands out from the background just as much as the CTA button itself. Conversely, the modestly sized Sephora photo is more neutral in color. So even though both buttons feature a red tone that provides luminance contrast to the white background, the Sephora button is more visually salient. It has fewer other objects and colors competing for attention. As such, it more effectively catches visitors’ eyes. Keep this website design tip in mind when looking for ways to get your visitors to send you an email or download your sell sheets.

4. Avoid clutter

Clutter is anything on the website page that could draw visitors’ eyes away from the main features. In short, clutter goes against the principle of “keep it simple.” In the above Uniqlo example, everything that’s not fully necessary on the page could count as clutter. 

Google conducted a web design study in 2012 that to this day is still hailed as the best evidence of this phenomenon. The study found that visitors typically find more complicated web designs less attractive. You’ll make a stronger impression if each of your website sections comprises just one or two focus elements. These elements could be CTA text and a CTA button. They could be the logo and navigation bar in your header. The goal is a simple view that makes it completely clear to your visitors what you want them to read, watch, or do.

To minimize clutter on your website, opt for single-column layouts, avoid sidebars and sliders, and utilize dropdown menus with careful thought and planning. 

5. Include negative space

Avoiding clutter and maximizing negative space go hand in hand. Negative space, a.k.a. white space, is exactly what you think it is: nothing. It’s a powerful nothing, too — think about the space you leave between the framed photos you’ve hung on your walls. Doesn’t that empty space emphasize your photos? The same concept applies to good web design.

The more negative space with which you surround key parts of your visual hierarchy, the more those parts stand out. That’s why CTA buttons rarely have much text or photo content near them. When this button is the only object of notice, it gets all the attention.

Photo by Igor Miske on Unsplash

White space also comes into play with body text when you design a website. Longer paragraphs eat away at negative space, which can be a bit too much information for brains to process quickly. With small, brief paragraphs and short, bulleted lists, you maximize white space and make it easier to read your content. The result is an improved user experience that keeps visitors on the page for longer.

6. Prioritize navigability

Speaking of user experience, navigability — or how easy it is to get around your website — is key to ensuring that visitors understand your content and stick around to engage with it more. Navigability starts with your header, where your sections should boast highly specific labels. “Estate law,” for example, is much clearer than “services.” If you need to house your legal services under a dropdown menu, “legal services” is itself better than just “services.” Either way, visitors will immediately know what you do and where to find more information.

Proper site navigation also requires you to decide which web pages get their own sections or fall under dropdown menus. It may even involve choosing which topics get entire pages or just subsections of larger pages. Either way, a horizontal navigation bar is a must, as is a logo inside that bar. Clicking this logo should take visitors back to your home page. Conversely, avoid social media logos and links in this bar, as they direct users away from your website.

Ideally, your navigation bar should “freeze” at the top of the page. This means it will remain present as website visitors scroll. If not, include a “back to top” button as visitors scroll down the site so visitors can quickly get to your navigation bar and continue their journey.

7. Add visual cues

Navigation, negative space, colors — wise choices for each can direct website visitors right where you want them to go. Other visual cues can be even more powerful. A commonly cited example is the “baby face” study. In this study, positioning a photo of a baby in different ways on a web page drastically affected where the study’s 106 participants looked. In one example, the baby’s face looks directly out of the monitor. In another, it looks at the text next to it.

When the baby’s face looked directly out of the monitor, website visitors mostly looked at the baby. When the baby looked at the text, visitors mostly looked at the text. This groundbreaking case study suggests that we follow visual cues even when they’re not as explicit as, say, an arrow.

Photo by Igor Miske on Unsplash

That said, an arrow is also an incredibly useful visual cue. In fact, according to a CXL study, an arrow is a stronger visual cue than a face at any angle. Sometimes, all you need to do is point to the important elements on your website to direct people there. It’s among the most obvious website design tips, and yet, it’s also one of the most important.

8. Add the right photos

No website is complete without relevant photos, and as the baby study above suggests, photos of people are especially powerful. When your website includes photos of the people on your team, you can potentially draw way more attention. In fact, Basecamp found that, between a sales page with a person’s photo and one without it, the former converted 102.5 percent more people.

That said, you should try to avoid stock photos. Though they appear glossy and pristine, an NN Group study found that website visitors instinctively filter them out. Photos of real customers or your staff can be much more interesting to your visitors.

Of course, you should also include photos of your products when appropriate. Bose headphones, for example, includes product photos for its top-sellers near the top of its homepage. These photos link to each product’s listing, where you can go heavier on photos while following the color instructions detailed above.

9. Encourage visitors to keep scrolling

Some of the decluttering tips explained earlier might make you wonder where you can fit all your information. The answer: Keep visitors scrolling.

Photo by Burst from Pexels

A study by Crazy Egg came to this conclusion after comparing two sales pages that said the same things at different lengths. The page that was 20 times longer than the other led to a 30 percent higher conversion rate. This discovery may seem unintuitive for a second, but think about your own experience. Isn’t it tedious to open a bunch of links in new tabs to view later instead of getting the info now? Make your website scrollable to avoid this problem.

10. Ensure mobile friendliness

Just over half of all website visits come from mobile devices, a figure that’s increasing each year. Mobile device online purchases are expected to exceed $432 billion in 2022. That’s a huge increase from the 2018 equivalent of $148 billion! Both of these are a primary reason why your website should be mobile friendly.

Some experts suggest designing your mobile website before your desktop version, and that’s not a bad idea. Smaller screen sizes introduce more opportunities for clutter, so if you can maximize negative space on mobile, you can easily do the same on desktop.

Photo by PhotoMIX Company from Pexels

Vitacost’s mobile website is a great example of mobile-friendliness. All the sections on its desktop version remain present in the same order. Some categories have certain items excluded on mobile, yet the mobile sections remain just as engaging and visually appealing. The navigation bar is condensed, too, with the top left featuring a “hamburger menu” — that’s three lines to symbolize where the menu moved to — that expands to reveal every option available on the desktop navigation bar.

A top-notch mobile web design also matters because websites with a fully functional, properly laid out mobile version will appear higher in search engine results. This could potentially bring in more visitors, many of whom will stick around your site because you followed these website design tips.

Designing a website can be easy

Most website design tips circle back to the same principle: Focusing on your most important website elements directs visitor attention there. This guidance should be top of mind as you arrange your website blocks, a task that the Namecheap Site Maker fully streamlines. Use Site Maker to build a well-designed website in just minutes. Before long, visitors will be swinging by — and, more importantly, staying around.