Lors de la conception d’un site Web, il y a des erreurs courantes qui surgissent souvent, surtout chez les stagiaires et les nouveaux concepteurs. Dans cette liste d’étapes vers la mise en page parfaite du site Web, nous couvrons ce que tout nouveau créateur de site Web travaillant au sein d’une agence numérique devrait savoir et faire avant de commencer un nouveau projet, et ce à quoi ils devraient prêter attention au cours du processus pour éviter de faire ces erreurs.

Ces principes couvrent non seulement les aspects de conception, mais aussi des conseils généraux sur le déroulement du travail qui permettront d’obtenir un travail bien fait. Suivez-les et vous serez bientôt en mesure de créer des mises en page professionnelles.

01. Définir ce que signifie le succès
Parlez à vos clients pour savoir quels sont les objectifs.

Parlez à vos clients pour savoir quels sont les objectifs.
Avant de commencer le travail, vous devez savoir pour quoi vous concevez. En plus de la description du site, vous devez savoir quelles sont les attentes à son égard. Prenez un site de nouvelles par exemple, quel est l’objectif ? S’agit-il de faire autant d’impressions publicitaires que possible ou s’agit-il de fournir la meilleure expérience de lecture ? Comment ces objectifs seront-ils mesurés ?

Les bons remaniements ne sont pas nécessairement les plus flashy, mais ceux qui améliorent les performances au fil du temps. Parler à vos clients avant de commencer votre conception est la clé pour définir tout cela. Vous devez apprendre quelles sont leurs préoccupations et leurs objectifs au-delà de l’énoncé de travail écrit.

02. Mettez d’abord vos pensées sur papier.
Mise en page du site Web : esquisse initiale

Esquisses très anciennes d’une série d’illustrations sur les villes du monde entier (cliquez sur l’icône en haut à droite pour agrandir l’image).
Cela semble très évident, mais j’ai trop souvent constaté que les concepteurs se lancent directement dans leur travail avant de réfléchir au problème qu’ils essaient de résoudre. Le design consiste à résoudre des problèmes, et ces problèmes ne peuvent pas être résolus par des dégradés ou des ombres, mais plutôt par une bonne disposition et une hiérarchie claire.

Pensez au contenu, à la mise en page et à la fonctionnalité avant de commencer à déposer des ombres. Assurez-vous que ces pensées correspondent aux objectifs de votre client et n’hésitez pas à les partager. Aucun client ne s’est jamais plaint auprès de moi d’idées trop communicatives.

03. Commencer à esquisser un cadre de haut niveau.
Mise en page du site Web : Croquis UX

Le croquis d’une image filaire de base vous aidera à structurer la mise en page (cliquez sur l’icône en haut à droite pour agrandir l’image).
Quand on me demande de créer un look and feel pour un projet, la première chose que je fais est de trouver un framework de haut niveau qui résout tous les problèmes de conception. Le cadre est l’interface utilisateur qui entoure le contenu et aide l’utilisateur à effectuer des actions et à naviguer à travers le contenu. Il inclut la navigation et les composants comme les barres latérales et les barres inférieures.

Si vous abordez votre conception dans cette perspective, vous aurez une compréhension claire de ce que seront vos besoins en matière de mise en page lors de la conception de sections au-delà de la page d’accueil.

04. Ajouter une grille
Exemple d’une grille 978 avec une ligne de base 10px.

Exemple d’une grille 978 avec une ligne de base 10px.
C’est aussi simple que ça en a l’air. Avant de commencer à concevoir quoi que ce soit, vous avez besoin d’une grille appropriée. Il n’y a pas d’excuses valables pour commencer sans grille – et si vous ne le faites pas, je peux vous assurer que le design ne sera pas aussi beau. Une grille vous aidera à structurer la disposition des différentes sections ; elle vous guidera à travers les exigences spécifiques de taille d’écran, et vous aidera à créer des modèles réactifs, de sorte que vous êtes cohérent en termes d’espacement ainsi que de nombreux autres problèmes de conception.

Pour savoir comment faire, consultez ce guide pour créer une grille qui s’adapte à toutes les tailles d’écran.

05. Choisissez votre typographie
Mise en page du site Web : typographie

Une règle générale consiste à ne pas utiliser plus de deux caractères différents dans la mise en page d’un site Web.
L’exploration des différents caractères et couleurs fait partie de la phase de découverte d’un projet. Je recommanderais de ne pas utiliser plus de deux caractères différents dans un site Web, mais cela dépend vraiment de sa nature. Dans l’ensemble, choisissez une police facile à lire pour les gros morceaux de texte et soyez plus ludique avec les titres et les appels à l’action. N’ayez pas peur d’utiliser de grosses polices de caractères et soyez créatif et cohérent lorsque vous utilisez la typographie.

Afin de créer un site internet : http://diginovae.strikingly.com/

06. Sélectionnez votre thème de couleur
Mise en page du site web : couleurs

Des outils comme Color Hunt sont conçus pour vous aider à choisir une palette.
Pendant le processus de choix d’un ensemble de polices de caractères, vous devriez commencer à explorer les couleurs que vous utiliserez dans l’interface utilisateur, les arrière-plans et le texte. Je recommande d’utiliser un ensemble limité de couleurs et de tons pour l’interface utilisateur générale.

Il est important de les appliquer uniformément à travers l’interface utilisateur en fonction de la fonctionnalité de l’élément. Pensez à la mise en page de sites comme Facebook, Twitter, Quora et Vimeo. En plus de l’interface utilisateur, il ne devrait y avoir aucune restriction de couleur pour les illustrations ou les détails graphiques, à condition qu’ils n’interfèrent pas avec la fonctionnalité des composants.

Si vous êtes bloqué, jetez un coup d’œil à notre liste d’applications gratuites pour choisir une palette de couleurs.

07. Diviser la mise en page
Mise en page du site Web : Page d’accueil de B-reel

Les mises en page simples ont tendance à être plus faciles à naviguer.
Plus la structure du site est simple, plus il est facile pour les utilisateurs.