Design

UI/UX-Design, das richtig aussieht und richtig funktioniert

Gjethe gestaltet Oberflächen für Websites, Webanwendungen und Mobile Apps: Nutzerforschung, Nutzerabläufe, Wireframes, High-Fidelity-Designs in Figma, klickbare Prototypen, Usability-Tests, Designsysteme und entwicklerfertige Übergabe. Die Preisgestaltung richtet sich nach Ihrem Projekt und wird in Ihrem Angebot vereinbart.

Kostenloses Erstgespräch buchenAngebot anfragen
  • Kostenlose Erstberatung
  • Schriftliches Angebot für Ihr Projekt
  • Flexible Zahlungsmeilensteine

Auf einen Blick

Deckt ab
Recherche, Abläufe, Wireframes, UI, Prototypen
Tool
Figma
Übergabe
Spezifikationen, Komponenten, Tokens
Vorgehen
Pro Projekt angeboten

Definition

Was ist UI/UX-Design?

UI/UX-Design ist die Praxis, digitale Produkte so zu gestalten, dass sie einfach und angenehm zu nutzen sind. UX-Design (User Experience) umfasst Struktur, Abläufe und Benutzbarkeit; UI-Design (User Interface) die visuelle Ebene, Layout, Typografie, Farbe und Komponenten.

Eine schöne Oberfläche, die verwirrt, kostet Geld, und eine funktionale, die unglaubwürdig aussieht, ebenfalls. Gutes Produktdesign leistet beides: Es macht den nächsten Schritt offensichtlich und das Produkt glaubwürdig. Wir beginnen bei dem, was Nutzer erreichen wollen, gestalten die Struktur vor dem Visuellen und testen mit echten Menschen, bevor irgendetwas gebaut wird, denn einen Prototyp zu ändern ist weit günstiger, als Code zu ändern. Designs werden mit Komponenten, Zuständen und Notizen übergeben, nach denen Entwickler ohne Raten bauen können.

Für wen ist es geeignet?

  • Startups vor der Entwicklung

    Abläufe und Look mit einem Prototyp validieren, bevor Geld in Code fließt.

  • SaaS-Produkte

    Dashboards, Onboarding und Einstellungen, die Nutzer ohne Support verstehen.

  • Mobile Apps

    iOS- und Android-Oberflächen, die Plattformkonventionen folgen.

  • Produkte, die ein Redesign brauchen

    Bestehende Oberflächen mit Usability-Problemen oder veraltetem Look.

Was enthalten ist und was Sie behalten

Was enthalten ist

  • Stakeholder- und Nutzerrecherche
  • Prüfung von Wettbewerbern und Mustern
  • Nutzer-Personas und Jobs to be done
  • Informationsarchitektur
  • User Flows
  • Low-Fidelity-Wireframes
  • High-Fidelity-UI-Design
  • Klickbare Prototypen
  • Usability-Tests
  • Barrierefreiheitsprüfung
  • Design System und Komponenten
  • Übergabe an Entwickler

Was Sie erhalten

Wird am Ende übergeben. Gehört Ihnen.

  • Zusammenfassung der Recherche
  • Nutzerabläufe und Wireframes
  • Finale Figma-Designs für jeden Screen und Zustand
  • Interaktiver Prototyp
  • Komponentenbibliothek und Übergabespezifikationen

UX gegenüber UI

UX-DesignUI-Design
Welche Frage es beantwortetKönnen Menschen ihr Ziel leicht erreichen?Wirkt es klar, einheitlich und vertrauenswürdig?
Beteiligte ArbeitRecherche, Abläufe, Struktur, Wireframes, TestsLayout, Typografie, Farbe, Komponenten, Zustände
AusgabeAbläufe, Wireframes, PrototypenHigh-Fidelity-Bildschirme und Design System
Scheitern sieht so ausNutzer verirren sich oder geben aufDas Produkt wirkt billig, uneinheitlich oder schwer lesbar

Warum wir vor dem visuellen Design wireframen

Wireframes sind einfache graue Layouts, die zeigen, was auf jedem Bildschirm steht und wie Bildschirme verbunden sind. Sie lassen alle auf die Struktur achten (welche Informationen in welcher Reihenfolge erscheinen und was der Nutzer als Nächstes tut), ohne über Farben oder Schriften zu debattieren.

