Best Practices, Tips & Guidelines You Need to Know in Web Design

8 Min.
Web Design Best Practices

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.

Further resources on the topic of usability:

Why should you be particularly interested in usability and user experience as a web designer? You’ll find more comprehensive approaches to the topic of usability in this article and on https://www.usability.gov/.

What defines a web design standard?

We define common design standards in web design through UI design patterns. Andy Crestodina explains very clearly how standards are defined in his article on 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'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:

Interaction Design
Source: interaction-design

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:

Best Practices

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:

Best Practices

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?

Best Practices in Web Design

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:

Best Practices in Web Design

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:

Accessibility

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:

Best Practices in Web Design

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:

Best Practices in Web Design
Best Practices in Web Design

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 .

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 in Web Design
Source: https://www.hobo-web.co.uk/best-screen-size/

Best practices for WordPress

WordPress Codex

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. 

Best practices in web design: your questions

What questions do you have for Sonja? Which best practices can you recommend yourself? Please use the comment function. You want more tips on web design and development? Follow us on Twitteror Facebook , or subscribe to our newsletter.

After studying Game Design and Creative Writing in the green Auckland region, Sonja Hoffmann has specialized in web and app design and development. Her focus is on gamification and the exploration of user motivation and experience, coupled with a passion and curiosity for technological trends.

Related articles

Comments on this article

Leave a comment

Your email address will not be published. Required fields are marked with * .