Site internet Web design Blog Équipe FR Demander un devis

Le guide du Lo r em ipsum

web design Lo r em ipsum dolor amet

Exce p teur sint occaecat ? Lo r em ipsum
Lo r em Lo r em Lo r em Lo r em Lorem ipsum

Lorsqu'on parcourt un site internet, on pense en

Duis aute iru re

email@[Link]

premier lieu au développement web qui a permis de Duis aute iru re no s trud

créer et de mettre en ligne le site. Mais pour créer un Lo rem

um
em ips
Lo r s e t
Lo rem dolor

site internet captivant et agréable à parcourir, il faut ipsum set Lo rem

Lo rem

Lo rem
ipsu
m

ipsu
m

m
ipsu
Lo rem
Exce p teur sint occaecat
faire appel à un web designer. On vous explique en
m
ipsu
Lo rem
Duis aute iru re s it am e t , conse ct e tur adipisicing minim Lo rem
ipsu
m

im ad
el it , sed do eiusmod tempor incididunt ut labo Ut en ipsu
m
Lo rem
e t dolo re magna aliqua.
détail à quoi sert le web design et un designer pour la Ut en
im ad
minim

st um
em ips
Lo rem um e

création d'un site internet.

Lo r
em ips ce
Lo r
re Fran
iru
aute
0 - Duis
11.0

20
NOV m am
et
ipsu
Lo rem
re
iru
aute
0 - Duis
13.0

25
NOV aute
iru
re

0 - Duis
14.0

et
m am
ipsu
Lo rem

C'est quoi le web design ?

m
ipsu
Lo rem

CHAPITRE 1

Qu'est-ce que c'est le web design ?

Le web design a pour but de créer une interface web
idéale pour l'internaute avec un design ergonomique.

Le web design désigne, dans la conception de site internet, la création et

la mise en forme de toute la partie visible du site. C'est-à-dire :

Concevoir le site internet ou l'application autour de l'expérience

utilisateur

Rendre la consultation du site web et sa lecture plus facile

Attirer le regard des internautes

Mettre en forme les éléments à travers différents types de contenu

Organiser toutes les informations de façon à ce qu'elles soient

lisibles et compréhensibles

Partager cet article sur les réseaux sociaux

 L'objectif du web design c'est de sécuriser, donner confiance et conduire
l'utilisateur à passer à l'action. Alors, il pourra, par exemple, acheter un
produit, s'inscrire sur le site ou encore demander un devis.

CHAPITRE 2

Quel est le rôle d'un web designer ? En quoi son travail est-il
important pour un site internet ?
Un web designer est la personne qui va réaliser le web
design d'un site internet ou d'une application web définit
ci-dessus.

Le travail du web designer

En se basant sur des documents fondamentaux, comme un cahier des
charges et une charte graphique, le web designer va concevoir des
interfaces web.

Le web designer va, avant tout, mettre en avant le contenu d'un site
internet ou d'une application grâce à :

Des couleurs en rapport avec le domaine d'activité de la marque

Des typographies faciles et lire et en rapport avec l'identité de la

marque

Des médias, illustrations ou images, des animations SVG, pour

attirer le regard de l'internaute

Mais ce n'est pas tout, le champ de compétence du web designer se

veut vaste afin de connaître toutes les contraintes et les subtilités du
web.
Les champs d'expertise du web
designer
Vous l'avez compris, le web designer s'occuper de la partie visuelle
d'une interface. Et pour ce faire, il doit maîtriser les points suivants :

L'utilisation d'outils de création graphiques tels qu'Illustrator,

Photoshop, XD ou encore Sketch

Avoir des notions en HTML / CSS, qui vont permettre de

comprendre la structure (code) d'une page

Connaître et maîtriser la typographie afin d'utiliser la bonne

police à la bonne taille et au bon endroit

Savoir transformer une idée en illustration afin d'avoir des

visuels qui aident à la compréhension du texte

Connaître les contraintes que peut imposer le développement

web. En effet, certaines créations, aussi belles et innovantes soient
elles, ne pourront pas facilement être réalisées techniquement

Avoir connaissance des problématiques autour du responsive

