Share
Je vais partager une théorie de la conception sur laquelle je travaille dans la mise en œuvre de mon propre flux de travail au cours des dernières années: maquettes pixel parfait. Cela peut sembler évident à certains, mais c’est un principe tellement crucial dans mon propre processus de conception maintenant que je dirais que c’est l’idée la plus influente à laquelle on me présente depuis plus de 10 ans..
Adopter cette théorie n’est pas simplement une étape supplémentaire dans le processus de conception, c’est une révolution de l’esprit qui va changer la perspective et qui améliorera sans aucun doute la qualité de chaque conception sur laquelle vous travaillerez. Vous voulez être un meilleur concepteur de sites Web et entreprendre de plus gros projets? Continuer à lire.
À SXSW 2008, il y a quelques années, j'ai été initié à l'idée de maquettes de conception «parfaites au pixel près». Michael Lopp (auteur de plusieurs excellents ouvrages sur le design et directeur technique principal chez Apple) participait au panel pour une session intitulée "Great Design Hurts"; Son discours était hilarant et aussi riche en jurons qu'un épisode de Bill Maher. Parmi ses points de lecture incroyablement perspicaces, il y avait un petit bijou qui expliquait comment, chez Apple, chaque concepteur se consacrait à l’idée de la composition au pixel près. Autrement dit, chaque composition transmise à la société est si précis, si vierge, si détaillé que le spectateur occasionnel ne peut pas faire la différence entre la maquette de conception et une capture d'écran entièrement codée.
… Chaque composition transmise à l'entreprise est si précis, si vierge, si détaillé que le spectateur occasionnel ne peut pas faire la différence entre la maquette de conception et une capture d'écran entièrement codée
"Ça y est!", Pensai-je, "l'idée qui va révolutionner mon processus de conception". Et en effet il l'a fait.
Voir, pour commencer chaque projet de conception avec l'intention de le suivre jusqu'au dernier changement de pixel, presque tous les aspects du processus de conception. Même si vous ne suivez pas à chaque fois, la notion même d'avoir commencé la conception avec cette intention aura des effets dramatiques sur le produit final.
Après un mois ou deux d'essayer cela, mon PSD était plus propre, mes fichiers se déplaçaient plus rapidement, mes projets ne se traînaient plus dans leurs derniers stades et je passais moins de temps au téléphone avec des clients qui essayaient d'expliquer la différence. entre une maquette de conception brute et le produit fini. Oh, et j'ai été embauché plus, ce qui est une bonne mesure à suivre par toute mesure.
Alors, qu'est-ce qui rend un pixel parfait? Essentiellement, il s'agit de concevoir une maquette (en particulier une maquette Web, mais ce peut être n'importe quoi) comme si vous la dessiniez à l'aide d'un code. Si vous avez déjà travaillé avec CSS / HTML, vous comprendrez ce que je veux dire. Il comprend:
Laissez-moi élaborer sur cette idée cependant; Lorsque la plupart des concepteurs commencent un projet, ils conçoivent comme si c’était juste une maquette. La connaissance qu'un développeur ou un spécialiste en assurance qualité viendra plus tard et peaufinera tout limitera le temps et les efforts consacrés aux conceptions individuelles..
Ce qui se passe ensuite est naturel pour la plupart des concepteurs: on dit aux clients que les images et les icônes ne sont que des "espaces réservés". Le texte de Lorem Ipsum est utilisé à la place du contenu réel. Heck, même la navigation et d'autres éléments d'interface utilisateur majeurs sont permutés avec le contenu "de remplissage" jusqu'à juste avant le lancement dans la plupart des cas.
"Parfait" signifie que chaque élément de chaque composition de conception est exactement comme vous le souhaitez être dans le produit final programmé.
Avec les marges et le remplissage, cela signifie qu'elles sont cohérentes dans l'ensemble de la conception du site. Si chaque bloc de la barre latérale d’une conception doit avoir une marge de 10 pixels, concevez-le de cette manière à chaque fois qu’il y aura un bloc de la barre latérale..
Avec police et couleur, cela signifie une utilisation cohérente sur l’ensemble du site. Concevez chaque élément de police comme s’il s’agissait d’un lien vers un élément HTML (c’est-à-dire que tous les caractères H1 ont toujours une résolution de 18 pixels, en gras et que Georgia utilise une couleur noire). Ne vous écartez pas - comme l’a dit un de mes chefs de projet préférés, il ne devrait pas y avoir plus de 3 ou 4 styles de police de caractères sur une seule page, à moins que vous n’ayez une bonne raison de le faire. Si vous utilisez une couleur spécifique de rouge comme couleur de surbrillance sur le site, assurez-vous qu'il s'agit bien de la couleur rouge exacte à chaque endroit (sauf si vous avez une raison pour que ce soit différent)..
Les frontières, les règles de ressources humaines et les arrière-plans doivent également être cohérents - j'ai déjà vu des compositions où chaque frontière et toutes les ressources humaines ont des teintes différentes de la même couleur - cela aboutit en définitive à un aspect négligé et non professionnel des préparations. Pour un œil non averti, il est facile de voir quand une conception semble à moitié cuite… même si cette personne ne sait pas exactement ce qui ne va pas.
Enfin, utilisez des icônes, des images, des titres et du texte aussi proches que possible de la réalité. Si vous modifiez un site Web, utilisez le contenu déjà publié au lieu de Lorem Ipsum. Si le client dit qu'il a de nouvelles icônes ou images qu'il utilisera dans la nouvelle conception, demandez-les-lui et incluez-les dans la conception..
N'oubliez pas que nous nous efforçons de créer des compositions de conception tellement précises qu'elles ressemblent à des captures d'écran de la mise en œuvre réelle, codée et en direct..
Avant de passer à autre chose, abordons les arguments contradictoires. Coût. Temps. Effort. Frustration… l'argument qui se forme déjà dans votre esprit pourrait ressembler à ceci:
"Si je passe le temps nécessaire pour détailler minutieusement chaque maquette de design qui passe entre mes mains, je consacrerai 3 fois plus de temps au design… sans oublier le fait que si le client n'aime pas le design, tout va à la poubelle ".
Un argument juste, et qui a certainement ses mérites, mais ce n'est pas suffisant pour faire dérailler cet article :) N'oubliez pas que l'objectif n'est pas de rendre chaque maquette de conception réellement parfaite (ce serait insensé et coûteux). - l'objectif est de changer votre approche de la conception. Le fait est que l'approche pixel-perfect n'est pas vraiment pratique dans beaucoup de cas… mais cela devrait vous empêcher de vous y atteler.
Examinons les avantages des compositions parfaites en pixels, puis revenons à cet argument..
Cela vous oblige à être plus organisé. Plus d'organisation signifie moins de temps passé à lutter avec votre PSD et plus de temps à cogner lors de la conception.
Plus besoin d'expliquer aux clients. Si vous avez parfaitement conçu une composition, c'est-à-dire que tout se trouve à la place que vous souhaitiez, vous n'avez pas à expliquer aux clients que ce qu'ils voient dans la composition de conception n'est pas ce qui se trouvera dans le produit final..
Plus besoin d'expliquer aux développeurs. Cela s'avère particulièrement utile lorsque votre client envoie vos compositions à une équipe de développement en Inde, où de longs courriels explicatifs ne sont tout simplement pas traduits. Si leur seul travail consiste à coder EXACTEMENT ce qu'ils voient dans la composition, cela réduit les risques d'interprétation erronée des spécifications de conception. Et diable, c'est encore plus facile pour les programmeurs avec qui je travaille couramment; Ils se concentrent sur la programmation, sans chercher à savoir si je veux des marges de 10 pixels ou de 15 pixels..
Moins de temps passé en QA. Si vous n’êtes pas familier, l’analyse de la qualité est la phase finale de la conception qui consiste à revenir à la conception approximative proposée et à la préparer pour la présentation finale. Pour les développeurs, il s'agit également du nom de la ronde finale de «pré-lancement», dans laquelle chaque détail, chaque bug fonctionnel et chaque pixel parasite sont corrigés. Bien sûr, dans les petits projets, il est possible que vous ne passiez jamais par un cycle d’AQ; mais dans les projets plus importants disposant du budget, vous ne vous éloignez pas du projet tant que cette étape n'est pas terminée et que le fichier source nettoyé n'est pas remis..
Happier Art Directors / Clients. Si votre directeur artistique (ou quel que soit son titre) est en mesure de passer moins de temps à chercher les détails de vos compositions et plus de temps à donner des indications utiles, leur tension artérielle (et la vôtre) baissera inévitablement lors des réunions de révision de conception..
Résultats finaux plus professionnels. Oui, vos compositions auront l'air plus professionnelles. Maintenant que vous passez moins de temps à expliquer ou à créer des excuses pour des maquettes négligées, vous pouvez passer plus de temps à augmenter votre taux…
Donc, en réponse à l'argument contre les compositions parfaites de pixel, je vais faire ces derniers points.
Vos comps devraient déjà être parfaits. C’est l’objectif final de tout projet de conception, et si vous n’y allez pas finalement, c’est peut-être simplement parce que vous n’avez jamais voulu le faire.
Cela prend moins de temps que l'alternative. Choisissez-en un: passez 6 heures méticuleusement à concevoir une maquette Web et obtenez rapidement l'approbation du client OU passez 4 heures sur un dessin et 4 autres corrections d'erreurs stupides avant de finalement demander au client de signer un dessin.
Les modifications et les révisions arrivent plus vite de cette façon, pas plus lentement. Si vous avez conçu votre maquette en utilisant cette mentalité et que votre DSP est organisé de manière à refléter cette réalité, chaque série de révisions ultérieure demandée par le client se fera à la vitesse de l'éclair..
D'excellentes maquettes signifient moins de temps de développement. Cela vous permet d'économiser de l'argent (ou votre client). Ceci est le locataire de base de prototypage rapide - bien faire les choses avant d'entrer dans un cycle de développement coûteux.
C'est l'écart le plus important entre les petits projets et les concerts à gros budget. Le simple fait est qu’un recruteur à la recherche de pigistes pour prendre en charge leurs projets utilise «l’attention au détail» comme mesure la plus indicative permettant de savoir si un designer indépendant est capable de s’attaquer à un projet Web majeur. Si vous avez un portefeuille rempli de compilations bâclées, il sera encore plus difficile de prouver que vous êtes digne de confiance et capable..
Je l'ai déjà dit, mais c'est mon dernier point. Vous n'atteindrez pas réellement la perfection en pixel sur chaque composition et c'est bien. Il y a un temps et un lieu pour le montage simplifié et vous (et votre client) saurez quand il le sera. Cette théorie de la «composition parfaite au pixel» ne nécessite pas 100% de résultats 100% du temps, elle dicte uniquement l'attitude de base que vous apportez à chaque projet. Après des années de travail sur cela dans mes propres projets, je peux dire que ça vaut la peine.
!
Accentsconagua