Les dix principales règles de conception frontales pour les développeurs

En tant que développeurs front-end, notre travail consiste essentiellement à transformer les conceptions en réalité via le code. Comprendre et être compétent en matière de conception est un élément important de cela. Malheureusement, comprendre vraiment la conception frontale est plus facile à dire qu'à faire. Le codage et la conception esthétique nécessitent des compétences assez différentes. À cause de cela, certains développeurs front-end ne sont pas aussi compétents dans l'aspect conception qu'ils le devraient, et par conséquent, leur travail en souffre.

Mon objectif est de vous donner des règles et des concepts faciles à suivre, d'un développeur front-end à un autre, qui vous aideront à passer du début à la fin d'un projet sans gâcher ce sur quoi vos concepteurs ont travaillé si dur (ou éventuellement vous permettant même de concevoir vos propres projets avec des résultats décents).

Bien sûr, ces règles ne vous feront pas passer de mauvais à magnifique dans le temps qu'il faut pour lire un article, mais si vous les appliquez à votre travail, elles devraient faire une grande différence.

Faire des choses dans un programme graphique

Il est vraiment rare que vous terminiez un projet et que vous alliez du début à la fin tout en conservant chaque mutation esthétique dans les fichiers de conception. Et, malheureusement, les concepteurs ne sont pas toujours là pour trouver une solution rapide.

Par conséquent, il arrive toujours un moment dans tout travail frontal où vous finissez par devoir faire quelques ajustements liés à l'esthétique. Qu'il s'agisse de cocher la case qui s'affiche lorsque vous cochez la case ou de créer une mise en page que le PSD a manquée, les frontaux finissent souvent par gérer ces tâches apparemment mineures. Naturellement, dans un monde parfait, ce ne serait pas le cas, mais je n'ai pas encore trouvé de monde parfait, nous devons donc être flexibles.

Pour ces situations, vous devez toujours utiliser un programme graphique pour les maquettes. Peu m'importe l'outil que vous choisissez : Photoshop, Illustrator, Fireworks, GIMP, peu importe. N'essayez pas simplement de concevoir à partir de votre code. Passez une minute à lancer un vrai programme graphique et à déterminer à quoi il devrait ressembler, puis passez au code et réalisez-le. Vous n'êtes peut-être pas un concepteur expert, mais vous obtiendrez toujours de meilleurs résultats.

Faites correspondre le design, n'essayez pas de le battre

Votre travail n'est pas d'impressionner à quel point votre coche est unique ; votre travail consiste à le faire correspondre au reste de la conception.

Ceux qui n'ont pas beaucoup d'expérience en design peuvent facilement être tentés de laisser leur marque sur le projet avec des détails apparemment mineurs. S'il vous plaît laissez cela aux concepteurs.

Au lieu de demander "Est-ce que ma coche est magnifique ?" vous devriez vous demander : « Dans quelle mesure ma coche correspond-elle au design ? »

Votre objectif doit toujours être de travailler avec le design, pas d'essayer de le surpasser.

La typographie fait toute la différence

Vous seriez surpris de savoir à quel point l'aspect final d'un dessin est influencé par la typographie. Vous seriez tout aussi surpris d'apprendre le temps que les concepteurs y consacrent. Ce n'est pas une entreprise "pick-it-and-go", du temps et des efforts sérieux y sont consacrés.

Si vous vous retrouvez dans une situation où vous devez réellement choisir la typographie, vous devriez passer un temps décent à le faire. Allez en ligne et recherchez de bonnes combinaisons de polices. Passez quelques heures à essayer ces associations et assurez-vous d'obtenir la meilleure typographie pour le projet.

Si vous travaillez avec un design, assurez-vous de suivre les choix de typographie du designer. Cela ne signifie pas seulement choisir la police. Faites attention à l'espacement des lignes, à l'espacement des lettres, etc. Ne négligez pas l'importance de faire correspondre la typographie du design.

