In diesem Training geht es darum, wie man mit Sketch und Figma Entwürfe systematisch aufbauen kann, so dass sie übersichtlich, gut strukturiert und konsistent sind.
Bevor mit dem Layouten begonnen wird, ist es von Vorteil, sich eine Systematik zu überlegen, wie man die einzelnen Views anordnet und benennt. Wenn die Anzahl der Views steigt, an denen man arbeitet, diese noch für unterschiedliche Endgeräte erzeugt und dazu noch Varianten erstellt, kann es ansonsten passieren, dass der Überblick schnell verloren geht. Zudem ist für den Export der Views, zur weiteren Verarbeitung, ein systematisch gut aufgebautes Dokument von Vorteil.
Auch innerhalb der Views sollte für eine gute Struktur gesorgt werden. Dies hilft dabei einzelne Elemente oder Elementgruppen wieder zu finden, falls man diese beispielsweise bearbeiten oder neu positionieren möchte.
Für ein gutes Design ist es wichtig, dass es über mehrere Views hingweg konsistent ist. Dazu gehört, dass alle Elemente und Elementgruppen, die die gleiche Funktion haben, auch das gleiche Erscheinungsbild haben. Hierbei kann einem Sketch und Figma mit unterschiedlichen Werkzeugen unterstützen.
An diesem Workshop sollten Sie nur teilnehmen, wenn Sie fit in dem Umgang mit Sketch oder Figma sind und die Aufgaben aus den Basic-Workshops ohne Probleme lösen können. Zudem sollten Sie schon eine gewissen Routine darin besitzen, Layouts in Sketch und Figma aufzubauen.
Damit Sie einen guten Einstieg in das Training haben, arbeiten Sie bitte folgende Videotutorials durch.
Für Figma:
Für Sketch:
Erstellen Sie drei Screens, die den Vorlagen aus dem Arbeitspaket möglichst 1 zu 1 entsprechen. Im Ordner “assets”, aus dem Arbeitspaket, sind die benötigten Bilder enthalten.
Schriftart: Helvetica neue
Größe der Screens: 375px x 667px (iPhone 7)
Gehen Sie beim Aufbau der Screens möglichst systematisch vor.
Es empfiehlt sich aussagekräftige Namen für die einzelnen Frames / Artboards, Layer und Elemente zu verwenden.
Erstellen Sie sich ein Set aus Components oder Symbols für Elemente, die häufig wiederverwendet werden.