Einen verwirrenden Ablauf in der Wireframe-Phase zu beheben dauert Minuten. Nach dem visuellen Design dauert es Stunden, nach der Entwicklung können es Tage sein. Deshalb lassen wir Wireframes freigeben, bevor High-Fidelity-Arbeit beginnt.

Mit echten Nutzern testen

Designer und Stakeholder kennen das Produkt zu gut, um seine Probleme zu sehen. Eine Handvoll Usability-Sitzungen, in denen Menschen außerhalb Ihres Teams echte Aufgaben am Prototyp zu lösen versuchen, deckt die meisten großen Probleme schnell auf.

Wir schreiben Aufgabenszenarien, führen moderierte oder unmoderierte Tests durch und machen aus unseren Beobachtungen konkrete Designänderungen. Die Ergebnisse teilen wir mit Ihnen als kurze Clips und priorisierte Liste, sodass Entscheidungen auf Belegen statt auf Meinung beruhen.

Barrierefreiheit eingebaut

Barrierefreies Design ist besseres Design für alle.

  • Farbkontrast nach WCAG AA
  • Lesbare Schriftgrößen und Zeilenlängen
  • Touch-Ziele, die für Finger groß genug sind
  • Klare Fokuszustände für Tastaturnutzer
  • Beschriftungen und Fehlermeldungen, die erklären, was zu tun ist
  • Keine Information allein über Farbe vermittelt

Eine Übergabe, nach der Entwickler bauen können

Designs sind nur nützlich, wenn sie wie vorgesehen gebaut werden. Wir organisieren Figma-Dateien mit benannten Komponenten, Auto Layout, definierten Abständen und Farb-Tokens und gestalten jeden Zustand: leer, Laden, Fehler, Hover, deaktiviert, Erfolg.

Entwickler erhalten annotierte Abläufe, responsives Verhalten für jeden Breakpoint und exportierbare Assets. Wir bleiben während der Entwicklung erreichbar, um Fragen zu beantworten und den Build gegen die Designs zu prüfen.

Onboarding gestalten, das Nutzer hält

Viele Produkte verlieren die meisten neuen Nutzer, bevor sie irgendeinen Nutzen sehen. Onboarding-Design konzentriert sich auf den kürzesten Weg zu diesem ersten nützlichen Moment: weniger Felder bei der Anmeldung, sinnvolle Voreinstellungen, Beispieldaten statt leerer Bildschirme und Hilfe, die erscheint, wenn sie gebraucht wird, statt als lange Tour.

Wir bilden die Onboarding-Reise mit Ihnen ab, erkennen in Ihren Analytics, wo Nutzer abspringen, und gestalten und testen Änderungen, die Menschen schneller zum Nutzen bringen.

So funktioniert UI/UX-Design, Schritt für Schritt

Jeder Schritt hat ein klares Ergebnis, das Sie prüfen können. Der Zeitrahmen wird in Ihrem Angebot vereinbart.

  1. 1

    Erkunden

    Ziele, Nutzer, Einschränkungen und Wettbewerber recherchiert.

  2. 2

    Struktur

    Informationsarchitektur und Nutzerabläufe abgebildet.

  3. 3

    Wireframe

    Low-Fidelity-Layouts für jeden wichtigen Screen, vor den Visuals freigegeben.

  4. 4

    Design

    High-Fidelity-UI in Ihrer Marke, mit allen Zuständen.

  5. 5

    Prototyp und Test

    Klickbarer Prototyp mit echten Nutzern getestet; Probleme behoben.

  6. 6

    Übergeben

    Entwicklerfertige Dateien, Komponenten und Support während des Baus.

Tools und was Ihr Angebot beeinflusst

Die Preisgestaltung richtet sich nach Ihrem Projekt und wird in Ihrem Angebot vereinbart. Diese Faktoren bestimmen es.

UI/UX-Design: Preisfaktoren
FaktorWarum er wichtig ist
Zahl der BildschirmeMehr Bildschirme und Zustände brauchen mehr Designzeit.
RecherchetiefeNutzerinterviews und Testrunden bringen Zeit und Erkenntnis.
PlattformenGetrennt für Web, iOS und Android zu gestalten bringt Mehrarbeit.
Design SystemEine vollständige Komponentenbibliothek braucht länger als reine Seitendesigns.
MarkenreifeOhne bestehende Markenrichtlinien muss die visuelle Richtung zuerst definiert werden.
InteraktionskomplexitätFortgeschrittene Animationen und individuelle Interaktionen bringen Prototyping-Arbeit.

