Web Design Specifications: Good Practices
On the Internet, few people take the time to read all the information on a website. Above all, Internet users want to find relevant information as fast as possible, by quickly looking at the content of a page. The design of a website should then be simple and attractive. This is why it is essential to take into account the importance of responsive design.
This article is intended to review good practices in web design and help you present them when writing the briefing for the creation of your website.
A. The graphic charter
- A. The graphic charter
- B. Site design
- C. Page layouts
- D. The Performer
1. What is a graphic charter?
The graphic charter is a precious document, created by a web designer, gathering all the rules on which your company’s visual identity is or will be based. Clearly, it will serve as a guideline to all those who will design a communication support for you, including the web agency to whom you will entrust the design of your website.
- There will be a graphic coherence between all your supports: letterhead and invoice, business card, flyer, sign, textile, possibly vehicle, e-mail signature, etc. Without forgetting the website of course.
- Internet users, customers, and suppliers will recognize at a glance that it is you, your site or a document you have issued because they have already engraved your graphic identity in their memory.
2. Explicit logo
The logo and the way it is used occupies an important place in the graphic charter. On a website, it is nothing more or less than the first element that the visitor looks at. An effective logo is generally simple, original, easy to identify, reflecting the spirit and specificities of your company. So, be proud of it, put it forward, at the top of the page. A very common practice: clicking on it should bring the user back to the homepage.
The logo is the first thing Internet users look at. It represents the company’s overall image by reflecting its values and merits. To do this, the logo 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.
3. Color code
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 content, etc. However, keep in mind that the goal is to allow the visitor to easily remember and recognize your colors. Although the shades are infinite, it’s better to forget the seven colors of the rainbow! Just a few that will also fit your different media (car, t-shirt printing, etc.).
4. Visual Elements
Custom icons, illustrations, photos… This type of elements 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 easily associate them with your business is to simply post them regularly.
The choice of typography is not to be taken lightly. 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
B. Site design
1. 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 web design:
- The minimalist, to get straight to the point. This is the kind of website where few elements are displayed, but the few that appear correspond to the essential, what the user is looking for, and what he needs 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 him 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 all websites
2. Use of the grid
First of all 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.
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. Vertical and/or horizontal axes compose the grid. 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. Offering the possibility to consult the pages along their length is then perceived as a perfect solution. In a few mouse roulette moves, Internet users have access to all the information. Similarly, setting the site header deprives users of long return trips to the top of the page, which can only be a good thing.
4. Developing the CTA (Call To Action)
A call to action is by definition a feature designed to encourage visitors to perform various manipulations proposed by the site. Generally, these actions are displayed in buttons that are strategically placed to ensure that users perceive them. The proposed manipulations are particularly chosen by the web designer to know the subscription to the newsletter, the contact creation, the addition to the basket or the encouragement to like.
5. Search Engine
The importance of design is not just about simplifying the reading of content and information. It also consists of inviting visitors to stay as long as possible on the site and to encourage them to always come back. Integrating a search engine into the site allows users to easily find and access the information they want.
C. Page layouts
1. What is a page layout?
Wireframing is an essential step in establishing the specifications of web design. The page models are in a way a sketch which 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 phase.
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 in 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, it is 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 aspect 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 designer. They will thus have a 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.