UX/UI-Design

Wir beginnen damit zu verstehen, wer das Produkt nutzen wird und was diese Personen erreichen müssen. Das klingt offensichtlich, aber es ist erstaunlich, wie viele Projekte direkt zum visuellen Design springen, ohne diese grundlegenden Fragen zuerst zu beantworten.

Für ein neues Produkt starten wir mit Wireframes und User Flows, die die wichtigsten Interaktionen abbilden. Das sind einfache, niedrig aufgelöste Skizzen, die sich auf Struktur und Navigation konzentrieren, nicht auf Farben und Schriften. Das Ziel in dieser Phase ist, die Logik richtig zu bekommen, bevor in pixelgenaue Visuals investiert wird.

Sobald die Struktur steht, gehen wir zu hochaufgelösten Mockups in Figma über. Hier nimmt die visuelle Identität Gestalt an: Typografie, Farbpalette, Abstände, Ikonografie und alle Details, die ein Produkt poliert wirken lassen. Wir arbeiten in dieser Phase iterativ, teilen Designs mit Ihnen für Feedback und verfeinern, bis es sich richtig anfühlt.

Jede Oberfläche, die wir gestalten, funktioniert über alle Bildschirmgrößen hinweg. Das ist kein nachträglich hinzugefügter Gedanke oder eine separate Mobile-Version. Wir gestalten von Anfang an mit responsivem Verhalten im Blick und stellen sicher, dass Layouts, Navigation und interaktive Elemente sich korrekt an Smartphones, Tablets und Desktops anpassen.

Barrierefreiheit ist uns ebenfalls wichtig. Wir folgen den WCAG-Richtlinien für Farbkontrast, Schriftgrößen, Tastaturnavigation und Screenreader-Kompatibilität. Nicht weil es eine Checkbox-Anforderung ist, sondern weil es das Produkt für mehr Menschen nutzbar macht.

Für größere Anwendungen erstellen wir Design-Systeme, die wiederverwendbare Komponenten definieren: Buttons, Formularfelder, Karten, Modals, Navigationselemente und mehr. Jede Komponente hat definierte Zustände (Standard, Hover, Aktiv, Deaktiviert, Fehler) und dokumentierte Nutzungsrichtlinien.

Dieser Ansatz hat zwei Vorteile. Erstens macht er die Anwendung durchgängig visuell konsistent, weil jede Instanz eines Buttons oder Formularfelds aus derselben Komponente stammt. Zweitens beschleunigt er die Entwicklung erheblich, weil die React-Komponentenbibliothek direkt auf das Design-System abgebildet wird. Wenn der Designer einen neuen Screen mit bestehenden Komponenten erstellt, kann der Entwickler ihn schnell mit bereits im Code vorhandenen Komponenten umsetzen.

Viele unserer Kunden kommen mit einer bestehenden Markenidentität zu uns, einschließlich Logos, Farben und Schriften. Wir arbeiten innerhalb dieser Richtlinien, um ein Anwendungsdesign zu erstellen, das sich wie eine natürliche Erweiterung der Marke anfühlt, ohne mit bestehenden Marketing-Materialien oder Drucksachen zu kollidieren.

Wenn Sie keine etablierten Markenrichtlinien haben, können wir diese als Teil des Designprozesses definieren. Das umfasst die Auswahl von Typografie, die Definition einer Farbpalette und die Erstellung eines grundlegenden Style Guides, der über alle Ihre digitalen Produkte hinweg gilt.

Der größte Unterschied zwischen der Zusammenarbeit mit einer reinen Design-Agentur und der Zusammenarbeit mit uns ist, dass unsere Designs immer umgesetzt werden. Es gibt keine Übergabe-Lücke, in der Details verloren gehen. Der Designer und der Entwickler sind im selben Team, oft prüft dieselbe Person beide Seiten. Was Sie in Figma freigeben, ist das, was Sie im Browser bekommen.

Wir gestalten auch mit echten Daten im Blick. Mockups mit perfektem Platzhaltertext sehen toll aus, aber echte Nutzer haben Namen mit 40 Zeichen, Adressen, die auf drei Zeilen umbrechen, und Statusmeldungen, die das Layout sprengen, wenn man nicht dafür geplant hat. Wir testen unsere Designs mit realistischen Daten, damit das Produkt in der echten Welt funktioniert, nicht nur in einer Präsentation.