Hey there, I'm Mike and today I'm going to show you 15 design principles for a customer-friendly website. (upbeat music) A survey of 612 people by Clutch found that 83% of participants noticed when a website's design is aesthetically pleasing and up to date. Alternatively, 50% of participants would leave a website forever if they believed the content is irrelevant or doesn't meet their needs. So how do you design a website customers will like? That's what this video is all about.
We'll show you why good web design is essential and share 15 web design principles you can leverage to build a high-quality website. But before we get too far, I wanna let you know that there'll be links to more resources in the video's description below and remember, subscribe or ring that bell to get notifications for future helpful content. Now let's design an excellent website. How do you embrace well-planned navigation? Draw inspiration from The Cool Club's website. When you enter The Cool Club's homepage, the website's layout is extremely clear.
You can navigate to key product sections like card games and bucket list using the buttons on the left-hand side and you can navigate to the About and Contact pages using the buttons on the right. The Cool Club's product pages are also very easy to navigate. The brand currently has an interactive card deck that features 54 cool variations and corresponding pages. You can simply scroll down and click on the cards you want to see more of. To create a similar website, sort content into clear categories for your headers and footers and give them descriptive titles. Then order your pages by topic so people can navigate between similar topics easily. Additionally, make your header and footer consistent throughout your website. Negative space or white space is the region around the subjects of a page, whether they be images, videos, text or buttons. Using negative space emphasizes the most critical elements of each page and the lack of color draws the visitor's eyes to brighter areas.
Of course, use negative space doesn't mean create a boring white website. Instead, you can leverage space using your brand colors just like Garoa does. Garoa's homepage uses a cream-like palette to build ambience while still leveraging negative space. The result is that your eyes go to the introductory content in this Skincare for Autumn section in the center instead of the less important parts.
When you read brand names like McDonald's, Coke or Nike, the vision of their logos, fonts, and design styles likely comes to mind immediately. That's the power of consistent branding. When designing your website, craft pages with consistent elements to give your brand a clear visual identity. That means using the same fonts, styles, and colors across headers. Keeping spaces between visual elements the same between pages. Using color palettes instead of random colors. Setting layout guidelines for long-form content like news pieces and blog posts. Using a website template for all pages. Consistent pages don't need to look completely uniform. Instead, you can balance between consistency and engagement by mixing up elements. Complementary colors are pairs of colors that you can mix without making your design look overwhelming and ugly.
Using complementary colors achieves a similar purpose to black and white. Complementary colors provide emphasis and create a clear visual identity for your brand. You can see this on Swab the World's website. In this screenshot, the blood cancer charity uses green and shades of magenta. These colors change to the other complementary color combinations when you visit different website sections, though all the colors have similar saturation so the branding remains consistent. If you look at The Cool Kids, Garoa, and Swab the World's websites, you make notice that each website has a unique feel.
That feels comes from tailoring the design of the website to the audience. Personalization is the ultimate goal here. Most of us like to buy products and services from brands we feel aligned with and represented by. In fact, research shows that 72% of customers value purchasing from companies that align with their beliefs and values. So if someone visits your website and sees their values, goals and priorities reflected there, they're more likely to purchase from you. To personalize your website design to your audience, consider what images resonate with your target market specifically? What tone works for your audience? For example, professional, minimalistic or bubbly? What topics your target market comes to your website to see. How you can convey your brand positioning through your web design. What calls to action your audience responds to and where you should put them to optimize your click-through rate. It might be helpful to draw inspiration from competitors or brands that sell different things to your target demographic. The fonts you use on your website determine whether your visitors can read what you wrote or not.
Safe to say, they are very important. The first thing to consider when selecting a font is web safety. Web safe fonts are supported by operating systems and web browsers so they'll work on most devices. You also need to consider accessibility. Accessible fonts should be clear and easy to read at large and small sizes. For example, cursive-based fonts aren't very accessible, while Times New Roman is fairly accessible. Additionally, watch for trends of fonts on other websites when selecting a font. In 2021, data scientist Michael Lee analyzed the fonts on over 1,000 websites. He found the following trends. 85% of fonts don't use serifs, the little added lines to letters in newspaper type. The top five fonts include Sans Serif, Arial, Helvetica, Helvetica Neue, and Roboto. H1 headers have a 58% probability of having no serifs, compared to 93% for paragraph text. The two most common sizes for paragraph fonts are 14 px and 16 px. You might choose to embrace this information to select a font style that adheres to what people look for in websites. Or you might choose to do something different. Virgin is a brand that chose the second option.
Virgin used at least five fonts in this screen shot. These fonts separate sections of the page and make them look engaging. Psychologist Paul Fitt's first developed Fitt's Law in 1954 but it's still highly relevant in web design in 2022. Fitt's Law argues that the size of a target influences how much time it takes someone to reach it. In a web design or user experience context, this means that it'll take people less time to click larger buttons or more time to click smaller buttons. So to leverage Fitt's Law, you should make your CTA buttons extremely large and prominent so that they are easier to click.
Easy is crucial here. Hick's Law, developed by British psychologist William Edmund Hick, and American psychologist, Ray Hyman, say that people become fatigued every time they decide something. So the more decisions you ask a website visitor to make, the greater the chances they'll become too fatigued to follow through. When something's invariant, it stands out as a unique option from several very similar options. The most obvious example of invariance is the highlighting and plans on pricing pages like this one from Box. But that's not the only way you can use invariance. Invariance can help you establish a visual hierarchy on your pages to highlight key information and draw people to important parts of your page. For example, take a look at how the Frans Hals Museum used invariance to create a visual hierarchy on its home page.
The hierarchy in this image is as follows. The welcome sign, the images, the Buy Tickets sign, the All Exhibitions sign, then the other content. To use invariance to create your own hierarchy, rank page elements in order of importance. Then adjust each element's size, color and placement until visitors' eyes go to each element in the order you want. We touched on the importance of making your buttons large and easy to click but size isn't the only thing you should consider when creating buttons. Clickable buttons are descriptive and persuasive at the same time. They make the visitor curious about what the button links to and they give them a reason to go there. One way to do this is to use detailed button texts, like click here to read our blog, find our marketing secrets here.
Or here's our 2022 report. Another is to make your buttons visually exciting or unique. Rainforest Protector took both approaches. Rainforest Protector allows you to navigate the Amazon Rainforest by visiting different locations. Each location's buttons include an image and an action like visit the village. Over 13 years, researchers from the Nielsen Norman Group used eye tracking to see how more than 500 people engaged with content. This led them to develop the F pattern, which says the first thing people do is scan down the page.
Then they read in left-to-right lines, like this. You can leverage the F pattern on your website by structuring your content around it or an alternative model. Facebook famously uses a Z-shaped pattern on its homepage. When you visit the page, your eyes go to the Facebook logo, then to the Log In button, then to the image on the left. And finally to the Create an account button. As of the fourth quarter of 2021, 54.4% of website traffic globally came from a mobile device. So if your website isn't mobile-friendly, you could divide your traffic. Speed also influences organic website traffic. Research from Google shows that 53% of people leave a website if it loads in more than three seconds. Easiest way to make your website mobile-friendly or fast is to choose a fast website theme made by expert designers. Or if you want to be more involved in your website's design, you can custom build a responsive website. That's what the designers behind the "1917" movie did.
1917's website delivers an immersive experience to get people invested in the movie. It's specifically designed for mobile devices and you can use your finger to move around in the trenches of World War I. If you observe it, you'll notice that 1917's website also leverages the F pattern. Consider this, you search for mind games and find a website that seems promising. However, when you click on it, you're overwhelmed with large chunks of text that are difficult to read. Eye tracking research from the Missouri University of Science and Technology shows that website visitors spend an average of 5.59 seconds reading text. So if people can't consume your text in that time span, it's unlikely you'll engage them properly.
Fix this issue by dividing your text into small chunks. When we say use grids, we don't mean that you should make your website look like an Excel spreadsheet. Instead, divide your website into distinct sections that serve a specific purpose so visitors can quickly locate content. You don't need to use grid lines to do this. Instead, create distinctions between grid spaces with color, negative space and shading like Atlason did. Atlason's homepage features new and bestselling products in grids. As visitors are likely looking for these products, the grids help them find them in seconds. One of the easiest ways to use grids on your website is to select a WordPress theme that uses them. Examples include Grid Frame, Masonry Grid, and Shuttle Grid. In the context of web design, balance refers to the way design elements sit in relation to each other and whether the elements portray harmony. There are many ways to create balance on your website. You can see balance in action on Woven's website. This website uses a balanced color palette, black and white to create contrast within the text, and symmetry to draw visitors' attention to the content.
Gestalt theory stays that people perceive something as a whole before looking at individual elements. Though people usually reference Gestalt's theory regarding psychology, it applies to web design too. You need to pay attention to the small details on your website to ensure your design looks polished and complete. When designing something, it's easy to focus on important elements, like headings, images, and CTAs, and forget other things like footer and header icons, social media buttons, how effectively you converted your website to WordPress. Text spacing, typos and grammar errors, browser compatibility, and image sizes. Double check these elements before hitting Publish and ensure your website conveys professionalism. You may overlook minor flaws but visitors won't.
Additionally, keep up to date with new trends and concepts in web design principles. Adding these to your website will keep it looking new, fresh and engaging. Now that we've covered everything we know about web design, we'd love to hear from you. What do you notice when you visit a brand's website? Additionally, do you use any principles we haven't mentioned on your website? Please let us know in the comments below. Kinsta's WordPress hosting can speed up your website by up to 200%, and you'll get 24/7 support from our expert WordPress engineers. We offer two months free with any annual plan, a 30-day money-back guarantee and unlimited free basic migrations from any host. Head over to Kinsta.com/plans to get started. Thank you so much for watching and if you found this video helpful, please don't forget to like, subscribe and hit the notification bell for more tutorials, explainers and helpful content like this.
(upbeat music).