Saviez-vous que nous avons une conférence en ligne sur la conception des produits à venir? SPRINT expliquera comment 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 les uns à côté des autres. en 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 type de réflexion peut nuire à la relation développeur-designer. Ne pas avoir une connaissance de base du design peut retenir les développeurs dans leur carrière ou les empêcher de poursuivre des projets simplement parce qu'ils n'ont pas de designer à bord.
Pourquoi les développeurs devraient apprendre le design
Bien que la conception et le développement soient souvent considéré comme des disciplines distinctes, il y a des gens qui maîtrisent les deux. Même si quelqu'un souhaite uniquement être concepteur ou 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 veulent apprendre le design, ou au moins développer une base de connaissances en design.
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 de l'argent ailleurs). Apprendre à concevoir leurs propres produits, au moins assez bien pour s'en sortir jusqu'à ce qu'un designer puisse être embauché est une ressource inestimable.
L'autre grande raison pour les développeurs d'apprendre le design est afin qu'ils puissent travailler plus efficacement avec les concepteurs. Il est extrêmement frustrant pour un concepteur de remettre un fichier entièrement conçu pour un site Web ou une application qu'il s'attend à ce qu'il soit parfait au pixel près dans le produit fini, pour constater que leur conception a été considérablement modifiée par le développeur qui l'a codé. [19659011] Si les développeurs ne comprennent pas les bases de la conception, ils peuvent ignorer les 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 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 rendraient service en apprenant voir les conceptions à travers les «yeux d'un concepteur» plutôt que de les regarder uniquement dans une perspective de développement – maîtriser 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 derrière ces choix.
Ils commencent à pulvériser de la peinture sur les murs et la décoration de l'espace sans comprendre le but des espaces qu'ils décorent (ou même en s'assurant que les choses comme la plomberie et les travaux électriques sont finis), pour ainsi dire.
Il est important de comprendre et de respecter les principes qui expliquent pourquoi les concepteurs prendre les décisions qu'ils font. Toute personne nouvelle dans la conception a besoin d'une solide compréhension des principes et des théories qui composent une bonne conception – des choses comme Principes de Gestalt et de base hiérarchie visuelle – avant de plonger et de commencer à pulvériser de la peinture partout.
Cela dit, il est également courant que les nouveaux designers qu'ils aient ou non une formation en développement, s'enlisent dans la théorie. Ils passent tellement de temps à apprendre et à penser à des choses qu'ils n'arrivent jamais à appliquer ce qu'ils apprennent.
Les concepteurs et les développeurs ont tendance à être perfectionnistes. Mais repousser les dessins avant qu'ils ne soient parfaits (car ils ne le seront probablement jamais) est important pour le processus. Les nouveaux créateurs en particulier, doivent dépasser leurs insécurités, diffuser leur travail 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 dessins d'autres. Séparer 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 concepteur ou développeur puisse apprendre. Il est courant de donner une tournure unique à une conception existante dans l'industrie (en témoigne la fonction «Rebound» de Dribbble ).
Conception dans le navigateur
Beaucoup de 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 cela 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 à concevoir dans le navigateur et faciliter la vie des concepteurs et des développeurs. De simples 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 [19659014] qui agissent comme un outil de conception complet dans le navigateur. Figma permet aux concepteurs de collaborer, d'envoyer des actifs aux parties prenantes (et même de les laisser apporter des modifications au contenu et à la copie des conceptions), et permet aux développeurs d'avoir accès aux conceptions réelles en temps réel. C'est une excellente option pour les développeurs-concepteurs 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 adorer. Bien que l'interface de conception soit visuelle, le code exporté est propre, CSS et HTML sémantique 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 l'utilisabilité de base. La conception la plus esthétique du monde est inutile si elle 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, le texte souligné en bleu pour les liens cliquables, les menus de navigation qui sont 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 d'utilisation qui doivent être pris en compte dans chaque projet de conception inclure des éléments comme la prévention des erreurs (et des messages d'erreur informatifs lorsque des erreurs se produisent), un langage familier (utilisez 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. Nielsen Norman Group a d'autres heuristiques d'utilisation qui doivent également être gardées à l'esprit.
Des évaluations de l'utilisabilité doivent être effectuées tout au long du processus de conception et de développement pour s'assurer que le produit fonctionne de la manière l'équipe de conception et de développement voulue, et que les utilisateurs ne soient pas confus. Les évaluations heuristiques impliquent de comparer une liste de principes de conception prédéfinis qu'un produit devrait suivre avec le produit réel pour voir où les écarts se produisent (puis corriger ces écarts).
Une fois que la convivialité a été complètement compris par rapport au produit en question, les concepteurs-développeurs peuvent passer aux aspects plus visuels de la conception.
Théorie des couleurs de base
La théorie des couleurs est l'un des aspects les plus complexes de conception visuelle. Changer légèrement les nuances peut complètement changer l'impact visuel et l'effet émotionnel d'une couleur. C'est une des raisons pour lesquelles de nombreux designers qui travaillent dans l'industrie depuis des années ont encore du mal avec la couleur.
Alors que de nombreux livres ont été écrits sur la théorie des couleurs il existe des 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éables peut être créée assez facilement.
Premièrement, 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.
Une fois qu'un concepteur a une compréhension de base des significations de couleur, il peut utiliser des outils comme [19659079] Coolors Design Seeds ou Colormind pour créer une palette finale et coordonnée pour leur conception.
Utilisation de HSL couleur
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 que travailler avec les valeurs de couleurs HSL a plus de sens.
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 tout simplement un peu plus claire 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 nombre 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 luminosité de la couleur). Le troisième nombre 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. [19659092] Principes de typographie
La typographie est un autre domaine qui peut faire trébucher même les concepteurs expérimentés. Mais comme la théorie des couleurs, il existe d'excellents outils qui peuvent aider.
La hiérarchie typographique est l'une des premières choses qu'un concepteur-développeur devrait apprendre. La relation entre différents éléments de type dans un dessin est essentielle pour rendre ce dessin plus utilisable.
À tout le moins, un dessin doit avoir trois niveaux de hiérarchie typographique: titres, sous-titres et polices de corps. Le titre devrait être le plus visible visuellement, les sous-titres viennent ensuite, puis la police du corps, qui devrait être très lisible.
Beaucoup de nouveaux concepteurs se concentrent trop sur la taille de la police dans la création de leur hiérarchie, et pas assez sur la police style . Parfois, plutôt que de rendre un titre significativement 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é dans la casse du titre et le poids normal. La couleur peut également être utilisée pour faire la différence entre les sous-titres et les 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 une façon courante de créer un hiérarchie visuelle. Ils comprennent le choix de polices complémentaires (les opposé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). exemple, ou une police d'affichage pour le type de corps qui ne sera pas lisible à des tailles plus petites), et créant un contraste entre les polices de caractères (n'en utilisez pas deux qui sont très similaires).
Une autre façon simple de combiner les polices consiste à sélectionner des polices dans de grandes familles de polices. Il existe même des familles qui incluent des versions d'affichage, serif et sans serif qui fonctionnent bien ensemble (comme Mme Eaves et M. Eaves, Fedra, ou Museo et Museo Sans). Cela peut être le moyen le plus simple de commencer à vraiment expérimenter avec la combinaison de polices car elles sont conçues pour bien paraître ensemble.
Lorsque vous travaillez avec des hiérarchies typographiques plus grandes (telles que l'ajout de H1, H2, H3, H4, etc.), c'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 dans les deux typographies (et généralement dans les dispositions 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 des proportions visuelles agréables (par exemple, une police de 24 pixels combinée à une hauteur de ligne de 36 pixels). [19659106] 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 dans la barre latérale supérieure, 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 disposition de base (pas la navigation supérieure, pas de barre latérale) , deux barres latérales, etc.), il s'agit souvent d'une valeur relativement sûre lors de la création d'une nouvelle mise en page. La déviation par rapport à ce modèle de base ne doit être faite que dans un but, en particulier par les concepteurs-développeurs nouveaux et inexpérimentés.
Création d'un design qui est prévisible – cela signifie généralement cohérente – fait beaucoup pour l'utilisabilité d'un produit. Dévier de ce qu'un utilisateur attend de voir lors de l'utilisation d'un produit ne doit être fait que lorsque les gains de convivialité 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 36 pixels sur une autre pour le même type de contenu, car la cohérence de la mise en page est la clé. 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 choquante, elle la ressentira.
Semblable à l'échelle typographique mentionnée ci-dessus, les éléments d'espacement sur une échelle de 4, 8, 16, 24, 36, 48, 72 ou 108 pixels créeront un design visuellement agréable. C’est une bonne idée d’utiliser suffisamment d’espace entre les éléments, de leur laisser de la place pour respirer; les nouveaux concepteurs évitent souvent les espaces blancs et peuvent se retrouver avec des conceptions qui semblent encombrées et écrasantes.
Certains peuvent se demander pourquoi l'échelle est espacée comme elle 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 est deux fois plus grand que 4, ce qui peut être facilement discerné). Mais avec de plus grands nombres, la différence entre 72 pixels et 76 pixels n'est pas facilement visible. De plus grandes différences sont plus faciles à voir lorsque les tailles augmentent.
L'espacement constant est l'une des raisons pour lesquelles les approches de conception basées sur une grille sont devenues si populaires. Le fait de 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 poursuivre leur carrière. Le temps que les développeurs passent à apprendre les principes de base de la conception permettra de gagner du temps à l'avenir lorsqu'ils travailleront avec des designers ou créeront leurs propres produits.
Compréhension des principes de base de la conception – principes d'utilisabilité, théorie des couleurs, typographie, mise en page et UX — amélioreront également les développeurs en développement . Quand 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 une plaque tournante pour les études de conception avancées par des designers professionnels du réseau Toptal sur toutes les facettes de la conception numérique, allant des tutoriels de conception détaillés à une couverture approfondie des nouvelles tendances, outils et techniques de conception. Vous pouvez lire la pièce originale écrite par David Genger ici . Suivez le blog Toptal Design sur Twitter Dribbble Behance LinkedIn Facebook et Instagram .
Couverture Corona
Lisez notre couverture quotidienne sur la façon dont l'industrie technologique réagit au coronavirus et abonnez-vous à notre newsletter hebdomadaire Coronavirus in Context .
Pour obtenir des conseils et astuces pour travailler à distance, consultez nos articles Growth Quarters ici ou suivez-nous sur Twitter .
Source link