The web design guide

When we browse a website, we first think of the web development that allowed to create and put online the site. But to create a website that is captivating and pleasant to browse, you need to call on a web designer. We explain in detail what web design and a designer for the creation of a website.

illustration web design
chapter 1

What is web design?

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 :

  • Designing the website or the application around the user experience
  • To make the consultation of the website and its reading easier
  • To catch the eyes of the Internet users
  • Formatting the elements through different types of content
  • Organize all the information so that it is readable and understandable

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.

chapter 2

What is the role of a web designer?

The web designer work

travail web designer

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 :

  • Colors related to the field of activity of the brand
  • Easy to read typography and in relation with the identity of the brand
  • Media, illustrations or images, SVG animations, to attract the eye of the Internet user

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.

The fields of expertise of the web designer

web designer

You have understood, the web designer deals with the visual part of an interface. And to do this, he must master the following points:

  • The use of graphic creation tools such as Illustrator, Photoshop, XD or Sketch
  • Have notions in HTML / CSS, which will allow to understand the structure (code) of a page
  • Know and master typography in order to use the right font at the right size and in the right place
  • Know how to transform an idea into an illustration in order to have visuals that help to understand the text
  • Know the constraints that web development can impose. Indeed, some creations, as beautiful and innovative as they may be, cannot easily be realized technically
  • Be aware of the issues surrounding responsive design and accessibility
  • Test all the paths that users can make on the website. To optimize or change them.

The axes of work of the web designer

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.

Example of a web designer's thinking

e-commerce site vitrine

Here are two examples of reflection around the creation of interfaces.

Creation of an e-commerce website

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.

Creation of a showcase website

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.

chapter 3

UX and UI design, what is it?

User Experience or UX

ux ui design light

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 :

  • Ergonomics
  • Accessibility
  • Navigation
  • Conversion
  • Customer satisfaction

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.

User Interface or UI

interface utlisateur

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 :

  • Visuals that meet the constraints of the graphic charter and help to understand the text
  • Colors in line with the site or application's sector of activity
  • Harmonious typography to help reading
  • The placement of the elements so that the page is pleasant to browse and the information easy to find
  • The formatting of the page blocks to hierarchize the information
  • The choice of icons to put on the site

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.

chapter 4

The questions a web designer asks himself before starting

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.

What is the objective of the site or application?

Create or increase brand awareness
Find new customers
To sell products online
To present achievements and know-how

What is the target audience's objective once on the site?

How old is the target ?
Where do the target live?
Language does the target spoken?
What is it social category?
qui est la cible

What are they looking for on the site?

Something to buy?
An answer to her question?
A future provider?
Inspiration?

How to meet the target's needs?

Offer them products to buy online
Bring him a definition of a term
Present them with know-how and achievements
repondre au besoin de la cible

How to bring him this answer as quickly as possible?

Place action buttons that are clearly visible
Access to a contact form quickly
chapter 5

How to make a success of the web design of a website?

What is ergonomy ?

ergonomie

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.

Create airy pages

animation svg

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 :

  • Balance the amount of text in relation to the number of visual elements.
  • Work on the size of the visuals and buttons so that they are visible and readable
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 colors and their contrast

couleurs et contraste

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.

What is the purpose of contrast?

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.

Create an intuitive navigation

navigation-intuitive

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:

  • Action buttons to direct the user to a contact page, a shopping cart or even a registration.
  • A chat so that if the user has a question or concern, he can contact support.
  • Share buttons to share the content of a page by email or on social networks.
  • A request form, for contact, registration or any other request.
  • A clear product catalog, showing a picture of the product, its price, a descriptive title and a button to see more details.
  • A space to view and post a review. Reviews are important to the user's decision making.

Have readable text

texte lisible

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.

chapter 6

Pitfalls to avoid in web design

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.

Snoweb CMS pour gérer plusieurs sites

Not following basic rules

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.

Snoweb CMS pour grandir à l'internationnal

Prefer the beautiful to the useful

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.

snoweb CMS optimisé pour le SEO

Ignore natural referencing

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.

snoweb CMS simple a utiliser

Not working enough on the UX

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.

Snoweb CMS qui convertit

Forget about Call To Action

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.

chapter 7

Visual identity, what is its place in web design?

What is it? What is it used for?

identité visuelle

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.

What are the steps to create 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:

Brainstorming

This step consists in thinking about the brand, studying the competition and asking strategic questions about the brand and its target.

Sketch

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.

Exports

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 is the price of a logo?

prix logo

What you should know is that the price of a logo is not fixed. It depends on three things:

  • The client's request
  • The time of creation and production
  • The type of service provider who creates the logo

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! ⬇️

Export formats of a logo

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.

JPG or JPEG image format

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.

format jpg

PNG image 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.

format png

WebP image format

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.
format webp

SVG vector format

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.

format svg

Zoom on the advantages of an SVG animation

As you can see, SVG is an ideal format for the web, very popular with web designers and developers.

SVG animation

The importance of the graphic charter

importance charte graphique

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 :

  • The logo
  • The color palettes of the website
  • Typeface(s) used
  • Buttons
  • Forms
  • The icons
chapter 8

How important are mockups in web design?

What is the purpose of mock-ups?

definition maquette web

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.

The example of a portfolio

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!

Step 1 : Wireframe

etape 1 wireframe

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 :

  • The text areas
  • The buttons
  • The images
  • The menu
  • The search, if needed
  • User space, if needed
  • Login, if needed
  • The shopping cart, if needed

It is not yet about colors, typography and image choice.

Step 2 : Mock-up

illustration web design

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.

Step 3 : Prototype

etape 3 prototype

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.

chapter 9

Web design for e-commerce

How do you create a product sheet that works?

fiche produit

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 :

  • Its pictures
  • Its price
  • Its description
  • Its variables
  • Its delivery
  • Its similar items

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.

BLOG POSTSDiscover all our articles on web design

Each of his articles presents tips or definitions of web design concepts.