It’s the dream of every web designer.
“I’m going to build an awesome website,” they say. “It’s going to have all these killer features and look really cool. I’ll pull in thousands – no, millions – of visitors a day. I’m gonna make so much money. You’ll see.”
They launch their website. And guess what happens?
I can hear the sound of crickets chirping from here.
Let me tell you, it doesn’t matter how amazing your site is if you don’t follow the principles of great web design.
You can’t just slap a website together and expect people to come flocking. Maybe that worked back in the early days of the internet, but it’s not going to cut it anymore.
If you’re old enough, you might remember MySpace. It was one of the very first social media sites out there, back before Facebook and Twitter took over pretty much everything.
MySpace users were fascinated by flashy colors, crazy fonts, animations, and all that jazz. It wasn’t uncommon for music to start playing as soon as someone’s page loaded. Back then, people thought all that self-expression was cool.
Why do I bring up MySpace? Because it’s a prime example of what you should not do when designing a website today.
“So, how do I build a website that people actually want to visit?” you ask.
Great question – and that’s why I’m here to give you my top six principles of great web design. Let’s get to it.
Build it right, and they will come
Rodney talks about the principles of great web design.
Don’t give visitors a chance to bail
Imagine you visit a website you’ve never been to before. You have no idea what this site is all about, but your friend said you should check it out, so here you are.
The site loads, and suddenly you’ve got a cat video playing in one corner, an article on the top five ways to cook spaghetti at the top, and a pop-up asking you to download an e-book on how to make money online.
Naturally, you’re confused. What’s going on here? What exactly is this website for?
You can’t figure it out, so you click the back button and go find some other site that actually makes a lick of sense.
This is a bit of a wild example, but I hope you understand my point. If you don’t immediately make your site’s purpose clear to users, they’re not going to stick around.
In this day and age, people have the attention span of gnats. How do you grab visitors so they don’t turn around and leave your site in seconds?
It’s really pretty simple. Don’t leave people guessing as to what your site is for!
Does your website sell ferret toys? A title like “Buy Ferret Toys Online” instantly tells visitors they’ve found a place where they can buy all the ferret goodies their furry friend could ever dream of.
Don’t use a vague title like “Treat Your Ferret Right and It Will Love You Forever.” That may be true, but it doesn’t tell users what your site is for.
We’ve all got problems
This sort of ties in with my point above. People have problems, and when they visit your site, they want to know how you’re going to help them.
If you don’t quickly explain your solution to their pain points, visitors are going to leave and look for another site that does.
Let’s imagine that our user is a business owner. No matter what he tries, he just can’t seem to attract new customers. If he doesn’t figure something out soon, he’s going to start losing money. Maybe he’ll even need to shut the business down.
What do you think this user wants to see when he arrives at your site? A random blog post about how to save money by taking snacks out of the break room?
No! He wants to know how you’re going to help him find customers before his business goes bankrupt.
Make your message clear immediately, and ensure your visitor doesn’t need to scroll below the fold to find it. A message like “We help businesses find 20% more customers in just 60 days” tells your visitor that this company understands their problem and they know how to help.
What if you don’t really know what your visitors’ pain points are? If you have a sales team, they’re a great source of customer information. You can also try monitoring social media for mentions of your industry and related niches. This can help you discover pain points you’ve never even considered before.
First impressions matter
Your website’s appearance is a critical factor when it comes to attracting – and keeping – visitors. Just like in the real world, looks matter. If you’ve got an ugly website, do you know what people are going to think?
They’ll think you’re unprofessional, for starters. If you don’t care to put some effort into your site’s appearance, they’re going to think that you won’t put in much effort to help them, either.
Imagine you’re searching for a new doctor. You click on a site and instantly see low-quality stock photos, a cheap-looking logo, and a flashing ad that screams “Make an appointment now!” The site has a hideous pink background and red text in a font that’s hard to read.
Would you trust this doctor? Very few people would.
Your professional website is not the place to let your creativity run wild. Keep it simple with neutral backgrounds, high-definition relevant images, and easy-to-read text. Not sure which font to use? Try one of these:
- Roboto
- Open Sans
- Helvetica
- Merriweather
When choosing a website theme, stick with one that uses three to five colors, max. Using too many colors can make your site look cluttered and unfocused.
Keep the site’s design the same from page to page, too. You don’t want colors and themes to change from one section to the next. Inconsistent branding confuses visitors and will make them leave your site faster than you can blink.
Google Maps can’t help you here
Picture this: You’re driving and trying to find this great new restaurant you’ve heard about. Google Maps says to turn right on Forest Avenue. So you do, but then it tells you to make another right on Smith Street. And yet another right on Green Boulevard.
Instead of ending up at the restaurant, you’re right back where you started. Confused, you call the restaurant and ask them how to get there. The owner tells you the address in Google Maps is wrong. What you really need to do is turn left on Fuchsia Drive, then take a right on Forest Avenue.
You do that, but you still can’t find it. Frustrated at the terrible directions, you just give up and go back home.
If your website has poor navigation, that’s exactly what your visitors are going to do.
Your website’s navigation needs to be intuitive, so there’s never any confusion about where customers go to find what they’re looking for. That’s why you should set up navigation so that visitors can find everything on your website within three clicks of the homepage.
This is especially important if your customer service team needs to tell visitors how to find things on your site. If their instructions are hard to follow because your site has a confusing layout, it’s time to rethink your navigation menu.
Don’t let site elements compete for attention
If your site lacks a logical hierarchy, visitors won’t know what to look at and where to go first. Put simply, hierarchy describes the arrangement of pages on your website. It all starts from the homepage and drills down into subpages and more detailed categories.
Let’s say you own a chain of hotels. At the top of your website, you’d want a menu bar with buttons for each page, such as Amenities, Locations, Reservations, and so on. If the user clicks on “Locations,” they should go to a page that lists each hotel, its address, phone number, and other information. Sounds obvious, right?
A good site hierarchy isn’t just for the benefit of visitors, though. It also helps web crawlers scan and index your pages, so they’ll show up in search results faster.
You should also consider the layout of visual elements on each page. Humans tend to scan information in a sort of “F-shaped” pattern. They’ll start at the top of a page, then check the left side for numbers or bullet points, and finally go across the page looking for bold text, such as subheadings.
The “Z pattern” is another one to consider. Here, users start by scanning from the top left to the top right, then diagonally to the left, and lastly, from the bottom left to the right again.
When designing the layout of your site, the goal is to mimic the natural eye path so you don’t disrupt visual flow.
Make it fast and mobile-friendly
If you’re only designing your site for desktop users, you could be missing out on significant traffic from mobile devices. Think of how many people browse the web when they’re on the go. These users want responsive design from websites that they can view easily on small screens.
So how do you design a mobile-friendly site for the best user experience?
First, focus on minimalism. Cut out unnecessary elements and try to convey your message using as little text as possible. Each screen should have one purpose only so users don’t get confused about where they are and what they need to do.
On each page, stick to a single call to action, such as “sign up for a free trial” or “book an appointment.” Make sure these buttons are big enough for users to easily tap – about 10 millimeters, or the approximate size of a fingertip, is a good measurement to aim for.
Text size is important, too. You don’t want text that’s so small, visitors need to zoom their screen to be able to read it. Larger font sizes are additionally important for people who may be visually impaired. Ensuring your website is accommodating for all types of people is highly important for your website. On mobile screens, fonts that are 11 points in size or bigger work best.
Image sizes also matter. For images meant to add visual interest, keep the size to no more than 1920 pixels wide.
It’s also vital to provide feedback in response to every user action. Without it, users might think your site is frozen or that it’s stopped working altogether. A spinning “loading” circle or moving progress bar keeps visitors informed of what’s happening in the background, which helps keep frustration and confusion to a minimum.
Want more visitors? Don’t forget these design tips
Now that you’ve learned my favorite principles of great web design, you’re ready to build a beautiful, functional website of your own. Keep these tips in mind when designing your next site, and you’ll be well on your way to higher traffic, better-quality leads, and stronger sales in no time!
