Skip to main content
Logbuch

UX verstehen, UI vermitteln – wie Studierende an der SfG Basel lernen, für andere zu gestalten

By 30. Juni 2025No Comments
Visualisierung eines stilisierten Gehirns aus hellbeigem Ton auf ockerfarbenem Hintergrund, ergänzt durch leuchtend gelbe, abstrahierte Interface-Elemente – Symbol für UX-Wissenstransfer im Bildungs- und Designkontext.

UX lehren heisst, Perspektiven zu öffnen: Im Modul Interface Design an der SfG Basel entwickelten Studierende nutzerzentrierte Lösungen – begleitet von unserer Erfahrung aus der Praxis.

UX verstehen, UI vermitteln

Wie Studierende an der SfG Basel lernen, für andere zu gestalten

Wie schafft man Vertrauen bei Usern, die nicht mit dem Smartphone aufgewachsen sind? In einem viertägigen Modul entwickelten Interaction Design-Studierende eine Landingpage für ein fiktives eBike-Unternehmen – gezielt ausgerichtet auf Menschen ab 60.

Gestalten heisst verstehen

Was macht gutes UI-Design aus? Und wie bringt man Menschen 60+ mit einem digitalen Produkt wirklich weiter? Mit genau diesen Fragen haben wir uns gemeinsam mit den Studierenden im 3. Semester des Studiengangs HF Interaction Design an der Schule für Gestaltung Basel beschäftigt.

Mehr zum Studiengang an der Schule für Gestaltung Basel gibt’s hier: 

Von der Idee bis zum Prototyp: So wurde gedacht, gestaltet und getestet

Im Rahmen eines viertägigen Moduls, das wir konzipiert und als Lehrpersonen begleitet haben, entwickelten die Studierenden eine Landingpage für ein fiktives eBike-Unternehmen – mit besonderem Fokus auf die Bedürfnisse einer älteren Zielgruppe.

Vom ersten User Insight bis zum klickbaren Prototyp vermittelten wir Methoden, teilten unsere Praxiserfahrungen und begleiteten die Studierenden durch alle Phasen des Designprozesses. Wie dabei aus Ideen konkrete Lösungen wurden – und welche Erkenntnisse über UX, Empathie und Design für alle gewonnen wurden – zeigen wir hier Schritt für Schritt.

Tag 1 – Klar denken: Ziel, Zielgruppe, Inhalte

Der Start ins Modul war direkt hands-on. Nach einer kurzen Einführung ins Projekt tauchten die Studierenden in die strategische Planung ein:

  • Was soll die Landingpage erreichen?
  • Wer genau ist unsere Zielgruppe
  • Und was brauchen Menschen 60+, um online Vertrauen zu fassen?

Mit Hilfe der Proto-Persona-Methode entstanden erste realitätsnahe Nutzerprofile – mit echten Sorgen, Wünschen und digitalen Hürden. Danach ging’s an die Inhalte: Nach dem Prinzip «Content First» wurde überlegt, welche Informationen wirklich zählen. Das Ergebnis: Klar priorisierte Content-Listen und erste Skizzen für Aufbau und Struktur.

Tag 2 – Struktur geben: Ordnung, Übersicht, Komponenten

Der zweite Tag stand im Zeichen des Layouts. Wie entsteht ein Design, das nicht nur schön aussieht, sondern auch klar führt?

Mit Hilfe der Gestaltgesetze, UX Prinzipien und UI- Komponenten entwickelten die Studierenden strukturierte Wireframes. In Miro entstanden erste Prototypen – mit Blick auf die Bedürfnisse der Zielgruppe nach Übersicht, Orientierung und guter Lesbarkeit.

Tag 3 – Design für alle: Accessibility & Prototyping

Am dritten Tag wurde es konkret: Die Studierenden entwickelten Moodboards, bauten ihre eigenen Designsysteme (Typografie, Farben, Icons, Buttons) und übertrugen ihre Layouts in komponentenbasierte Designs. Danach ging es in Figma an die Umsetzung: Das finale Screen Design wurde gestaltet, Prototypen verlinkt und in kleinen Tests auf Verständlichkeit geprüft.

Tag 4 – Verfeinern, präsentieren, reflektieren

Am letzten Tag kam alles zusammen: Ist das Design auch wirklich nutzbar – gerade für ältere Nutzer:innen?

Die Studierenden prüften ihre Entwürfe auf Barrierefreiheit: Kontraste, Schriftgrößen, Touch-Ziele und klare Sprache standen im Fokus. Letzte Optimierungen wurden vorgenommen.
Dann wurde präsentiert – und das mit Stolz. Jeder Prototyp erzählte eine eigene Geschichte, jede Entscheidung war durchdacht. Im Peer-Feedback wurde deutlich: Das Bewusstsein für klares, zugängliches Design ist angekommen.

Papier-Prototypen aus farbigen Flächen, angeordnet auf weissem Papier. Layout und Seitenstruktur sind durch verschiedenfarbige Rechtecke visualisiert.
Farbig ausgearbeitete Userflows und Interface-Layouts auf grossen Papierbögen. Mit Textmarker und Stift wurden Inhalte, Navigationspfade und Interaktionen markiert.
Skizzierte Wireframes auf Papier mit handschriftlichen Annotationen und Post-its. Zu sehen sind erste Entwürfe einer Landingpage für ein eBike, mit Notizen zu Interaktion und Inhalt.

Ideen sichtbar machen: Von der ersten Skizze bis zum Papier-Prototyp: Die Studierenden haben im UX-Modul an der SfG Basel gelernt, wie man Gedanken strukturiert, Nutzer:innen versteht und Interfaces gestaltet, die wirklich wirken – Schritt für Schritt, Schicht für Schicht.

Was bleibt hängen?

  • Design beginnt mit Zuhören.
  • Gutes Interface Design entsteht nicht zufällig. Es braucht Strategie, Struktur – und ganz viel Einfühlungsvermögen.
  • Gutes Design ist klar, zugänglich und durchdacht – besonders für Zielgruppen, die selten im Mittelpunkt stehen.

In vier Tagen haben die Studierenden gelernt, wie man digitale Produkte entwickelt, die nicht nur schön aussehen, sondern auch einen echten Mehrwert bieten. Von der Zieldefinition bis zum klickbaren Prototyp – mit Struktur, Herz und viel Kreativität.

«Das Modul war super aufgebaut – praxisnah, motivierend und voller spannender Einblicke in den Berufsalltag als UX-Designer:in. Besonders geschätzt habe ich, dass wir eigene Ideen entwickeln konnten und gleichzeitig professionell begleitet wurden. Eure Erfahrung hat dem Ganzen Tiefe und Klarheit gegeben.»

Studentin HF Interaction Design

Porträt von Michael Schärlig Brand Experience Designer

Michael Schärlig kontaktieren

UX-Lehre mit Praxisbezug gesucht?

Sie planen ein ähnliches Projekt oder wollen Ihren UX-Kurs praxisnäher gestalten? Melden Sie sich gerne bei mir – wir teilen gerne unsere Erfahrungen.

Kontakt aufnehmen