Zum Inhalt springen
Sprache
DE EN FR
Projekt starten

UX/UI-Experte: 20 Jahre Erfahrung mit Design Principles

Design Principles sind kein Regelwerk, das man einmal schreibt und dann abhakt. Sie verschieben sich mit der Technik, den Geräten und dem, was Nutzerinnen und Nutzer gewohnt sind.

Design-Arbeitsplatz bei cloudtec: Auf dem breiten Monitor ist ein Design-System in Figma geöffnet, auf dem Laptop daneben die Farbpalette.

Urs Imhof, CXO bei cloudtec, arbeitet seit gut 20 Jahren an Benutzeroberflächen. Wir haben ihn gefragt, was sich in dieser Zeit verändert hat, wie er ein neues Projekt angeht und womit er heute arbeitet.

Wer ist Urs?

Urs kümmert sich um die digitale User Experience. Er konzipiert und gestaltet Benutzeroberflächen, von der Struktur über die Interaktion bis zu Farbe, Form und Typografie. Sein Thema ist die Verbindung von Funktion und Ästhetik: Oberflächen, die nicht nur gut aussehen, sondern sich auch bedienen lassen. Ausserhalb des Bildschirms gehören Hunde und Musik dazu.

Vom animierten GIF zum Design-System

Angefangen hat Urs mit Websites für die Bands, in denen er selbst als Schlagzeuger spielte. Nach der Ausbildung zum Kaufmann stieg er bei seinem damaligen Arbeitgeber in der E-Solutions-Abteilung ein. Das Internet lief über die Telefonleitung, Seiten bestanden aus Text und gelegentlich einem Bild, zur Auswahl standen eine Handvoll Schriften. Dazu kamen animierte GIFs und Gästebücher, später Frames und Layouts aus HTML-Tabellen. Mobile Geräte gab es nicht, responsive Design entsprechend auch nicht.

Es folgte ein Abstecher zu Flash. Animation war plötzlich möglich, aber die Seiten waren in sich geschlossen, luden langsam und begannen mit Intros, die niemand sehen wollte. Adobe hat den Flash Player Ende 2020 endgültig eingestellt. Danach ging die Entwicklung über Video, immer ausgereiftere HTML- und CSS-Grundlagen bis zu den Usability-Standards, an denen wir uns heute orientieren.

Figma-Datei «Stack Style Guide»: links die Komponenten-Bibliothek, in der Mitte die Screens, rechts die Farb- und Effekt-Styles.
Das Design-System des cloudtec Stack in Figma: Komponenten links, Styles rechts, dazwischen die Screens, die daraus entstehen.

Wie ein neues Projekt startet

Technisch ist heute fast alles möglich, komplexe Layouts wären einfacher umzusetzen als je zuvor. Gleichzeitig ist das Wissen darüber gewachsen, was funktioniert und was nicht. In professionellen Projekten erfinden wir das Rad deshalb selten neu: Die Navigation steht dort, wo sie erwartet wird, und nicht plötzlich unten links. Gestaltet wird mobile first, das Navigationsmuster richtet sich nach Umfang und Struktur der Plattform. Dazu kommt das Corporate Design des Kunden. Je vollständiger es vorliegt, desto schneller steht ein tragfähiges Grundgerüst.

Zwischen Werkzeug und Bühne

Ob eine Oberfläche deine Marke stärkt, entscheidet sich an drei Fragen: Wie ist das Corporate Design angelegt? Was braucht die Zielgruppe? Und wie technikaffin sind die künftigen Nutzer? Je komplexer die Funktionalität, desto mehr muss das Interface abfedern. Jedes Produkt liegt irgendwo zwischen reinem Werkzeug und emotionaler Präsentation, und das Layout muss diese Einordnung spiegeln. Die Spannweite reicht von schlicht und aufgeräumt bis grossflächig und animiert.

Womit wir heute arbeiten

Im UX-Design setzen wir auf Figma: Nähe zur Entwicklung, grosse Plugin-Auswahl, und in der Plattformentwicklung mit ihren umfangreichen Design-Systemen zahlen sich Komponenten-Bibliotheken, Variablen-Sammlungen und lokale Styles unmittelbar aus. Für Illustration, Bildbearbeitung und Bewegtbild kommen weiterhin Adobe-Produkte dazu: Illustrator, Photoshop, After Effects und Premiere.

Was als Nächstes kommt

Nutzerzentrierte Prinzipien bleiben der Massstab: Jede Interaktion soll ohne Nachdenken funktionieren. Künstliche Intelligenz verschiebt vor allem die Produktion: Varianten, Zwischenstände und Prototypen entstehen schneller. Die Entscheidung darüber, was davon trägt, bleibt beim Team. Und die Nutzung verschiebt sich weiter Richtung App-Logik: Plattformen fühlen sich zunehmend wie Produkte an, nicht wie Websites.

Kurz- bis mittelfristig beschäftigen uns diese Themen:

  • Künstliche Intelligenz: im Entstehungsprozess und als Funktion im Produkt selbst.
  • Progressive Web Apps für Anwendungen, die sich wie native Apps anfühlen sollen, ohne den Umweg über einen App Store.
  • Dark Mode, damit sich das Layout an die Einstellung im Betriebssystem anpasst.
  • Motion Design und Micro-Interactions als Rückmeldung auf eine Aktion, nicht als Dekoration.
Geschrieben von Christian Knellwolf CEO

Web 3 Minuten Lesezeit