Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Croquis et Zeplin : aider les concepteurs et les développeurs collaborent

Length:LongLanguages:

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

Collaboration entre concepteurs et développeurs est essentielle à la réussite d’un projet web, et c’est une mesure du succès d’une équipe. Tout en partageant le même espace de travail est inestimable, avoir une source en ligne de vérité qui contribue à cette collaboration est incroyablement utile. Dans cet article, nous allons regarder Zeplin et comment cela fonctionne en combinaison avec croquis pour réunir les équipes.

Un petit mot sur le croquis

Il y a environ six mois, quand j’ai déménagé emplois, j’ai été encouragé à essayer de croquis. La grande chose au sujet de ce logiciel est qu’il est plus particulièrement centré sur la conception de l’interface et l’icône ; des plans de travail avec des tailles spécifiques pour le web, mobile et icônes, aux fonctionnalités qui aident à améliorer le processus de conception, l’esquisse est un must pour les concepteurs.

En outre, la courbe d’apprentissage si vous êtes un utilisateur de Photoshop ou Illustrator intermédiaire est proche de zéro.

Voici quelques exemples qui vous donnent un aperçu de ce que vous pouvez faire avec croquis :

  1. Créer des Pages pour organiser votre contenu (par exemple : mobiles dessins, dessins bureau) et des plans de travail à l’intérieur de ces pages à la maquette de votre produit (par exemple : créer le voyage du client étape par étape).
  2. Utilisez l’inspecteur pour trouver tous les détails sur un objet spécifique (taille, positionnement, les couleurs, les styles de police, opacité et bien plus encore).
  3. Utilisez la fonction d’exportation pour exporter des plans de travail ou des objets individuels dans des formats spécifiques (PNG, JPG, PDF et ainsi de suite).

'Je suis un dev, je n’ai jamais utilisé de Sketch !'

Ces dernières années, les concepteurs ont appris à collaborer entre eux à l’aide d’outils tels que InVision, mais cette plate-forme manque encore de fonctionnalités qui permettent un conception rapide main-off pour l’équipe de développement.

Nous ne devrions pas demander aux développeurs d’être compétent dans les mêmes outils que les concepteurs utilisent pour produits de maquette. Cela dit, ni si nous avons besoin les concepteurs à s’éloigner de ce qu’ils font le mieux : conception ! Construction d’un "document de spécifications" chaque fois qu’ils remettent un dessin ou modèle est loin d’être "agile" et peut signifier beaucoup de temps perdu entre la remise de dessins et avoir à effectuer une itération si besoin être.

Zeplin

C’est où Zeplin entre en scène.

Zeplin est un outil de collaboration pour les concepteurs d’interface utilisateur et les développeurs front-end. Il va au-delà du flux de travail de conception et aide les équipes avec la conception main-off.

Il permet aux concepteurs de télécharger leurs images filaires ou conceptions visuelles directement à partir de croquis et ajoutez-les aux dossiers de projet dans Zeplin. La meilleure chose ? Les annotations seront automatiquement ajoutées aux créations (tailles, couleurs, marges et même suggestions de CSS pour certains éléments) qui vous laissera avec un référentiel en ligne toute l’équipe pouvant contribuer à.

"Zeplin fonctionne très bien comme une source unique de la vérité, lorsqu’il est utilisé comme tel.

En outre, puisqu’il est disponible comme une application autonome, mais aussi une application web, vous pouvez y accéder quasiment n’importe où. Le rend facile à vérifier des conceptions et des choses comme les tailles, couleurs, espacement, etc. » – Daniel Setas Pontes, Javascript développeur @NOW TV, Sky

Exportation de modèles d’esquisse au Zeplin

Zeplin fonctionne comme un plugin dans Sketch, donc téléchargement de dessins est un un sur le travail.

Voici comment faire pour démarrer un projet :

Démarrage d’un projet Zeplin
  1. Télécharger Zeplin (mac uniquement) & installer. Les développeurs ne doivent être sous OS X, car ils auront seulement besoin pour accéder à l’outil sur le web afin d’accéder au contenu.
  2. Créer des projets.
  3. Sélectionnez la plate-forme que vous avez conçu pour.
  4. Étiqueter le projet (Assurez-vous de choisir un nom qui est familier à toute l’équipe).
Export from Sketch
Exportation à partir de croquis

Au sein de l’esquisse, sélectionner des objets individuels et les rendre exportable. Cela permettra à votre équipe de dev d’exporter chaque élément par la suite à partir de Zeplin. Voici comment cela fonctionne :

  1. Ensuite, sélectionnez les plans de travail que vous voulez uploader dans Zeplin.
  2. Allez dans Plugins > Zeplin > exportation choisi des plans de travail.
  3. Sélectionnez le projet auquel vous souhaitez télécharger vos dessins et modèles, puis cliquez sur importer.

Travailler avec Zeplin

Une fois en Zeplin, vous pouvez naviguer entre les projets et d’explorer facilement toutes les composantes en leur sein. Savoir sur les spécifications de certains éléments est aussi intuitive ; Sélectionnez l’élément voulu, puis tous les renseignements pertinents apparaîtra dans la colonne de droite.

Développeurs : Voici comment cela fonctionne, une fois que vous avez accédé à cet outil basé sur le web et signée à :

  1. Sélectionnez l’objet que vous voulez inspecter.
  2. Regardez la colonne de droite pour des informations détaillées comme les styles de police, couleur et ainsi de suite (informations seront affichées selon l’objet que vous sélectionnez).
  3. Copiez le CSS suggéré.

Si l’équipe de conception a permis pour les éléments exportables lorsque vous importez les conceptions dans Zeplin, l’équipe de développement doit être en mesure d’exporter des biens individuels. Actifs seront disponibles en téléchargement au format SVG et de trois tailles différentes de PNG.

  1. Ici, vous pouvez ajouter des notes et commentaires sur les dessins.
  2. Ici, vous pouvez copier et partager le lien du projet, peut-être même intégrer le canal mou de l’équipe pour obtenir des notifications ou inviter des membres de l’équipe de collaborer !

Pourquoi votre équipe devrait faire le déplacement

Travail avec Zeplin présente de nombreux avantages, voici quelques exemples :

  • Vous allez éviter de générer un document de spécifications ; quelque chose qui n’est ni agile, ni facile à mettre à jour.
  • Créer des conceptions annotées instantanées toutes les informations utiles pour les développeurs et autres designers.
  • Vous pouvez créer des conceptions exportables, donc les développeurs obtenir rapidement l’accès aux actifs individuels.
  • Créez autant de projets vous voulez, puis téléchargez et mettre à jour avec seulement quelques clics.
  • Créer des guides de style qui aideront l’équipe de conception de rester cohérent.
  • Tirer parti de mou intégration, notification instantanément votre équipe chaque fois qu’il y a une mise à jour.

Essaie !

Travailler avec croquis et Zeplin est un excellent moyen pour les concepteurs de collaborer harmonieusement avec les développeurs. Mon équipe aime travailler de cette façon, je serais ravi d’entendre vos pensées et vos expériences de travail avec ces outils !

Liens utiles

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.