Etape 1

Quel design pour votre site internet ?

Objectif

Le présent article vous présente les tendances, règles et bonnes pratiques en matière de web design.

Pré-requis

Un papier et un crayon.
Un ordinateur et un navigateur web, tel que Chrome, Safari ou Firefox.

Plan de l’article

Look et design

La réalisation d’un site internet fait appel à deux notions complémentaires : l’UX design et l’UI design.

L’UX design fait référence à l’expérience utilisateur, tandis que l’UI design a trait à l’interface utilisateur :

Pour schématiser, l’UI design s’intéresse ainsi au look de votre site, tandis que l’UX design va concerner son ergonomie ; l’ensemble devant être étroitement associé de manière à ce que les fonctionnalités du site soient facilement accessibles au visiteur et permettent de le conduire aux actions souhaitées, par lui comme par vous.

Les principes du web design

La conception d’un site internet fait donc appel aux deux domaines complémentaires de l’UX et de l’UI design.

En voici les principes :

L’UX design

L’objectif de la conception UX est de permettre à l’internaute de bénéficier d’une expérience utilisateur heureuse, c’est-à-dire utile et agréable.

Pour cela, il faut :

Analyser la concurrence

Définir votre stratégie et vos objectifs

Définir vos cibles / personas

Relever tous les besoins

Structurer vos contenus

L’UI design

La conception UI est le complément de la conception UX. Elle doit se traduire par une interface conviviale et attrayante.

Pour cela, il faut :

Définir votre identité visuelle et votre charte graphique

Adapter l'interface à tous types d'écrans ("site responsive")

Intégrer des éléments d'interactivité et d'animation pour un parcours intuitif

Utiliser un vocabulaire approprié et accessible

Dans tous les cas, la conception d’un site web repose sur une analyse des futurs utilisateurs, et donc de vos clients et bénéficiaires de vos services…

Les tendances actuelles de web design

Les tendances actuelles en matière de web design se traduisent de la manière suivante :
L'omni-présence du responsive design
Il ne s’agit même plus d’une tendance, mais d’une réalité incontournable : votre site doit pouvoir s’adapter naturellement à tout type d’écran ! Fort heureusement, le framework Divi intègre parfaitement cette dimension…
Le défilement parallaxe
Là encore, la tendance au défilement parallaxe n’est pas nouvelle, mais prend de plus en plus d’importance. Les effets visuels induits enrichissent la navigation et la rendent plus agréable.

Voici un exemple de défilement parallaxe élaboré :

(cliquez sur l’image)

Le scroll infini
Conséquence de la généralisation de l’usage des smartphones, le scroll infini est de plus en plus prisé. Il permet à l’internaute de faire défiler les contenus avec le pouce ou la molette de la souris plutôt que par des clics :

(cliquez sur l’image)

Des images et illustrations de qualité
La qualité des images et des illustrations participe à la mise en valeur des textes du site. La tendance est à la recherche d’images, de vidéos et d’illustrations originales, plutôt qu’au recours aux habituelles banques d’images. Le site bénéficie ainsi d’un facteur d’identification et de forte différenciation.

Ceci est bien évidemment incontournable lorsque vous disposez d’une gamme de produits propres :

(cliquez sur l’image)

Un design épuré
Cette tendance au “flat design” se poursuit afin d’alléger les pages et de compenser l’enrichissement des contenus en animations et vidéos, de manière à conserver des temps de chargement les plus faibles possible.
Le storytelling
Le storytelling renforce le message à destination des cibles du site en cherchant à les impliquer émotionnellement.

Les meilleurs sites selon awwwards.com

Le site awwwards.com évalue les sites internet selon les 4 critères :

  • Design
  • Créativité
  • Ergonomie
  • Contenu

Il publie ainsi quotidiennement une sélection de sites remarquables, et notamment le “Site of the day”.

Visitez awwwards.com
Cet article vous a-t-il été utile ?

N'hésitez-pas à nous faire part de vos expériences et des difficultés que vous pouvez encore rencontrer, de manière à ce que nous puissions affiner et compléter ce support…

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *