On the Internet, few people take the time to read all the information on a web page. Above all, website visitors want to find relevant information as fast as possible. The design of a website should then be simple and attractive. This is why it is essential to implement effective basic web design and take into account the importance of responsive design.

This article is intended to review some of the best practices for website design and also help you present them when writing a brief for the creation of your website if you are looking to outsource the design to an outside web agency. Here’s our quick overview of the best practices in web design:

  • Consistency of branding throughout all of your site (beyond the website as well)
  • Incorporate user-friendly elements
  • Remember that website visitors want their information ASAP
  • Think about SEO when designing

Table of contents

A. The graphic charter

1. What is a graphic charter?

The graphic charter is a document, created by a web designer, gathering all the rules on which your company’s visual identity will be visible. It will serve as a guide to all those who will take part in the website design, including the web agency to whom you will entrust the project.

There must be consistent branding between all of your documents: letterhead and invoice, business card, flyer, sign, textile, e-mail signature, possibly a vehicle etc. Without forgetting the website of course.

From this, Internet users, customers as well as potential customers, and suppliers will recognize at a glance that it is you, your site, or a document you have issued thanks to the branding consistent.

2. Explicit logo

The logo and its use occupy an important place in the graphic charter and are a major component of web design best practices. The website logo is usually one of the first images users will see. An effective logo is generally simple, original, easy to identify, and reflects the spirit and specificities of your company. So, be proud of it, put it forward, and preferably at the top of the page.

The logo represents the company’s overall image by reflecting its values and merits. To do this, it must be highlighted and placed at the top of the page. Note that the logo is not only indispensable for optimizing visual quality. It also plays an important role in improving the quality of navigation by improving the visitor experience. For this reason, it is important to ensure that the logo can automatically refer users to the home page of the site.

As a very common practice for logos: clicking on it should bring the user back to the homepage.

3. Color scheme

Color has an influence that goes beyond the appearance of the site and the image of your company. It creates an atmosphere, helps structure the website content, etc. However, keep in mind that the goal is to allow the visitor to easily remember and recognize your colors. As a small tip for which colors to use, it’s best to forget the seven colors of the rainbow! Choose a few and also make sure they are easily available for potential physical objects that you may use for advertising.

4. Visuals

Custom icons, illustrations, photos… This type of element can be used by a company to reinforce its visual identity in addition to the logo. To ensure that these graphic elements reflect your image in the minds of internet users, consider standardizing their use throughout the graphic charter. The easiest way to associate them with your business is to simply post them regularly.

As we know, images and visual elements take on toll on web pages compared to text. Although you should always strive to have high-quality images as a part of your website’s design, make sure that they do not hinder both site speed and user experience.

Make sure all your pictures go through image optimization to decrease their size, especially if they are responsive images. Make sure they are also mobile responsive if your are planning no having a mobile responsive website. Visuals can easily mess with the layout of your mobile site and mobile users are even less patient when it comes to spending time on a site.

5. Text

The choice of typography is not to be taken lightly as it is an important part of the web design process. Each font has its own character. Depending on your target audience and the message you wish to convey, you will certainly choose one typeface over another. Selecting different sizes and shapes allows you to add relief and prioritize your content. However, it is essential to ensure the comfort of the reader.

As an extra trip, just like the logo, the website title plays an important role in the representation of your brand. As a business owner or a member of the marketing team, you should pay extra attention to this aspect of the site design.

B. Web design

webdesign pratiques

1. Web pages design type

Even if you have complete confidence in your web agency, instead of giving it carte blanche, you could give it some ideas on the type of design that suits your desires and needs. Here are the latest trends in modern web design:

  • The minimalist – the get straight to the point approach. This is the kind of website where few elements are displayed, but the few that appear correspond to all things essential, what the user is looking for, and what they need to remember.
  • Flat design – intuitive above all. It is a question of offering a purified interface with bright colors and objects without texture: flat!
  • Illustrative – to give life to a website. Illustrations, animations, and cartoon drawings are a creative and original way to present yourself.
  • The video – spare them the long sentences and invite the surfer to view a video. With a nice relevant sequence, it’s always more attractive and therefore, more effective!
  • Design typography – say it with words written in carefully chosen fonts. Whisper, rebel, soften, assert, seduce… This type of design relies on the personalities of each typography to attract the eye and get a message across.
  • The classic and compact – one-page concept, but effective to charm the user in a hurry. All content, therefore, fits on a single page. However, this is not suitable for most websites

2. Use of the grid

The grid is the basis of good practices in the field of web design. Any good web designer must be aware that an excellent creative mind is not enough to create a professional website. A well-structured template can make all the difference to make the eye’s path on the page easier. The grid then provides a real reading comfort for Internet users.

webdesign-grille

The purpose of using a grid is to make it easier for the eyes to navigate the web page and to make reading more pleasant. There are several models designed for web interfaces. The grid is composed of horizontal and/or vertical axes. To structure the content, intervals called “gutters” separate the axes. The margins that are on both sides, possibly at the top and bottom, are the parts reflected so that the user is not destabilized by the edges of the screen.

3. A clever header

Internet users really don’t like to wait a single moment before being able to access information. Visitors expect to have their queries answered in a matter of seconds.

Now a part of modern-day website design best practices, it is important to have your entire site lying in the top five centimeters of your home page. The header should incorporate dropdown menus and a search bar to avoid users having to scroll endlessly to find what they are looking for. You can even include social media icons linking to your social media websites.

Similarly, setting the site header is incredibly helpful for users to have to avoid scrolling all the way back up to the top of the page.

4. Developing the CTA (Call To Action)

A call to action is by definition a feature designed to encourage visitors to perform various actions proposed by the site. Generally, these actions are displayed in buttons that are strategically placed to ensure that users perceive them. The proposed actions are usually a subscription to the newsletter, inputting contact information, adding potential purchases to the basket, or liking a blog post.

5. Search Engines

The importance of design is not just about simplifying the reading of content and information. Search engines such as Google and Bing give priority to sites that have simple website navigation, fast loading pages, relevant information about the topic, and are mobile-friendly (when popping up on mobile search engine results pages). They may even have some biases for a hosting platform over another.

To increase your website traffic, you need proper search engine optimization that goes beyond the text and into your web design as well. An increase in traffic will boost user engagement and thus your revenue.  But be careful!  Just to make things harder, make sure to focus your web design to appear on the top of SERPs in your desired geographical location.  For example, if you are a business based in the USA but whose target audience is Australian, think about looking into web design agencies in Australia to help you out

C. Page layouts

maquette de pages refonte

1. What is a page layout?

Wireframing is an essential step in establishing the specifications of web design. The page models are a sketch that makes it possible to visualize schematically:

  • the tree structure of the site, i.e. the organization of the site.
  • the graphical interface with interactivities and ergonomics.

Furthermore, the objective is to set up the common thread of the design steps so that all stakeholders: you, the web agency, or web designers and developers, are in sync.

2. Functional model

The functional model, also known as a wireframe, is the most basic task that marks the beginning of the creation of a site. It consists of arranging, organizing on a black and white page, the various elements and main contents of the web page. Balsamiq is one of the best-known functional modeling software.

You will probably hear about:

  • mock-up is the functional full-size model
  • zoning, a kind of model composed only of blocks of content

3. Graphic model

This is the step that follows the functional model. It makes it possible to bring more details to the design elements of the site: color, logo, form, some texts, etc… Generally, the graphic model is made with graphics software such as Adobe Photoshop or Illustrator.

D. The Performer

There are different executors of the design of a web project. The questions that come up again are: Should I use a communication/marketing agency? Call on a freelancer or even redesign the web design yourself? Each of these tracks has its own advantages and disadvantages.

Even if hiring a professional requires a budget, you are sure to get expert work. For example, agencies have a whole team of web professions including graphics and web designers. They will thus have great creativity while knowing how to adapt to the budget thanks to their knowledge in the various cms. Moreover, SEO being of capital importance, they also have web marketing skills.

Conclusion

It’s now time for you to get started on your own website design. Remember that a key factor in your website’s success will be your ability to make the user’s experience as painless as possible. So many web designers nowadays focus too much on the aesthetics of a site and forget about the basic idea that the pages are used by average Joes.