design et de l'accessibilité

Tester tous les parcours que les utilisateurs peuvent faire sur le
site web. Pour les optimiser ou les changer.

Les axes de travail du web designer

Voici une liste de ce qu'un web designer doit penser à chaque création
d'interface web. Ces 10 points sont les principaux et il faut savoir, que
chacun de ces points comportent des sous-points.

Il faut donc comprendre que la création d'interface n'est pas une chose
simple et rapide à faire. Cela prend du temps de cerner le besoin des
internautes selon le business à mettre en avant. C'est pourquoi il faut
travailler avec une agence web ou un freelance expert.

Architecture du
Il s'agit d'organiser toute la structure du site.
site

Il s'agit de relier les pages entre elles pour créer un

Liens
maillage interne puissant.

Pour mettre en avant le contenu important pour

Ordre de lecture
l'utilisateur afin qu'il le trouve rapidement
Fluidité de la Pour permettre à l'utilisateur de trouver ce qu'il
navigation recherche en moins de 3 clics.

Il s'agit des bonnes pratiques à mettre en place pour

Accessibilité rendre le site accessible à tout le monde y compris les
personnes avec handicap.

Pour aider à la navigation sur tous les supports :

Responsive web
grands écrans, ordinateur, tablette et mobile.

Il s'agit des interactions qu'il peut y avoir entre le site

Interactivité du
et l'utilisateur. Comme par exemple un élément qui
site
bouge au passage de la souris.

Respect du contraste entre les couleurs des éléments

Couleurs
du site, afin que chacun soit visible.

Typographies Respect des typographies et travail sur leurs lisibilités.

Respect de la charte graphique pour le choix des

Charte
typographies, des couleurs et le design des
graphique
illustrations.

Exemple de réflexion du web

designer
Voici deux exemples de réflexion autour de la création d'interfaces.

Création d'un site internet e-commerce

Dans la conception de ses pages, le web designer va se concentrer sur

l'utilisateur et va faire en sorte qu'il puisse acheter un produit en le
moins de clics possibles. Cela passe par l'ajout de produits sur la
page d'accueil du e-commerce avec un bouton ajouter au panier sous
les articles. L'utilisateur aura directement son produit d'ajouter au panier
sans avoir à passer par la page détail du produit.

Tout cela dans le but d'augmenter le taux de conversion et les ventes.

Création d'un site internet vitrine

Le but premier d'un site vitrine est de présenter une entreprise ou un

produit. Dans cette démarche, le web designer va travailler l'interface
pour qu'elle fasse passer un message compréhensif à l'utilisateur.
Que ce soit un univers, des valeurs, des fonctionnalités ou l'histoire de
l'entreprise.

CHAPITRE 3
 UX et UI design, qu'est ce que c'est ?
Duis aute irure sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.

Expérience utilisateur ou UX
Avant d'expliquer ce qu'est l'UX, revenons sur un point important : le
web design repose sur la satisfaction de l'utilisateur. Il est au
centre de tout.

L'expérience utilisateur va donc contenir toutes les interactions

possibles entre l'utilisateur et le site internet. À savoir :

L'ergonomie

L'accessibilité

La navigation

La conversion

La satisfaction client

Pour être plus précis, l'expérience utilisateur doit permettre à un

internaute de naviguer sur le site internet sans rencontrer de
blocage, cela doit être intuitif et naturel. De plus, l'utilisateur doit
trouver l'information facilement et rapidement. S'il ne comprend
pas le site internet ni comment y faire sa recherche, il va partir. Ensuite,
l'expérience utilisateur va permettre de diriger l'internaute vers des
boutons d'actions de manière fluide et instinctive. Comme par
exemple un bouton "inscription" facile d'accès, en un clic, dans le menu
en haut à droite. Pour finir, l'internaute doit être incité à rester sur le
site même s'il a envie de partir. Le web designer peut alors concevoir
des pop up pour régler cela.

Le guide de l'UX design

 Lo r em Lo r em Lo r em Lo r em Lorem ipsum
Interface utilisateur ou UI
Contrairement à l'expérience utilisateur, l'UI concerne l'aspect graphique
Lo rem
um
em ips
Lo r s e t
dol or

