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 way out in front when it comes to consistent branding. Off the top of my head, I can't think of any other brand that has so many different products and still manages to give each product the company feel. Even when I look at a previously unknown Google product, I can associate it directly with the brand.
How does Google do it?
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 have already reported on the topic of harmonious web design. This time I would 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 use the "Crop Tool" and the "Rule of Thirds" setting to quickly and easily check and adjust your layouts. To illustrate the Rule of Thirds, I took a closer look at Marqeta 's 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, for example, offers a (paid) service here.
Another way to check your design is the so-called blur test. Here you take the sharpness from your layout (for example with the help of Photoshop and the "Gaussian Blur" - 12 percent). If 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 used again the website of Marqeta. Especially prominent is the right CTA and the product, 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.
Google also gives you minus points if the sentences on your site are too long and plus points if they are connected by so-called "transition words".
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 check this with certainty, there is the "Contrast Checker". The default contrast ratio is at least 4.5:1 for normal text and 3:1 for large text like 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 strength. Here you can directly try out different color combinations. You are directly given the ratio and you have the option to select fonts with and also according to which WCAG standard you want to align 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.
When planning, you should take this into account and therefore always make sure that there is another representation of the error. Here you can find more interesting facts and resources on the topic of accessibility, as well as valuable tips for creating an accessible WP site .
More resources on accessibility:
Resolution and cross-device design
There is arguably no rule in web design that is more frequently addressed - and more frequently disregarded - 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 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 can be the right approach - depending on the project - but is not very widespread as it is very cost and time intensive. The latter is unfortunately still seen too often on the web and therefore urgently needs to be added to the list of "best practices". You can find more mobile optimization tips 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 this is not only that content is prepared visually, but also that the changed external conditions are taken into account. You can read more in the article Mobile-First UX Design Is No Longer a Trend.
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.