Saviez-vous que nous avons un conférence en ligne sur la conception des produits à venir ? SPRINT portera sur la manière dont les concepteurs et les propriétaires de produits peuvent garder une longueur d’avance en ces temps sans précédent.
Même s’ils travaillent sur les mêmes projets et produits, les développeurs et les concepteurs travaillent souvent séparément 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. Le fait de ne pas avoir une connaissance de base du design peut freiner la carrière des développeurs ou les empêcher de poursuivre des projets simplement parce qu’ils n’ont pas de designer à leur bord.
Pourquoi les développeurs devraient apprendre le design
Alors que la conception et le développement sont souvent considérés comme des disciplines distinctes, il existe des personnes qui maîtrisent les deux. Même si quelqu’un ne s’intéresse qu’à être designer ou un 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 peuvent vouloir apprendre le design, ou au moins développer une base de connaissances de base en design.
Tout d’abord, les petites équipes peuvent ne pas avoir de concepteur attitré. De plus, il existe des développeurs qui veulent s’attaquer à des projets entièrement seuls, qui n’ont pas les moyens d’engager un concepteur (ou qui veulent dépenser l’argent ailleurs). Apprendre à concevoir leurs propres produits, au moins suffisamment bien pour se débrouiller jusqu’à ce qu’un designer peut ê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 découvrir ensuite que sa conception a été modifiée de manière significative 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 saboter 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 du fait que cela peut 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 rendraient service en apprenant à voir les conceptions à travers les « yeux d’un concepteur » plutôt que de les considérer uniquement sous l’angle du développement – la maîtrise de cette compétence améliorera grandement leurs projets.
Créer un esprit de design
Trop souvent, les développeurs qui apprennent à concevoir se concentrent trop sur l’esthétique des modèles qu’ils aiment et veulent imiter, plutôt que sur les principes sous-jacents qui soutiennent ces modèles. 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 en comprendre les raisons derrière ces choix.
Ils se mettent à 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 s’assurer que des choses comme la plomberie et l’électricité sont terminées), pour ainsi dire.
Il est important de comprendre et de respecter les principes qui sous-tendent les décisions prises par les designers. Toute personne qui débute dans le domaine du design doit bien comprendre les principes et les théories qui constituent un bon design – des choses comme Principes de la Gestalt et de base hiérarchie visuelle – avant qu’ils ne se contentent de plonger et de se mettre à pulvériser de la peinture partout.
Cela dit, il est également courant pour les nouveaux les concepteurs, qu’ils aient ou non une formation en développement, pour s’enliser dans la théorie. Ils passent tellement de temps à apprendre et à réfléchir qu’ils ne peuvent jamais mettre en pratique ce qu’ils apprennent.
Les concepteurs et les développeurs ont tendance à être perfectionnistes. Mais repousser les conceptions avant qu’elles ne soient parfait (puisqu’ils ne le seront probablement jamais) est important pour le processus. Les nouveaux créateurs, en particulier, doivent dépasser leurs incertitudes, faire connaître leur travail et tirer les leçons des réactions qu’ils reçoivent.
L’une des meilleures façons de vraiment apprendre le design est d’essayer recréer les dessins des autres. Savoir distinguer ce qui fonctionne de ce qui ne fonctionne pas et comprendre pourquoi un dessin ou modèle particulier est attrayant est l’une des compétences les plus précieuses qu’un nouveau designer ou un développeur puisse apprendre. Il est courant dans l’industrie de donner une tournure unique à un dessin ou modèle existant (comme en témoignent La fonction « Rebond » de Dribbble).
Conception dans le navigateur
Beaucoup de designers résistent à la conception directe dans le navigateur, car cela signifie généralement qu’ils doivent être à l’aise pour écrire au moins le code HTML et CSS de base. C’est la raison exacte pour laquelle c’est souvent une bonne solution pour les développeurs qui se lancent dans le design : ils sont déjà à l’aise pour écrire du code.
Il existe des outils qui peuvent aider à la conception dans le navigateur et qui peuvent faciliter la vie des concepteurs et des développeurs. Simple plugins de navigateur 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 leur permettre d’apporter des modifications au contenu et à la copie des dessins), et permet aux développeurs d’avoir accès aux dessins réels en temps réel. C’est une excellente option pour les développeurs-concepteurs qui veulent créer des conceptions et des systèmes de conception qui peuvent s’adapter au fil du temps.
Webflow est une autre option de conception dans le navigateur que les développeurs pourraient aimer. Si l’interface de conception est 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 un code propre). Webflow comprend des outils de conception et de mise en page, ainsi que des outils de 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 si elle n’est pas utilisable.
L’un des principes les plus importants de la convivialité 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, un texte souligné en bleu pour les liens cliquables, des menus de navigation complets et bien étiquetés, etc. L’espacement entre les éléments, la typographie et la palette de couleurs doivent également être cohérents.
D’autres principes de convivialité doivent être pris en compte dans chaque projet de conception, notamment 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), la flexibilité et l’efficacité, et une aide facilement disponible. Le groupe Nielsen Norman dispose de heuristique d’utilisation qu’il faut également garder à l’esprit.
Des évaluations de la convivialité doivent être menées tout au long du processus de conception et de développement pour s’assurer que le produit fonctionne comme l’équipe de conception et de développement l’a prévu, et que les utilisateurs ne sont pas désorientés. Les évaluations heuristiques consistent à comparer une liste de principes de conception prédéfinis qu’un produit devrait suivre avec le produit réel pour voir où se produisent les écarts (et ensuite à fixer ces écarts).
Une fois que la facilité d’utilisation a été bien comprise par rapport au produit en question, 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. Modifier légèrement les nuances peut modifier complètement l’impact visuel et l’effet émotionnel d’une couleur. C’est l’une des raisons pour lesquelles de nombreux concepteurs qui sont dans l’industrie depuis des années luttent encore avec la couleur.
Si de nombreux livres ont été écrits sur la théorie des couleurs, il y a quelques principes de base que les concepteurs-développeurs peuvent apprendre pour commencer. 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 comprennent le rouge, l’orange et le jaune. Les couleurs chaudes sont généralement vibrantes et énergisantes. Les couleurs froides comprennent le vert, le bleu et le violet. Ces couleurs sont généralement plus calmes et relaxantes.
Les neutres comprennent le blanc, le noir, le gris, le brun 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 rend les couleurs muettes et peut atténuer leur impact. Le noir assombrit les couleurs et peut les faire paraître 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 afin de mettre au point une palette finale et coordonnée pour leur conception.
Utilisation de la couleur HSL
Lorsqu’un designer pense aux couleurs du web, il pense souvent en termes de valeurs hexagonales. Bien que cela soit devenu la norme du secteur en termes de couleurs du web, les développeurs peuvent trouver que travailler avec des valeurs de couleurs HSL a plus de sens.
Pour la plupart des gens (concepteurs compris), les valeurs hexagonales ne semblent pas avoir de corrélation entre elles. Deux couleurs qui se ressemblent beaucoup peuvent avoir des valeurs hexagonales complètement différentes. Par exemple, #68B4D4 et #92C8E0 sont des tons de bleu assez similaires (l’un est simplement un peu plus clair et plus lumineux que l’autre) et pourtant leurs valeurs hexagonales n’ont aucune corrélation apparente.
Leurs valeurs HSL montrent cependant à quel point elles sont étroitement liées : #68B4D4 devient HSL (198, 58%, 62%) et 92C8E0 devient HSL (198, 56%, 73%). Le premier nombre de la séquence (198 dans ce cas) indique la teinte particulière. Le deuxième chiffre est le pourcentage de saturation (la luminosité ou la vivacité de la couleur). Le troisième chiffre est le pourcentage de clarté (ou de blanc ajouté) de la couleur.
Comme les corrélations entre les valeurs de couleur sont si facilement visibles avec la HSL par rapport à l’hexadécimal, les développeurs trouvent souvent que la manipulation des couleurs via le code avec la HSL est nettement plus facile.
Principes de la 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 des outils formidables qui peuvent 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 typographiques d’un dessin est essentielle pour rendre ce dessin plus utilisable.
Au minimum, un dessin doit comporter trois niveaux de hiérarchie typographique : les titres, les sous-titres et les polices de caractères du corps. Le titre doit être le plus visible, les sous-titres viennent ensuite, puis la police de caractères du corps, qui doit être très lisible.
De nombreux nouveaux concepteurs se concentrent trop sur la taille des caractères pour créer leur hiérarchie, et pas assez sur la police style. Parfois, au lieu de donner à un titre une taille nettement supérieure à celle d’un sous-titre, par exemple, un titre peut être mis en gras ou en majuscules, tandis que le sous-titre est laissé en majuscules et en poids normal. La couleur peut également être utilisée pour différencier les sous-titres et les titres, et entre ces éléments et le corps du texte.
Combinaison de différentes polices de caractères peut également semer la confusion chez de nombreux concepteurs, et pourtant c’est une façon courante de créer une hiérarchie visuelle. Il s’agit notamment de choisir des polices complémentaires (les contraires s’attirent souvent, mais dans une certaine mesure, la qualité de la combinaison des polices doit être déterminée en fonction de l’intuition qui est affinée avec le temps), de choisir des polices appropriées (n’utilisez pas Comic Sans sur un document juridique, par exemple, ou une police d’affichage pour le corps qui ne sera pas lisible dans les petites tailles), et de créer un contraste entre les polices (n’utilisez pas deux polices très similaires).
Une autre façon simple de combiner des polices est de choisir des polices parmi de grandes familles de polices. Il existe même des familles qui comprennent des versions avec et sans empattement qui fonctionnent bien ensemble (comme Mrs Eaves et Mr Eaves, Fedra, ou Museo et Museo Sans). Cela peut être le moyen le plus simple de commencer à vraiment expérimenter la combinaison de polices, car elles sont conçues pour bien s’harmoniser.
Lorsque l’on travaille avec des hiérarchies typographiques plus importantes (comme 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 établies les échelles typographiques.
Une échelle commune utilisée dans les deux typographies (et généralement dans les mises en page) est composée 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 dessin aux proportions visuelles agréables (par exemple, une police de 24 pixels combinée à une hauteur de ligne de 36 pixels).
Principes de base de la mise en page
Depuis le début du web, certains modèles de mise en page sont devenus des « normes ». Par exemple, la navigation principale en haut, à gauche ou à droite, avec des informations supplémentaires ou des options de navigation, et le corps du contenu qui occupe le reste de l’espace.
Bien qu’il y ait des écarts certains par rapport à cette mise en page de base (pas de navigation en haut, pas de barre latérale, deux barres latérales, etc. ), il est souvent assez sûr de s’écarter de ce schéma de base lors de la création d’une nouvelle mise en page. Les écarts par rapport à ce schéma de base ne doivent être faits que dans un but précis, en particulier par des concepteurs-développeurs nouveaux et inexpérimentés.
Créer un design qui est prévisible-ce qui signifie généralement cohérent-fait beaucoup pour l’utilisabilité d’un produit. Il ne faut s’écarter de ce qu’un utilisateur s’attend à voir lors de l’utilisation d’un produit que lorsque les gains en termes d’utilisabilité sont supérieurs aux pertes.
Il est préférable de ne pas utiliser des titres bleus en gras de 72 pixels sur une page, puis des 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. Même si une personne ne comprend pas immédiatement pourquoi la différence est discordante, elle le ressentira.
Comme pour l’échelle typographique mentionnée ci-dessus, des éléments d’espacement sur une échelle de 4, 8, 16, 24, 36, 48, 72 ou 108 pixels créeront un dessin visuellement agréable. Il est conseillé d’utiliser assez l’espace entre les éléments, 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 aussi espacée. Pourquoi n’y a-t-il qu’une différence de 4 pixels entre les deux premiers chiffres, 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 est deux fois plus grand que 4, ce qui est facilement discernable). Mais avec des chiffres plus importants, la différence entre 72 et 76 pixels n’est pas facilement visible. Les différences plus importantes sont plus faciles à voir lorsque la taille augmente.
L’espacement cohérent est l’une des raisons pour lesquelles les approches de conception basées sur la grille sont devenues si populaires. Commencer avec une grille (généralement de 12, 16 ou 24 colonnes) donne concepteurs un cadre de travail qui assure la cohérence de l’ensemble. Les gouttières intégrées entre les colonnes permettent également de s’assurer que les différents éléments de conception et le contenu qui s’y trouve ont une certaine marge de manœuvre.
Conclusion
Les concepteurs et les développeurs doivent s’efforcer d’élargir leurs compétences afin de faire progresser leur carrière. Le temps que les développeurs consacrent à l’apprentissage des principes de base du design leur permettra de gagner du temps à l’avenir lorsqu’ils travailleront avec des designers ou qu’ils créeront leurs propres produits.
Une compréhension des principes de base de la conception – principes d’utilisation, théorie des couleurs, typographie, mise en page et UX – permettra également aux développeurs de mieux 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.
Le Toptal Design Blog est un centre d’études avancées sur toutes les facettes de la conception numérique, allant des tutoriels de conception détaillés à la couverture approfondie des nouvelles tendances, outils et techniques de conception. Vous pouvez lire l’article original écrit par David Genger ici. Suivez le blog de Toptal Design sur Twitter, Dribbble, Behance, LinkedIn, Facebook, et Instagram.
Couverture de la Corona
Lisez notre couverture quotidienne sur la façon dont l’industrie technologique réagit au coronavirus et abonnez-vous à notre bulletin hebdomadaire Coronavirus in Context.
Pour des conseils et des astuces sur le travail à distance, consultez nos articles sur les quarts de croissance ici ou suivez-nous sur Twitter.