Lo rem ipsum s e t Lo rem

Lo rem

Lo rem
ipsu

ipsu
m

m du site ou de l'application. Ces deux fondements sont complémentaires

m
ipsu

Exce p teur sint occaecat Lo rem

m

pour apporter une complète satisfaction à l'utilisateur.

ipsu
Lo rem
Duis aute iru re s it am e t , conse ct e tur adipisicing ad min
im
Lo rem
ipsu
m

m
Lo rem elit , sed do eiusmod tempor incididunt ut labo
e t dolo re magna aliqua.
re Ut eni
Lo rem
ipsu
m

im
m ad min
Ut eni
t um
e s em ips
Lo rem um Lo r
Lo rem Lo r
em ips
- Duis
aute
iru
re Franc
e

Dans l'interface utilisateur, le web designer va chercher à créer une

11.00

20 NOV am
et
ipsum
Lo rem
re
iru
aute
- Duis
13.00

25
NOV aute
iru
re

identité visuelle du site impactant pour offrir à l'utilisateur une

- Duis
14.00

et
am
ipsum
Lo rem

m
ipsu
Lo rem

expérience mémorable. Il va donc travailler :

Lo r em
Lo r em ipsum ipsum dolor Des visuels répondant aux contraintes de la charte graphique et
Lo r em ipsum dolor am et

aidant à la compréhension du texte

Exce p teur sint occaecat ? Lo r em ipsum
Lo r em ipsum dolor
Ut enim ad minim
Duis aute iru re

email@email .com

Des couleurs en lien avec le secteur d'activité du site ou de

Ut enim ad minim

Duis aute iru re no s trud

Lo rem
Lo r em ipsum e s t Lo r em ipsum dolor l'application
20
NOV
11.00 - Duis aute iru re

Lo rem ipsum

Lo r em ipsum
Lo rem ipsum am e t

Des typographies harmonieuses aidant à la lecture

25
NOV
13.00 - Duis aute iru re

14.00 - Duis aute iru re

Lo rem ipsum am e t
Le placement des éléments pour que la page soit agréable à
Duis aute iru r e
dolor
parcourir et l'information facile à trouver
Lo rem

La mise en forme des blocs des pages pour hiérarchiser

Duis aute

Duis aute

Duis aute

l'information
Lo rem ipsum iru re s it amer

DEC 2021

Sun Mon Tue W ed Thu Fri Sat

Le choix des icônes à mettre sur le site
28 29 30 1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18
Lo r em ipsum dolor
S e t amor fugi rea
19 20 21 22 23 24 25

26 27 28 29 30 31 1

2 3 4 5 6 7 8
Le guide de l'UI design

CHAPITRE 4

Les questions qu'un web designer se pose avant de débuter

Avant de débuter la création d'interface, le web designer
doit se poser des questions pour l'aider dans sa
conception et bien comprendre quels sont les messages
à faire passer.

Quel est l'objectif du site ou de

l'application ?

Créer ou augmenter la notoriété de la marque

Trouver de nouveaux clients

Vendre des produits en ligne

Présenter des réalisations et un savoir-faire

 Qui est la cible qui va parcourir le
site ?

Quelle âge a-t-elle ?

Quel est son lieu d'habitation

Quelle langue parle-t-elle ?

Dans quelle catégorie sociale appartient-elle ?

Que recherche la cible sur le site ?

Quelque chose à acheter

Une réponse à sa question

Un futur prestataire

De l'inspiration

Comment répondre au besoin de la

cible ?

Lui proposer des produits à acheter en ligne

Lui apporter une définition d'un terme

Lui présenter un savoir-faire et des réalisations

Comment lui apporter cette réponse
le plus rapidement possible ?

Placer des boutons d'action bien visibles

Accès à un formulaire de contact rapidement

CHAPITRE 5

Comment réussir le web design d'un site internet ?

La clé pour réussir le web design d'un site internet ou
d'une application, c'est l'ergonomie. Mais pas que ! Il
faut aussi choisir un style graphique adapté à la cible et
au secteur d'activité de la marque.

