What are the best practices in web design? How do you implement them successfully in your next web design project? And what do we define as design standards 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 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 visual elements recognisable to the website operator?
- 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.
Further resources on the topic of usability
Why should you be interested in usability and user experience as a web designer? You will find more comprehensive approaches to the topic of usability in in this article.
What defines a web design standard?
We define widely used design standards in web design by UI design patterns. How standards are defined, Andy Crestodina explains very understandable in his article about web design standards.
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 take up no more than three boxes and be located in one third of the layout. The nodes are also particularly suitable for placing important messages and Call To Action.
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 have toned down the mobile version even further in order to test what remains. Here, the product catches the eye first, followed by the CTA and the logo. You can do this test with the entire site- preferably still in the design phase. Here you can quickly and easily analyse which elements of your design are prominent and decide whether this is what you want.
Optimise content 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 & Barrier-Free Websites
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.
Using colours to visually represent error handling can cause problems. Take form elements, for example. Errors are often represented by highlighting the input Box in colour. For someone with a colour deficiency, this can lead to errors not being recognised and thus not being solved.
You should take this into account when planning 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 WordPress website.
More resources on accessibility:
"*" indicates required fields
Resolution and Responsive Web 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 plugins and themes
When choosing the right plugin and theme, it is not only its current functionality that is important. It is also a good idea to read reviews and familiarise yourself with how often updates have been offered and to investigate whether the plugin, or theme, will continue to be developed in the future. WordPress tools that are developed regularly tend to have more active support. They are also more likely to remain compatible with future versions of your site.
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.
Best practices in web design: your questions
What questions do you have for Sonja? What best practices can you recommend yourself? Feel free to use the comment function. Want more tips on web design and development? Then follow us on Twitter, Facebook or via our newsletter.
A Comment on "Web Design Best Practices, Tips & Guidelines You Should Know."
ou don’t always need qualifications to become a web designer. However, most designers have experience in other types of design, or have done some training in web design, either through college or by teaching themselves.
You will need to show evidence of your creative and technical skills, usually in the form of a DVD or ‚live‘ websites you have worked on. You could gain this evidence from college, paid work or volunteering.
You will need a good working knowledge of HTML, and experience of writing web pages in a combination of codes. It could be useful if you have a working knowledge of some of the following design and programming tools:
Dreamweaver and Photoshop