Screendesign

Medieninformatik am Campus Gummersbach

Advanced Prototyping with Sketch & Figma

Dauer
150 min
Typ
Training
Maximale Teilnehmerzahl
40 Teilnehmer
Verantwortlich
Volker Schaefer
Info
Wie können wir Prototypen in Sketch oder Figma systematisch aufbauen?

Termine:

Worum geht es?

In diesem Training befassen wir uns mit der Erstellung von Protoypen in Sketch und Figma. Sobald die Kompexität der Views und damit die Anzahl der benutzten Elemente zunimmt, steigt auch die Gefahr, dass die Struktur des Projektes sich verschlechtert und irgendwann die Übersicht verloren geht.

Verstärkt wird die Problematik noch, wenn viele unterschiedliche Views in dem Projekt hinzukommen und zur jeder View noch angepasste Views für unterschiedliche Endgeräte oder Varianten.

Wir werden uns mit Techniken beschäfigen und lernen Funktionen von Sketch und Figma kennen, die uns dabei helfen systematische, gut strukturierte und konsistente Prototypen zu erstellen.

Was muss ich mitbringen?

  • eigener Rechner mit Sketch oder Figma
  • sicherer Umgang in Sketch oder Figma

Sie haben keinen Rechner?

Kein Problem, denn wir haben welche. Allerdings nur Macs. Uuuuuhh. Wenn Sie einen brauchen, bitte rechtzeitig an Volker Schaefer wenden. Unsere Rechner können nur für die Workshops und Trainings ausgeliehen werden. Im MI Pool stehen aber immer Rechner für Sie bereit.

Aufgaben

Aufgabe 1

Laden Sie das Material herunter und öffnen Sie das enthaltene Projekt in Sketch oder importieren Sie es in Figma.

Zunächst geht es darum die Struktur der vorhanden View und darin enthaltenen Elemente zu verbessern. Beachten Sie dabei folgende Punkte:

  • Gruppieren Sie Elemente die logisch zusammen gehören und geben Sie den Gruppen und ggf. den einzelnen Elementen aussagekräftige Namen.
  • Sortieren Sie die Gruppen und Elemente in der Ebenenleiste nach einem bestimmten Schema. Eine Möglichkeit ist, die Elemente in der Reihenfolge, wie sie auf der Zeichenfläche vorkommen, zu sortieren, und zwar von oben nach unten.
  • Erzeugen Sie Komponenten bzw. Symbole für Elemente, die mehrfach vorkommen. Diese helfen dabei ein konsistentes Layout, auch über mehrere Views hinaus, zu ermöglichen.

Aufgabe 2

Nun soll für die vorhandene View ein Layout für das iPad mini erzeugt werden. Konfigurieren Sie dazu zunächst die Elemente so, dass sie sich automatisch anpassen, wenn die Größe der View geändert wird. Duplizieren Sie anschließend das Frame oder Artboard und stellen Sie es auf die Größe des iPad mini ein.

Material

Tutorials

Figma

Sketch