Design in Figma
Website-Design in Figma, bereit zur Umsetzung.
Wireframe, Designsystem und responsive Layouts in einer Datei: mit Komponenten, Zuständen für Buttons und Felder, Rastern und echten Textlängen. Die Entwicklung öffnet die Datei und arbeitet, statt zu fragen, was mit einem Block auf dem Telefon passiert.
Wir liefern nur Design — oder Design und Umsetzung in einem Fluss.
Ein schönes Bild und ein arbeitsfähiges Layout sind zweierlei. Arbeitsfähig wird ein Layout, wenn es Komponenten, Zustände, Verhalten auf schmalen Bildschirmen und eine Antwort auf die Frage enthält: „Was passiert bei doppelt so viel Text?“
Unser Ansatz
Ein erprobter Weg zum Ergebnis.
- 01 Ausgangslage Geschäftsziele, Zielgruppe, Referenzen, Markenvorgaben und technische Anforderungen.
- 02 Struktur Eine Karte der Seiten und Blöcke: Was soll man auf jedem Bildschirm verstehen und tun.
- 03 Wireframe Schwarz-weiße Entwürfe der Schlüsselseiten — schnell änderbar, solange keine Farbe im Spiel ist.
- 04 Visuelle Sprache Typografie, Palette, Raster, Bildsprache und Verhalten der Elemente.
- 05 Layouts Desktop und Mobil für jedes Template, dazu Zustände und leere Bildschirme.
- 06 Übergabe Eine Datei mit Komponenten, Schriften, Icons und Hinweisen für die Entwicklung.
Leistungsumfang
Was alles zur Leistung gehört.
Wireframes
Entwürfe der Schlüsselseiten, bevor das visuelle Design beginnt.
Designsystem
Farben, Typografie, Abstände, Buttons, Felder, Karten, Fehlermeldungen.
Seiten-Layouts
Startseite, Leistung oder Kategorie, Produktseite, Kontakt, Formular, Servicesseiten.
Responsive Umsetzung
Eine mobile Fassung jedes Templates statt eines einzelnen „Desktop-Bildes“.
Interface-Zustände
Hover, Fokus, Fehler, Erfolg, leere Liste, Laden.
Icons und Grafik
Ein einheitlicher Icon-Satz und für das Web aufbereitete Bilder.
Datei für die Entwicklung
Strukturierte Seiten, benannte Ebenen, Komponenten und Auto Layout.
Warum BiiD
Keine Checkliste. Ein System, das funktioniert.
Fragen werden im Layout geklärt, nicht nachdem alles gebaut ist.
Wir prüfen Layouts mit langen Überschriften statt mit kurzem Blindtext.
Neue Seiten entstehen aus Komponenten, die es im System bereits gibt.
Jede Designerin kann weiterarbeiten, nicht nur wir.
FAQ
Fragen, die uns am häufigsten gestellt werden.
Ja. Sie erhalten eine Figma-Datei mit Layouts, Komponenten und Designsystem — jedes Entwicklungsteam kann damit arbeiten.
Meist sechs bis acht Templates: Startseite, Leistungsseite, Leistungsübersicht, Über uns, Kontakt, Blogbeitrag und Servicesseiten. Alles Weitere entsteht aus denselben Blöcken.
Korrekturen sind in jeder Phase vorgesehen: im Wireframe, in der visuellen Sprache und in den Layouts. Die Zahl der Iterationen halten wir zu Beginn fest, damit die Arbeit nicht zu endlosen Abstimmungen wird.
Ja, sofern eines vorliegt — wir nutzen dessen Farben, Schriften und Regeln. Gibt es keines, bauen wir im Projektrahmen ein minimales visuelles System auf.
Eine Figma-Datei mit benannten Ebenen und Komponenten, Schriften oder Links dazu, Icons als SVG, aufbereitete Bilder und Hinweise zum Verhalten der Blöcke auf verschiedenen Bildschirmgrößen.
Leistungen
Wobei wir unterstützen.
Sprechen wir
Beschreiben Sie die Aufgabe — sagen wir Ihnen, wie sie sich lösen lässt.
Auch wenn Sie dafür unsere Leistungen gar nicht brauchen. Ein Gespräch, nach dem Sie einen klaren nächsten Schritt haben.