Aux concepteurs avec amour (lettre d'un développeur front-end)

Chers créateurs,

Cette lettre couvait depuis des années. Des parties de celui-ci ont été livrées oralement et par écrit à divers concepteurs sur une longue période.

Cependant, j'ai toujours redouté de le publier de peur que cela n'implique le designer ou le client actuel avec qui je travaille. Avant de poursuivre, j'aimerais souligner qu'il ne s'agit pas d'un grief spécifique, mais plutôt d'une liste détaillée de 18 ans de désaccords.

Nous travaillons ensemble depuis près de deux décennies, et chaque fichier PSD que vous m'avez envoyé a eu (plus ou moins) les mêmes problèmes. Pardonne-moi donc l'indécence d'essayer de t'enseigner ton métier.

Je n'ai pas la prétention de vous enseigner le graphisme ou l'esthétique. Je ne m'attarderai pas sur la typographie, la lisibilité ou l'utilisation des espaces blancs.

Au lieu de cela, j'aimerais expliquer comment les fruits de votre travail informent le mien.

J'aimerais vous rappeler ce qui est nécessaire pour reproduire des conceptions sous forme de pages Web au pixel près. J'aimerais vous expliquer comment vos fichiers de conception seront utilisés pour la documentation et comment les images que vous créez déterminent les technologies utilisées, jusqu'aux niveaux de base d'évolutivité et de performances.

De plus, j'aimerais démontrer ce qui peut être fait rapidement et facilement et ce qui générera des frais généraux qui entraîneront l'ensemble de la production à un crawl.

Et surtout, j'aimerais vous rappeler que l' image que vous créez en ce moment sera transformée en une chose vivante qui interagit et répond, qui communique avec des milliers d'individus différents, qui a besoin de leur enseigner et d'apprendre de eux de la manière la plus simple possible. A la fois pour elle et pour eux.

Conception pour la documentation

Tout d'abord, je voudrais vous rappeler que les fichiers PSD que vous produisez ne sont pas seulement la source des images que le client doit approuver, ils sont aussi de la documentation technique et des matériaux sources pour les développeurs. Par conséquent, veuillez garder vos calques et groupes bien rangés, organisés et nommés .

Annotez votre conception. Créez un fichier séparé avec les conventions que vous avez utilisées ou notez-les dans un calque caché séparé.

Dites-moi quelles polices vous avez utilisées pour quoi. Faites-moi savoir quelles couleurs, espacements et contextes utiliser. J'ai besoin de savoir.

J'ai également besoin de savoir quoi extrapoler si aucune conception n'a été faite pour une fonctionnalité spécifique.

Je suppose que ce que j'essaie de dire est : si possible , créez un bref guide de style pour le produit que vous concevez.

Pour nous deux, lors de l'ajout de blocs de texte standard - tels que des titres - ajoutez un rectangle derrière eux pour indiquer l'espacement autour d'eux. Cela devrait vous permettre de les placer de manière cohérente à chaque fois. Si c'est trop de travail, indiquez au moins quel exemple dans le document est canon.

Je ne peux pas vous dire à quelle fréquence je trouve que les titres sont placés à l'œil afin qu'ils correspondent visuellement à l'instance unique dans laquelle ils sont placés, mais lorsqu'ils sont mesurés, ils révèlent que chacun a son propre espacement individuel.

Il en va de même pour les blocs de contenu. Si vous avez une liste de différents blocs de contenu, veuillez les espacer de manière cohérente.

Je vous en dirai plus dans la section Conception pour le contenu , mais ne présumez pas que vos titres seront toujours sur une seule ligne et utilisez ces informations dans le fichier.

Je continue à rencontrer ces titres qui ont une taille de police de 22 pixels et une hauteur de ligne de 92 pixels (évidemment copier et coller à partir du titre de la page principale). Les paramètres que vous choisissez sont pertinents même s'ils ne modifient pas visuellement le fichier exporté.

Concevoir pour la technologie

Il y a deux aspects à cela : ce qui peut être fait et ce qui est approprié pour le support.

Alors que nous atteignons rapidement le point où tout sera techniquement possible pour le développement de sites Web (si rien d'autre, je peux toujours le dessiner pixel par pixel en utilisant canvas), beaucoup de ces solutions ne sont pas prêtes pour la production.

Le fait que vous ayez trouvé un exemple où quelqu'un a réussi à combiner WebGL 3D avec un flou CSS plus des masques de filtrage pour une page de démonstration ne signifie pas que vous pouvez l'utiliser comme panneau de parallaxe pleine fenêtre dans une application à une seule page.

Et si vous voulez vraiment marcher à la pointe de la technologie, veuillez consulter votre développeur avant de soumettre la conception pour approbation. Sinon, il sera difficile d'amener le client à se contenter de moins.

Si vous voulez vraiment tester les bords, et si vous voulez l'essayer pour le plaisir, contactez-moi en privé. J'aime créer des choses comme ça autant que vous. Ne mettez pas tout cela dans un projet de production budgétisé.

Au-delà de ces choses - au-delà de tester les limites de ce qui peut être fait, essayez d'être sensible et sensé par rapport à ce qui doit être fait .

Vous n'êtes pas un graphiste ; Vous êtes plus que cela, vous êtes un designer.

Vous ne le concevez pas seulement pour qu'il ait une certaine apparence, vous devez également le concevoir pour qu'il fonctionne d'une certaine manière, communique et se comporte d'une certaine manière.

Pour reprendre le cliché familier aux designers du monde entier : à quoi sert une chaise magnifique si personne ne peut s'asseoir dessus ?

Vous devez intégrer la vitesse de chargement, la vitesse d'exécution et la facilité d'utilisation dans votre conception pour qu'elle soit une conception plutôt qu'une image.

Essayez d'en faire le plus possible avec uniquement HTML et CSS. Évitez d'utiliser les fonctionnalités attrayantes disponibles dans Photoshop. N'utilisez pas de mélange ! N'utilisez pas de faux gras et de faux italique.

À moins que vous ne vouliez que l'élément soit une image, n'utilisez pas du tout de filtres - autres que les ombres les plus simples.

Ne me faites pas calculer ou choisir les couleurs parce que vous avez utilisé des remplissages de couleurs mélangées. Veuillez ne pas simuler des images transparentes en utilisant le mélange de superposition ; J'ai en fait besoin d'une image transparente sur le site.

Si nous utilisons un framework frontal, tel que Bootstrap, bon nombre de ces problèmes seront déjà résolus, alors apprenez comment cela se fait et comment il peut être modifié. N'allez pas simplement concevoir quelque chose sans rapport.

Si votre conception n'est pas conforme à ce que fait le cadre, sa mise en œuvre n'implique pas la mise en œuvre de la conception. Au lieu de cela, nous finissons par remplacer sélectivement le cadre, afin qu'il ne dérange pas notre conception et que nous l'implémentions ensuite à partir de zéro. La charge de travail double au lieu de diminuer de moitié.

Et enfin, n'utilisez pas plus de trois polices – ou variantes de police – sur le site. Si vous avez besoin de six poids différents, chacun avec ses propres variantes régulières et italiques, vous ne concevez plus pour le Web.

Concevoir pour l'interactivité

C'est énorme. Et cette lettre a été écrite à l'origine exclusivement pour ce sujet. Vous devez vraiment connaître et comprendre toutes les façons dont les utilisateurs et les fonctionnalités peuvent interagir.

Commençons par les choses les plus simples : les liens.

Les liens n'ont pas uniquement deux états.

Dans la navigation que je reçois, vous fournissez toujours des conceptions de liens et un lien actif (page actuelle).

Dans d'autres cas, vous fournissez généralement des états de base et de survol .

Si vous voulez être le moins du monde convivial, vous devez avoir des conceptions distinctes pour les états de base, de survol et de mise au point ( visité et actif sont également agréables à avoir pour UX). Et pour la navigation, un lien et un lien actif ont chacun tous les états ci-dessus .

Oh, et n'osez pas modifier la disposition des liens entre les états (largeur de bordure variable, remplissage, etc.).

De même, s'il ne ressemble pas à un bouton, il n'a pas d'arrière-plan. Point final. Le rembourrage d'un élément de texte en ligne est un gâchis, et les arrière-plans de texte non rembourrés ne suffiront jamais.

Puisque nous allons l'utiliser sur mobile, assurez-vous qu'il y a suffisamment d'espace entre les éléments interactifs séparés et que chaque hitbox est suffisamment grand. Je pense qu'un minimum de 42px sur chaque axe est la norme.

Dessinez un rectangle invisible ou un calque masqué affichant les hitbox ; assurez-vous qu'ils ne se chevauchent pas et que les interactions des utilisateurs sont sans ambiguïté.

Les éléments de formulaire sont encore pires.

Le cas le plus courant que je vois concerne les boutons radio et les cases à cocher. Les standards sont moches ! Donc, vous concevez le vôtre, et donnez-moi un état coché et un état non coché, et considérez que vous avez terminé.

Cependant, il existe un tableau multidimensionnel complet d'états pour une case à cocher, et chacun doit être indiqué visuellement à l'utilisateur.

Nous avons les états suivants :

• Coché ou décoché
• Planer ou pas
• Focus ou pas
• Activé ou désactivé
• Erreur ou pas

Chacun de ceux-ci peut se combiner avec les autres.

Disabled empêche certaines combinaisons (le survol et le focus ne sont généralement pas pertinents lorsqu'ils sont désactivés), mais pas tous (checked-disabled-error est un état parfaitement valide et informatif pour une case à cocher). Nous nous retrouvons donc avec 16 états activés et quatre états désactivés, ce qui donne un total d'au moins 20 états distincts. Par exemple, les états que vous me donnez habituellement sont cochés-non-non-activés-non et décochés-non-non-activés-non dans cette configuration.

D'autres éléments de formulaire peuvent ne pas avoir un état coché-décoché mais peuvent être vides ou non vides (affichant un texte d'espace réservé). Ils peuvent également avoir un état informationnel plus complexe, de sorte que le cas d'erreur ou non peut être aussi complexe que le succès d'erreur d'avertissement neutre.

Ensuite, en plus de cela, vous devriez avoir des indicateurs obligatoires ou facultatifs ainsi qu'une mise en page et une conception clairement définies pour les étiquettes, l'aide à la saisie et le texte d'erreur.

Et, si vous voulez vraiment être convivial, vous avez besoin d'états immaculés, indiquant que l'utilisateur n'a jamais fourni les données, ou que les données sont déjà stockées, ou ont été modifiées mais pas encore stockées.

Ce que je dis, c'est : Concevoir pour l'interactivité est difficile. Et si vous voulez changer l'apparence des boutons radio, ne le faites pas avec désinvolture avec deux états.

Juste un dernier point sur la conception pour l'interactivité : Décidez à quoi ressemble l'interaction. Autrement dit, décidez des conventions que vous allez utiliser pour les éléments interactifs et ne les utilisez sur rien d'autre.

Non, vous n'êtes pas autorisé à utiliser la couleur principale de votre marque pour indiquer des liens, surtout si vous utilisez la même solution pour accentuer un contenu important !

Concevoir pour le contenu

La disposition idéale de chaque élément rempli de contenu Lipsum est suffisamment bonne pour présenter au client une image afin d'obtenir une approbation sur le style visuel. Mais la conception du contenu ne commence ni ne s'arrête là.

Une fois que vous avez une idée approximative de ce que vous voulez faire avec la mise en page du contenu, rappelez-vous que vous travaillez avec du contenu dynamique. Il y a deux cas que vous devez vérifier pour chaque élément de contenu :

• Et s'il y en a trop ?
• Et s'il y en a trop peu (ou s'il manque complètement) ?

Vérifiez ce qui se passe si le titre est ridiculement court ou anormalement long. À quoi doit ressembler le bloc de contenu s'il manque des éléments cruciaux ? Et s'il n'y a pas d'image ?

S'il n'y a pas de contenu pour une section de page, supprimons-nous toute la section - titre, conteneur et tout - ou conservons-nous la section et affichons-nous quelque chose du type : "Aucun article pour le moment, revenez plus tard ?" Encore mieux : « Souhaitez-vous être averti lorsque ce contenu arrivera ? Inscrivez-vous à notre newsletter !”

Prenez les décisions ! Alors concevez ces choses!

Si vous concevez un flux ou un contenu chargé à partir d'une source externe ou dynamique, n'oubliez pas d'inclure toutes les erreurs et notifications. En fait, concevez le méta-contenu de notification de la page pour montrer à quoi il ressemble globalement, puis respectez ces conventions de conception pour informer l'utilisateur en cas de problème.

Évitez les boutons à largeur fixe et les blocs de texte à hauteur fixe. Et, si je ne l'ai pas dit auparavant, si vous pensez que ce sera toujours une ligne de texte, vous vous trompez ! Maintenant, allez vérifier la meilleure façon de le rendre multiligne.

Assurez-vous que le même contenu a la même structure.

Si le même titre est visible à plusieurs endroits, ne mettez pas en gras un mot dans une case et un autre ailleurs !

En fait, essayez d'éviter complètement les structures de formatage dans les titres. De même, ne cassez pas le texte manuellement à un endroit, mais cassez-le différemment à un autre. En fait, ne cassez pas le texte manuellement !

Ces choses peuvent améliorer votre conception, mais rappelez-vous que le contenu sera très probablement saisi via un CMS, et la personne qui le saisit peut ne pas voir à quoi il ressemble jusqu'à ce qu'il soit publié, ou peut même ne pas avoir les outils pour casser manuellement, ou formater le texte.

Concevez avec les mêmes restrictions que le contenu final - conteneurs de texte à largeur fixe et retour à la ligne automatique. Si ça a l'air moche de cette façon, le design n'est pas bon.

Concevoir pour la réactivité

Cela a beaucoup progressé ces derniers temps. Au moins dans les cas où le mobile est réellement conçu. De plus en plus, nous laissons bootstrap le comprendre et plaquons des pansements sur les fissures.

Quoi qu'il en soit, il y a quelques principes simples que vous devez connaître.

Premièrement, les variantes mobiles et de bureau ne sont pas des pages distinctes. Je sais que tu sais ceci. Ce sont simplement des refusions de la même page.

En termes simples, c'est la même chose que de travailler avec du texte aligné à gauche. La phrase ne change pas l'ordre des mots ou des lettres simplement parce que vous l'avez placée dans un conteneur plus petit.

En outre, les groupes de contenu doivent être partagés entre toutes les mises en page. Lorsque vous ajoutez des colonnes, assurez-vous que les sauts de colonne sont cohérents.

De plus, vos conventions doivent suivre la même structure pour différentes versions de la page. Cela signifie que si deux éléments semblent identiques sur un ordinateur de bureau, ils doivent également être identiques sur mobile.

Oh, et si vous voulez de la parallaxe, veuillez fournir une image suffisamment grande pour se déplacer. Si vous adaptez ou recadrez l'image pour qu'elle apparaisse correctement sur le fichier que vous montrez au client, alors je n'ai rien à déplacer.

Concevoir des exceptions

Bien sûr, des exceptions sont toujours possibles. De plus, ils sont nécessaires pour que le produit soit attrayant et efficace. Cependant, ne les ajoutez pas au premier passage case par case.

Si vous vous retrouvez à résoudre le même problème de conception encore et encore, cela ne fonctionnera pas, surtout si vous optez pour une solution différente à chaque fois.

Une fois que vous avez fait tout ce qui précède, vous devriez obtenir une conception efficace, stable et cohérente (bien qu'un peu ennuyeuse). Il est maintenant temps de pimenter les choses. En regardant une page dans son ensemble, parlez au client pour identifier les moneyshots - les articles qui lui rapporteront le plus pour son argent.

Nous travaillons ensemble depuis des années et nos clients ont toujours été satisfaits du résultat final.

Bien sûr, je vais intervenir si vous manquez quelques-uns de ces points, et lorsque l'utilisation d'un design complexe est justifié, je vais écrire la logique de rendu en JavaScript si j'en ai besoin.

J'interviendrai et justifierai le travail supplémentaire auprès du client si nécessaire. Heck, je conçois des formulaires et de l'interactivité en plus des conceptions reçues depuis des lustres, donc ce ne sera pas un problème.

J'espère juste qu'après avoir lu ceci, vous garderez certains de ces conseils à l'esprit la prochaine fois que nous travaillerons ensemble. J'espère qu'ils éclaireront votre travail et vous fourniront des conseils lorsque vous ne savez pas quoi faire. J'aimerais que vous compreniez que notre relation compte pour moi et que je n'ai pas écrit ceci pour vous blesser, mais pour améliorer notre relation.

Avec amour,

Votre développeur front-end