Termine:
Worum geht es?
In diesem Training geht es darum, dass Sie den Umgang mit Sketch und Figma festigen und bestimmte Workflows, zur Erstellung von Entwürfen, erlernen.
Als Übung werden Sie dazu ihre papierbasierten Layouts bzw. Wireframes in Form von Grey Box-Wireframes konkretisieren und damit systematisch in ein digitales Medium übertragen.
Was sollte ich vorbereiten?
Sie sollten für diesen Workshop einigermaßen sicher im Umgang mit Sketch oder Figma sein und die Aufgaben aus den Basic-Workshop in einem angemessenen Tempo gelöst bekommen.
Damit Sie in diesem Workshop arbeitsfähig sind, ist es wichtig, dass Sie papierbasierte Wireframes mitbringen, die Sie, entweder in dem Workshop „Layouts mit Wireframes” oder für ihr Projekt, erstellt haben.
Aufgaben
- Erzeugen Sie zunächst ein Frame in Figma oder ein Artboard in Sketch mit den Maßen eines Smartphone Displays.
- Analysieren Sie ihre Wireframes und erstellen Sie ein geeignetes Raster für ihr Frame oder Artboard.
- Übertragen Sie nun ihre papierbasierten Wireframes Stück für Stück in das Frame oder Artboard.
- Erzeugen Sie für jedes einzelne Wireframe ein Frame oder Artboard.
- Optimieren Sie Ihren Entwurf ggf. in einer Iteration.
Worauf sollten Sie achten?
- Wichtig ist, dass Sie immer möglichst präzise und konsistent arbeiten:
- Richten Sie alle Elemente an dem Raster aus und positionieren Sie sie pixelgenau.
- Achten Sie darauf, dass die Abstände zwischen einzelnen Elementen nicht willkürlich sind und bestimmten Gesetzmäßigkeiten folgen.
- Alle Elemente sollen einer einheitlichen Form- und Farbsprache folgen. Das heißt, Elemente, die die gleiche Funktion haben, haben das gleiche Erscheinungsbild. Hierzu können Sie von einzelnen Elementen Components bzw. Symbols erstellen, um diese wieder zu verwenden.
- Alle Elemente, die zu einer Gruppe gehören, haben die gleichen Abstände zueinander und das gleiche Erscheinungsbild
- Versuche Sie Ihr Layout für das mobile Endgerät anzupassen:
- Die zur Verfügung stehende Arbeitsfläche ist relativ klein. Nutzen Sie diese deshalb möglichst gut aus. Lassen Sie beispielsweise am linken und rechten Rand nicht zu viel Weißraum stehen.
- Schaltflächen oder Links dürfen nicht zu klein sein, so dass Sie mit dem Finger noch zu benutzen sind.
- Texte sollten nicht zu schmal laufen und Bilder dürfen nicht zu klein werden. In den meisten Fällen erstreckt sich ein Text oder Bild über die gesamte Bildschirmbreite.
- Auch wenn wir hier noch in einer frühen Entwurfsphase sind, behalten Sie schon im Hinterkopf, dass auf dem Smartphone Effekte oder Interaktionen via Mouseover nicht funktionieren.
- Passen Sie die Typografie so an, dass die Texte gut strukturiert und lesbar sind
- Überschriften und Fließtexte müssen sich weit genug voneinander unterscheiden. Hierbei müssen sich hierarchische Strukturen bilden: Headlines sind wichtiger als Subheadlines und Subheadlines sind wichtiger als Fließtexte.
- Sorgen Sie für einen optimale Schriftgröße. Zu kleiner Text ist schwer oder gar nicht zu lesen aber auch zu großer Text stört den Lesefluss.
- Die Relation zwischen Schriftgröße, Zeilenlänge, Wort- und Zeilenabstand muss stimmig sein.
Material / Upload
Folien zum Training
Upload Wireframes