Assurez-vous également d'utiliser les bonnes polices au bon endroit. Si le concepteur utilise Georgia pour les en-têtes uniquement et Open Sans pour le corps, vous ne devriez pas utiliser Georgia pour le corps et Open Sans pour les en-têtes. La typographie peut facilement faire ou défaire l'esthétique. Passez suffisamment de temps à vous assurer que vous correspondez à la typographie de votre designer. Ce sera du temps bien dépensé.

La conception frontale ne tolère pas la vision en tunnel

Vous ferez probablement de petites parties de la conception globale.

Un exemple que j'ai utilisé consiste à cocher une conception qui inclut des cases à cocher personnalisées, sans les montrer cochées. Il est important de se rappeler que les pièces que vous fabriquez sont de petites parties d'une conception globale. Faites en sorte que vos vérifications soient aussi importantes qu'une coche sur une page devrait en avoir l'air, ni plus, ni moins. N'ayez pas une vision étroite de votre petite partie et faites-en quelque chose qu'elle ne devrait pas être.

En fait, une bonne technique pour ce faire consiste à prendre une capture d'écran du programme jusqu'à présent, ou des fichiers de conception, et de la conception qu'il contient, dans le contexte dans lequel il sera utilisé. De cette façon, vous voyez vraiment comment cela affecte les autres éléments de conception de la page et s'il correspond correctement à son rôle.

Relations et hiérarchie

Portez une attention particulière à la façon dont la conception fonctionne avec la hiérarchie. À quel point les titres sont-ils proches du corps du texte ? À quelle distance se trouvent-ils du texte au-dessus d'eux ? Comment le concepteur semble-t-il indiquer quels éléments/titres/corps de texte sont liés et lesquels ne le sont pas ? Ils feront généralement ces choses en regroupant le contenu lié, en utilisant des espaces blancs variables pour indiquer les relations, en utilisant des couleurs similaires ou contrastées pour indiquer le contenu lié/non lié, etc.

C'est votre travail de vous assurer que vous reconnaissez les façons dont la conception accomplit les relations et la hiérarchie et de vous assurer que ces concepts sont reflétés dans le produit final (y compris pour le contenu qui n'a pas été spécifiquement conçu et/ou le contenu dynamique). C'est un autre domaine (comme la typographie) où il est avantageux de prendre plus de temps pour s'assurer que vous faites du bon travail.

Soyez pointilleux sur les espaces blancs et l'alignement

C'est un excellent conseil pour améliorer vos conceptions et/ou mieux mettre en œuvre les conceptions des autres : si la conception semble utiliser des espacements de 20 unités, 40 unités, etc., assurez-vous que chaque espacement est un multiple de 20 unités.

