Chers designers,
Cette lettre se prépare depuis des années. Certaines parties ont été prononcées oralement et par écrit à divers designers sur une longue période.
Cependant, j’ai toujours redouté de le publier par crainte que cela impliquerait le concepteur ou le client actuel avec lequel je travaille. Avant de continuer, 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 années 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. Pardonnez-moi donc l'indécence d'essayer de vous enseigner votre métier.
Je n'ai pas la prétention de vous enseigner le graphisme ou l'esthétique. Je n'entrerai pas dans la typographie, la lisibilité ou l'utilisation des espaces blancs.
Au lieu de cela, je voudrais expliquer comment les fruits de votre travail influencent le mien.
Je voudrais vous rappeler ce qui est nécessaire pour reproduire des conceptions sous forme de pages Web au pixel près. Je voudrais vous dire 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 montrer ce qui peut être fait rapidement et facilement et ce qui générera des frais généraux qui entraîneront une analyse complète de la production.
Et surtout, je voudrais vous rappeler que le image vous créez en ce moment sera transformé en un être vivant qui interagit et répond, qui communique avec des milliers d’individus différents, qui a besoin de leur apprendre et d’apprendre d’eux de la manière la plus simple possible. Tant pour lui que pour eux.
Conception pour la documentation
Tout d'abord, je voudrais vous rappeler que le Fichiers PSD que vous produisez ne sont pas seulement la source des images que le client doit approuver, elles sont aussi documentation technique et matériaux d'origine pour les développeurs. Par conséquent, veuillez conserver vos calques et groupes rangé, organisé et nommé .
Annotez votre conception. Créez un fichier séparé avec les conventions que vous avez utilisées ou notez-les dans un calque masqué distinct.
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, c’est: si possible créer un bref guide de style pour le produit que vous concevez.
Pour notre bien, 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 systématiquement à chaque fois. Si cela représente trop de travail, indiquez au moins quel exemple du document est canon.
Je ne peux pas vous dire à quelle fréquence je trouve que les titres sont placés à l'œil nu pour 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 le Conception pour le contenu , mais veuillez ne pas supposer que vos titres seront toujours sur une seule ligne et utiliser ces informations dans le fichier.
Je continue à rencontrer ces titres qui ont une taille de police de 22px et une hauteur de ligne de 92px (évidemment copiés et collés à 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: peut être fait et ce qui est approprié pour le médium.
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 à l'aide de canvas), beaucoup de ces solutions sont ne pas prêt pour la production.
comment utiliser bootstrap
Le fait que vous ayez trouvé un exemple où quelqu'un a réussi à combiner WebGL 3D avec le flou CSS plus des masques de filtre pour une page de démonstration ne signifie pas que vous pouvez l'utiliser comme un panneau de parallaxe pleine fenêtre dans une application à une seule page.
Et si vous voulez vraiment marcher à la fine pointe, veuillez consulter votre développeur avant soumettre la conception pour approbation. Sinon, il sera difficile d'amener le client à se contenter de moins.
Si vous voulez vraiment tester les bords, cependant, 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été.
Au-delà de ces choses - au-delà de tester les limites de ce qui peut être fait, essayez d'être sensible et raisonnable en ce qui concerne Qu'est-ce qui devrait ê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 courir une certaine façon, communiquer et se comporter d'une certaine manière.
Pour opter pour le cliché familier aux créateurs du monde entier: À quoi sert une chaise magnifique si personne ne peut s'y asseoir ?
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 conception au lieu d'une image.
Essayez d'atteindre autant que possible avec seulement HTML et CSS.Essayez d'atteindre autant que possible avec seulement HTML et CSS. Évitez d'utiliser de jolies fonctionnalités 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, à l'exception des ombres les plus simples.
Ne me faites pas calculer ou choisir les couleurs, car vous avez utilisé des remplissages de couleurs mélangées. Veuillez ne pas simuler des images transparentes en utilisant la fusion de superposition; J'ai besoin d'une image transparente sur place.
Si nous utilisons un framework frontal, tel que Amorcer , bon nombre de ces problèmes seront déjà résolus, alors découvrez comment procéder et comment les modifier. Ne vous contentez pas de concevoir volontairement quelque chose sans rapport.
Si votre conception n'est pas conforme à ce que fait le cadre, sa mise en œuvre n'implémente pas la conception. Au lieu de cela, nous finissons par remplacer sélectivement le cadre, de sorte qu'il ne gâche pas notre conception et l'implémente ensuite à partir de zéro. La charge de travail double au lieu de diviser par deux.
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 que deux états.
Dans la navigation que je reçois, vous fournissez toujours des designs pour liens Et un lien actif (page actuelle).
Dans d'autres cas, vous fournissez généralement base et flotter États.
Si vous voulez être le moins convivial, vous devriez avoir des conceptions distinctes pour base, survol et concentrer États ( a visité et actif sont également très utiles pour l'UX). Et pour la navigation, un lien et un lien actif ont chacun tous les états ci-dessus .
Oh, et n'osez pas changer une disposition de lien 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. Période. Remplir un élément de texte en ligne est un gâchis, et les arrière-plans de texte non rembourrés ne le feront jamais.
Puisque nous allons l'utiliser sur mobile, assurez-vous qu'il y a suffisamment d'espace blanc entre les éléments interactifs séparés et que chaque hitbox est suffisamment grande. Je pense qu'un minimum de 42px sur chaque axe est la norme.
Dessinez un rectangle invisible ou un calque caché montrant 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 est celui des boutons radio et des cases à cocher. Les standards sont moche! Alors, vous concevez le vôtre, et me donnez un état vérifié et non vérifié, et vous considérez comme terminé.
Cependant, il existe une table multidimensionnelle entière d'états pour une case à cocher, et chacun doit être indiqué visuellement à l'utilisateur.
Nous avons les états suivants:
- Coché ou non coché
- Survolez ou pas
- Focus ou pas
- Activé ou désactivé
- Erreur ou pas
Chacun de ces éléments peut se combiner avec les autres.
Désactivé empêche certaines combinaisons (le survol et la mise au point ne sont généralement pas pertinents lorsqu'ils sont désactivés) mais pas toutes (l'erreur cochée-désactivée 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é-non-non-activé-non et décoché-pas-non-activé-pas dans cette configuration.
D'autres éléments de formulaire peuvent ne pas avoir un état coché non coché, mais peuvent être vides ou non (affichant le texte de l'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 neutre-avertissement-erreur-succès.
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 impeccables, 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.
Concevoir pour l'interactivité est difficile. Et si vous voulez changer l'apparence des boutons radio, ne le faites pas de manière désinvolte avec deux états.Ce que je dis, c’est: concevoir pour l’interactivité est difficile. Et si vous souhaitez modifier l'apparence des boutons radio, ne le faites pas de manière désinvolte avec deux états.
Juste un dernier point sur la conception pour l'interactivité: décidez à quoi ressemble l'interaction. En d'autres termes, décidez des conventions que vous allez utiliser pour les éléments interactifs et ne les utilisez pas sur autre chose.
Non, vous n'êtes pas autorisé à utiliser la couleur de votre marque principale pour indiquer des liens, surtout si vous utilisez la même solution pour accentuer le contenu important!
Conception pour le contenu
La disposition idéale de chaque élément rempli de lèvres le contenu est assez bon pour présenter au client une image pour 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, n'oubliez pas que vous travaillez avec du contenu dynamique.Une fois que vous avez une idée approximative de ce que vous voulez faire avec la mise en page du contenu, n'oubliez pas 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?
- Que faire 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 devrait 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 la section entière - titre, conteneur et tout - ou conservons-nous la section et afficher quelque chose du genre: 'Pas encore d'articles, revenez plus tard?' Mieux encore: «Souhaitez-vous être averti lorsque ce contenu arrivera? Inscrivez-vous à notre newsletter! »
Prenez les décisions! ensuite 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 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 voir 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 un cas et un autre ailleurs!
En fait, essayez d'éviter complètement de formater les structures dans les titres. De même, ne divisez pas le texte manuellement à un endroit, mais divisez-le différemment à un autre. En fait, ne coupez pas le texte manuellement!
Ces éléments peuvent améliorer votre conception, mais rappelez-vous que le contenu sera probablement entré via un CMS, et que la personne qui l'entrera 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 formatez le texte.
Concevez avec les mêmes restrictions que le contenu final - conteneurs de texte de largeur fixe et retour à la ligne automatique. Si cela a l'air moche de cette façon, le design n'est pas bon.
Concevoir pour la réactivité
Cela a beaucoup progressé récemment. Au moins dans les cas où le mobile est réellement conçu. De plus en plus, nous laissons bootstrap le comprendre et giflons 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 séparées. Je sais que tu sais ceci. Ce sont simplement des rediffusions de la même page.
En termes simples, cela revient à 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 sur toutes les mises en page. Lorsque vous ajoutez des colonnes, assurez-vous que les sauts de colonne sont cohérents.
En outre, vos conventions doivent suivre la même structure pour les différentes versions de la page. Cela signifie que si deux éléments semblent identiques sur un ordinateur de bureau, ils doivent également l'être sur un mobile.
Oh, et si vous voulez la parallaxe, veuillez fournir une image suffisamment grande pour se déplacer. Si vous ajustez ou recadrez l'image pour qu'elle apparaisse parfaitement dans le fichier que vous montrez au client, je n'ai rien à déplacer.
Conception d'exceptions
Bien entendu, des exceptions sont toujours possibles. De plus, ils sont nécessaires pour que le produit soit attrayant et efficace. Cependant, ne les ajoutez pas lors du premier passage boîte par boîte.
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 dans chaque cas.
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 terne). Il est maintenant temps de pimenter les choses. En regardant une page dans son ensemble, parlez au client pour identifier les gains - les éléments qui lui en donneront le plus pour son argent.
Nous avons été travailler 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’une conception complexe est justifiée, j’écrirai la logique de rendu en JavaScript si nécessaire.
Je vais intervenir et justifier le travail supplémentaire au client si nécessaire. Heck, je conçois des formulaires et de l'interactivité en plus des designs reçus 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 vous informeront de votre travail et vous guideront lorsque vous ne savez pas quoi faire. Je voudrais 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
