Web design aims to create an ideal web interface for the user with an ergonomic design.
Web design refers to the creation and layout of the visible part of a website. That is to say :
In summary, web design aims to create an ideal web interface for the user with an ergonomic design. In order to secure, give confidence and lead the user to take action.
A web designer is the person who will realize the web design of a website or a web application defined above.
Based on fundamental documents, such as a specification and a graphic charter, the web designer will design web interfaces.
The web designer will, above all, highlight the content of a website or an application through :
But that's not all, the web designer's field of competence is vast in order to know all the constraints and subtleties of the web.
You have understood, the web designer deals with the visual part of an interface. And to do this, he must master the following points:
Here is a list of what a web designer must think about each time he creates a web interface. These 10 points are the main ones and it is important to know that each of these points has sub-points.
You have to understand that the creation of an interface is not a simple and quick thing to do. It takes time to identify the needs of Internet users according to the business to put forward. That's why you need to work with a web agency or an expert freelancer.
Site architecture | It is about organizing the whole structure of the site. | |
Links | It is about linking pages together to create a powerful internal mesh. | |
Reading order | To highlight content that is important to the user so that they can find it quickly | |
Fluidity of the navigation | To allow the user to find what they are looking for in less than 3 clicks. | |
Accessibility | These are the best practices to put in place to make the site accessible to everyone, including people with disabilities. | |
Responsive web | To help navigation on all media: large screens, computer, tablet and mobile. | |
Interactivity of the site | These are the interactions that can occur between the site and the user. For example, an element that moves when the mouse passes over it. | |
Colors | Respect of the contrast between the colors of the elements of the site, so that each one is visible. | |
Typographies | Respect of the typographies and work on their legibility. | |
Graphic charter | Respect of the graphic charter for the choice of the typography, the colors and the design of the illustrations. |
Here are two examples of reflection around the creation of interfaces.
In the design of his pages, the web designer will focus on the user and will make sure that he can buy a product in as few clicks as possible. This is done by adding products on the e-commerce homepage with an add to cart button under the items. The user will have directly his product to add to the cart without having to go through the product detail page.
All this in order to increase the conversion rate and sales.
The primary goal of a showcase website is to present a company or a product. In this process, the web designer will work on the interface so that it conveys a comprehensive message to the user. Whether it is a universe, values, features or the history of the company.
Before explaining what UX is, let's go back to an important point: web design is based on user satisfaction. It is at the center of everything.
The user experience will therefore contain all possible interactions between the user and the website. To know :
To be more precise, the user experience must allow a user to navigate on the website without encountering any blockage, it must be intuitive and natural. Moreover, the user must find the information easily and quickly. If he doesn't understand the website or how to search it, he will leave. Then, the user experience will allow to direct the user to action buttons in a fluid and instinctive way. For example, a "registration" button that is easy to access, with one click, in the top right menu. Finally, the user must be encouraged to stay on the site even if he wants to leave. The web designer can then design pop-ups to address this.
Unlike the user experience, the UI concerns the graphic aspect of the site or application. These two foundations are complementary to bring complete satisfaction to the user.
In the user interface, the web designer will seek to create a visual identity of the site impacting to offer the user a memorable experience. He will therefore work :
In short, UX is a work that the user will not see but that he will use unconsciously to browse the site.
Whereas the UI is visible and will allow to hold the user's attention and make him stay.
Before starting the interface creation, the web designer must ask himself some questions to help him in his conception and understand what are the messages to convey.
The key to successful web design of a website or an application is ergonomics. But not only! You also have to choose a graphic style adapted to the target and to the sector of activity of the brand.
Ergonomics consists in creating or improving an object so that it is easier to use in everyday life. And this notion applies very well to the web! We will try to answer efficiently to the needs of a web user.
Ergonomics is based on the usefulness of a site, its ease of use, its simple and comprehensive design and finally the satisfaction of the user to use it.
When a web designer is going to work on the interfaces of a site or an application, he has to make ergonomic interfaces.
Here are some of the points he will work on.
We agree that you need content on a page, both for the user not to find it "empty" but also for the natural referencing. However, it is important not to put too much content on a page, otherwise you risk having an overloaded site. The web designer will therefore ensure :
A little tip: to make a page more dynamic without overloading it visually, the web designer will propose SVG animations on certain visual elements. For example, he can change the color of a button or make an illustration move when the mouse passes over it.
Choosing a color is not trivial. Colors have a meaning and unconsciously transmit a message.
For example, if you want to present and sell an energy product for athletes, forget green and opt for orange and yellow instead. Indeed, green means organic, natural, healthy. Whereas orange and yellow mean vitality, strength, sport, energy. So, when the user will see your site, he will understand that you sell a product that boosts and vitalizes the body.
The web designer will also manage the contrast between colors, especially the contrast between the background and the texts. A simple example, on a site with a dark background like black, the text will not be white, but rather light gray. Otherwise the contrast will be too high and the eye will not be able to read. It will look like the text is moving or blurred.
As detailed above, the web design must put the user at the center of all actions of the site. The user must be able to find information quickly and in a few clicks. To help navigation, the web designer will add to the site:
For the site to be readable, the elements of the pages must be arranged and there must be a hierarchy in the information provided. Indeed, at first glance, the user must be able to distinguish the main title, which summarizes the page, from the rest.
Then, in order for the text to be readable, the web designer will make sure to choose a well designed and clear typography. The goal is to avoid having an unreadable font because the characters are too glued, too guy or too handwritten for example.
Nowadays, many websites allow themselves more modernity and craziness on their pages. This is very good to attract the eyes of users, but there are some pitfalls to be aware of.
These are not strictly speaking rules, but rather habits that have been established over the years. Indeed, some practices are anchored in the minds and are done unconsciously, so why change them?
The most classic is to put the logo of a website in the top left corner of the menu and that a click on this logo, we return to the home page. Then, the user is used to see the links of blue color and underlined to indicate him that he can click. If a text is not clickable and is underlined, the user will be lost because, by habit, he will want to click on it. Finally, we commonly see the menu at the top of the website or on the left vertically. Well, let's do it this way otherwise the user will look for the menu and will quickly get annoyed not to find it.
We all agree that having a beautiful website or application is important and it is the key to make people want to come back. However, it is even more important to have a clear, readable and understandable site.
The visual content must be present to help the understanding of the texts and not to distract the reader, by its size or its animation. To explain simply, imagine a website that has animations on each of its blocks. So, for a page with 5 parts, there are 5 animations. What will this do? First of all, the page will take a long time to load and the user will get impatient. And then, the user's eye will instinctively go to what is moving. It will not read the text. Which is the opposite of what we want.
First of all, natural referencing or SEO consists in doing multiple actions on a site or an application to help its referencing in search engines. Specifically, it is to make a site appear on the first page of Google search.
Moreover, for natural referencing, only the texts are important. A search engine like Google for example will scan the pages of a website to check the relevance of the texts. The more the texts are relevant and of quality, the better the page will be referenced. It is therefore clear that if you put 80% of visuals and 20% of texts, the referencing will be null and the site will not be visible on search engines. This implies no or little traffic and visibility and therefore sales.
The user experience allows, as explained above, the user to use pleasantly and navigate simply on the site or application. So if the UX is neglected, the user will not be able to fully enjoy the site.
Let's take the example of mobile responsive. Today, browsing websites is not only done on computers. 65% of the searches made on the web in 2020 were made on mobile. We must therefore not neglect the responsive design.
For example, on our site, 20% of our users consult our website on mobile. That's why each of our page blocks has been thought and developed to be visible on all screens: computer, tablet and mobile.
As the name suggests, Call To Action or CTA are call to action buttons. In other words, they are buttons that will prompt the user to perform an action such as filling out a contact form, subscribing to a newsletter, adding an item to a cart or creating an account.
CTA buttons must be well placed on the site, some in the menu like a contact or registration button and others must be in the body of the page.
As important as their location, the color of the CTAs plays an important role. Indeed, as we have seen above, colors have a meaning and therefore, if you put a red button and a blue button next to each other, the user will click on the red one because his eye will be attracted to it first.
A visual identity includes all the media that will reflect a brand. The logo, business cards or social network banners are part of the visual identity. The visual identity allows to identify a brand from its competitors. In our daily life, we identify brands thanks to their logo, their colors or their typography, like for example Netflix or Starbucks.
The logo remains the most important part of the visual identity, because it is the basis. A visual identity is built around a logo.
Zoom on the logo, this small graphic element that allows to identify a brand in the blink of an eye. Often seen as two or three strokes of a pencil, the logo requires a lot of thought and research in order to arrive at a "wow" result.
Here is a brief summary of the steps involved in creating a logo:
This step consists in thinking about the brand, studying the competition and asking strategic questions about the brand and its target. | |
This part of the research consists in making the first sketches of the logo: layout of the elements, size of the elements, choice of the typography, etc. | |
Declinations Once the final track of the logo is found, it is declined in several colors, shapes, texture. It will have for example a black and white variation or with a plain or patterned background. | |
Depending on the use of the logo, different formats will be used. For example, the logo of the website and the pictogram of the logo for the favicon (you know, the small image that is next to the name of the site in the tab of your browser). | |
Graphic charter This last step is not systematically carried out by the graphic designer, it is at the request of the customer. We detail it just below. ↓ |
What you should know is that the price of a logo is not fixed. It depends on three things:
Depending on the budget available to create the logo, there are different options, more or less professional and quality. To know the different options available according to a budget, head to our article that explains everything in detail! ⬇️
Just like images, the logo can be exported in different formats depending on its usefulness. The web designer will use the logo, its colors and its typography in his interfaces in order to harmonize the site or the application. It is also important to know that the format of an image will impact its weight. And the weight of an image will impact on the loading time of a website. That's why the web designer must master all the export formats of an image, whether it is a logo, an illustration or a photograph. He will be able to use the logo in all the following formats.
This is the classic format of an image. However, it is not recommended for the web, because an image can quickly become very heavy and to reduce its weight, we drastically reduce its quality. But, if you need to use a picture made with a camera, you will have to use this format.
The PNG has an advantage, it is that it takes into account the transparency, that is to say that if you do not want a background to your image, it is possible. Even if it is more manageable than the JPG, this format is not the most appreciated on a website.
Here we go! This image format developed by Google is perfect for websites. Maybe that's why Google created it, right?
In theGoogle WebP compression study, we can see that a WebP are 25-35% smaller and 26% smaller than a PNG
However, be careful with this format, some browsers do not read this type of image.
Very well known to web designers, SVG is a very light vector image format that is compatible with all browsers. Moreover, a SVG file is easily modifiable by a developer from a text editor or by a web designer from a graphic software. Finally, SVG is a format that does not lose quality, whether it is very small or very large. It can be stretched to infinity without loss of quality.
As you can see, SVG is an ideal format for the web, very popular with web designers and developers.
The graphic charter is one of the founding documents of your communication and is essential to the work of the web designer. It is a document that lists the rights, duties and respect that everyone must respect. It is therefore from this document that the web designer will work to decline the visual identity on its interfaces.
There are two types of graphic charter, the paper and web charter. Here, we will focus on the web graphic charter because it is the role of a web designer to either build it or respect it. I leave it to you to read our article on graphic charts to have more details on the paper graphic chart.
The web graphic charter will gather all the elements necessary for the creation and development of a website or an application. Such as :
In a nutshell, a mock-up allows you to visualize an idea. The mockup allows the web designer to put himself in the user's shoes to create a pleasant and smooth navigation.
Don't be fooled, at first, a mockup is nothing more or less than squares next to rectangles connected with arrows and the whole forming a web page! Mockups are essential to set up the whole architecture of the site and the bases of the UX.
Let's talk about a web portfolio, you know, this website that presents the achievements and know-how of a painter, designer or craftsman. Well in these examples of portfolio, you will see that making a model is essential to highlight a realization. Indeed, the person who wants to make his portfolio will say to himself, I want to present my project with a gallery of images, a punchy title, a description of the product, a review of my client and also a video. Ok, the list is long, way too long to start like that! The web designer will then build a mock-up by prioritizing the information in order of importance. First, the title, a brief description and an image to capture the attention. And then, a detailed description, a customer review and the media.
Example closed, let's get down to business!
This first step consists in making a sketch of all the models of a website or an application in order to bring out the structure. In this structure the web designer integrates :
It is not yet about colors, typography and image choice.
From this stage, you can better visualize the final rendering of the page. Simply because the rectangles are replaced by substitute text, royalty-free images, icons. The color palettes are also put in place.
Last step of the design process, the prototype or interactive model. As its name says, the interactive model moves! It is about creating links between pages, making buttons clickable and adding all possible interactions between elements.
It is logical for everyone, what makes an e-commerce work is to sell products. And, to sell products, they must be put forward. To do this, you have to work on the product sheet. You know, these are the pages that will present a product with :
If you are interested in product sheets, we have put together a listing of 20 examples of successful product sheets. We detail the strong and weak points.
Each of his articles presents tips or definitions of web design concepts.
