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

Die Zusammenarbeit zwischen Designern und Entwicklern ist entscheidend für den Erfolg eines Webprojekts und ist 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 Sketch

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.

Außerdem ist die Lernkurve für fortgeschrittene Photoshop- oder Illustrator-Benutzer nahezu gleich.

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

1. Erstellen Sie Seiten, um Ihre Inhalte zu organisieren (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 den Inspektor, um alle Details zu einem bestimmten Objekt (Größe, Position, Farben, Schriftstile, Deckkraft und vieles mehr) zu finden.
3. Verwenden Sie die Exportfunktion, um Artboards oder einzelne Objekte in bestimmte Dateiformate (PNG, JPG, PDF usw.) zu exportieren.

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

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

Wir sollten die Entwickler nicht auffordern, dieselben Wekzeuge zu beherrschen, die auch die Entwickler beim Modellieren von Produkten verwenden. 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-Werkzeug für UI-Designer und Frontend-Entwickler. Es geht über den Design-Arbeitsablauf 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), sodass 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:

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 Werkzeug zugreifen müssen, um Zugriff auf Inhalte zu erhalten.
2. Projekte erstellen
3. Wählen Sie die Plattform aus, für die Sie entwickelt haben.
4. Beschriften Sie das Projekt (stellen Sie sicher, dass Sie einen Namen auswählen, der dem gesamten Team bekannt ist).

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. Gehen Sie zu Plugins > Zeplin > Ausgewählte Zeichenflächen exportieren (Plugins > Zeplin > Export Selected Artboards).
3. Wählen Sie das Projekt aus, in das Sie Ihre Designs hochladen möchten, und klicken Sie dann auf Importieren.

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 Werkzeug 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. (die 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, vielleicht 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 Dokument mit Spezifikationen 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 nur wenigen Klicks.
• Erstellen Sie Style-Guides, die dem Design-Team helfen, konsistent zu bleiben.
• Nutzen Sie die Vorteile der Slack-Integration und benachrichtigen Sie Ihr Team bei jeder Aktualisierung sofort.

Versuchen Sie 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 Werkzeugen hören!

Nützliche Links

• Plugins für Sketch
• Sketch Tutorials auf Envato Tuts+
• Sketch Websitevorlagen auf dem Envato Market
• @zeplin_io auf Twitter
  
• zeplin.io