Aborder le processus de conception de site Web à partir du navigateur

"Voici les fous, les inadaptés, les rebelles, les fauteurs de troubles, les chevilles rondes dans les trous carrés... ceux qui voient les choses différemment - ils n'aiment pas les règles... Vous pouvez les citer, être en désaccord avec eux, glorifier ou les vilipender, mais la seule chose que vous ne pouvez pas faire est de les ignorer parce qu'ils changent les choses… » - Campagne Think Different d'Apple, Steve Jobs, 1997.

La plupart du temps, les concepteurs créent encore des maquettes statiques d'écrans à l'aide d'outils de conception traditionnels pendant le processus de conception du site Web. Mais certains concepteurs font un pas de géant et les contournent, passant directement au code, construisant et ajustant les conceptions dans le navigateur et testant leurs conceptions telles qu'elles apparaîtraient aux gens en temps réel. Sont-ce les fous, les inadaptés, les rebelles ?

En règle générale, le processus de développement de site Web traditionnel implique de nombreuses phases, notamment la planification, la stratégie de contenu, la conception, le wireframing, le prototypage, les tests, le développement, la publication, etc. Mais pendant la phase de conception, pourrait-il y avoir un autre moyen de produire des conceptions de sites réactifs "parfaites au pixel près" et de contourner complètement les outils de conception ?

Avec l'essor de la conception réactive et la variété des appareils utilisés (mobiles, tablettes, ordinateurs portables, ordinateurs de bureau, montres), il est beaucoup plus difficile de tout garder cohérent - et avec plus de pièces mobiles à prendre en considération, l'approche de la conception de sites Web et d'interfaces change.

Bien qu'il ne soit pas nécessaire pour un concepteur de devenir un codeur expert, une solution consiste pour les concepteurs à commencer à travailler directement avec le code qui pilote un site Web. Les concepteurs qui peuvent démêler le code avec juste un peu de HTML et de CSS se trouveront un atout majeur pour n'importe quelle équipe et auront un énorme avantage dans l'ensemble.

Pourquoi? Lorsqu'ils s'engagent dans un projet de conception de site Web réactif avec toutes ses complexités, les concepteurs n'ont généralement pas le temps de créer une conception statique d'un composant (disons un en-tête ou un pied de page) dans 10 résolutions et fenêtres différentes. Même s'ils ne conçoivent que pour les appareils les plus populaires, ils devront toujours envisager 4 à 5 écrans avec des rapports d'aspect, une densité d'écran et des dimensions d'écran différents. Pas une petite tâche pour dire le moins.

Résoudre les défis de conception de sites Web avec un stylo et du papier d'abord

Explorons une approche de conception de site Web et un processus de planification différents.

La première phase commence par un questionnaire client demandant les objectifs généraux du projet d'un point de vue commercial, le public cible, les stratégies de conversion, les diverses attentes de performance, etc. Ceci est fait avant le lancement de la phase de conception proprement dite pour mieux comprendre les besoins du client et le projet dans son ensemble et afin d'être plus efficace sur toute la ligne.

L'étape suivante consiste à rédiger un aperçu du projet pour confirmer que le brief a été compris. Ceci est utile lorsque vous travaillez sur des projets dans un créneau où vous n'avez peut-être pas beaucoup d'expérience ou d'expertise. Appelez cela une spécification fonctionnelle, mais moins technique.

Cela aide à définir les terminologies, les mots-clés et les processus. Selon la complexité du projet, c'est une bonne idée de faire plusieurs scénarios et flux d'utilisateurs - généralement, le flux d'intégration, la recherche et la navigation sur un site, ou un flux "d'ajout au panier" et de paiement s'il s'agit d'un site de commerce électronique.

Wireframing et Prototypage

Le prototypage est la phase suivante du processus de conception de site Web. Construire des wireframes rapides pour parler de la mise en page, des fonctionnalités et de l'apparence des pages du site sur différents appareils est un bon début. Il ne faut pas beaucoup de temps pour créer des dizaines de wireframes de différents modèles et composants. Un prototype de site Web simple peut être créé à partir de ceux-ci, et selon la complexité du projet, des outils de prototypage comme InVision, Adobe XD, Balsamiq, Moqups ou Axure peuvent être utilisés.

Tableaux d'ambiance et inventaire des interfaces

L'étape suivante consiste à créer un tableau d'humeur : une collection de choses que le concepteur, le client et d'autres parties prenantes peuvent aimer sur d'autres sites Web : mises en page, apparence et convivialité, couleurs ou polices, icônes, images, etc. Cela aidera à définir l'apparence générale du site. Si le client dispose d'un guide de style de marque, il doit être pris en compte et intégré dans la nouvelle conception du site.

Une fois les différents artefacts approuvés (wireframes, prototypes, maquettes, moodboards, etc.), il est judicieux de faire un inventaire des interfaces.

Un inventaire d'interface est une collection complète des éléments qui composent votre interface.

Brad Frost

