UI Sketching

Workshop im Modul «Einführung in die Medieninformatik» // Campus Gummersbach

Über den Workshop

Lesezeit: ~ 1 min

Video ergo sum – Der Mensch ist ein visuelles Wesen. Von all seinen Sinnen ist der Sehsinn am besten ausgeprägt und entwickelt. Dafür setzt der Homo Sapiens allerdings auch etwa 80% seiner Gehirnleistung ein. Bilder helfen uns enorm dabei Sachverhalte, Konzepte, Abläufe und vieles andere zu verstehen. «Davon muss ich mir erst mal ein Bild machen» ist eine der Redewendungen, die diesen Grundgedanken wieder gibt, denn aus verschiedenen Informationen, Versatzstücken und Gedanken machen wir uns ein Bild. Für die Verarbeitung visueller Informationen ist die rechte Gehirnhälfte spezialisiert. Diese wird in Schule und Studium aber sehr oft vernachlässigt. In diesem Workshop kümmern wir uns ganz bewusst um sie.

Kursidee & Kursablauf

Mit Hilfe von einfachen Visualisierungen und UI Sketching sind wir in der Lage Ideen, Gedanken, Konzepte, Systeme, Layouts, etc. schnell und verständlich zu visualisieren und darüber zu kommunizieren, bzw. auf Basis der Visualisierung zu diskutieren. Es hilft im Konzeptions- und Entwickungsprozess enorm um:

  • die eigenen Gedanken und Ideen zu strukturieren
  • ein gemeinsames Bild für das Team zu entwickeln
  • eine konkrete Diskussionsgrundlage für Gespräche mit den verschiedenen Stakeholdern zu haben
  • Projektbeteiligte und Stakeholder aus einer passiven in eine aktive Haltung zu bringen
  • eine Basis für das spätere Screendesign und die Darstellungslogik zu erhalten
  • eine Übersicht über die verschiedenen Userflows zu bekommen
  • eine erste Prüfung des Datenmodells zu erhalten
  • uvm :)

Der Workshop läuft wie folgt ab:

  1. Kleiner Warm-up
  2. Grundlagen Sketching, UI & Visual Thinking
  3. Fingerübungen
  4. Recap «Hierarchical Task Analysis»
  5. Analyse des konkreten Use Cases
  6. Praktische Aufgabe
  7. Präsentation und Diskussion der Ergebnisse mit Buzzer

Vorbereitung

Zur Vorbereitung arbeiten Sie bitte den Artikel UI/UX sketching techniques 101 durch und schauen Sie sich das Video UI Sketching Conventions an und üben Sie anhand dieser Materialien die Basics von UI Sketching, so dass Sie Basic Shapes, Annotations und UI pattern conventions kennen und anwenden/ darstellen können.

Arbeiten Sie danach den Artikel Hierarchical Task Analysis und das gleichnamige Essay von Sebastian Kraiker durch, so dass Sie in der Lage sind, eigenständig HTAs zu erstellen.

Außerdem schauen Sie sich bitte dieses kurze Videointerview mit zwei Schiedsrichtern an und machen Sie sich mit den technischen Möglichkeiten von E-Ink Displays am Beispiel eines Kindle E-Book Readers und eines 7” Waveshare mit ESP8266 vertraut.

UI Sketching Conventions

E-Ink Displays

Kindle E-Book Demo

7” Waveshare mit ESP8266 Demo

Interviews mit Fußball Schiedsrichtern

Material

Bitte bringen Sie folgende Materialien mit:

  • Kugelschreiber mit schwarzer Mine
  • Dünner schwarzer Filzstift/ Fineliner, Strichstärke etwa 0.4mm
  • Mitteldicker schwarzer Filzstift, Strichstärke etwa 1mm
  • Mitteldicker hellblauer Filzstift, Strichstärke etwa 1mm
  • Optional: Hellgrauer Marker
  • 5 Blatt DIN A4 ohne Punktraster
  • 20 Blatt DIN A4 mit Punktraster
  • Post-its

Weitere Informationen

Slidedeck

Hier finden Sie den Foliensatz zum Workshop.

Online Training

Auf Udemy gibt es den Online Kurs Sketching for UX Designers von Krisztina Szerovay in dem noch viele weiterführende Themen behandelt werden.

Einbettung des Workshops

Dieser Workshop ist Teil des Moduls «Einführung in die Medieninformatik». Weitere Informationen zum Modul finden Sie in der Modulbeschreibung.

Links zur Aufgabe

Dokumentieren Sie Ihre Ergebnisse mit einem kurzen Video (3 bis 5 Minuten) und laden Sie dieses im Ilias bis zum Montag nach Ihrem Workshop hoch. Achten Sie darauf den Upload Bereich für Ihre Gruppe zu nutzen.