Qu'est-ce que l'ergonomie ?

L'ergonomie consiste à créer ou à améliorer un objet pour qu'il soit
plus facile à utiliser au quotidien. Et cette notion s'applique très
bien au web ! On va donc chercher à répondre efficacement aux besoins
d'un internaute.

L'ergonomie se base sur l'utilité d'un site, sa facilité d'utilisation, son

design simple et compréhensif et enfin la satisfaction de
l'utilisateur à l'utiliser.

Lorsqu'un web designer va travailler sur les interfaces d'un site ou d'une
application, il se doit de faire des interfaces ergonomiques.

Voici quelques points qu'il va travailler.

Découvrir l'ergonomie en détail

 Créer des pages aérées
On est d'accord qu'il faut du contenu sur une page, à la fois pour que
l'utilisateur ne la trouve pas "vide" mais aussi pour le référencement
naturel. Cependant, il ne faut pas trop en mettre au risque d'avoir un
site surchargé. Le web designer va donc veiller à :

Équilibrer la quantité de texte par rapport au nombre d'éléments

visuels.

Travailler la taille des visuels et des boutons afin qu'ils soient

visibles et lisibles

Petite astuce, pour dynamiser une page sans les surcharger

visuellement, le web designer va proposer des animations
SVG sur certains éléments visuels. Il s'agit par exemple de
changer la couleur d'un bouton ou de faire bouger une
illustration au passage de la souris.

Simplifier une page web

Choisir des couleurs et leur

contraste
Choisir une couleur n'est pas anodin. Les couleurs ont une
signification et transmettent inconsciemment un message.

Par exemple, si vous souhaitez présenter et vendre un produit

énergétique pour les sportifs, oubliez le vert et optez plutôt pour
l'orange et le jaune. En effet, le vert désigne le bio, le naturel, le sain.
Alors que l'orange et le jaune signifient la vitalité, la force, le sport,
l’énergie. Donc, lorsque l'utilisateur va voir votre site, il va comprendre
que vous vendez un produit boostant et vitalisant pour le corps.

À quoi sert le contraste ?

Le web designer va aussi gérer le contraste entre les couleurs,

surtout le contraste entre le fond et les textes. Un exemple simple, sur
un site avec un fond sombre comme le noir, le texte ne sera pas de
couleur blanche, mais plutôt gris clair. Sinon le contraste sera trop
important et l'œil n'arrivera pas à lire. On aura l'impression que le texte
bouge ou est qu'il est flou.

Signification des couleurs

 Créer une navigation intuitive
Comme détaillé au-dessus, le web design doit mettre l'utilisateur au

Duis aute iru re

centre de toutes les actions du site. L'utilisateur doit pouvoir trouver
email@email .com l'information rapidement et en peu de clics. Pour aider la navigation, le
Lo rem Lo rem Lo rem web designer va ajouter au site :
Duis aute iru re

00 00 00 00 00
Des boutons d'action pour diriger l'utilisateur vers une page de
Duis aute iru re
contact, un panier ou encore une inscription.
*************************
Lo rem ipsum dolor e st Une messagerie instantanée pour que, si l'utilisateur à une
Duis aute iru re
question ou un souci, il puisse contacter le support.
Lo rem ipsum dolor e st

Des boutons de partage pour partager le contenu d'une page par

e-mail ou sur des réseaux sociaux.

Un formulaire de demande, pour une prise de contact, une

inscription ou toute autre demande.

Un catalogue de produit clair, montrant une photo du produit, son

Lo rem ipsum dolor e st
Duis aute iru re s it am e t , conse ct e tur adipisicing
prix, un titre descriptif et un bouton pour en voir plus de détails.
el it , sed d o.

00.00 € Un espace pour voir et publier un avis. Les avis comptent beaucoup
dans la prise de décision de l'utilisateur.

Simplifier une navigation

Avoir du texte lisible

Pour que le site soit lisible, les éléments des pages doivent être rangés
et il doit y avoir une hiérarchie dans l'information délivrée. En effet, au
premier regard, l'utilisateur doit pouvoir distinguer le titre principal, qui
résume la page, du reste.

