Comment aborder la conception pour les développeurs

Même s'ils travaillent sur les mêmes projets et produits, les développeurs et les concepteurs travaillent souvent séparément les uns des autres dans des silos. Le design est souvent considéré par les développeurs comme une chose secondaire, sans importance par rapport à la fonctionnalité d'un produit.

Ce genre de réflexion peut être préjudiciable à la relation développeur-concepteur. Ne pas avoir une compréhension de base de la conception peut freiner les développeurs dans leur carrière ou les empêcher de poursuivre des projets simplement parce qu'ils n'ont pas de concepteur à bord.

Pourquoi les développeurs devraient apprendre le design

Bien que la conception et le développement soient souvent considérés comme des disciplines distinctes, il existe des personnes qui maîtrisent les deux. Même si quelqu'un n'est intéressé que par le métier de concepteur ou de développeur, pas les deux, il est utile d'apprendre au moins les bases de l'autre discipline.

Il y a plusieurs raisons pour lesquelles les développeurs pourraient vouloir apprendre la conception, ou au moins développer une base de connaissances en conception.

Tout d'abord, les petites équipes peuvent ne pas avoir de designer dédié. De plus, il y a des développeurs qui veulent s'attaquer à des projets entièrement par eux-mêmes, qui ne peuvent pas se permettre d'embaucher un designer (ou qui veulent dépenser l'argent ailleurs). Apprendre à concevoir leurs propres produits, au moins assez bien pour se débrouiller jusqu'à ce qu'un designer puisse être embauché est une ressource inestimable.

L'autre grande raison pour laquelle les développeurs apprennent le design est qu'ils peuvent travailler plus efficacement avec les designers. Il est incroyablement frustrant pour un concepteur de remettre un fichier entièrement conçu pour un site Web ou une application dont il s'attend à ce qu'il soit parfait au pixel près dans le produit fini, pour constater que sa conception a été considérablement modifiée par le développeur qui l'a codé.

Si les développeurs ne comprennent pas les bases de la conception, ils peuvent négliger de petits détails qui rendent une interface utilisateur particulièrement conviviale et sabotent involontairement l'expérience utilisateur du projet. Lorsque les concepteurs renvoient des tonnes de corrections, cela peut mettre à rude épreuve la relation développeur-concepteur, sans parler de ralentir l'achèvement d'un projet.

Afin d'améliorer les relations et le travail d'équipe entre les équipes interdisciplinaires, les développeurs se feraient une faveur en apprenant à voir les conceptions à travers les yeux d'un "designer" plutôt que de les regarder uniquement du point de vue du développement - la maîtrise de cette compétence améliorera considérablement leurs projets.

Créer un état d'esprit de conception

Trop souvent, les développeurs qui apprennent à concevoir se concentrent trop sur l'esthétique des conceptions qu'ils aiment et veulent imiter, plutôt que sur les principes sous-jacents qui soutiennent ces conceptions. Ils voient des choses comme la couleur et la taille d'un bouton, une police spécifique ou la façon dont les bordures sont utilisées sans comprendre les raisons de ces choix.

Ils commencent à pulvériser de la peinture sur les murs et à décorer l'espace sans comprendre le but des espaces qu'ils décorent (ou même en s'assurant que des travaux comme la plomberie et l'électricité sont terminés), pour ainsi dire.

Il est important de comprendre et de respecter les principes qui sous-tendent les raisons pour lesquelles les concepteurs prennent les décisions qu'ils prennent. Toute personne novice en matière de design a besoin de bien comprendre les principes et les théories qui composent un bon design - des choses comme les principes de Gestalt et la hiérarchie visuelle de base - avant de plonger et de commencer à pulvériser de la peinture partout.

Cela dit, il est également courant pour les nouveaux designers, qu'ils aient ou non une formation en développement, de s'enliser dans la théorie. Ils passent tellement de temps à apprendre et à réfléchir à des choses qu'ils n'arrivent jamais à appliquer réellement ce qu'ils apprennent.

Les concepteurs et les développeurs ont tendance à être des perfectionnistes. Mais pousser les conceptions avant qu'elles ne soient parfaites (puisqu'elles ne le seront probablement jamais) est important pour le processus. Les nouveaux designers, en particulier, doivent dépasser leurs insécurités, mettre leur travail en valeur et apprendre des commentaires qu'ils reçoivent.

L'une des meilleures façons d'apprendre vraiment le design est d'essayer de recréer les designs des autres. Trier ce qui fonctionne et ce qui ne fonctionne pas, et comprendre pourquoi un design particulier est attrayant est l'une des compétences les plus précieuses qu'un nouveau designer ou développeur puisse acquérir. Donner une touche unique à un design existant est courant dans l'industrie (comme en témoigne la fonction "Rebound" de Dribbble).