Si vous effectuez une conception Web réactive à partir de zéro, commencez par écrire tous les composants et éléments à partir desquels le projet sera construit. Une liste non ordonnée fera très bien l'affaire et vaut certainement mieux que rien. Par exemple les tableaux, les boutons, les images, la typographie, les médias, les formulaires, la navigation, les composants, etc.

Conception dans le navigateur

"Concevoir dans le navigateur" est un terme qui est devenu populaire avec l'essor de la conception Web réactive. Afin de minimiser les heures passées dans des programmes de conception comme Sketch, les concepteurs ont été invités à déplacer la phase de conception dans le navigateur et à utiliser CSS pour la mise en page et le style. Cette approche de conception de site Web s'avère plus efficace car elle supprime de nombreuses étapes.

En se concentrant sur la maquette HTML et en testant les idées de conception "dans le navigateur" avec CSS, le temps généralement consacré à la création de maquettes statiques de pages dans d'autres outils de conception tels que Sketch peut être économisé. C'est une bonne idée pour les concepteurs de se procurer un bon éditeur de code et de proposer une bonne méthode d'actualisation du navigateur afin qu'ils puissent voir les changements en temps réel. Sublime Text et Codekit, par exemple, sont une excellente combinaison.

HTML et CSS, structurés comme ils le sont, vous obligent à réfléchir aux modèles et à vous contrôler. Il est plus facile de penser à la modularité lors de la création de composants HTML qui peuvent être facilement copiés, dupliqués et remplis de données dynamiques tout en conservant la même structure. Si vous souhaitez créer une modification spécifique, vous devez cibler explicitement cet élément ou ajouter une autre classe CSS.

Lorsque vous stylisez les en-têtes, à moins qu'ils ne soient remplacés, ils seront cohérents sur l'ensemble du site. Idem pour les autres éléments. Ce type de réflexion vous oblige à standardiser, à regrouper des éléments communs, à réutiliser autant que possible des éléments déjà stylés et, surtout, à tout garder modulaire.

Avec une seule déclaration CSS, vous pouvez modifier le rembourrage des boutons pour de meilleures cibles tactiles et tester directement sur un téléphone mobile, une tablette et un ordinateur de bureau. Cela n'est pas facile à faire dans Photoshop ou Sketch car les autres éléments ne sont pas conscients les uns des autres dans la mise en page et vous devez réorganiser les objets chaque fois que vous redimensionnez quelque chose.

Vous voulez essayer un jeu de couleurs d'en-tête différent ? En travaillant avec seulement quelques lignes de code CSS, les modifications sont visibles instantanément sur tous les modèles HTML, sur tous les appareils et écrans. Ce type de flexibilité ne peut pas être émulé facilement lorsque vous avez 20 maquettes statiques. Certes, vous pouvez utiliser des "symboles" dans Sketch ou Adobe XD pour les composants réutilisables, mais ils ne sont pas aussi polyvalents que CSS.

Dans cette phase, plusieurs décisions techniques devront être prises. Les questions auxquelles il faudra répondre sont :

• Utiliserez-vous un préprocesseur CSS ? (conseillé)
• Quel type de grille réactive utiliserez-vous pour la mise en page ?
• Les polices que vous souhaitez utiliser sont-elles disponibles à l'achat ? Le client a-t-il le budget pour les polices Web premium ou allez-vous revenir à l'utilisation des polices Web gratuites disponibles ?
• Utiliserez-vous des icônes multicolores ou monochromes ? La taille variera-t-elle sur l'ensemble du site ? Ensuite, comptez-vous sur des icônes dessinées sur mesure ou sur un pack d'icônes déjà existant ? Quelles tailles vos icônes devront-elles accepter ?

Le problème avec les polices et la conception Web réactive

Le choix des polices pour un projet de conception Web réactif peut être difficile. Les possibilités sont nombreuses et tout autant les écueils. Étant donné que le design sera utilisé dans le navigateur, c'est le meilleur endroit pour les essayer. La lisibilité des polices peut varier en fonction de la taille, du poids, des couleurs et du rendu. Ainsi, en essayant les polices directement dans le navigateur, les concepteurs peuvent s'assurer que tout est correct et que les attentes souhaitées sont satisfaites.

Il existe de nombreux outils en ligne pour sélectionner et tester des polices et essayer des combinaisons de polices. Sur Typetester et Typecast, différentes polices de divers services et fonderies peuvent être trouvées et testées. Lorsqu'ils travaillent avec un service d'abonnement aux polices spécifique comme Typekit ou Fonts.com, les concepteurs peuvent générer des polices et les tester directement sur leurs modèles de page. La génération d'un package Typekit avec de nouvelles polices est simple et rapide, et vous pouvez facilement voir comment des polices particulières affecteront les performances des pages Web.

Des icônes qui correspondent au style de la marque

