Web · Deep Dive 08
Web Design
Das Designhandwerk vor dem Code — Research, UX, visuelle Richtung und ein Design-System in Figma, das die Entwicklung bauen kann, ohne zu raten.
Der Rahmen
Designgetriebene Arbeit, bei der es darauf ankommt, wie etwas aussieht und sich anfühlt: Discovery und UX, visuelle Richtung an deine Marke gekoppelt, Interaktion und Motion sowie eine Component-Library, die als echtes System übergeben wird – Tokens, States und Specs, kein Ordner mit hübschen Screens. Wir gestalten für den Build, damit das, was wir zeichnen, auch live geht.
Kommt dir das bekannt vor?
-
Die Seite sieht aus wie ein Template, weil sie eines ist – und man sieht es.
-
Jede Seite wurde isoliert gestaltet, also fühlt sich nichts wie dasselbe Produkt an.
-
Schöne Mockups, die zerfielen, sobald echte Entwicklung sie angefasst hat.
-
Deine Marke wirkt im Deck scharf und auf der Live-Seite generisch.
-
Niemand kann sagen, was das „Design-System“ eigentlich ist – da ist nur ein Figma-Friedhof.
Der Kundennutzen
Was du davon hast
Sobald es läuft.
Ein Look, der unverkennbar deiner ist – nicht der nächste Dribbble-Trend.
-
Ein kohärentes System über jede Seite, jeden Breakpoint und jeden State.
-
Designs annotiert und tokenisiert, sodass Entwicklung sie baut, wie gezeichnet.
-
Schnellere Entscheidungen – klickbare Prototypen statt Geschmacksdebatten.
-
Eine Design-Library, die dein Team weiterwachsen lässt, wenn wir weg sind.
Phasen
⏱ 3–8 Wochen typischWie Web Design tatsächlich abläuft.
-
01
Discover
Zielgruppe, Ziele und ein ehrlicher Blick auf die aktuelle Experience. Wir mappen die Journeys, die zählen, bevor ein einziger Screen entsteht.
-
02
Richtung
Zwei oder drei visuelle Routen – Typo, Farbe, Motion, Ton – an echten Inhalten getestet. Wir wählen die Richtung gemeinsam, nicht im luftleeren Raum.
-
03
System
Tokens, Components und Layouts einmal gebaut und überall wiederverwendet. Interaktiver Prototyp, damit du das Produkt fühlst, bevor es Code ist.
-
04
Übergabe
Specs, States und Accessibility-Notes für die Entwicklung verdrahtet. Wir bleiben durch den Build nah dran, damit nichts verloren geht.
Die Übergabe
Du bekommst
Was in du erhältst – jedes Artefakt, nichts bleibt verborgen.
-
UX-Flows und Wireframes für die Journeys, die zählen
-
Visuelles Design-System (Typo, Farbe, Spacing, Motion) als Tokens
-
Figma-Component-Library mit Varianten und States
-
Klickbarer Prototyp der zentralen Flows
-
Responsive Layouts von Mobile bis Wide-Desktop
-
Accessibility-geprüfte Farben und Kontraste (WCAG 2.2 AA)
-
Developer-Handover mit Specs und Annotationen
Häufige Fragen
-
Q·01 Worin unterscheidet sich das von Frontend Development?
Web Design ist das Designhandwerk – Research, UX, visuelle Richtung und das System in Figma. Frontend Development baut das in Code. Beides passt natürlich zusammen: hier gestalten, dort bauen, mit demselben Team, das es trägt, damit zwischen beidem nichts verloren geht.
-
Q·02 Arbeitet ihr in Figma?
Ja – Figma ist die Basis. Wir bauen mit Components, Varianten und Tokens, damit die Datei ein lebendes System bleibt und sauber auf Code (shadcn / radix, Tailwind-Tokens) mappt, wenn gebaut wird.
-
Q·03 Könnt ihr mit unserer bestehenden Marke arbeiten?
Auf jeden Fall. Hast du eine Marke, übertragen wir sie ehrlich ins Web – gleiche Stimme, auf dem Screen schärfer. Hast du keine, können wir als Teil der Arbeit eine leichte visuelle Identität formen.
-
Q·04 Baut ihr es auch?
Meistens ja, mit unserem Frontend-Team – das ist der sauberste Weg. Aber die Übergabe ist so gebaut, dass sie jede:r umsetzen kann; habt ihr interne Entwicklung, hat sie alles, was sie braucht.
-
Q·05 Gestaltet ihr barrierefrei?
Von Anfang an, nicht als Aufräumrunde am Ende. Kontrast, Fokusreihenfolge und Touch-Targets sind eingeplant und vor der Übergabe gegen WCAG 2.2 AA geprüft.
Bereit zum Starten
Lass es aussehen, als meinst du es ernst.
Ein kurzer Design-Sprint, zwei ehrliche Richtungen und ein klarer Eindruck, wie sich dein Produkt anfühlen sollte. Lass uns etwas gestalten, das wirklich deins ist.
Design-Projekt startenDie größere Karte
Alle Serviceseiten auf einen Blick.
Jeder der folgenden Links führt dich zu einer separaten Seite mit Informationen zu einem unserer vier Servicebereiche. Wechsele einfach den Bereich – anderer Service, gleiche Arbeitsweise.