Conception dans le navigateur

De nombreux concepteurs résistent à la conception directement dans le navigateur, car cela signifie généralement qu'ils doivent être à l'aise pour écrire au moins du code HTML et CSS de base. C'est la raison exacte pour laquelle il convient souvent aux développeurs qui se lancent dans la conception : ils sont déjà à l'aise pour écrire du code.

Il existe des outils qui peuvent aider à la conception dans le navigateur et peuvent faciliter la vie des concepteurs et des développeurs. Des plugins de navigateur simples sont disponibles pour tout, de la sélection des palettes de couleurs à l'exploration du code CSS et HTML d'un autre site.

Il existe également des outils plus complexes comme Figma qui agissent comme un outil de conception complet directement dans le navigateur. Figma permet aux concepteurs de collaborer, d'envoyer des actifs aux parties prenantes (et même de les laisser modifier le contenu et la copie des conceptions), et permet aux développeurs d'accéder aux conceptions réelles en temps réel. C'est une excellente option pour les concepteurs-développeurs qui souhaitent créer des conceptions et des systèmes de conception pouvant évoluer dans le temps.

Webflow est une autre option de conception dans le navigateur que les développeurs pourraient aimer. Bien que l'interface de conception soit visuelle, le code exporté est propre, sémantique CSS et HTML que les développeurs apprécieront (tous les outils de conception visuelle n'exportent pas de code propre). Webflow comprend des outils de conception et de mise en page, ainsi que des outils CMS et de commerce électronique intégrés, ainsi que des options d'hébergement.

Utilisation de la couleur, de la typographie et de la mise en page

Avant de plonger dans les principes visuels de la couleur, de la typographie et de la mise en page, il est important de parler de la convivialité de base. Le design le plus esthétique au monde est inutile s'il n'est pas utilisable.

L'un des principes d'utilisabilité les plus importants est l'idée de cohérence ou de prévisibilité. Les conceptions doivent être suffisamment prévisibles pour que les utilisateurs puissent comprendre intuitivement comment les utiliser. Par exemple, du texte bleu souligné pour les liens cliquables, des menus de navigation complets et bien étiquetés, etc. L'espacement entre les éléments, la typographie et le jeu de couleurs doivent également être cohérents.