Si vous dessinez des icônes personnalisées, la taille, la grille et le style devront être définis. En travaillant dans Illustrator, chaque plan de travail représenterait une icône, par exemple. Les icônes peuvent être facilement exportées depuis Illustrator au format SVG ou PNG, qui peuvent ensuite être transformées en une police d'icônes avec des services comme Icomoon. Il est recommandé d'utiliser des icônes vectorielles (SVG) car les vecteurs sont indépendants de la résolution, il n'y a donc aucune inquiétude quant à leur affichage sur les écrans haute définition (Retina).

Un guide de style et CSS pour garder le processus de conception de site Web sous contrôle

Même si nous concevons dans le navigateur, avec des dizaines de modèles et de composants, nous pourrions potentiellement perdre la trace de l'endroit où quelque chose est utilisé et de quelle manière. C'est une bonne idée de créer un guide de style de tous les composants en tant que référentiel central. Des modèles de page spécifiques seront créés à partir de ce guide de style en combinant des composants et des éléments d'interface utilisateur dans des pages Web.

Les composants de l'interface utilisateur peuvent être des éléments tels que la pagination, la liste des produits, la galerie d'images, les fenêtres modales, les éléments de formulaire, etc., et sont utilisés comme blocs de construction pour les modèles. Garder tout au même endroit est vraiment pratique lorsqu'il est temps de tester la construction d'un composant d'interface utilisateur spécifique.

Avec CSS, il est recommandé de séparer les styles de composants dans des fichiers séparés. Par exemple, le style de pagination sera dans _pagination.scss , les éléments de formulaire dans _form.scss , et tous ces fichiers seront inclus dans un seul fichier SCSS avec d'autres fichiers (variables, mixin, etc.).

Bien que style.scss puisse être composé de dizaines de "petits fichiers", lorsque plusieurs personnes travaillent sur le même projet, il est plus facile de suivre les modifications (qu'elles utilisent ou non le contrôle de source) si tout est séparé en plus petits morceaux. Il est important de continuer à maintenir le guide de style une fois le projet de conception de site Web en production, car l'équipe devra suivre chaque composant du site.

Utilisation des feuilles de style – CSS modulaire

Du point de vue du développement, il existe de nombreuses approches pour écrire du CSS modulaire. Les plus connus sont SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​et OOCSS (Object Oriented CSS). Il y a beaucoup à apprendre, même si vous finissez par développer votre propre approche. À ce stade, vous devriez disposer d'une belle collection de composants d'interface utilisateur et de pages Web, qui vous permettront de créer facilement de nouvelles pages Web. Vous pouvez copier et coller des éléments du guide de style et les réorganiser selon vos besoins.

Comme tout est modulaire, vous n'avez pas à vous soucier de la cohérence de la conception et du code ; mais n'oubliez pas que si vous ajustez un composant d'interface utilisateur à l'échelle du système, vous devrez mettre à jour le guide de style avec les modifications (ou ajouter le nouveau composant). Pour que tout reste organisé, il est préférable d'utiliser une sorte d'approche de modélisation/automatisation pour travailler sur des pages Web telles que Gulp ou Grunt.

Et après? Conception dans le navigateur

Vous disposez maintenant d'un référentiel central de composants d'interface utilisateur, chaque élément documenté et les pages Web créées à partir de ces composants. À partir de ce moment, il est plus que probable que les concepteurs n'auront plus besoin d'ouvrir leurs outils de conception préférés car la plupart de la « conception » sera effectuée directement dans le code et prévisualisée dans le navigateur.

Vous n'êtes pas tout à fait sûr de l'impact d'un changement spécifique sur la conception ? Vous pouvez désormais prévisualiser votre conception sur différents appareils et navigateurs simultanément pour voir comment une police a changé sur un titre, ou la modification de la taille et de la couleur d'un bouton aura un impact sur la conception.

Lorsque vous utilisez des polices Web personnalisées, comment l'ajout de poids de police supplémentaires aura-t-il un impact sur les performances de chargement des pages ? Nous pouvons tester les performances des pages Web en cours à l'aide de services tels que WebPageTest et prendre des décisions éclairées sur les résultats réels. Nous ne pouvons certainement pas faire cela dans Photoshop ou Sketch.

Travailler avec HTML et CSS, et travailler dans le navigateur peut ne pas convenir à tous les concepteurs lors d'un processus de conception de site Web. Mais si les concepteurs se soucient vraiment de l'apparence de leur travail sur divers appareils et tailles d'écran, ils doivent s'assurer qu'il est parfait à chaque fois. Quelque chose qui semble incroyable en tant que maquette de conception statique peut sembler moins que souhaitable lorsqu'il est affiché dans un navigateur Web sur un appareil mobile. Il incomberait aux concepteurs avertis de créer et de tester des conceptions Web dans un environnement où tout le monde les verra… dans le navigateur.

Pour en savoir plus sur le blog Toptal Design :

• Conception réactive - Meilleures pratiques et considérations
• Comment concevoir une page de destination efficace
• Le guide ultime de la conception de sites Web de commerce électronique
• Les fondamentaux de la refonte de site Web - Une étude de cas
• Les forces motrices du design - Une étude de cas de refonte de site Web