Ensuite, pour que le texte soit lisible, le web designer va veiller à choisir
une typographie bien dessinée et claire. Le but étant d'éviter d'avoir une
police d'écriture illisible car les caractères sont trop collés, trop gars ou
trop manuscrits par exemple.

Lisibilité des textes

CHAPITRE 6

Les pièges à éviter en web design

De nos jours, beaucoup de sites internet s'autorisent
plus de modernité et de folie sur leurs pages. C'est très
bien pour attirer le regard des utilisateurs, mais il faut
tout de même faire attention à certains pièges.
 Ne pas respecter des règles de Préférer le beau à l'utile Ignorer le référencement naturel
base On est tous d'accord pour dire qu'avoir Tout d'abord, le référencement naturel
Il ne s'agit pas a proprement parlé de un beau site internet ou application c'est ou SEO consiste à faire de multiples
règles, mais plutôt d'habitudes qui se important et c'est la clé pour que les actions sur un site ou une application
gens aient envie d'y revenir. Cependant, pour aider à son référencement dans les
sont installées au cours des années. En
effet certaines pratiques sont ancrées il est encore plus important d'avoir un moteurs de recherche. Concrètement, il
dans les esprits et se font site clair, lisible et compréhensible. s'agit de faire apparaître un site sur
inconsciemment, alors pourquoi les la première page de recherche de
Le contenu visuel doit être présent pour Google.
changer ?
aider à la compréhension des textes
La plus classique est de mettre le logo et non pour distraire le lecteur, de par sa De plus, pour le référencement naturel,
d'un site internet en haut à gauche taille ou son animation. Pour vous seul les textes importent. Un moteur de
dans le menu et qu'un clic sur ce logo, expliquer simplement, imaginez un site recherche comme Google par exemple va
on retourne à la page d'accueil. Ensuite, internet qui a des animations sur chacun scanner les pages d’un site internet afin

l'utilisateur est habitué à voir les liens de ses blocs. Donc, pour une page avec 5 de vérifier la pertinence des textes. Plus
de couleur bleue et soulignés pour lui parties, il y a 5 animations. Qu'est-ce que les textes sont pertinents et de qualité et
indiquer qu'il peut cliquer. Si un texte cela va engendrer ? Tout d'abord la page mieux sera référencé la page. Il est donc
n'est pas cliquable et est souligné, va être longue à charger et l'utilisateur clair que si vous mettez 80% de visuel et
l'utilisateur sera perdu car, par habitude, va s'impatienter. Et ensuite, l'oeil de 20% de textes, le référencement sera nul
il voudra cliquer dessus. Enfin, on voit l'utilisateur va instinctivement s'orienter et le site ne sera pas visible sur les

couramment le menu en haut du site vers ce qui bouge. Il ne va donc pas lire moteurs de recherche. Ce qui implique
internet ou sur la gauche verticalement. le texte. Ce qui est l'inverse de ce qu'on pas ou peu de trafic et de visibilité et
Et bien faisons ainsi sinon l'utilisateur veut. donc de vente.
cherchera le menu et va vite s'énerver
de ne pas le trouver.

Ne pas assez travailler l'UX Oublier les Call To Action

L'expérience utilisateur permet, comme Comme son nom l'indique, les Call To
expliqué plus haut, à l'utilisateur Action ou CTA sont des boutons d'appel
d'utiliser agréablement et de à l'action. En d'autres termes, ce sont
naviguer simplement sur le site ou des boutons qui vont inciter l'utilisateur à
l'application. Donc si l'UX est négligé, faire une action comme remplir un
l'utilisateur ne pourra pas profiter formulaire de contact, s'abonner à une
pleinement du site. newsletter, ajouter un article dans un
panier ou encore se créer un compte.
Prenons l'exemple du responsive
mobile. Aujourd'hui, la navigation sur les Les boutons CTA doivent être bien
sites internet ne se fait pas que sur placés sur le site, certains dans le
ordinateur. 65% des recherches faite menu comme un bouton contact ou
sur le web en 2020 ont été faites sur inscription et d'autres doivent se trouver
dans le corps de la page.
 mobile. Il ne faut donc pas négliger le Aussi important que leur emplacement,
