Design für Mobile- und Webanwendungen

UX/UI-Design für mobile und Webanwendungen

Wir entwerfen die Abläufe, Bildschirme und Komponenten Ihrer Anwendung gemeinsam mit ihrer technischen Architektur. Mockups und Prototypen ermöglichen es, Interaktionen vor der Entwicklung zu testen.

Unser erfahrener Designer Patrick verantwortet visuelles Design und Nutzerabläufe. Die Designarbeit fliesst direkt in unsere Mobile-Entwicklung und Webentwicklung ein.

Nutzerabläufe und Oberflächen

Nutzerabläufe

Wir bestimmen die Aufgaben, die Nutzer erledigen müssen, und die dazugehörigen Schritte: Navigation, Dateneingabe, Bestätigung und Fehlerkorrektur.

Visuelle Hierarchie

Wir definieren Typografie, Farben und Abstände zwischen Komponenten, um Überschriften, Informationen und Aktionen zu unterscheiden. Diese Entscheide fliessen in Mockups und das Komponentensystem ein.

Mobile, Tablet und Desktop

Wir passen Bildschirmaufbau, Navigation und Berührungsflächen an die Geräte an, welche Ihre Anwendung unterstützt.

Barrierefreiheit

Unsere Designs berücksichtigen die WCAG-Standards für Barrierefreiheit: ausreichende Kontraste, lesbare Schriftgrössen, Tastaturnavigation und Kompatibilität mit Screenreadern.

Unsere Designkompetenzen

UX Research

Personaanalyse, Nutzerabläufe, Wettbewerbsvergleich und Usability-Tests.

Wireframing und Prototyping

Wireframes mit geringem Detailgrad zur Validierung von Struktur und Interaktionen. Hochauflösende interaktive Figma-Prototypen prüfen das Nutzungserlebnis vor der Entwicklung.

UI-Design

Konsistente Designsysteme mit Typografie, Farbpalette, wiederverwendbaren Komponenten und Mikrointeraktionen.

Designsystem

Standardisierte Komponentenbibliothek für visuelle Konsistenz in der gesamten Anwendung. Sie erleichtert Wartung und Weiterentwicklung.

Werkzeuge und Methodik

Design in die Entwicklung integriert

Designer und Entwickler arbeiten bei Mockups und Umsetzung zusammen:

• Der Designer kennt die technischen Vorgaben von React Native und Next.js.
• Entwickler implementieren die in Figma definierten Bildschirme und Interaktionen.
• Figma-Komponenten lassen sich direkt auf React-Komponenten abbilden.

UX/UI-Projekte

• Time District – Marktplatzoberfläche für Sammler von Luxusuhren.
• Smatch – Abläufe für Profilerstellung und Partnersuche in einer Sporttreff-App.
• Pneumoscope – Oberfläche eines vernetzten Stethoskops für Gesundheitsfachpersonen mit Untersuchungsdaten.
• Muse – Weboberfläche zur Ansicht und Analyse von Besucherfeedback in Museen.
• Lausanne Time Machine – Touch-Oberfläche zur Erkundung historischer Lausanner Register an einem interaktiven Tisch.

Unser Designprozess

1. Discovery und Recherche (1–2 Wochen)

Verstehen Ihrer Geschäftsziele, Analyse der Zielnutzer und Wettbewerbsvergleich. Wir liefern ein UX-Briefing, das das gesamte Projekt leitet.

2. Informationsarchitektur (1 Woche)

Sitemap, Nutzerabläufe und Inhaltshierarchie. Wir strukturieren die Anwendung, damit jede Funktion mit möglichst wenigen Klicks erreichbar ist.

3. Wireframes und Validierung (1–2 Wochen)

Mockups mit geringem Detailgrad prüfen Struktur und zentrale Interaktionen. Schnelle Iterationen mit Ihrem Team, bevor das visuelle Design beginnt.

4. UI-Design und Komponentensystem (2–3 Wochen)

Entwicklung der visuellen Identität der Anwendung: Typografie, Farben, Ikonografie und Komponenten.

5. Interaktives Prototyping und Tests

Klickbarer Figma-Prototyp für das gesamte Nutzungserlebnis. Bei Bedarf Usability-Tests mit echten Nutzern.

6. Übergabe an die Entwicklung

Übergabe von Assets, technischen Spezifikationen und Leitfaden zum Designsystem. Laufende Unterstützung der Entwickler während der Umsetzung.

Häufige Fragen

Muss ich ein Design liefern oder können Sie es erstellen? Wir übernehmen das gesamte Design – von UX Research bis zum finalen UI-Design. Vorhandenes Design oder Markenrichtlinien integrieren und adaptieren wir für Mobile und Web.

Wie viel kostet UX/UI-Design? Design entspricht üblicherweise 15 bis 25 % des Gesamtbudgets. Für ein vollständiges Design mit UX Research, Wireframes, UI und Prototyp rechnen Sie je nach Komplexität mit CHF 8’000 bis CHF 25’000. Einen umfassenden Budgetrahmen finden Sie im Leitfaden: Wie viel kostet eine mobile App in der Schweiz?

Wie lange dauert die Designphase? Für ein vollständiges Projekt meist drei bis sechs Wochen. Ein einfaches Design wie Landingpage oder Unternehmenswebsite kann in ein bis zwei Wochen entstehen. Parallel zur Entwicklung lässt sich der Zeitplan verkürzen.

Nutzen Sie Vorlagen oder entwickeln Sie individuelle Designs? Wir gestalten Bildschirme anhand Ihrer visuellen Identität und Nutzerabläufe. Gemeinsame Komponenten bilden ein wiederverwendbares Designsystem.