Comment j'ai rationalisé mon processus de conception avec quelques symboles imbriqués sur Sketch

Lorsque vous travaillez seul dans une startup en tant que graphiste, vous n'avez pas forcément besoin d'un framework. Mais j'espère qu'un jour, votre start-up se développera. Vous constituerez l'équipe, vous recruterez un chef de produit, un chef d'équipe, un responsable marketing et vos jours de conception en roue libre devront être révolus. Ensuite, comme dans n'importe quel groupe, vous aurez absolument besoin de directives, y compris d'un cadre, pour maintenir l'uniformité de vos conceptions. C'est ce qui s'est passé à APPELANT. J'ai dû remplacer mon système alambiqué de Photoshop + Illustrator + Marvel + Avocode par quelque chose qui permettrait plusieurs personnes se réfèrent rapidement aux mêmes modèles, soyez sur la même longueur d'onde et avancez au même taux. Dans cet article, j'expliquerai pourquoi et comment nous avons remanié notre processus de conception, y compris notre choix de passer à une méthode à faible état d'éléments élevés pour utiliser des symboles imbriqués dans Sketch.

Passer d'un système à 4 applications à Sketch + Invision

Lorsque je travaillais en tant que one-man show, je passais de Photoshop pour les designs UX à Illustrator pour tout ce qui est vectoriel (logos, icônes...). Cela impliquait déjà de passer assez fréquemment d'un logiciel à l'autre. Puis, une fois que j'ai senti que tout était terminé, je confiais le tout à Marvel pour les designs interactifs. Je les montrerais au PDG et au directeur technique, j'obtiendrais leurs commentaires et leur validation. Ensuite, la dernière étape a consisté à transférer tout cela vers Avocode, afin que les conceptions soient exploitables pour que l'équipe de développeurs front-end puisse les développer. Bien que cela ait bien fonctionné au début, le problème était que c'était un processus trop lourd pour être durable au fur et à mesure de la croissance de l'entreprise.

Mon ancien processus de Photoshop + Illustrator + Marvel + Avocode, bien que correct au début, n'était pas viable à mesure que notre entreprise grandissait. [/caption] Par exemple, si quelqu'un voulait apporter une petite modification à une icône, cette icône devait être mise à jour sur tous les fichiers de tous ces logiciels. Cela a été laborieux et chronophage. Nous ne pouvions pas non plus stocker tous les éléments d'un design au même endroit : les fichiers Photoshop se trouvaient dans notre Dropbox, mais les icônes étaient ailleurs... Cela impliquait de jongler entre les quelques fichiers « les plus récents » mis à jour, de nous rappeler si nous en étions à la version 5 ou 6, de fouiller dans un tas de dossiers Dropbox différents... En gros, ce n'était pas efficace. Quand il n'y avait que moi, peu importait (je me disais) que mon processus soit un peu compliqué. Mais, tout comme lorsque vous passez de la vie seule à celle de colocataire, vous vous rendez compte que vos habitudes désordonnées perturbent les autres, et quand vous vous organisez enfin, vous réalisez que vous préférez être plus propre. Du moins, c'est ce qui m'est arrivé. Lorsque nous avons réalisé que notre processus de conception devenait incontrôlable, notre chef de produit et moi-même sommes partis à la recherche de solutions. Ce que nous avons trouvé vraiment intéressant à propos de Sketch, c'est que :

1. Les fonctions Photoshop et Illustrator sont disponibles dans Sketch. Cela signifie que la conception UX et le travail vectoriel peuvent être effectués dans une seule interface, ce qui était déjà une grande simplification par rapport à la façon dont je faisais les choses auparavant.
2. Si vous utilisez un module complémentaire d'Invision, vous pouvez également créer des designs interactifs directement dans Sketch, puis les envoyer à Invision pour partager le design avec les développeurs : donc je n'ai JAMAIS à quitter Sketch, alors qu'auparavant, je devais avoir 4 applications différentes pour y parvenir.

REMARQUE : Si vous souhaitez le télécharger, « Artisanat » est le nom du plug-in Invision. [/caption] Le passage d'un système à 4 applications à Sketch et à un module complémentaire a permis de réduire beaucoup de travail. Il a été beaucoup plus facile pour toute l'équipe de rester organisée et de se concentrer sur ses tâches. Cependant, il s'est également ouvert nouvelles questions organisationnelles propres à Sketch — à savoir comment utiliser les symboles imbriqués.

Symboles imbriqués : moins d'éléments n'est pas toujours mieux

Vous connaissez probablement déjà symboles dans Sketch, mais juste au cas où, j'utiliserai les mots d'un designer UX mobile Javier Cuello pour résumer leur intérêt :

La meilleure chose à propos de l'utilisation de symboles (au lieu d'objets groupés, indépendants et déconnectés) est que si à un moment donné vous décidez de modifier une propriété d'un symbole particulier (par exemple, la couleur, la forme, la taille du texte, les dimensions ou tout autre élément de votre choix), il vous suffira de modifier le symbole maître une fois, et cette modification sera automatiquement répliquée sur toutes les instances du master, où qu'elles se trouvent. »

Mais voici le truc. En tant que designer, vous devez encore faire de nombreux choix quant à la manière dont vous créez, organisez et gérez ces symboles. Par exemple, en tant que Jon Moore expliqué dans un article populaire de Medium, bien que la page de symboles ci-dessous soit extrêmement courante, elle n'est pas idéale. Selon ses propres termes,