responsive design. la couleur des CTA joue un rôle
important. En effet, nous l'avons vu plus
À titre d’exemple, sur notre site, 20% haut, les couleurs ont une signification et
de nos utilisateurs consultent notre donc, si vous mettez l'un à côté de
site internet sur mobile. C'est l'autre un bouton rouge et un bouton
pourquoi chacun de nos blocs de page a bleu, l'utilisateur cliquera sur le rouge car
été pensé et développé pour être visible son œil sera attiré en premier vers lui.
sur tous les écrans : ordinateur, tablette
et mobile.

Ne loupez aucune nouveauté web design

Abonnez-vous à la newsletter Flocon de neige de Snoweb et recevez
toutes nos nouveautés en web design.

Entrez votre e-mail Je m'abonne

CHAPITRE 7

L'identité visuelle, qu'elle est sa place dans le web design ?

Une identité visuelle regroupe l'ensemble des supports
qui vont refléter une marque. Le logo, les cartes de visite
ou encore les bannières de réseaux sociaux font partie
de l'identité visuelle.

L'identité visuelle, qu'est-ce que

c'est ? À quoi ça sert ?
L'identité visuelle permet donc d'identifier une marque de ses
concurrents. Dans notre quotidien, nous repérons des marques grâce à
leur logo, leurs couleurs ou leur typographie, comme par exemple Netflix
ou encore Starbucks.

Le logo reste la part la plus importante de l'identité visuelle, car il en est

la base. Une identité visuelle va se construire autour d'un logo.

Le guide du logo
 Qu'elles sont les étapes de création d'un logo ?
Zoom sur le logo, ce petit élément graphique qui permet d'identifier une
marque en un clin d'œil. Souvent vu comme deux ou trois coups de
crayon, le logo demande énormément de réflexion et de recherche
afin d'arriver à un résultant "wow".

Voici un bref résumé des étapes de création d'un logo :

Brainstorming

Cette étape consiste à réfléchir sur la marque, d'étudier la concurrence

et de se poser des questions stratégiques sur la marque et sa cible.

Croquis

Cette partie de recherche consiste à faire les premiers crayonner du logo

: disposition des éléments, taille des éléments, choix de la typographie, etc.

Déclinaisons

Une fois la piste finale du logo trouvée, il est décliné en plusieurs couleurs,
formes, texture. Il aura par exemple une déclinaison noir et blanc ou bien
avec un fond uni ou à motif.

Exports

Selon l'utilisation du logo, différents formats seront utilisés. Comme par

