Sketch and Zeplin Designer und Entwickler bei der Zusammenarbeit unterstützen

Die Zusammenarbeit zwischen Designern und Entwicklern ist für den Erfolg eines Webprojekts von entscheidender Bedeutung und ein Maß für den Erfolg eines Teams. Während der gemeinsame Einsatz des gleichen Arbeitsbereichs von unschätzbarem Wert ist, ist es äußerst hilfreich, eine Online-Informationsquelle zu haben, die bei dieser Zusammenarbeit hilfreich ist. In diesem Artikel werden wir uns Zeplin ansehen und wie es in Kombination mit Sketch funktioniert, um Teams zusammenzubringen.

Ein kurzes Wort zur Skizze

Vor etwa sechs Monaten, als ich umgezogen bin, wurde ich ermutigt, Sketch auszuprobieren. Das Tolle an dieser Software ist, dass sie sich speziell auf das Design von Oberflächen und Icons konzentriert. Von Zeichenflächen mit spezifischen Größen für Web, Mobile und Symbole bis hin zu Funktionen, die den Entwurfsprozess verbessern, ist Sketch ein Muss für Designer.

Darüber hinaus ist die Lernkurve für fortgeschrittene Benutzer von Photoshop oder Illustrator so gut wie keiner.

Hier einige Beispiele, die Ihnen einen Überblick über die Möglichkeiten von Sketch geben:

  1. Erstellen Sie Seiten zum Organisieren Ihrer Inhalte (z. B. mobile Designs, Desktop-Designs) und Artboards innerhalb dieser Seiten, um Ihr Produkt zu verspotten (z. B. Erstellen Sie eine Schritt für Schritt Kundenreise)..
  2. Verwenden Sie die Inspektor um alle Details zu einem bestimmten Objekt zu finden (Größe, Positionierung, Farben, Schriftstile, Deckkraft und vieles mehr).
  3. Verwenden Sie die Export Funktion zum Exportieren von Zeichenflächen oder einzelnen Objekten in bestimmte Dateiformate (PNG, JPG, PDF usw.).

"Ich bin ein Entwickler, ich habe noch nie Sketch benutzt!"

In den letzten Jahren haben Designer gelernt, mit Tools wie InVision zusammenzuarbeiten. Diese Plattform verfügt jedoch noch nicht über Funktionen, die eine schnelle Übergabe an das Entwicklungsteam ermöglichen.

Wir sollten nicht von Entwicklern verlangen, dass sie die gleichen Tools beherrschen, mit denen Entwickler Produkte modellieren. Das heißt, wir sollten auch nicht verlangen, dass Designer sich von dem abwenden, was sie am besten können: Design! Das Erstellen eines „Spezifikationsdokuments“ bei jeder Übergabe eines Entwurfs ist alles andere als „agil“ und kann viel Zeitverschwendung zwischen der Übergabe der Entwürfe und der Notwendigkeit einer Iteration bedeuten.

Zeplin

Hier tritt Zeplin in die Szene ein.

Zeplin ist ein Collaboration-Tool für UI-Designer und Frontend-Entwickler. Es geht über den Design-Workflow hinaus und hilft Teams bei der Designübergabe.

Designer können damit ihre Wireframes oder visuellen Designs direkt aus Sketch hochladen und sie zu Projektordnern in Zeplin hinzufügen. Das beste Ding? Den Designs werden automatisch Anmerkungen hinzugefügt (Größen, Farben, Ränder und sogar CSS-Vorschläge für bestimmte Elemente), wodurch Sie ein Online-Repository erhalten, zu dem das gesamte Team beitragen kann.

„Zeplin eignet sich sehr gut als einzige Quelle der Wahrheit.
Da es sowohl als Standalone-App als auch als Web-App verfügbar ist, können Sie von überall aus darauf zugreifen. Ermöglicht das einfache Prüfen von Designs und Dingen wie Abständen, Größen, Farben usw. “- Daniel Setas Pontes, Javascript-Entwickler @NOW TV, Sky

Entwürfe von Skizzen nach Zeplin exportieren

Zeplin funktioniert als Plugin in Sketch. Das Hochladen von Designs ist ein Klick mit einem Klick.