Häufige Fehler, die Sie vermeiden sollten

Was bei uns am häufigsten schiefgeht und wie ein gutes Projekt es vermeidet.

  • Zuerst Visuals gestalten

    Ohne vereinbarte Struktur werden visuelle Designs immer wieder neu gemacht.

  • Nutzertests überspringen

    Ihr Team ist nicht Ihr Nutzer. Testen Sie mit Menschen, die das Produkt nicht kennen.

  • Randzustände vergessen

    Leere, Fehler- und Ladebildschirme sind die Stellen, an denen sich Produkte kaputt anfühlen.

  • Plattformkonventionen ignorieren

    Nutzer erwarten, dass iOS- und Android-Apps sich wie ihre Plattform verhalten.

  • Unorganisierte Dateien übergeben

    Unordentliche Figma-Dateien führen zu uneinheitlichen Builds.

Häufig gestellte Fragen

Gestalten Sie in Figma?

Ja. Figma ist unser Hauptwerkzeug, und Sie erhalten vollen Zugriff auf die Dateien.

Können Sie eine App gestalten, die jemand anderes baut?

Ja. Wir liefern entwicklerfertige Designs und Spezifikationen und können während des Builds neben Ihren Entwicklern arbeiten.

Können Sie auch bauen, was Sie gestalten?

Ja. Unser Entwicklungsteam kann Websites, Web-Apps und mobile Apps nach den Designs bauen, was Design und Umsetzung eng abgestimmt hält.

Wie funktionieren Korrekturen?

Zwei Korrekturrunden sind in jeder größeren Phase inbegriffen, Wireframes und visuelles Design, sodass Feedback dann bearbeitet wird, wenn Änderungen am günstigsten sind.

Machen Sie Nutzerforschung?

Ja, passend zum Projekt skaliert: von einer Prüfung von Analytics und Wettbewerbern bis zu Nutzerinterviews und moderierten Usability-Tests.

Können Sie unser bestehendes Produkt neu gestalten?

Ja. Wir beginnen mit einem UX-Audit des aktuellen Produkts, identifizieren die größten Probleme und gestalten bei Bedarf Schritt für Schritt neu.

Erstellen Sie Design Systems?

Ja. Ein Design System aus wiederverwendbaren Komponenten und Tokens hält Produkte einheitlich und macht künftiges Design und künftige Entwicklung schneller.

Gehören mir die Designs?

Ja. Sobald das Projekt bezahlt ist, gehören Ihnen alle Designs und Figma-Dateien.

Ist Barrierefreiheit enthalten?

Ja. Wir gestalten standardmäßig nach WCAG-AA-Kontrast und Usability-Richtlinien und kennzeichnen alles, was Entwicklungsaufmerksamkeit braucht.

Was brauchen Sie von uns zum Start?

Ihre Ziele, Zielnutzer, vorhandene Marken-Assets, Analytics oder Forschung und Zugang zum aktuellen Produkt, falls es eines gibt.

Können Sie Dashboards mit vielen Daten gestalten?

Ja. Datenlastige Dashboards brauchen sorgfältige Hierarchie, Filterung und Diagrammwahl; das ist ein häufiger Teil unserer SaaS-Arbeit.

Können Sie für iOS und Android gestalten?

Ja. Wir gestalten eine gemeinsame Produktstruktur und passen Navigation, Steuerelemente und Muster an die Konventionen jeder Plattform an, wo es zählt.

Verwandte Leistungen

Alle Design-Leistungen

Weiterlesen

Alle Ratgeber

UI/UX-Design nach Branche

Gestalten Sie Ihr Produkt richtig.

Sagen Sie uns, was Sie brauchen. Sie erhalten eine ehrliche Einschätzung, einen klaren Plan und ein schriftliches Angebot. Die erste Beratung ist immer kostenlos.

Kostenloses Erstgespräch buchenAngebot anfragen
  1. Wie es weitergeht
  2. 1Sie sagen uns, was Sie brauchen
  3. 2Wir melden uns möglichst innerhalb von 24 Stunden mit Rückfragen
  4. 3Sie erhalten ein schriftliches Angebot für Ihr Projekt