1–2–3 Handbuch zum Verwalten von Design-Assets

So einfach es klingt. Schauen Sie sich die Zusammenfassung an und unten finden Sie eine Videoanleitung. Wenn Sie als Freiberufler oder in einem Team arbeiten - hier ist die Idee. Wir verwenden:

Skizze → Benutzeroberfläche, Zusammenfassung → Versionierung, Zeplin → Übergabe (optional)

TL; DR

1 - Oberste Ebene: Support & Client-Bibliotheken

Richten Sie in Abstract ein neues Projekt mit dem Namen ___Support ein - Dinge, die Sie häufig verwenden, z. B. UI-Kits, Betriebssystem-Kits, Wireframe-Kits und Mockups. Verwenden Sie eine Skizzendatei für jeden Asset-Typ und stellen Sie sicher, dass Sie diese Dateien als Bibliotheken festlegen.

Richten Sie als Nächstes für jeden Kunden ein separates Projekt ein, z. B. __Dreamland Inc., in dem Sie die Markenwerte aufbewahren - Dinge, die Sie projektübergreifend für denselben Kunden verwenden, z. B. Logos, Farben, Typografie. Alle hier enthaltenen Sketch-Dateien sind ebenfalls Bibliotheken.

Alle Elemente in den Bibliotheksdateien müssen Symbole sein. Verwenden Sie / in Symbolnamen zum Gruppieren (z. B. Tastaturen / Weiß, Tastaturen / Schwarz). Ich lasse die Symbolseite unordentlich und verwende zusätzliche Seiten, um die Elemente organisiert zu halten (mithilfe von Zeichenflächen). Beispiel: Der Client verwendet ein anderes Farbschema für Spring Collection. Ich erstelle eine Spring Colors-Seite mit allen Instanzen von colors in der __color.sketch-Bibliothek.

Seitentipp: Verwenden Sie Batch Create Symbols und Rename It, um Layer besser in Symbole zu konvertieren. Wenn Sie Symbols Page verwenden, verwenden Sie Symbol Organizer.

2 - Mittlere Ebene: Projekte

Verwenden Sie Neues Projekt für jede Client-Arbeit, sagen Sie Dreamland iOS App. Importieren Sie unterstützende Bibliotheken und Client-Bibliotheken entsprechend Ihren Anforderungen. Erstellen Sie eine Skizzendatei für die Benutzeroberfläche oder teilen Sie sie in mehrere Dateien auf. Wenn Sie alleine arbeiten, verwenden Sie eine Datei, die in Seiten unterteilt ist - eine für jeden Benutzerfluss. Für die Teamarbeit ist es besser, mehrere Skizzendateien zu erstellen, um Konflikte zu vermeiden. An der Arbeit mit vielen Dateien ist nichts auszusetzen. Sie kann sogar effizienter sein.

Verwenden Sie hier neben Bibliotheken der obersten Ebene auch Bibliotheken der mittleren Ebene. Diese enthalten häufig verwendete Projektentwurfsressourcen wie - Schaltflächen, Formularelemente, Symbole usw. Es ist in der Regel ein Overkill, sie in separaten Dateien zu speichern. Halten Sie sich daher an eine _dreamland-ios-Bibliothek und organisieren Sie Symbole in Pages, um die Übersichtlichkeit zu erhöhen. Später, wenn derselbe Client Sie für ein anderes Projekt anstellt, sagen Sie "Dreamland iOS App for Tour Guides", verknüpfen Sie einfach die _dreamland-ios-Bibliothek und verwenden Sie die Assets erneut.

Seitentipp: Um Assets auf Seiten für eine bessere Vorschau zu organisieren, verwenden Sie das Craft Plugin und die Tastenkombination: Befehlstaste + Umschalttaste + C.

3 - Untere Ebene: UI-Designdateien

Dies ist entweder eine Skizzendatei mit mehreren Seiten oder mehrere Skizzendateien, in denen Sie auf der Benutzeroberfläche arbeiten. Widerstehen Sie dem Drang, Symbole in den Designdateien zu belassen, es sei denn, es handelt sich um ein wirklich kleines Projekt. Behalten Sie im Idealfall nur die Symbole bei, die für diese Datei spezifisch sind und nicht im Freien verwendet werden. Beispiel: Wenn ich für alle Onboarding-Bildschirme den gleichen Hintergrund verwende, jedoch nicht außerhalb, behalte ich den Hintergrund als Symbol in der Datei "User Onboarding.sketch". Wenn das der Hintergrund ist, den ich woanders verwenden könnte, verschiebe ich ihn in die _dreamland-ios-Bibliothek.

Ich lasse die _dreamland-ios-Bibliothek im Hintergrund geöffnet und halte nach dem Entwerfen einiger Bildschirme einen Moment inne, um die Benennung richtig zu machen, die Symbole zu verschieben und sie in der Entwurfsdatei zu ersetzen. Es ist wirklich kein so großer Trubel. Der Punkt ist, dass Sie sich auf den Entwurfsprozess konzentrieren möchten. Versuchen Sie, sich nicht zu viele Gedanken darüber zu machen, was wohin gehen soll. Machen Sie nach dem Erstellen einiger Bildschirme oder wenn Sie etwas müde sind, eine kurze Pause und organisieren Sie die Assets. Auf diese Weise erstellen Sie jeden folgenden Bildschirm schneller und in der Zwischenzeit auch die Projektbibliothek.

Seitentipp: Verwenden Sie Sketch Runner, um Symbole schnell beim Namen zu nennen

BONUS - Ihr Entwickler ️ it

Wenn Sie die Karten richtig spielen, müssen Sie keine zusätzlichen Spezifikationen erstellen. Entwickler können Zeplin und die Bibliotheksdateien verwenden, um zuerst Code-Teile zu erstellen (Atome und Moleküle erstellen - Farben und Schriftgrößen extrahieren). Anschließend können sie in den Designdateien alles zusammenfügen (Organismen aufbauen - Abstände messen und Elemente positionieren).

Wenn Sie nach Möglichkeiten suchen, ein Design-Rahmenwerk zu organisieren und einzurichten, lesen Sie diesen Artikel.

Und fertig!

Video - So geht's im Detail + Tipps!

In diesem 24-minütigen Video-Tutorial, das in drei Teile unterteilt ist, erfahren Sie, wie Sie 1–2–3-Regeln in Ihrem Design-Workflow anwenden, und erhalten einige zusätzliche Tipps:

Klicken Sie auf das Bild, um die Lektionen anzusehen

Vorteile

  • Klare Struktur, leicht zu befolgen für jede Art von Arbeit
  • Bibliotheken können zwischen verschiedenen Projekten verknüpft werden
  • Einfache Updates und schnellere Lieferung für bestehende Kunden
  • Vorteile der Versionskontrolle - Sichern Sie alle Ihre Dateien, den Versionsverlauf, arbeiten Sie im Team und lösen Sie Konflikte und vieles mehr!

Nachteile

  • Sie müssen die Bibliotheksdatei im selben Projekt speichern → festschreiben und die Bibliotheksdateien aus anderen Projekten speichern → festschreiben → in Master-Bibliotheken zusammenführen, bevor Symbole aktualisiert werden
  • Textstile sowie freigegebene Stile sind in der verknüpften Bibliothek nicht verfügbar. Beachten Sie, dass in diesem Fall Textblöcke als Symbole verwendet werden

Ich hoffe, Sie haben etwas Nützliches gelernt! Wenn ja, schauen Sie sich über 40 Stunden Video-Tutorials für UI / UX-Designer auf learnux.io an