exemple le logo du site internet et le pictogramme du logo pour le favicon
(vous savez, la petite image qui se trouve à côté du nom du site dans
l'onglet de votre navigateur).

Charte graphique

Cette dernière étape n'est pas systématiquement réalisée par le graphiste,

c'est à la demande du client.

Nous vous la détaillons juste en dessous. ↓

Quel est le prix d'un logo ?

Ce qu'il faut savoir, c'est que le prix d'un logo n'est pas fixe. Il dépend
de trois choses :

La demande du client

Le temps de création et de production

Le type de prestataire qui réalise le logo

Selon l'enveloppe disponible pour créer le logo, il existe différentes

options, plus ou moins professionnelles et de qualité. Pour connaître les
différentes options disponibles en fonction d'un budget, direction notre
article qui vous explique tout en détail ! ⬇️
Le prix d'un logo

Les formats d'export d'un logo

Tout comme les images, le logo peut s'exporter en différents formats selon son utilité. Le web
designer va utiliser le logo, ses couleurs et son éventuelle typographie dans ses interfaces afin
d'harmoniser le site ou l'application. Il faut aussi savoir que le format d'une image va impacter
son poids. Et le poids d'une image va lui impacter sur le temps de chargement d'un site
internet. C'est donc pour ça que le web designer doit maîtriser tous les formats d'export d'une
image, que ce soit un logo, une illustration ou une photographie. Il pourra donc utiliser le logo
sous tous les formats suivants.

Format image JPG ou JPEG

C'est le format classique d'une image.
Cependant, il n'est pas recommandé en web,
car une image peut vite être très lourde et pour
alléger son poids, on réduit drastiquement sa
qualité. Mais, si vous devez utiliser une photo
faite avec un appareil photo, vous allez devoir
utiliser ce format.

Format image PNG

Le PNG a un atout, c'est qu'il prend en compte
la transparence, c'est-à-dire que si on ne veut
pas de fond à son image, c'est possible. Même
s'il est plus maniable que le JPG, ce format ne
reste pas le plus apprécié sur un site internet.

Format image WebP

Nous y voilà ! Ce format d'image développé par
Google est parfait pour les sites internet. C'est
peut-être d'ailleurs pour ça que c'est Google
qui l'a créé, non ?

Dans l'étude sur la compression WebP de

Google, on voit qu'une WebP est 25-35% plus
petite qu’une JPEG et 26% plus petite
qu’une PNG.

Attention néanmoins pour ce format,

certains navigateurs ne lisent pas ce
type d'image.
 Format vectoriel SVG
Très bien connu des web designer, le SVG est
un format d'image vectoriel très léger et
compatible avec tous les navigateurs. De
plus, un fichier SVG est facilement modifiable
par un développeur depuis un éditeur de texte
ou par un web designer depuis un logiciel
graphique.

Zoom sur les avantages d'une animation SVG

Le SVG est un format qui ne perd pas de qualité, qu'il soit de très
petite taille ou au contraire de très grande taille. Il peut être étiré à
l'infini sans perte de qualité.

Il est facile d'appliquer des effets sur le code du SVG, comme

par exemple un effet vague ou un effet stroke.

Le web designer peut combiner le SVG et l'animation sur After

Effect pour réaliser une animation Lottie.

Il existe aujourd'hui de nombreuses librairies d'icônes

optimisées pour le web comme la librairie Snoweb SVG.

Vous l'avez compris, le SVG est un format idéal pour le web

très prisé par les web designer et les développeurs.

Voir les formats d'export

L'importance de la charte
graphique
La charte graphique est un des documents fondateurs de votre
communication et est essentielle au travail du web designer. C'est un
document qui liste les droits, les devoirs et le respect que toute
personne se doit de respecter. C'est donc à partir de ce document que le
web designer va travailler pour décliner l'identité visuelle sur ses
interfaces.

Il existe deux types de charte graphique, la charte papier et web. Ici,

nous allons nous concentrer sur la charte graphique web car c'est le rôle
d'un web designer de, soit la construire, soit de la respecter. Je vous
laisse au bon soin de lire notre article sur les chartes graphiques pour
avoir plus de détails sur la charte graphique papier.

La charte graphique web ou guide de style va regrouper tous les

éléments nécessaires à la création et au développement d'un site
internet ou d'une application. Comme :

Logo

Couleurs

Typographie(s)

Boutons

Formulaires

Le guide de la charte graphique

CHAPITRE 8

Quelle importance ont les maquettes en web design ?

En une phrase, une maquette permet de visualiser une
idée. La maquette va permettre au web designer de se
mettre à la place de l'utilisateur pour lui créer une
navigation agréable et sans embûches.
Qu'est-ce que c'est une maquette
web ?
Il ne faut pas se leurrer, au début, une maquette n'est ni plus ni moins
que des carrés à côté de rectangles reliés avec des flèches et le tout
formant une page web ! Les maquettes sont essentielles pour mettre en
place toute l'architecture du site et les bases de l'UX.

L'exemple d'un portfolio

Parlons d'un portfolio web, vous savez, ce site internet qui présente les
réalisations et le savoir-faire d'un peintre, designer ou d'un artisan. Et
bien dans ces exemple de portfolio, vous allez voir que réaliser une
maquette est primordial pour mettre en avant une réalisation. En effet,
la personne qui veut faire son portfolio va se dire, je veux présenter mon
projet avec une galerie d'images, un titre percutant, une description du
produit, un avis de mon client et aussi une vidéo. Ok, la liste est longue,
beaucoup trop longue pour se lancer comme ça ! Le web designer va
alors construire une maquette en hiérarchisant les informations par
ordre d'importance. Dans un premier temps, le titre, une brève
description et une image pour capter l'attention. Et ensuite, une
description détaillée, un avis client et les médias.

Exemple clôt, passons au concret !

Les maquettes web

Étape 1 : Wireframe
Cette première étape consiste à faire un croquis de toutes les maquettes
d'un site internet ou d'une application afin d'en ressortir la structure.
Dans cette structure le web designer y intègre les zones de texte, les
boutons, les images, le menu. Et, si besoin la recherche, l'espace
utilisateur, la connexion, le panier.

Il n'est pas encore question de couleurs, de typographie et de choix

d'image.

Créer des wireframe

 Lo r em ipsum

Étape 2 : maquettes Lo r em ipsum dolor amet

Exce p teur sint occaecat ? Lo r em ipsum
Lo r em Lo r em Lo r em Lo r em Lorem ipsum

Duis aute iru re

À partir de cette étape, on visualise mieux le rendu final de la page. Tout email@[Link]

Duis aute iru re no s trud

simplement parce que les rectangles sont remplacés par du texte de

Lo rem
um
em ips
Lo r s e t
Lo rem dolor

substitution, des images libres de droit, des icônes. Les palettes de ipsum set Lo rem

Lo rem
ipsu
m

m
ipsu
Lo rem

couleur sont aussi mises en place.

m
ipsu
Lo rem
Exce p teur sint occaecat ipsu
m
Lo rem
Duis aute iru re s it am e t , conse ct e tur adipisicing nim ipsu
m

m ad mi Lo rem
el it , sed do eiusmod tempor incididunt ut labo Ut eni ipsu
m
Lo rem
e t dolo re magna aliqua.
minim
m ad
Ut eni
st um
em ips
Lo rem em ips
um e Lo r ce
Lo r
re Fran
iru
aute
- Duis
11.00

Découvrir les maquettes web

20
NOV am
et
ipsum
Lo rem
re
iru
aute
0 - Duis
13.0

25
NOV aute
iru
re

0 - Duis
14.0

et
am
ipsum
Lo rem

m
ipsu
Lo rem

Lo r em ipsum dolor Lo r em ipsum dolor

Étape 3 : Prototype
Lo rem ipsum

Ut enim ad minim

Ut enim ad minim

Dernière étape de la conception, le prototype ou maquette interactive.

Lo r em ipsum dolor am et Comme le dit son nom, la maquette interactive bouge ! Il s'agit de créer
Exce p teur sint occaecat ? Lo r em ipsum
Lo r em ipsum e st
les liens entre les pages, de rendre les boutons cliquables et d'ajouter
Duis aute iru re
20 11.00 - Duis aute iru re

toutes les interactions possibles entre les éléments.

NOV
email@email .com

Lo rem ipsum am et

Duis aute iru re no s trud 25

NOV
13.00 - Duis aute iru re

14.00 - Duis aute iru re

Lo rem
Découvrir les maquettes mobile
Lo rem ipsum am et

CHAPITRE 9

Le web design au service du e-commerce

Le web design participe énormément au taux de
rentabilité d'un e-commerce. En effet, plus l'e-commerce
retient l'attention, est clair et simple et plus facile sera e
processus d'achat.
Comment créer une fiche produit
qui fonctionne ?
C'est logique pour tout le monde, ce qui fait fonctionner un e-commerce
c'est de vendre des produits. Et, pour vendre des produits, ils faut qu'ils
soient mit en avant. Pour cela, il faut travailler les fiches produit. Vous
savez, se sont ces pages qui vont présenter un produit avec :

Ses photos

Son prix

Sa description

Ses variables

Sa livraison

Ses articles similaires

Si vous êtes intéressé par les fiches produit, on vous a concocter un

listing de 20 exemples de fiches produit réussies. On y détaille les
points forts et les points faibles.

20 exemples de fiche produit

Je souhaite être accompagné en web design Nos services →

Charte
graphique Illustrations Portfolio UX/UI design Logotype

WEB DESIGN

Nos articles web design

Le sujet du web design vous fascine, alors ces articles
devraient vous intéresser également.