• Si je veux ajouter un bouton vert, il me faut trois de nouveaux symboles... un pour couvrir chaque état des boutons.
• Si je veux un bouton blanc avec bleu texte, j'aurai besoin trois nouveaux symboles.
• Si je veux supprimer la bordure de tous mes boutons, je dois la mettre à jour sur chaque symbole de bouton J'ai créé.

Une méthode standard, mais fastidieuse, que de nombreuses personnes choisissent pour organiser leur page de symboles dans Sketch. Source de l'image[/légende]Voici la solution de Jon: ne créez qu'un seul symbole de bouton principal avec un milliard d'éléments imbriqués pour créer n'importe quel type de bouton souhaité. En enregistrant chaque variation d'élément en tant que symbole dans le symbole principal, l'idée est d'insérer un bouton dans votre interface utilisateur à tout moment., vous pouvez choisir le symbole principal, puis choisir parmi une grande variété de remplacements pour ajouter la combinaison d'états souhaitée, comme indiqué ci-dessous dans la section suivante. RAPPEL : pour utiliser des remplacements dans des symboles imbriqués, les symboles doivent être exactement la même taille, au pixel près.

Annuler la surcharge

Cette technique a vraiment fait l'objet d'un engouement.. J'étais l'un des designers qui l'ont essayé lorsque je travaillais avec notre nouveau chef de produit sur la mise à jour de notre processus de conception. Cependant, nous nous sommes vite rendu compte qu'avec cette technique, vous gagnez du temps lors de la conception initiale du framework... mais ensuite vous perdre une fois plus tard. C'était deux pas en avant, un pas en arrière. Le temps que j'ai gagné en créant le framework a été rapidement perdu une fois que j'ai commencé à concevoir la page.

C'est le temps qu'il me fallait auparavant pour créer un bouton, en utilisant la méthode « un bouton avec des milliards de rempositions » expliquée ci-dessus. [/caption] En gros, lorsque vous n'utilisez qu'un seul symbole principal pour chaque composant de conception, il ne fait aucun doute que vous pouvez créer un nouveau cadre en un rien de temps. Le problème survient lorsque vous créez vos propres pages : parcourir des dizaines d'états et de remplacements différents pour configurer et insérer chaque élément n'était pas seulement ennuyeux, c'était incroyablement chronophage. C'est parce que quand tu avoir toutes les variations imaginables sous le soleil comme solution de remplacement pour un symbole donné, vous avez des allumettes qui ne rentrent même pas dans votre cadre. Par exemple, vous auriez la possibilité d'ajouter un bouton rouge avec du texte jaune, car vous avez besoin du texte jaune pour remplacer le bouton vert, mais il apparaîtra pour chaque composant que vous ajouterez à votre interface. Cela vous laisse un éventail impressionnant de choix à choisir chaque fois que vous ajoutez un composant. En tout cas, pour moi, je perdais beaucoup de temps là-dessus.

Trouver un équilibre entre les symboles et les états

C'était tellement grave que nous avons décidé de repenser notre stratégie. Après quelques allers-retours, nous avons trouvé un équilibre. Il n'y a qu'un nombre limité de combinaisons pour un composant donné dans notre framework. —nous voulions donc créer suffisamment de symboles maîtres pour chaque composant, et ne leur autoriser que les remplacements qui seraient réellement utilisés dans notre framework. Cela impliquait de créer plus de symboles par composant, mais avec moins d'états pour chacun d'eux :

En créant davantage de symboles maîtres par composant, et en éliminant ainsi les combinaisons d'états non pertinentes, il a été beaucoup plus rapide de créer des pages à long terme. [/caption] Comme vous pouvez le voir dans le gif ci-dessous, une fois que j'ai choisi le bouton que j'insère, l'utilisation de remplacements de symboles imbriqués est simple et agréable. La refonte du framework n'a pris que quelques jours, et J'ai considérablement réduit le temps qu'il m'a fallu pour créer des pages.

Cette nouvelle méthode d'utilisation des symboles imbriqués à « haut niveau d'éléments » m'a permis de créer des pages beaucoup plus rapidement. [/légende]

Ne tombez pas toujours dans le battage médiatique

Si j'ai appris quelque chose de cette expérience, c'est qu'il faut faire attention au battage médiatique. Parfois, la façon « à l'ancienne » de faire les choses est toujours la meilleure pour votre situation, surtout si vous le modifiez un peu en fonction de vos besoins. En utilisant la méthode « un bouton » décrite au début de cet article, j'ai pu mettre en place un nouveau framework en deux jours... mais il m'a fallu 10 jours pour créer les pages sur lesquelles je travaillais. C'était beaucoup trop long et ce n'était pas durable. Lorsque nous avons refait notre processus en utilisant la méthode de l'état bas à éléments élevés, nous avons consacré une journée supplémentaire à la création d'un cadre, mais nous avons également réduisez le temps de conception de notre page à 3 jours. Pour nous, cela a été un avantage suffisant en termes d'efficacité. De plus, il est désormais beaucoup plus facile d'ajouter, de modifier ou de supprimer un composant : il y a moins d'interdépendance, je peux modifier plus précisément et je peux supprimer ou modifier une partie d'un composant sans endommager l'ensemble du système. Que vous conceviez un site Web ou une application en équipe, ou que vous travailliez toujours seul, Je recommande ces outils et cette façon d'organiser vos symboles. J'espère que vous avez trouvé cette lecture utile, et n'hésitez pas à me faire part de vos idées ou d'autres conseils ou astuces de conception. [cta href= » https://www.callr.com "txt="Je me demande ce que nous faisons chez CALLR ? » btn="Consultez notre API et nos applications. "]