What are best practices in web design? How can you successfully implement them in your next web design project? What are we actually defining when we talk about design standard and best practices in web design?
What do we mean by best practices?
In web development there are fixed rules, mostly regarding readability, the cleanliness of the code, and the security of a website. In web design, on the other hand, the terminology is vaguer and the rules are more open to interpretation.
Best practices: web design is more than aesthetics
Best practices in web design are a mixture of visual design, user experience design, accessibility and content writing - with a focus on SEO.
Best practices in web design are a set of rules that need to be followed to meet the general expectations of users. They are also guidelines for greater clarity and a better user experience.
This article presents best practices for good web design. For each area, I give you tips on how you can acquire further skills and knowledge and show tools and examples to help you with your next project.
I also touch on best practices in WordPress development. As I’m sure you know already, project planning and project management are an important part of web design. For the sake of brevity, however, these topics aren't covered in today's article.
Best practices: visual design
Let’s start with the established standards for visual design. What are the best practices in the field of visual design? Which factors are involved?
Recognition feature and branding
The website must fit in with the rest of the company's image and should be based on the style guide. Check the website for the following questions:
- Can you tell at first glance for which company the website was created for?
- Has the style guide been integrated?
- Are the website operators recognizable from the visual elements?
- Are the visual elements used consistently?
- Does the language used on the website reflect the branding?
Google is at the forefront of consistent branding. I can't think of any other brand that has so many different products and yet manages to give every product the same company feeling. Even when I look at a Google product for the very first time, I can instantly associate it with the brand.
How does Google do this?
Among other things through consistent use of Google colors, typography, distinctive whitespace, consistent calls to action and navigation. The logos also show a certain consistency that works across companies and categories - although the latter doesn’t necessarily mean the design will also please everyone.
With consistency in branding, you’re only analyzing whether the website reflects the company and its branding in the best possible way.
Web design standards and usability
Another best practice is defined by the integration of standards. This includes, for example, the placement of the logo in the upper left corner, the appearance of buttons, links and so on. These help your site visitors find their way around quickly and easily. These standards are therefore indispensable for implementing successful usability.
What defines a web design standard?
According to Andy, a design approach must be used on at least 80 percent of websites to count as standard. Anything else is either a habit (50-79 percent) or even brings inconsistency and confusion (0-49 percent) to your site.
Harmonious design: the rule of thirds
I've published an article on harmonious web design before. This time I’d like to go into more detail about the rule of thirds.
This rule has been used for centuries, mainly in the field of fine art and later in photography. As shown in the diagram below, the rule of thirds sees the design divided into nine equally sized boxes:
When creating websites, the rule of thirds helps you above all to place the most important information in such a way that the visitor can take it in straight away.
Put simply, a visual element should not occupy more than three boxes and should be located in one third of the layout. The points are also particularly well suited for placing important messages and CTAs
In Photoshop, you can quickly and easily review and adjust your layouts using the crop tool and rule of thirds settings. To illustrate the rule of thirds, I’ve taken a closer look at the Marqeta website:
The product and its message are well distributed across the points. Here the design could be made a little more efficient by shifting the CTA a little. However, the harmony of the design would suffer somewhat:
The mobile version clearly shows that the message fills the lower third of the layout, while the product is displayed fairly centered. Here we could still rethink the placement of the CTA.
So-called "heat maps" also help you to find out where the visitors of your site mainly look and click. The tool Crazy Egg is an example of a service offering this functionality (fee based).
Another way to check your design is the so-called blur test. Here you remove the sharpness from your layout (for example, using Photoshop and the "Gaussian Blur" - 12 percent). When users can no longer read the content, it quickly becomes clear where the focus is when viewing the website. This test is also well suited for analyzing the CTA. Is it still recognizable as such?
For this I’ve used the website of Marqeta again. The right-hand CTA and the product are particularly prominent, followed by the message and finally the logo and the second CTA:
I blurred the mobile version even more to test what is left. Here the product catches the eye first, followed by the CTA and the logo. You can do this test with the whole site - at best while you’re still in the design phase. Here you can quickly and easily analyze which elements of your design are prominent and decide if this is what you want.
Text and SEO
The creation of websites naturally includes written content. For this there are professional copywriters who, with an eye on SEO, usability and style guides, write meaningful content for your website. But there are also a few guidelines that you can follow yourself.
You should pay special attention to the length and readability of the texts - often texts are too comprehensive and long winded.
Even if the target group is used to a certain amount of jargon, you should always be aware that our attention span on a website is much shorter than when we read, for example, specialist journals. When browsing websites, we tend to be looking more for specific information. We’re more likely to scan the content rather than actually take the time to read it properly.
You also lose points from Google if your sentences are too long and win plus points if they’re connected with so-called "transition words" instead.
Here are some interesting articles on SEO:
Web accessibility is unfortunately still a marginal topic and is too often ignored. There are also simple approaches we could take into account here from the very first design. For example, do you mainly use colors to highlight information?
You can easily test this by looking at your website in black and white:
I’ve analyzed the same website again here too. Even without colors, the message is clear. The upper right CTA could become problematic in terms of contrast.
To verify this with certainty, you can use the "Contrast Checker". The default contrast ratio is at least 4.5:1 for normal text and 3:1 for large text, such as headlines:
If I use grey tones, the CTA is not rich enough in contrast but the color variant is sufficient.
http://colorsafe.co/ is another tool for determining colors and their contrast. You can directly try out different color combinations. The ratio is shown straight away, you can select fonts and also choose according to which WCAG Standard you want to make your selection.
Problems can arise with the use of colors for the visual representation of error handlings. Let's take form elements, for example. Errors are often represented by highlighting the input box in color. Someone with a color vision deficiency may not be able to recognize errors here and therefore not be able to solve them.
You should take this into account when planning and make sure the error is signaled in an additional way. In a further wp unboxed article you can find more interesting facts and resources about accessibility and valuable tips for creating a barrier-free WP site.
More resources on accessibility:
Resolution and cross-device design
There is probably no other rule in web design that is more frequently discussed - and more often broken - than "mobile first”.
In this approach, content is created for mobile devices and then adapted for the larger ones. The opposite is to design for desktops and the like and then adapt it for smaller devices.
Two other possible approaches come to mind:
- Create a separate website for both mobile and desktop devices and then access it accordingly.
- Display the desktop version of your website on mobile devices
The former might be the right approach, depending on your project, but it's not particularly common as it's very time-consuming and costly. Unfortunately, the latter is still seen too often on the web and urgently needs to be stricken off any "best practices" lists. More tips for mobile optimization can be found here.
Mobile first doesn't necessarily have to be the right way for everyone. Research on the target group and their internet behavior can quickly show you which devices they use to access your site.
The idea behind mobile first isn't just that content should be prepared in a visually appropriate way but also that the changed external conditions need to be taken into account. You can find more details in the article Mobile-First UX Design Is No Longer Just a Trend instead.
The following table clearly shows which screens are used most frequently to access the internet. This can help you decide which screens you want to optimize your websites for. Bear in mind, however, that such generalizations are merely a guide. These statistics cannot replace proper research into your target groups.
Best practices for WordPress
WordPress offers you an incredible number of ways to present your designs on the internet. But even here there are standards and best practices you should follow.
The WordPress Codex
WordPress provides an official codex to help you deal with the topic of best practices in more detail.
WordPress plugins and themes
When choosing plugins and themes, current functionality isn't the only deciding factor. It's a good idea to also read reviews and familiarize yourself with how often updates have been published in the past and whether the plugin or theme will continue to be developed in the future. WordPress tools that are continually developed usually have more active support. They're also more likely to remain compatible with future versions of your website.
WordPress updates and security
Regularly updating your plugins and themes will reduce your site's vulnerability to unwanted access. Bugs will be resolved and your websites will be adapted to the ever-changing technical environment. Security plugins and WordFence help you keep an eye on your site and its security and to respond quickly to problems. An SSL certificate should be integrated into every website.