11 Web Design Tips to Create a Website Your Target Customer Loves
There are thousands of things that go into a website. You’re starting with a blank page, and need to figure out where you’ll add content, images, and testimonials.
Where do you start?
The best website designs don’t happen by fluke. The designer behind them invests time into judging which design elements are most successful—and convince people to continue using your site after landing there.
In this guide, we’ll share 11 web design tips you should be using, including:
- Focus your most important content above the fold
- Enjoy white space
- Use photos of people
- Prioritize site speed
- Reduce distractions with Hick’s Law
- Use colors wisely
- Make it responsive
- Think about fat fingers on mobile
- Do the squint test
- Think about typography
- A/B test your on-page design elements
- Analyze a heat map of your page
Click the links above to jump to a specific web design tip, or continue scrolling to learn how you can design web pages that your target customer loves (and wants to use.)
1. Focus your most important content above the fold
If you’ve followed web design trends over the last few decades, you’ll probably recognize “the fold.” It’s the portion of the page that’s visible before the fold—anything you can see without scrolling.
The need for prioritizing above the fold has been a long-standing debate; some designers argue that it doesn’t really matter… But research suggests otherwise. Website visitors scroll more than they used to, yet eye-tracking data shows they still spend more time above the fold (80%) than below it (20%.)
So, what does that mean for your business’ website design?
You should prioritize the design to make an impression if someone were to only view the page above the fold. That could mean:
- Including your most important feature(s)
- Showcasing photo of your product
- Touching on the price
Once you’ve designed your site and nailed the top portion of your page, its also worth checking whether the content you’ve prioritised is visible to mobile browsers.
Remember: The screen size of a mobile device is much smaller than a desktop. You’ll have a harder job squeezing the same things as your desktop version above the fold on a mobile design—but don’t sacrifice quality.
Simply pick your most important elements, and position them higher up the page of your mobile design.
2. Enjoy white space
It’s tempting to go overboard with a website design. You get in the groove and start adding cool features to the page… But before you know it, your site is overcrowded. There is no breathing room.
You’re not alone. Research has found that almost 85% of small businesses are guilty of overcrowding their website.
A lack of whitespace (also known as negative space) is a huge problem for any website designer. Why? Because whitespace increases comprehension by almost 20%. Space gives a visitors’ eyes a break, and allows them to digest what the page is actually talking about.
However, you might find it tough to master the balance between using whitespace effectively, and designing a site that looks bare.
You should be using whitespace between:
- Graphics
- Margins
- Gutters
- Footers
- Columns
Here’s what that looks like in practice, using the BigCommerce homepage as an example:
The design is easy to digest because we’re not overwhelmed with a crowded page. There’s plenty of whitespace between each element, which helps each one to stand out in their own right.
3. Use actual photos of people (and not just stock people)
Images make or break a website, especially if you’re designing an ecommerce site. They keep people engaged, show your product in action, and build trust.
But you can’t just throw any image onto your website’s design. A poor image will make the entire site feel poor—no matter how much time you’ve invested into the design itself.
So, what type of imagery should you use?
Research has found that website visitors pay close attention to images that contain relevant information. This could be:
- A screenshot of your software
- A close-up image of your product
- A professional headshot (if you’re a service-based or personal brand website)
The same research paper ran a test. They discovered that website visitors spent 10% more time viewing portrait photos—even though the corresponding text took up 316% more space. Photos of people are a great way to make your site look more credible:
…Notice how we didn’t mention stock photos?
The study we just mentioned also concluded that people ignore stock photos. It’s real-life photos of your human team that tend to get the most attention. So, use them to your advantage when designing a website.
4. Prioritize site speed
What’s the most important goal you’re trying to achieve when designing a website? You might automatically assume that sales is the goal. But you can’t generate sales if your website design doesn’t convince people to continue using your website.
That’s where site speed comes in: Google found that sites that load in five seconds (compared to those that load in 19) see 70% longer average sessions.
Check whether yours meets that mark using Google Analytics. Head to Behavior > Site Speed > Overview:
A slow-loading website could be turning target customers away before they’ve even had the chance to view your products. This kind of poor user experience is never going to result in conversions. They’re long gone before they start to think about purchasing.
It’s a web designer’s main priority to make sure that the site they’re designing doesn’t sacrifice loading speeds. This can be done by:
- Reducing image sizes
- Enabling browser caching
- Choosing a fast hosting provider
- Uninstalling unused plugins
- Upload videos to third-party platforms (like Wistia or YouTube), then embed the URL
You still might struggle to meet the five second mark even if you’ve made those changes.
In that case, head over to Google’s PageSpeed Insights tool. They’ll give a tailored list of recommendations that’s personalized for your website, along with the estimated time savings you’d see by implementing them:
(Side note: Improving your site speed can help with other marketing strategies—like SEO. Search engines consider site speed a ranking factor. Implementing their time-saving recommendations could be a win-win for everyone working on your site.)
5. Reduce distractions with Hick’s Law
The more choices a person has to make, the longer it will take for them to make a decision.
That’s the basics of Hick’s Law, also known as “analysis paralysis.”
(You’ll have probably experienced this first-hand when you were younger. You visit the sweet shop with $1 in your hand, and see a five-foot wall of sweets. There are so many options. How do you pick?)
In the case of a website design, use Hick’s Law to prevent overwhelming people with too many things to do.
The navigation bar is a classic example. Take a look at this landing page from Chase.com. It’s completely overwhelming because there are so many choices for me to choose from above the fold—including the call to action, navbar buttons, and sign-up form:
Which do I pick? I’ve no idea—and it’s off-putting, so I’ll click the exit button.
This landing page from Netflix, however, strips the navbar and gives me one thing to do: Sign-up.
The bottom line: It’s much easier to engage with a website that doesn’t look overwhelming. So, stick with a single call to action (CTA) for each landing page. You don’t want to induce analysis paralysis.
6. Use colors wisely
Colors play a huge role in psychology. They’re hardwired in our brains to provoke emotions when we see them—which makes them a key design element for any web page.
You might feel the following emotions when you see a color:
- Red: Danger, excitement
- Blue: Calm, dependable, strong
- Yellow: Happy, warmth
- Green: Growth, health, positive
Let’s put that color psychology into practice and say you’re designing a call to action (CTA) button.
You want to create a sense of urgency for a time-sensitive deal on one of your products. Therefore, you could use the color red to attract their attention, and subtly communicate that something needs to be done quickly.
But what if you’re asking for someone to complete a form submission? In this case, the color blue would be a great option. It’s a trustworthy color that makes us feel calm—which could influence their chances of completing the goal.
(Side note: It’s worth double-checking that the colors you’re using for each design element fit with your overall color scheme. Take a look at your brand colors. Can you use any emotion-provoking colors alongside them?)
7. Make it responsive
Mobile internet usage is on the rise, according to Statista:
- Over 2 billion people access the internet on smartphones
- Mobile devices account for 48% of web page views worldwide
- Global mobile data traffic is projected to increase nearly sevenfold between 2017—2022
A responsive web design is crucial if you’re to stand any chance at driving those mobile users to your website—and convincing them to stick around.
Why? Because a responsive web design works on any device, regardless of the size of their device’s screen. It will automatically rearrange specific elements as the page size changes, allowing it to look visually appealing on any device… Not just desktop.
Responsive website use HTML and CSS coding to change, hide, or minimize design elements depending on the device being used.
You might need a developer to help make your website responsive. Or, you can use a basic responsive theme and add your customizations on top.
It doesn’t matter how you do it—it just matters that you do.
(If that’s not convincing enough, consider this: Google prioritizes sites that are mobile-friendly. You won’t win your customers or search engines if your web design isn’t responsive.)
8. Think about fat fingers on mobile
Following on from responsive design, there are a few things you’ll need to bear in mind when designing a mobile-friendly web page.
Mobile screen sizes are much smaller than desktop. And unlike desktop mice, we’ve got to use our fingers to navigate around a website.
That’s where “fat fingers” can become a problem. They happen when a design element is too small for someone to click on a mobile device—and ends up clicking something else that’s close by. (It’s a huge problem for mobile advertisers.)
You can prevent fat fingers from ruining your mobile visitors’ user experience by thinking about it in your mobile design. This could mean:
- Increasing button sizes
- Replacing text with icons
- Using gestures—like “swipe up to discover more” used on social media Stories.
9. Do the squint test
Visual hierarchy refers to the way we see a website. It helps you identify the most prominent things on a website, and spot where future visitors will focus.
You can understand your design’s visual hierarchy with the squint test. Close your eyes slightly so the design goes blurry, then answer these questions:
- Is there enough whitespace for you to see individual design elements?
- Which elements are most obvious?
- Which sections are your blurred eyes drawn to?
If you can’t answer either question, go back to editing your design. You’ll want to make it easy to spot the most important elements throughout the squint test, since it’s the places your visitors’ eyes will be drawn when they form their first impression of your website.
10. Think about typography
Typography is the way you display written text on your website.
It’s usually in the form of fonts—another design element that has the ability to make or break your website, as design pro Oliver Reichenstein explains: “Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance.”
Some typography tips include:
- Limiting use of the Caps lock
- Using line spacing effectively
- Publishing dark text on a light background
- Using a maximum of two fonts on one web page
Take a look at this example which shows how too many fonts can be overwhelming:
11. A/B test your on-page design elements
It’s tough to give a list of web design best practices. What works for one site won’t always work for another. It completely depends on your industry, target audience, and the products or services you’re selling.
That’s why it’s crucial to A/B test every design change you make, such as:
- The color of your call to action button
- The headline you’re using
- The placement of your images
- Whether you display your contact information
Take image sliders and carousels, for example, which were all the rage in the early 2000s. Almost every website you’d visit had some form of image carousel—but these days, just 1% of website visitors use them.
…Nobody knew that until they tested it.
Find which elements, colors, words, and positions perform best on your website with tools like CrazyEgg or Hotjar to run A/B tests. You’ll create variations of your web design and show them to real visitors. Simply dig through the data and see which variation was the most successful.
You might find that the layout you’ve been using for years has a conversion rate of 2%, which skyrockets to 5% after switching it around.
12. Analyze a heat map of your page
Similar to A/B testing, it’s smart to get a rough idea of how people engage with your web design. This one-on-one insight into a session can be done using heat maps—a color-coded system that shows which areas of your page people spend the most time looking at.
Sections which capture lots of your visitors’ attention is red (meaning it’s “hot”.) Areas that don’t attract much attention are blue.
Below are the different types of heat maps, and the ways you can use them to design your website:
- Move maps: This tells you where a visitors’ cursor tends to hover. Look at where mice tend to move, and consider designing your website’s layout to suit.
- Click maps: Which areas of the page do people click? This could influence your on-page elements—like the placement of your calls to action or navigation bar.
- Scroll maps: Find out whether content above the fold is really important by viewing how far people tend to scroll down your page. If they don’t really move from the top portion, prioritize your most important content there.
Here’s what these types of heat map look in action.
The left is a scroll map which shows more time is spent towards the top of the page. The right is a click map, which shows the far-right button generates the most clicks:
Ready to create your business’ best website design?
These web design tips are bound to come in handy when you’re designing your website. Plus, the techniques we’ve shared are (almost) future-proof—especially with mobile usage taking over desktop.
The only thing left to do is start planning how your new site will look!