So starten Sie ein Projekt:

Ein Zeplin-Projekt starten
  1. Laden Sie Zeplin herunter (nur Mac) und installieren Sie es. Entwickler müssen nicht OS X ausführen, da sie lediglich auf das webbasierte Tool zugreifen müssen, um Zugriff auf Inhalte zu erhalten.
  2. Projekte erstellen.
  3. Wählen Sie die Plattform aus, für die Sie konzipiert wurden.
  4. Beschriften Sie das Projekt (stellen Sie sicher, dass Sie einen Namen auswählen, der dem gesamten Team bekannt ist.).
Exportieren aus der Skizze

Wählen Sie in Sketch einzelne Objekte aus und machen Sie sie exportierbar. Dadurch kann Ihr Entwicklerteam jedes Element später in Zeplin exportieren. So funktioniert das:

  1. Als Nächstes wählen Sie die Zeichenflächen aus, die Sie in Zeplin hochladen möchten.
  2. Gehe zu Plugins> Zeplin> Ausgewählte Zeichenflächen exportieren.
  3. Wählen Sie das Projekt aus, in das Sie Ihre Designs hochladen möchten, und klicken Sie dann auf Einführen.

Mit Zeplin arbeiten

Sobald Sie sich in Zeplin befinden, können Sie zwischen Projekten navigieren und problemlos alle darin enthaltenen Komponenten erkunden. Das Erkennen von Spezifikationen bestimmter Elemente ist auch intuitiv. Wählen Sie das gewünschte Element aus. In der rechten Spalte werden alle relevanten Informationen angezeigt.

Entwickler: So funktioniert das, nachdem Sie das webbasierte Tool geöffnet und sich angemeldet haben:

  1. Wählen Sie das Objekt aus, das Sie untersuchen möchten.
  2. In der rechten Spalte finden Sie detaillierte Informationen wie Schriftstile, Farbe usw. (Informationen werden entsprechend dem ausgewählten Objekt angezeigt)..
  3. Kopieren Sie das vorgeschlagene CSS.

Wenn das Designteam beim Importieren der Entwürfe in Zeplin exportierbare Elemente zuließ, sollte das Entwicklungsteam einzelne Assets exportieren können. Assets stehen im SVG-Format und in drei verschiedenen PNG-Größen zum Download zur Verfügung.

  1. Hier können Sie Anmerkungen und Kommentare zu den Designs hinzufügen.
  2. Hier können Sie den Projektlink kopieren und freigeben, möglicherweise sogar in den Slack-Kanal des Teams integrieren, um Benachrichtigungen zu erhalten oder Teammitglieder zur Zusammenarbeit einzuladen!

Warum sollte Ihr Team den Umzug machen?

Die Arbeit mit Zeplin hat viele Vorteile, hier einige Beispiele:

  • Sie vermeiden es, ein Spezifikationsdokument zu erstellen. etwas, das weder agil noch leicht zu aktualisieren ist.
  • Erstellen Sie sofort kommentierte Designs mit allen relevanten Informationen für Entwickler und andere Designer.
  • Sie können exportierbare Designs erstellen, sodass Entwickler schnellen Zugriff auf einzelne Assets haben.
  • Erstellen Sie beliebig viele Projekte, laden Sie sie hoch und aktualisieren Sie sie mit wenigen Klicks.
  • Erstellen Sie Style-Guides, die dem Designteam helfen, konsistent zu bleiben.
  • Profitieren Sie von der Slack-Integration und benachrichtigen Sie Ihr Team bei jedem Update sofort.

Versuch es!

Die Arbeit mit Sketch und Zeplin ist eine großartige Möglichkeit für Designer, mit Entwicklern harmonisch zusammenzuarbeiten. Mein Team arbeitet gerne auf diese Weise - ich würde gerne Ihre Gedanken und Erfahrungen mit diesen Tools hören!

Nützliche Links

  • Plugins für Skizzen
  • Skizzieren Sie Tutorials zu Envato Tuts+
  • Skizzieren Sie Websitevorlagen auf dem Envato Market
  • @zeplin_io auf Twitter
  • zeplin.io