Wir beginnen mit Struktur und Inhalt und entwickeln darauf das visuelle Design. So kommuniziert die fertige Website klar und hat trotzdem eine eigene Haltung.
Gestaltung und Entwicklung bleiben im selben Studio. Bei jedem Layout denken wir die Umsetzung mit: wie sich die Schrift bei jeder Breite verhält, wo Animation einen Zweck erfüllt, wie Bilder und Video produziert und geladen werden. Deshalb bleibt die fertige Website nah am Entwurf.
Was wir liefern
- Sitemap, Seitenhierarchie und Navigation
- Nutzerwege und Wireframes
- Responsives UI-Design für Smartphone, Tablet und Desktop
- Interaktive Prototypen
- Spezifikationen für Animation und Interaktion
- Ein komponentenbasiertes Designsystem für die Entwicklung
Technologie & Umsetzung
Wir gestalten in Figma mit Komponenten und Tokens, die sich eins zu eins im Code wiederfinden. Ein Button, ein Titelstil oder ein Abstand bedeutet in der Designdatei dasselbe wie in der Umsetzung. Layouts werden für Smartphone, Tablet und Desktop ausgearbeitet, wo immer möglich mit echten Inhalten statt Blindtext.
Barrierefreiheit wird bereits im Design entschieden, wo sie am wenigsten kostet: Farbkontraste, Schriftgrössen, Fokuszustände, ausreichend grosse Touch-Flächen und eine Titelstruktur, die auch für Screenreader Sinn ergibt.
Ablauf
Briefing und Inhalte
Was die Website leisten soll, welche Inhalte vorhanden sind und was noch geschrieben werden muss.
Struktur
Sitemap, Seitentypen und Wireframes, abgestimmt, bevor die Gestaltung beginnt.
Visuelles Design
Zuerst die Schlüsselseiten, dann das System für alle Seitentypen.
Prototyp und Übergabe
Ein klickbarer Prototyp zur Prüfung, danach Komponenten und Spezifikationen für die Entwicklung.
Anwendungsbeispiel
Ein illustratives Szenario, keine Beschreibung eines abgeschlossenen Projekts.
Ein wachsendes Unternehmen braucht eine Website, die mehrere Leistungen klar erklärt, ohne die eigene Identität zu verwässern.