Pourquoi penser à l'avenir est crucial dans la conception Web

La différence entre la construction d'un excellent site Web et d'un médiocre est généralement déterminée très tôt. Il s'agit souvent pour un concepteur de sites Web de peindre son projet dans un « coin » virtuel. C'est là qu'une conception devient rigide et incapable de s'adapter à divers cas d'utilisation.

Cela a tendance à se produire dans la phase de prototypage. Nous consacrons beaucoup de temps et d'énergie créative à une idée qui a l'air géniale. Nos clients pourraient l'aimer autant que nous. Mais ce n'est que lorsque nous commençons réellement à le construire que nous commençons à en comprendre pleinement les conséquences.

Une maquette de conception sert de boussole pour nos projets de site Web. Si nous ne parvenons pas à anticiper ce que certains éléments exigent, cela pourrait signifier être coincé dans une mauvaise situation. Le résultat final est un site qui doit faire de sérieux compromis pour fonctionner sur différents appareils et navigateurs. Cela peut avoir un impact négatif sur l'accessibilité, les performances et le respect des meilleures pratiques.

Heureusement, une certaine planification vous aidera à éviter un processus de construction désordonné. Jetons un coup d'œil à quelques éléments clés à considérer avant de partager vos idées avec un client.

Comment les éléments s'adaptent aux différents écrans

Il y a une raison pour laquelle on parle tant d'une approche « mobile first » de la conception Web. Essentiellement, cela nous permet de commencer avec l'essentiel d'un site Web. À partir de là, nous pouvons ajouter et améliorer à mesure que la fenêtre s'agrandit.

Pourtant, chacun de nous a ses propres préférences pour la construction de prototypes. Pour ceux qui utilisent encore une approche basée sur le bureau, il est important de réfléchir à la façon dont tous ces éléments de conception sophistiqués fonctionneront sur un téléphone.

Si vous envisagez d'implémenter CSS Grid ou Flexbox, ils vous aideront beaucoup à tirer le meilleur parti de l'espace disponible sur l'écran. Mais d'autres éléments peuvent nécessiter plus d'efforts pour fonctionner.

Les grands curseurs, par exemple, peuvent devenir très difficiles à utiliser sur les petits écrans. Les images complexes peuvent ne pas avoir autant d'impact et le texte peut dépasser les limites. Les performances peuvent également être à la traîne.

Dans ce cas, vous devrez peut-être décider si le curseur vaut la peine d'être affiché sur mobile. Ou peut-être pourrait-il être refactorisé pour mieux s'adapter au travail dans toutes les situations.

Incidences sur l'accessibilité

La conception commence par le choix des polices et des couleurs appropriées. Ils sont tous deux profondément liés à l'image de marque et à l'accessibilité.

Les polices doivent être nettes et dimensionnées pour la lisibilité. Bien que l'écriture sophistiquée et le type décoratif puissent être beaux, ils doivent être suffisamment grands pour être lus et limités à une utilisation dans les en-têtes. Si ces exigences ne peuvent pas être raisonnablement satisfaites, il peut être préférable de les supprimer complètement de votre projet.

De plus, le contraste des couleurs devrait également être une préoccupation majeure. Les couleurs d'arrière-plan et de premier plan doivent atteindre un rapport de contraste acceptable pour être considérées comme accessibles. De plus, c'est juste une bonne pratique.

Si vous n'êtes pas sûr de votre palette, utilisez un outil en ligne pour déterminer sa pertinence. Parfois, même un léger ajustement suffit pour passer les normes WCAG AA.

Au-delà de ces deux éléments, il est également bon d'avoir un plan pour afficher des éléments tels que des icônes. Sont-ils intuitifs ? Seront-ils accompagnés de texte ?

Rétrocompatibilité

Tous les sites Web ne doivent pas nécessairement être entièrement compatibles avec, par exemple, Internet Explorer 9. Et les anciens navigateurs ne doivent pas nécessairement nous dissuader d'utiliser les derniers CSS ou JavaScript. Mais il faut réfléchir à la rétrocompatibilité.

Les éléments de conception qui rendront un site Web complètement inutilisable dans les logiciels plus anciens sont particulièrement préoccupants. Même si un navigateur particulier représente un petit pourcentage des visiteurs de votre site, cela laisse encore quelques conversions potentielles sur la table.

Cela vaut la peine de considérer l'effet que les décisions de conception auront sur ces utilisateurs. Les solutions de repli disponibles pour une technologie donnée peuvent être suffisantes pour que les choses restent décentes et utilisables. Mieux encore, ils peuvent être assez simples à mettre en œuvre.

Auparavant, les concepteurs devaient s'assurer que les éléments s'affichaient et fonctionnaient exactement de la même manière dans tous les navigateurs. C'est peut-être trop demander de nos jours. Tant qu'un utilisateur peut naviguer et consommer du contenu sur certains des logiciels les plus anciens, cela pourrait suffire.

Scénarios qui ne se sont pas encore produits

Même les plus petits sites Web auront besoin d'évoluer avec le temps. Au fur et à mesure que de nouveaux types de contenu sont ajoutés, ils devront être pris en compte dans la conception. Si vous n'êtes pas préparé, la mise en œuvre de ces éléments pourrait entrer en conflit avec ce qui existe déjà.

Pensez à ajouter une série de vidéos, par exemple. Bien que le processus d'ajout de ce contenu puisse être assez simple, comment s'intégrera-t-il dans l'apparence que vous avez déjà établie ? Utiliserez-vous une interface utilisateur de navigateur par défaut ou créerez-vous quelque chose qui corresponde à votre image de marque ?

Bien que vous ne puissiez pas toujours prédire l'avenir, vous pouvez prévoir toutes sortes de possibilités. Cela fait partie de ce qu'un système de conception vous permet d'accomplir. En définissant des directives par défaut dès le départ, vous aurez plus de facilité à gérer les futurs ajouts.

La réalité est que ce que nous concevons aujourd'hui changera probablement à l'avenir. Par conséquent, il vaut la peine d'être prêt à cette éventualité.

Bien construire du premier coup

Créer cette première maquette, c'est bien plus que simplement rendre les choses belles. Cela va même au-delà d'impressionner vos clients. En effet, c'est un exercice qui nous oblige à regarder notre projet dans son ensemble.

L'esthétique doit être agréable à l'œil. Mais le design doit aussi être accessible et capable de s'adapter à différents écrans. De plus, il peut devoir s'adapter à différents types de contenu à mesure que les choses évoluent.

Si cela vous semble écrasant, respirez profondément. C'est là que votre expérience et votre expertise peuvent venir à la rescousse. Les bons outils peuvent également intervenir.

Pensez à ce qui a fonctionné (et à ce qui n'a pas fonctionné) dans vos projets passés. Recherchez des moyens de mettre en œuvre des fonctionnalités résilientes. Faites cela et vous serez sur la bonne voie pour un projet réussi !