C'est un moyen très simple pour quelqu'un qui n'a aucun sens de l'esthétique d'apporter rapidement une amélioration significative. Assurez-vous que vos éléments sont alignés au pixel près et que l'espacement autour de chaque bord de chaque élément est aussi uniforme que possible. Lorsque vous ne pouvez pas le faire (comme les endroits où vous avez besoin d'espace supplémentaire pour indiquer la hiérarchie), faites-en des multiples exacts de l'espacement que vous utilisez ailleurs, par exemple deux fois votre valeur par défaut pour créer une séparation, trois fois pour créer plus , etc.

De nombreux développeurs y parviennent pour un contenu spécifique dans les fichiers de conception, mais lorsqu'il s'agit d'ajouter/modifier du contenu ou d'implémenter du contenu dynamique, l'espacement peut aller partout car ils ne comprenaient pas vraiment ce qu'ils implémentaient.

Faites de votre mieux pour comprendre comment le concepteur a utilisé les espaces et suivez ces concepts dans votre build. Et oui, passez du temps là-dessus. Une fois que vous pensez que votre travail est terminé, revenez en arrière et mesurez l'espacement pour vous assurer que vous avez tout aligné et espacé uniformément autant que possible, puis essayez le code avec beaucoup de contenu varié pour vous assurer qu'il est flexible .

Si vous ne savez pas ce que vous faites, faites moins

Je ne fais pas partie de ces personnes qui pensent que chaque projet devrait utiliser un design minimaliste, mais si vous n'êtes pas confiant dans vos côtelettes de conception et que vous devez ajouter quelque chose, alors moins c'est plus.

Le designer s'est occupé de l'essentiel; vous n'avez qu'à faire des charges mineures. Si vous n'êtes pas très bon en conception, alors un bon pari est de faire le moins possible pour que cet élément fonctionne. De cette façon, vous injectez moins de votre propre design dans le travail du designer et vous l'affectez le moins possible.

Laissez le travail du designer occuper le devant de la scène et laissez votre travail passer au second plan.

Le temps nous rend tous fous

Je vais vous dire un secret sur les designers : 90 % (ou plus) de ce qu'ils mettent réellement sur papier, ou sur une toile Photoshop, ce n'est pas si génial.

Ils jettent bien plus que vous ne le voyez jamais. Il faut souvent de nombreuses révisions et bidouiller une conception pour l'amener au point où ils laisseraient même le gars dans la cabine suivante voir leur travail, sans parler du client réel. Vous ne passez généralement pas d'une toile vierge à un bon design en une seule étape ; il y a un tas d'itérations entre les deux. Les gens font rarement du bon travail tant qu'ils ne le comprennent pas et ne l'autorisent pas dans leur processus.

Alors, comment implémentez-vous cela? Une méthode importante consiste à prendre du temps entre les versions. Travaillez jusqu'à ce qu'il ressemble à quelque chose que vous aimez, puis rangez-le. Donnez-lui quelques heures (le laisser toute la nuit c'est encore mieux), puis rouvrez-le et jetez un coup d'œil. Vous serez étonné de voir à quel point il est différent avec des yeux neufs. Vous identifierez rapidement les domaines à améliorer. Ils seront si clairs que vous vous demanderez comment vous les avez peut-être manqués en premier lieu.

En fait, l'un des meilleurs designers que j'ai connus pousse cette idée beaucoup plus loin. Il commencerait par faire trois dessins différents. Ensuite, il attendrait au moins 24 heures, les regarderait à nouveau et les jetterait tous et repartirait de zéro sur un quatrième. Ensuite, il laissait un jour entre chaque itération au fur et à mesure que cela s'améliorait. Ce n'est que lorsqu'il l'ouvrit un matin et qu'il était totalement heureux, ou du moins, aussi proche qu'un designer puisse jamais être totalement heureux, qu'il l'envoya au client. C'était le processus qu'il utilisait pour chaque conception qu'il réalisait, et cela lui a très bien servi.

Je ne m'attends pas à ce que vous alliez aussi loin, mais cela met en évidence à quel point le temps passé sans "yeux sur le design" peut être utile. Il fait partie intégrante du processus de conception et peut apporter des améliorations à pas de géant.

Les pixels comptent

Vous devez faire tout ce qui est en votre pouvoir pour faire correspondre la conception originale de votre programme fini, jusqu'au dernier pixel.

Dans certains domaines, vous ne pouvez pas être parfait. Par exemple, votre contrôle sur l'espacement des lettres peut ne pas être aussi précis que celui du concepteur, et une ombre CSS peut ne pas correspondre exactement à celle de Photoshop, mais vous devez toujours essayer de vous en rapprocher le plus possible. Pour de nombreux aspects de la conception, vous pouvez vraiment obtenir une précision parfaite au pixel près. Cela peut faire une grande différence dans le résultat final. Un pixel ici et là ne semble pas beaucoup, mais cela s'additionne et affecte l'esthétique globale beaucoup plus que vous ne le pensez. Alors gardez un œil dessus.

Il existe un certain nombre d'[outils] qui vous aident à comparer les conceptions originales aux résultats finaux, ou vous pouvez simplement prendre des captures d'écran et les coller dans le fichier de conception pour comparer chaque élément aussi étroitement que possible. Placez simplement la capture d'écran sur le dessin et rendez-la semi-transparente afin que vous puissiez voir les différences. Ensuite, vous savez combien d'ajustements vous devez faire pour l'obtenir.

Avoir un retour

Il est difficile d'acquérir un «œil pour le design». C'est encore plus difficile de le faire soi-même. Vous devriez demander l'avis des autres pour vraiment voir comment vous pouvez apporter des améliorations.

Je ne vous suggère pas d'attraper votre voisin et de lui demander conseil, je veux dire que vous devriez consulter de vrais designers et les laisser critiquer votre travail et proposer des suggestions.

Il faut du courage pour le faire, mais en fin de compte, c'est l'une des choses les plus puissantes que vous puissiez faire pour améliorer le projet à court terme et pour améliorer votre niveau de compétence à long terme.

Même si tout ce que vous avez à régler est une simple coche, de nombreuses personnes sont prêtes à vous aider. Qu'il s'agisse d'un ami designer ou d'un forum en ligne, recherchez des personnes qualifiées et obtenez leurs commentaires.

Cela peut sembler prendre du temps et provoquer des frictions entre vous et vos concepteurs, mais dans l'ensemble, cela en vaut la peine. Les bons développeurs front-end s'appuient sur les précieuses contributions des concepteurs, même lorsque ce n'est pas quelque chose qu'ils aiment entendre.

Par conséquent, il est essentiel de construire et de maintenir une relation constructive avec vos designers. Vous êtes tous dans le même bateau, donc pour obtenir les meilleurs résultats possibles, vous devez collaborer et communiquer à chaque étape du processus. L'investissement dans la création de liens avec vos concepteurs en vaut la peine, car cela aidera tout le monde à faire un meilleur travail et à tout exécuter à temps.

Conclusion

Pour résumer, voici une courte liste de conseils de conception pour les développeurs front-end :

• Conception dans un programme graphique. Ne concevez pas à partir de code, pas même les petites choses.
• Faites correspondre le design. Soyez conscient du design original et n'essayez pas de l'améliorer, faites-le simplement correspondre.
• La typographie est énorme. Le temps que vous passez à vous assurer que c'est juste devrait refléter son importance.
• Évitez la vision en tunnel. Assurez-vous que vos ajouts se démarquent autant qu'ils le devraient. Ils ne sont pas plus importants simplement parce que vous les avez conçus.
• Relations et hiérarchie : comprenez comment elles fonctionnent dans la conception afin de pouvoir les mettre en œuvre correctement.
• Les espaces et l'alignement sont importants. Rendez-les précis au pixel près et uniformisez-les dans tout ce que vous ajoutez.
• Si vous n'êtes pas sûr de vos compétences, faites en sorte que vos ajouts soient aussi minimalistes que possible.
• Prenez du temps entre les révisions. Revenez plus tard pour voir votre travail de conception avec des yeux neufs.
• La mise en œuvre au pixel près est importante dans la mesure du possible.
• Soit brave. Cherchez des designers expérimentés pour critiquer votre travail.

Tous les développeurs front-end ne seront pas des concepteurs fantastiques, mais chaque développeur front-end devrait au moins être compétent en termes de conception.

Vous devez comprendre suffisamment les concepts de conception pour identifier ce qui se passe et appliquer correctement la conception à votre produit final. Parfois, vous pouvez vous en tirer avec une copie aveugle si vous avez un concepteur minutieux (et si vous êtes suffisamment orienté vers les détails pour vraiment le copier pixel par pixel).

Cependant, pour que les grands projets brillent à travers de nombreuses variantes de contenu, vous devez comprendre ce qui se passe dans la tête du concepteur. Vous n'avez pas seulement besoin de voir à quoi ressemble le design, vous devez savoir pourquoi il ressemble à cela , et de cette façon vous pouvez être conscient des limitations techniques et esthétiques qui affecteront votre travail.

Ainsi, même en tant que développeur front-end, une partie de votre auto-amélioration régulière devrait toujours inclure l'apprentissage de la conception.