Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Outils pour combler le fossé entre designers et développeurs

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Dans cet article, je vais rapidement faire le tour de quelques outils qui vous aideront à communiquer vos designs aux développeurs chargés de les faire vivre. Je vais lister quelques tutoriels pour vous aider à démarrer aussi – donc allons-y​ !

Craie et fromage

Les développeurs se concentrent sans doute sur le calcul et la logique, alors que les designers se penchent beaucoup plus sur les processus créatifs. Comme vous pouvez l’imaginer cela peut créer des problèmes de communication entre les deux parties qui essayent effectivement de travailler ensemble. En fin de compte, le canal de communication idéal pour combler cette lacune devrait être un outil qui prend les deux hémisphères, leur permettant de communiquer dans leur propre langue, tout en conservant la fidélité du projet.

Heureusement, il y a effectivement des solutions à ce problème, plusieurs solutions, et j’ai sélectionné quelques choix populaires avec des réflexions sur leurs meilleures caractéristiques.

InVision (Intégrations Sketch & Photoshop)

InVision est l’un des outils de prototypage les plus populaires de l’industrie.

Inscrivez-vous et vous allez commencer avec un projet gratuitement, avec des abonnements payants actuellement à partir de 15 $/ mois pour trois projets. Le nombre de plugins et intégrations avec InVision est ahurissant, donc en dehors de notre but (meilleure communication), vous pouvez trouver quelques fonctionnalités supplémentaires pour améliorer votre flux de travail.

Les fonctions principales comprennent :

  • InVision mène le peloton avec des tonnes de fonctionnalités de prototypage comme le test mobile direct et la possibilité d’intégrer votre prototype n’importe où pour le test utilisateur.
  • Il a une intégration avec tant d’autres outils que je ne peux pas tous les nommer ici. L’industrie l'a accepté comme une norme et donc beaucoup de plugins ont été créés pour fonctionner avec InVision.
  • Le contrôle de version synchronise avec vos fichiers dans Sketch ou les produits Adobe.
  • Bien qu’en phase bêta privée (et où Zeplin/Avocode sont actuellement forts) InVision a également un outil d’export pour la génération de code et création de feuille de style pour n’importe quel élément. Il est trop tôt pour dire à quel point cette fonction performe par rapport à celles de ses concurrents.

Avocode (intégrations Sketch et Photoshop)

Nous avons couvert Avocode sur Envato Tuts+ plusieurs fois par le passé ; Il agit comme un moyen d’exporter des desings aux fins de développement web.

Avocode vous propose un essai de 14 jours, après quoi il facture 7 $ par mois pour des projets illimités, par utilisateur. Si vous souhaitez partager votre travail (ce qui est l’idée) avec d’autres, il faut passer à l’abonnement de 10 $/mois, qui est encore moins cher que les autres options mentionnées dans cet article.

Avocode est livré avec des intégrations complètes de Sketch et Photoshop et les fonctionnalités suivantes :

  • Les développeurs peuvent choisir ce dont ils ont besoin – pas besoin de créer des guides de style du côté du designer. Spécifications complètes, couleurs (HEX, RGBA, HSLA), polices, styles et tailles disponibles sur tous les éléments tirés.
  • Les exportations de code CSS et exportateur d'images multiples (fichiers SVG supportés). Les styles peuvent également être exportés vers SASS, Stylus et LESS ; une grande victoire pour les développeurs front-end dans tous les domaines.
  • Une copie soignée et la fonction de collage de texte où vous pouvez coller le texte du design dans un éditeur de code avec les balises d’en-tête HTML (H1 par exemple).
  • Tous les plans viennent avec un nombre illimité de projets. Mettez vous à niveau lorsque vous avez besoin de plus d’utilisateurs participant à un projet.
  • Contrôle de version et collaboration avec notifications par courrier électronique. L'intégration Slack est disponible à partir de la formule d’abonnement business ($10).

Zeplin (pour Sketch)

Zeplin est quelque chose que nous vous avons récemment présenté dans les tutoriels pour débutant de Andreia.

zeplin

Semblable à InVision, les abonnements mensuels commencent à $15/mois pour 3 projets (vous pouvez commencer avec un projet gratuitement). Les fonctions de cet outil Web/Windows/Mac se concentrent principalement à résoudre le problème posé ici : passer la main de designer à développeur. Vous n’avez pas tous les extra tralala comme avec InVision, mais c’est vraiment efficace à des fins de collaboration.

Certaines des principales caractéristiques :

  • Fonctionne exclusivement avec Sketch.
  • Il fournit des valeurs spécifiques HEX et RVB pour tous vos designs.
  • Il génère automatiquement des actifs (boutons, icônes ou quoi que ce soit que vous sélectionnez comme atout).
  • Informations spécifiques de plateforme (iOS, Android ou web) des (PT, DP/SP, PX) offertes au développeur. De cette façon le développeur peut coder vos actifs avec les mesures avec lesquelles il est familier avec son kit de développement SDK. Il offre même des extraits de code de couleur que le développeur peut simplement copier et coller.
  • Une pleine intégration avec Slack disponible, donc tous les membres de l’équipe sont au courant des mises à jour de design.

Sketch/Photoshop étendus avec des plugins

Il faut mentionner que Sketch et Photoshop ont une saine liste de plugins pour exporter vos designs et créer des guides de style détaillés pour les développeurs. Quelques exemples avec leurs prix :

  • Ink (Photoshop, gratuit) : un générateur de guide de style.
  • Markly (Sketck/Photoshop, 49,99 $) : un générateur UI/Spec de guide de style. Utilisé par Netflix, Google, Facebook et bien d’autres.

Digne de mention

Les outils proposés dans l’article sont les plus courants, testés et examinés dans l’industrie pour la collaboration en équipe web/mobile. Regardons quelques autres que nous ne couvrirons pas dans les moindres détails.

Framer (illustré ci-dessous) est un autre outil utile à mentionner si vous designez pour mobile. Cependant, son approche peut ne pas être parfaite, si vous préférez mettre l’accent sur le design ou la programmation, mais pas les deux. Framer est un excellent exemple de l’utilisation de processus créatifs et logiques en même temps.

Adobe XD (Adobe Experience Design CC, anciennement projet Comet) est un acteur relativement nouveau sur le marché, mais avec la société app numéro un de l’industrie derrière elle, vous pouvez être sûr qu'il aura un impact. Alors qu’il offre un brillant ensemble d’outils pour le design de prototypes, l’accent est sur l'UX, pas sur les livrables de designer-développeur. Il propose de « oeuvre de production-ready », mais vous ne trouverez pas d'extraits de code et des actifs détaillés​ exportables dans le menu.

Récemment, nous avons couvert Sympli dans un tutoriel du point de vue designer. Il fonctionne spécifiquement avec Photoshop et Sketch – jetez un oeil !

Conclusion

Si vous n’avez pas déjà un de ces outils intégrés dans votre flux de travail, et vous faites face à un problème récurrent avec le développement de sites web de vos designs, je suggère fortement de que vous jetiez un oeil aux outils mentionnés ci-dessus. À tout le moins, y aller avec un essai ! En fin de compte, la petite redevance mensuelle (ou achat) vous permettra d’économiser une quantité considérable de temps passé en allers-retours avec les membres de votre équipe.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.