Redesign of a website: the essential points of this transformation

2. Redesign

Does your website look old, even outdated? You have heard mixed feedback on its appearance and you notice that most of the other websites you consult - including those of your competitors - are aesthetically more accomplished?

Here are the tips to guide your initial graphic redesign efforts.

For example, you may want to consider using a :

• new logo
• new graphic charter
• new website mock-ups.

There are many best practices to consider, including the following.

Find all our advice on optimizing the ergonomics of a website.

2.1 The influence of color in design

Perhaps you have read the Petit livre des couleurs by Michel Pastoureau? If not, go buy it and get inspired by it because color has a symbolism.

Even worse, the choice of colors unconsciously influences the behavior of your visitors.

The reason is simple, colors have an unconscious symbolism:

• Blue is synonymous with reliability, security but also knowledge. That's why technology players like LinkedIn or Facebook or even the health industry are adopting it. It is the color of consensus, but be careful not to use it for food products. Unlike yellow or red, it does not give a feeling of appetite.
• Red condenses a strong visual potential. Use it to create a sense of urgency, for example for a promotion. Used on traffic signs to signal danger, it is the ideal color to initiate a call to action, a quick decision, an impulse purchase.
• Yellow is associated with joy, leisure and is therefore often used in a context related to education, childhood. Avoid using it for male products or luxury items. For luxury, opt for the color gold!
• Green has a symbolic connotation of stability, it suggests the growth of a company. Paradoxically, it is also used to connote the theme of nature, well-being, highlighting the environment or freshness. The difference between these antipodes is delineated by the hue: a light or medium shade of green is symbolically linked to environment, a dark green to the world of finance and money.

However, not everyone perceives color in the same way. It should not be the only element you use to convey a message. Add shapes, such as a cross or a sign to mark an error in addition to applying a red color to the page.

If you want to learn more informations about colors and their significations, read our article design and colors : perfect duo.

2.2 The importance of texts and their readability

Typography can make the difference between a fair design and a good one. In general, the text covers a significant part of your website. It is therefore important that it is visually pleasing to read.

To choose the right font, keep in mind a few rules. First of all, avoid choosing a small font, with little space between them, because it is important to air your text to increase its visual appeal.

Avoid typography that is too round, too small, too bold, but choose a thin typeface, with enough line spacing to let the text breathe. In design as in love, you must leave space to be attractive!

2.3 Rethink your navigation

1. Navigation must be clear.
2. To be clear, it must be simple.
3. Prohibit complex tree structures, with exotic layouts, not to mention eccentric ones, where dozens of headings will be displayed each time the user scrolls through the menu headings with his mouse.

Also, make sure to respect a few layout rules:

• The menu should be at the top of your website
• Place an action button at the top right of the page. This is a convention and users are used to finding this type of item there
• Another rule to respect is to keep the header of the page fixed, which avoids having to search for information during navigation. In general, it is good that the information is easily accessible.
• Also consider using a "breadcrumb trail". It is very practical to indicate to the user where he is on the page and it is a good practice to keep in mind.

Since the average attention span on the Internet is 8 seconds, a user who does not find the information he is looking for quickly will tend to leave your website.

2.4 On mobile

Did you know that more than half of the internet flow is done on smartphones?

Another interesting figure to mention is that in January 2020, there were more than 5 billion unique smartphone users worldwide. In other words, it is essential to think about the browsing comfort of these users.

Therefore, make your website "responsive", i.e. adapted to this type of device. To do this, the images and illustrations used must be adapted to smartphone.

Buttons and icons must be large enough to be clicked with a thumb, whatever the size of the phone or finger.

2.5 Contact form

This is one of the most important elements of your website. Because it is the form that will allow the visitor to become a potential customer.

More than collecting information, this item is intended to create a first link between you, that's why it is better to simplify it.

Indeed, by asking for too much information for a simple contact, your prospect could get tired of the good impression you made with your website and simply not fill out this form.

In the end, you could miss a contact, and therefore a potential customer and, in turn, an increase in turnover.

Also think that the contact form will be filled in by an Internet user alone in front of his screen.

So be careful and fill in labels and "placeholders". These are gray texts, with a low opacity and which disappear when you click on them to fill in the form; texts which specify the type of information expected in each insert of the form (for example the format of a date of birth in dd/mm/yyyyy).

2.6 Modernize your models

When developing new user interface mockups, consider simplifying the design.

Break down the parts of your website into blocks and keep them simple and clean.

The current trend is to embellish these blocks with micro-interactions, i.e. visual components that translate the user's action.

A classic example of micro-interactions is the highlighting of menu items when you move the mouse cursor over them. This is a visual effect that translates the user's action and makes the visual experience more dynamic.

Many types of micro-interactions exist, so don't hesitate to use them, but don't overuse them.

Other assets you can add to modernize your website are animations! There are all kinds, but at Snoweb we recommend two kinds of animations:

• SVG animation in CSS or SMIL
• Lottie animation

Why does Snoweb only recommend these two types of animation?

These two types of animation are optimized and have a slight impact on the performance of a page, that's why we advise you to use them. They will not slow down the loading of your page.

3. Technical redesign

The two main objectives of a technical redesign are to improve the referencing of a website and to overcome the slow loading of its pages.

Let's talk about two topics, how to improve page loading speed and which tools to use to track your website traffic

For more information, see our article on optimizing page loading speed.

3.1 Loading speed

The first step is to use static web pages rather than dynamic pages. A static page offers content that does not vary according to user data such as location, time of visit or any other information from cookies.

Their text is not loaded from a database but is generated from a fixed source code file.

As a result, this type of component requires almost no effort to load from the server, which greatly accelerates its display speed and offers ultra-fast rendering.

3.2 Coverage code

The second step in a technical redesign is to analyze your code coverage.

This is a metric that will tell you if the code tests on your web page are good. It is therefore a measure of the quality of the code executed by your tests and therefore, this indicator allows you to measure the quality of a page.

We will not go into the technical considerations of this tool because it is a separate topic.

However, keep in mind that code coverage is an indicator of the quality of a web page and that reaching 100% code coverage is not necessarily a relevant objective (a rate of 80% is sometimes considered as a sufficient objective of code coverage).

3.3 Lazy loading

Then, the third step consists in adopting lazy loading, that is to say, loading the right elements at the right time rather than executing your entire page in a single block.

This practice is especially valid for loading images and more generally media, which are data-intensive.

Images and media are a major source of slowing down a web page.

The fourth step of our technical redesign is to lighten them: compress them! To do this, use tools like GZIP which allows you to reduce the size of any file and have the reflex to minify HTML, CSS and Javascript files.

3.4 Cache

Finally, we will tackle the fifth and last step of the technical redesign of your website. It consists of caching as much data as possible in order to reduce the latency of retrieving said data.

By not having to reload an entire element that has already been loaded in the past, you will gain in performance.