D'autres principes d'utilisabilité qui doivent être pris en compte dans chaque projet de conception incluent des éléments tels que la prévention des erreurs (et des messages d'erreur informatifs lorsque des erreurs se produisent), un langage familier (utiliser le langage auquel les gens sont habitués, plutôt que des alternatives « mignonnes » ou créatives qui pourraient ne pas être claires. ), flexibilité et efficacité, et aide facilement disponible. Nielsen Norman Group a des heuristiques d'utilisabilité supplémentaires qui doivent également être gardées à l'esprit.

Des évaluations de l'utilisabilité doivent être menées tout au long du processus de conception et de développement pour s'assurer que le produit fonctionne comme prévu par l'équipe de conception et de développement et que les utilisateurs ne sont pas confus. Les évaluations heuristiques consistent à comparer une liste de principes de conception prédéfinis qu'un produit doit suivre avec le produit réel pour voir où se produisent les écarts (et ensuite corriger ces écarts).

Une fois que l'utilisabilité a été bien comprise par rapport au produit à portée de main, les concepteurs-développeurs peuvent passer aux aspects plus visuels de la conception.

Théorie de base des couleurs

La théorie des couleurs est l'un des aspects les plus complexes de la conception visuelle. Changer légèrement les nuances peut complètement changer l'impact visuel et l'effet émotionnel d'une couleur. C'est l'une des raisons pour lesquelles de nombreux designers qui travaillent dans l'industrie depuis des années ont encore du mal avec la couleur.

Bien que de nombreux livres aient été écrits sur la théorie des couleurs, il existe des principes de base que les concepteurs-développeurs peuvent apprendre pour démarrer. Combinez-les avec l'un des nombreux outils de conception de couleurs disponibles, et une palette de couleurs agréable peut être créée assez facilement.

Tout d'abord, la différence entre les couleurs chaudes, les couleurs froides et les neutres. Les couleurs chaudes incluent le rouge, l'orange et le jaune. Les couleurs chaudes seront généralement vibrantes et énergisantes. Les couleurs froides incluent le vert, le bleu et le violet. Ces couleurs sont généralement plus calmes et relaxantes.

Les neutres incluent le blanc, le noir, le gris, le marron et le beige. L'ajout de blanc, de noir ou de gris à des couleurs chaudes ou froides modifie leur signification et leur impact. Le blanc éclaircit les couleurs et rend généralement leur effet moins intense ou plus positif (par exemple, le violet est considéré comme une couleur mystérieuse et royale, tandis que le lilas est souvent associé au printemps et au bonheur). Le gris assourdi les couleurs et peut atténuer leur impact. Le noir assombrit les couleurs et peut les rendre plus conservatrices (considérez l'impact différent d'une couleur comme le bleu vif par rapport au bleu marine).

Une fois qu'un designer a une compréhension de base de la signification des couleurs, il peut utiliser des outils tels que Coolors, Design Seeds ou Colormind pour proposer une palette finale et coordonnée pour sa conception.

Utilisation de la couleur TSL

Lorsqu'un concepteur pense aux couleurs Web, il pense souvent en termes de valeurs hexadécimales. Bien que cela soit devenu la norme de l'industrie en termes de couleurs Web, les développeurs peuvent trouver qu'il est plus logique de travailler avec des valeurs de couleur HSL.

Pour la plupart des gens (y compris les concepteurs), les valeurs hexadécimales n'ont apparemment aucune corrélation les unes avec les autres. Deux couleurs très similaires peuvent avoir des valeurs hexadécimales complètement différentes. Par exemple, # 68B4D4 et # 92C8E0 sont des nuances de bleu assez similaires (l'une est simplement un peu plus brillante et plus claire que l'autre) et pourtant leurs valeurs hexadécimales n'ont aucune corrélation apparente.

Leurs valeurs HSL, cependant, montrent à quel point elles sont étroitement liées : #68B4D4 devient HSL (198, 58%, 62%) et #92C8E0 devient HSL (198, 56%, 73%). Le premier chiffre de la séquence (198 dans ce cas) indique la teinte particulière. Le deuxième nombre est le pourcentage de saturation (la luminosité ou la vivacité de la couleur). Le troisième chiffre est le pourcentage de luminosité (ou de blanc ajouté) de la couleur.

Parce que les corrélations entre les valeurs de couleur sont si facilement visibles avec HSL vs hex, les développeurs trouvent souvent que la manipulation des couleurs via le code avec HSL est beaucoup plus facile.

Principes de typographie

La typographie est un autre domaine qui peut faire trébucher même les designers expérimentés. Mais comme la théorie des couleurs, il existe d'excellents outils qui peuvent vous aider.

La hiérarchie typographique est l'une des premières choses qu'un concepteur-développeur doit apprendre. La relation entre les différents éléments de type dans une conception est essentielle pour rendre cette conception plus utilisable.

À tout le moins, un design doit avoir trois niveaux de hiérarchie typographique : les titres, les sous-titres et les polices du corps. Le titre doit être le plus visible visuellement, les sous-titres viennent ensuite, puis la police du corps, qui doit être très lisible.

De nombreux nouveaux concepteurs se concentrent trop sur la taille de la police lors de la création de leur hiérarchie, et pas assez sur le style de police . Parfois, plutôt que de faire un titre beaucoup plus grand qu'un sous-titre, par exemple, un titre peut être mis en gras ou en majuscule, tandis que le sous-titre est laissé en casse de titre et en poids normal. La couleur peut également être utilisée pour différencier les sous-titres des titres, et entre ces éléments et le corps du texte.

La combinaison de différentes polices peut également dérouter de nombreux concepteurs, et pourtant c'est un moyen courant de créer une hiérarchie visuelle. Ils incluent le choix de polices complémentaires (les contraires s'attirent souvent, mais dans une certaine mesure, la façon dont les polices se combinent doit être déterminée en fonction de l'intuition qui est affinée au fil du temps), le choix des polices appropriées (n'utilisez pas Comic Sans sur un document juridique, par exemple, ou une police d'affichage pour le type de corps qui ne sera pas lisible à des tailles plus petites), et créer un contraste entre les polices de caractères (n'en utilisez pas deux qui sont très similaires).

Un autre moyen simple de combiner des polices consiste à choisir des polices dans de grandes familles de polices. Il existe même des familles qui incluent des versions display, serif et sans serif qui fonctionnent bien ensemble (comme Mrs Eaves et Mr Eaves, Fedra ou Museo et Museo Sans). C'est peut-être le moyen le plus simple de commencer à vraiment expérimenter la combinaison de polices, car elles sont conçues pour bien s'agencer.

