.png)
Are you exhausted from searching the internet for website design tips that literally get you nowhere? We feel you, friend.
You went looking for tips because you’re not a professional website designer. So, why are all these blog posts recommending that you learn UX design? But what small business owner or entrepreneur has the kind of time for that? Yikes.
But you’ve kept up the search because you know that 94% of first impressions on websites are based entirely on their design. And if you didn’t know that, now you do! But don’t worry, we’ve got you.
We’ve compiled our five best website design tips and tricks, and you don’t need to be a tech-savvy coder to implement them either. We’re going over:
White Space
Easy-To-Read Fonts
Visuals
Mobile Optimization
& Easy Navigation
Wait! Before you hit the back button because you think you’ve already heard these website design tips, you should know something. You haven’t been taught them like this before. You’re getting 100% actionable advice. Keep reading, and you’ll find out exactly what you need to do and how to do it. Because you deserve a website you’re obsessed with.
1. White Space
White space is the space between the elements, such as text and images, in your website design. Even though it’s called “white space” that doesn’t necessarily mean it needs to be the color white. This space can be any color, texture, or pattern.
Of course, we’re not going to leave you hanging here with just the definition. As promised, let’s get into the nitty-gritty of how to apply white space to your website design with some actionable website design tips and tricks.
The Seven Sentence Rule
Have you ever gone to a website and seen a massive block of text and said to yourself, “Oh, heck no. I don’t have time for this,” and clicked the little red X button in the corner? Picture us over here raising our hands real high because we certainly have, too.
When there are too many sentences in a paragraph or too many lines in a row with nothing breaking them up, it becomes visually overwhelming for readers. (Can you imagine if this blog post was only broken up into like five paragraphs? That’s too terrifying for us to even think about!)
We recommend not going over seven sentences per paragraph if you want your visitors to stay on your website. Because the average person isn’t going to tolerate any more than that.
But you shouldn’t just avoid visual overwhelm. You should aim to add some visual stimulation, too. You can encourage your website visitors to keep scrolling and reading by varying your paragraph lengths. Every once in a while you can even throw in a single sentence as its own paragraph!
Adding white space like this helps readers (like you!) gain momentum down the page.
Headers, Bullets, & Lists
Headers, bullets, and lists allow for a text to be easily scannable by creating white space. This is crucial because these days people don’t really read, they just skim and scan.
No judgment here! We do it, too. In fact, only 16% of people read word-by-word. But this means we need to format our websites to accommodate for such skimming. So, if you can format your text using headers, bullets, or lists instead of giant paragraph blocks…. as the Nike slogan goes, just do it.
2. Easy-To-Read Fonts
We can’t think of anything worse than seeing a juicy blog post headline in a Google search, clicking on it, and then being unable to read anything on the page because the web designer chose to use an extremely difficult-to-read font.
Of course, what might have been a difficult font for us, might have been an easy font for them. So, what does it mean for a font to be universally easy to read? Let’s get into some website design tips for font types, sizes, and colors.
Easy-To-Read Font Types
We recommend using both a serif and sans serif font to bring balance and a nice visual contrast to your website. The difference between a serif and sans serif font, in the simplest definition, is the presence or absence of a serif. And the serif is a decorative line that’s added to the beginning and/or end of the stem of each letter.
You can use a serif font (like Georgia) for your header text and a sans serif font (like Arial) for your body text. Those two fonts specifically translate well across all devices and platforms. However, serif fonts are the easiest to read which is why we recommend selecting one to use for your body text.
Script fonts, or fonts that mimic handwriting, are notoriously difficult to read. So, if you choose to include an accent font in your branding, use it sparingly.
Easy-To-Read Font Sizes
Currently, a font size needs to be—at the very least—between 14 to 18. We say “currently” because this will change with time. Just a few years ago the average recommended font size was between 12 to 14. And as technology becomes more widely accessible, this trend of increasing font sizes will likely continue.
Larger font sizes will also encourage that horizontal motion we want for more scrolling, more reading, and more time spent on your website which (spoiler alert!) also helps boost your ranking on Google.
Another aspect to consider is line-height. Aim for 150% because a larger line height makes it easier to recognize letter shapes because of the white space. Are you starting to see how this all ties in together? ;)
Easy-To-Read Font Colors
Remember how we said that white space didn’t necessarily need to be white? Well, that’s not always true. Black text on a white background is by far the easiest font to read.
Think about it. There is a reason why almost every book uses black text on a white background. It’s just how our vision works. It’s the perfect contrast for our eyes to pick up on the text and easily read it.
If you’re placing a bunch of paragraphs in one section of a page (like this blog post), you really shouldn’t be designing those parts with any other color scheme. Normal web pages like your home page or about page, totally cool to add in some spice with color, blog posts = hard pass. And even on your normal pages like home or contact, we still recommend having any text blocks that will be over a paragraph on a white background for readability.
3. Visuals
You can’t have a website without visuals!
Well, technically…. you could design a website without visuals. But we highly recommend you don’t do that. People process visuals far faster than they do text. And we want the content on your website to be as easy to consume as possible!
If you do decide to include visuals on your website (and again, we seriously recommend that you do), make sure that some of those are photos of yourself.
When a visitor considers purchasing from your website, they ask themselves whether or not they can trust you. Having a photo of yourself on your website drastically increases that trust which in turn will drastically increase your conversion rate! We love that for you.
Quality
We know that everyone doesn’t have the budget to produce a ton of high-quality photographs. And that’s perfectly fine because we have a great website design tip to help you with this.
We love using photo overlays because they add texture and depth to your website design. Plus, you don’t need high-quality photos to do it.
Decrease the opacity of your photo and add a color tint to it—that matches your branding, of course. Now, the softness to your image appears intentional and the text on top is going to POP!
Placement
We’re all about strategy with our website design, not just visual appeal—although, not to toot our own horn but we’re pretty great at that, too. (Toot, toot!) We believe all your visuals should be strategically placed on your website. So, here’s a quick sales psychology trick to go with your website design tips:
Put the photo on the right and the text on the left. This is such a small tweak, but it will seriously help your website to convert. Think about the way you read. It’s from left to right. That’s why the text needs to come first—on the left!
4. Mobile Optimization
You’ve probably heard the term “mobile optimization” before, but it really is one of the most important website design tips because more than half of global internet traffic takes place on our phones and the numbers are only going up.
Designing a website that only works on a desktop is a recipe for failure. Especially if you want to be found on search engines like Google. Because the majority of people search the internet on their mobile devices, Google now uses mobile-first indexing practices. This means that Google primarily uses the mobile version of websites for indexing and ranking!
Luckily, you don’t have to know how to code these days to optimize your website for mobile. We exclusively use Wix as our website builder because of how easy it is to use for mobile and search engine optimization. The Wix Mobile Editor even allows you to customize and edit your website in mobile formats without affecting your desktop design!
We always make sure our clients feel empowered with the website design tips and tools they need to optimize for mobile and search engines. Because what’s the point of spending all your money on a beautifully designed website if people can’t use it or find it? We’re not here for that, and we know you aren’t either.
5. Easy Navigation
If you only remember one website design tip, remember this one. Your website navigation needs to be clear and concise, not cute and clever. This applies to everything on your website, but especially those menu options! Your navigation menu is not the place to get fancy and creative.
For example, if one of the pages on your website is a blog, it needs to be labeled that. Just call it a blog. Not “my thoughts.” Not “the world according to Nicole.” Nothing other than one word: blog. Because if someone has to burn *any* brain calories trying to figure out how to navigate your website, they’re not going to. They’re going to leave and unfortunately they’re probably not going to come back. In fact, here’s a scary statistic for you:
Five Options Only
Here’s a quick website design tip for you, too. We recommend including no more than 5 options in the navigation bar at the top of your website. Anything more can just confuse and overwhelm your visitors.
An easy way to slim down to five options (especially when you have more than five web pages) is to hide the homepage from the navigation bar. Because if they’ve landed on your homepage, there’s a good chance they already know they’re there, right? And if they’re not on your homepage, you can easily help them to get there by adding a hyperlink to your logo in the website header that redirects them back to your homepage. This is actually a super standard practice! Most websites do this so people know to expect that if they click your logo, it will return them to the homepage.
However, there is an exception to the five options only rule.
You can include as many options as you want at the bottom of your website, in your footer navigation! That way, once someone has scrolled all the way to the bottom of your page, they can quickly click to the place they want to go next.
Call-To-Actions
But don’t forget to tell your website visitors where YOU want them to go next. We’re talking about call-to-actions! Here’s our final website design tip:
When your website visitors reach the end of one of your pages or even the end of one of the sections on your page, you need to tell them what to do next. They’re not mind readers, after all! Do you want them to contact you? Then tell them that. Do you want them to check out your offer? Tell them that, too.
Think about the one ultimate goal of your website. What do you want them to do if they only do one thing? Once you’ve got your answer, take some time to think about the path you want people to take after they’ve landed on your homepage, and use your ultimate goal to guide you when laying out your website’s navigation.
Summary
Hey, friend! Did we catch you skimming to the end? Here’s a quick recap of all the website design tips and tricks we went over:
White Space
Never write more than seven sentences in one paragraph.
Always use headers, bullets, and lists over a big block of text if you can.
Easy-To-Read Fonts
Serif fonts (like Arial) are the easiest to read, so use one for your body text.
Font size should be between 14 and 18 if you want people to be able to read it.
Always use black text on a white background for large bodies of text.
Visuals
Use photo overlays if you can’t afford high-quality original images.
Your text should go on the left and visuals go on the right.
Mobile Optimization
Pick a website builder that’s easy to customize for mobile, like Wix.
Easy Navigation
Put no more than five options in the navigation bar at the top of your website.
Include a call-to-action at the end of every section and the end of every page.
Need an example of a call-to-action? We gotchu!
If you’d like to hire a professional to design your website, click right here to apply to work with us now. :)