Kurs · UX & UI Design
Websites und Apps, die man gern benutzt
0.1 / Worum es geht
Gute Interfaces machen das Richtige leicht.
UX & UI Design zeigt, wie man Websites und Apps gestaltet, die klar, einheitlich und auf jedem Bildschirm gut bedienbar sind: vom Raster über Schrift und Komponenten bis zum klickbaren Prototyp und zur Übergabe an die Entwicklung. Der Kurs beginnt mit drei UX-Modulen (Begriffe, Flows, Vertiefung): Wie Menschen eine Website benutzen. Danach folgen fünf UI-Module: wie sie aussieht und sich anfühlt.
Als durchgehendes Beispiel begleitet dich Velowerk, eine kleine Velowerkstatt in Basel, die eine neue Website mit Online-Terminbuchung bekommt.
Leitfragen des Kurses:
FRAGE 1
Was macht ein Interface klar und einfach bedienbar?
FRAGE 2
Wie baue ich ein Layout, das auf jedem Bildschirm funktioniert?
FRAGE 3
Wie werden Komponenten zu einem einheitlichen System?
FRAGE 4
Wie kommt ein Entwurf getestet und vollständig in die Umsetzung?
Rahmen des Kurses:
ZIELGRUPPE
Gestaltende
Lernende in Grafik-, Medien-, Web- oder UX-Design, ohne Vorkenntnisse im Programmieren.
UMFANG
8 × 90 Min.
Plus Abschlussprojekt; jedes Modul auch einzeln nutzbar.
FORMAT
Hands-on
Drei UX-Module (A–C) und fünf UI-Module; Kurzinput, Werkzeug und Übung an einem durchgehenden Projekt.
BEZUG
Querverweise
Verbindungen zu Typografie, Barrierefreiheit, Visueller Kommunikation und Design Thinking.
0.2 / Lernziele
Nach dem Kurs gestaltest du Interfaces mit System.
Nach dem Kurs kannst du:
01
Interfaces nach Klarheit, Hierarchie und Konsistenz beurteilen
02
ein Raster und ein Abstandssystem für alle Bildschirmbreiten aufbauen
03
eine typografische Skala für Interfaces festlegen
04
Komponenten mit Varianten und allen Zuständen gestalten
05
Formulare gestalten, einen Prototyp testen und sauber übergeben
0.3 / Kursinhalt
Alle Module und Abschnitte auf einen Blick.
Fünf UI-Module, jedes mit einer Kernfrage und einem Werkzeug; die drei UX-Module A, B und C (Begriffe, Flows, Vertiefung) gehen voraus. Klicke auf ein Modul, um es zu öffnen.
MODUL 01
Was macht ein gutes Interface aus?
MODUL 02
Wo steht was, auf jedem Bildschirm?
MODUL 03
Wie liest man am Bildschirm?
MODUL 04
Woraus besteht ein Interface?
MODUL 05
Wie wird aus dem Entwurf ein Produkt?
0.4 / Ablauf pro Modul
Jedes Modul folgt demselben Ablauf.
Der Rhythmus bleibt gleich, der Inhalt wechselt:
01
Einstieg (10 Min.)
Eine Frage oder ein Problem aus dem Projektalltag.
02
Input (20 Min.)
Grundlagen und bewährte Abläufe.
03
Werkzeug (15 Min.)
Das Thema im interaktiven Werkzeug durchspielen.
04
Übung (35 Min.)
Anwendung an einem eigenen Projekt.
05
Reflexion (10 Min.)
Was übernimmst du in deinen Arbeitsablauf?
In jedem Abschnitt findest du einen fett gesetzten Merksatz mit Blitz-Icon, eine Übung hinter dem blauen Button, eine Vorlesefunktion und auf vielen Karten Beispiele hinter der Glühbirne.
0.5 / Leistungsnachweis
Am Ende steht eine getestete Website.
Abschlussprojekt: eine kleine Website für ein reales oder erfundenes Angebot, als klickbarer Prototyp mit Komponentenbibliothek, in fünf Schritten:
01
Analysieren
Bestehende Lösungen prüfen, Hauptaktion festlegen.
02
Strukturieren
Raster, Abstände und Layout für drei Breiten.
03
Gestalten
Schriftskala, Farben und Komponenten mit Zuständen.
04
Prototypen
Klickbaren Ablauf bauen und mit Menschen testen.
05
Übergeben
Ansichten, Zustände, Tokens und Texte dokumentieren.
Bewertungskriterien: klare Hierarchie, durchgehendes System, funktioniert auf Handy und Desktop, getestet, vollständig übergeben.
0.6 / Literatur und Quellen
Gute Interfaces haben Vorbilder.
• Krug, S. (2014): Don’t Make Me Think, Revisited. New Riders.
• Wathan, A. & Schoger, S. (2018): Refactoring UI.
• Frost, B. (2016): Atomic Design.
• Norman, D. (2013): The Design of Everyday Things. Revised Edition. Basic Books.
• Google: Material Design 3. m3.material.io
• Apple: Human Interface Guidelines.
• Wroblewski, L. (2011): Mobile First. A Book Apart.
Hinweis: Die Jahreszahlen nennen die Erstausgabe; viele Titel gibt es in neueren Auflagen und auf Deutsch.