Lorsque vous travaillez avec des hiérarchies typographiques plus grandes (telles que l'ajout de H1, H2, H3, H4, etc.), il est important de suivre une sorte de raison dans l'échelle typographique. La séquence de Fibonacci est une échelle possible pour commencer, bien qu'il existe d'autres échelles typographiques établies.

Une échelle commune utilisée à la fois dans la typographie (et généralement dans les mises en page de conception) se compose de 4, 8, 16, 24, 36, 48, 72, 108, etc. Ces chiffres peuvent être combinés de différentes manières pour créer un design avec un visuel agréable. proportions (par exemple, une police de 24 pixels associée à une hauteur de ligne de 36 pixels).

Principes de mise en page de base

Depuis le début du Web, certains modèles de mise en page sont devenus des « normes ». Les exemples incluent la navigation principale en haut, la barre latérale gauche ou droite avec des informations supplémentaires ou des options de navigation, et le contenu du corps occupant le reste de l'espace.

Bien qu'il existe des écarts certains par rapport à cette mise en page de base (pas de navigation supérieure, pas de barre latérale, deux barres latérales, etc.), c'est souvent un pari assez sûr lors de la création d'une nouvelle mise en page. L'écart par rapport à ce modèle de base ne doit être fait que dans un but précis, en particulier par les concepteurs-développeurs nouveaux et inexpérimentés.

Créer un design prévisible - cela signifie généralement cohérent - fait beaucoup pour la convivialité d'un produit. S'écarter de ce qu'un utilisateur s'attend à voir lorsqu'il utilise un produit ne doit être fait que lorsque les gains d'utilisabilité sont supérieurs aux pertes.

Il est préférable de ne pas utiliser de titres bleus gras de 72 pixels sur une page, puis de titres rouges de 36 pixels sur une autre pour le même type de contenu, car la cohérence de la mise en page est essentielle. De même, un espacement (remplissage) entre le titre et le corps du texte de 36 pixels dans une section, puis de 32 pixels dans une autre créera une incohérence visuelle. Bien qu'une personne ne comprenne pas immédiatement pourquoi la différence est choquante, elle la sentira.

Semblable à l'échelle typographique mentionnée ci-dessus, l'espacement des éléments sur une échelle de 4, 8, 16, 24, 36, 48, 72 ou 108 pixels créera un design visuellement agréable. C'est une bonne idée d'utiliser suffisamment d'espace entre les éléments, de leur donner de l'espace pour respirer ; les nouveaux designers évitent souvent les espaces blancs et peuvent se retrouver avec des designs qui semblent encombrés et écrasants.

Certains peuvent se demander pourquoi l'échelle est espacée comme elle l'est. Pourquoi n'y a-t-il qu'une différence de 4 pixels entre les deux premiers nombres, mais un saut de 36 pixels entre les deux derniers ? La raison est simple : à petite échelle, une augmentation de 4 pixels est facilement identifiable (8 pixels c'est deux fois plus grand que 4, ce qui est facilement discernable). Mais avec des nombres plus grands, la différence entre 72 pixels et 76 pixels n'est pas facilement visible. Les différences plus importantes sont plus faciles à voir à mesure que les tailles augmentent.

Un espacement constant est l'une des raisons pour lesquelles les approches de conception basées sur la grille sont devenues si populaires. Commencer par une grille (généralement 12, 16 ou 24 colonnes) donne aux concepteurs un cadre dans lequel travailler qui gardera tout cohérent. Les gouttières intégrées entre les colonnes aident également à garantir que les différents éléments de conception et le contenu qu'ils contiennent ont une certaine marge de manœuvre.

Conclusion

Les concepteurs et les développeurs devraient se concentrer sur l'élargissement de leurs compétences afin de faire avancer leur carrière. Le temps que les développeurs passent à apprendre les principes de base de la conception leur fera gagner du temps à l'avenir lorsqu'ils travailleront avec des designers ou créeront leurs propres produits.

Une compréhension des principes de base de la conception (principes d'utilisabilité, théorie des couleurs, typographie, mise en page et UX) rendra également les développeurs meilleurs en matière de développement . Lorsqu'ils peuvent voir pourquoi les concepteurs font les choix qu'ils font, les développeurs peuvent mieux travailler avec les concepteurs pour créer des produits vraiment stellaires.

Pour en savoir plus sur le blog Toptal Design :

• Les principes de conception et leur importance
• Quelle quantité de codage les concepteurs doivent-ils connaître ?
• Un spectre de possibilités : le guide des couleurs de l'interface utilisateur
• Boostez votre UX avec ces principes de conception d'interaction réussis
• Design Foundations - Un guide de la hiérarchie visuelle (avec infographie)