Können Sie die Website gestalten und auch umsetzen?

Ja. Ich gestalte in Figma und setze in Webflow oder im Code um, oder ich gestalte nur und gebe Ihrem Entwickler die Figma-Datei mit Hinweisen, wie sich jeder Teil verhalten soll.

Können Sie mit unserem Corporate Design arbeiten?

Ja. Ihre Farben, Schriften und Ihr Logo bilden die Grundlage der Figma-Stile, und wo Ihr Corporate Design das Web nicht abdeckt, etwa bei Buttons, Formularen, Zuständen und kleinen Bildschirmen, schlage ich Ergänzungen zur Freigabe vor.

Wie viele Entwürfe bekomme ich zu sehen?

Zwei oder drei Richtungen am Anfang, danach die gewählte, verfeinert in Feedbackrunden. Jede Runde kommt mit der Begründung für die Änderungen, damit das Feedback um Ziele geht und nicht um Geschmack.

Führen Sie A/B-Tests durch?

Ja. Ich gestalte die Varianten, setze sie um, teile den Traffic mit einem Testing-Tool oder im Code der Website auf und messe das Ergebnis in Ihrer Webanalyse. Ein Test braucht genug Besucher, um verlässlich zu sein, und ich sage Ihnen vorher, wenn Ihre Website sie noch nicht hat.

Gestalten Sie zuerst für das Smartphone?

Meistens ja, weil die meisten Besucher mit dem Smartphone kommen. Jeder Entwurf wird auf Smartphone, Tablet und Desktop geprüft, und in den Breiten dazwischen, wo die meisten Layouts brechen.

Können Sie unsere bestehende Website neu gestalten?

Ja. Ich gehe von dem aus, was heute funktioniert, suche in Ihrer Webanalyse die Seiten und Schritte, an denen Besucher abspringen, und gestalte diese zuerst neu, statt bei null anzufangen.

Webdesign & UI-Design in Figma

Seit mehr als sieben Jahren arbeite ich auf beiden Seiten des Designs: Ich setze Figma-Entwürfe anderer Designer als Websites um und gestalte selbst Websites und Oberflächen. Die Umsetzung fremder Entwürfe hat mir gezeigt, wo ein Layout zwischen Figma und Browser bricht. Die eigenen Entwürfe haben mir gezeigt, warum jede dieser Entscheidungen getroffen wird und was es kostet, wenn sie schlecht getroffen wird.

Was Sie von einem Webdesign-Projekt bekommen

Entwürfe für Smartphone, Tablet und Desktop, nicht ein Desktop-Design, bei dem der Rest geraten wird.
Zwei oder drei Richtungen am Anfang, damit Sie zwischen echten Optionen wählen, statt den einzigen Entwurf abzunicken, den Sie gesehen haben.
Einen klickbaren Prototyp, um den Ablauf auf Ihrem eigenen Smartphone zu testen, bevor etwas gebaut wird.
Feedbackrunden, jede mit schriftlicher Begründung, bis das Design tut, was es soll.
Eine Figma-Datei, die hält: Komponenten, Farb- und Schriftstile und Abstandsregeln, die jeder Entwickler, oder ich, ohne Raten in eine Website übersetzen kann.

Gute Praxis, und was ich vermeide

Manche Entscheidungen sehen im Entwurf gut aus und arbeiten gegen die Menschen, die die Website benutzen. Ich gestalte nach diesen Regeln:

Eine Hauptaktion pro Bildschirm, sichtbar, ohne sie suchen zu müssen.
Fließtext ab 16 Pixeln, mit genug Kontrast, um ihn auch in der Sonne zu lesen (WCAG AA als Minimum).
Klickflächen in Daumengröße, mit genug Abstand, um nicht den falschen Link zu treffen.
Formulare, die nur fragen, was Sie wirklich nutzen. Jedes zusätzliche Feld kostet Anfragen.
Echte Inhalte in den Entwürfen, denn eine deutsche Überschrift, die auf vier Zeilen umbricht, sprengt ein Layout, das für eine Zeile Blindtext gedacht war.

Und ich vermeide, was Usability-Studien immer wieder als wirkungslos zeigen: Karussells auf der Startseite, deren zweites Bild kaum jemand sieht; graue Schrift auf grauem Grund; Pop-ups, bevor der Besucher etwas gelesen hat; eigene Mauszeiger und Scroll-Effekte, die dem Besucher die Kontrolle nehmen.

Wie sich ein Design auf verschiedenen Bildschirmen verhält

Ein Layout wird nicht in drei Größen gestaltet und ist dann fertig. Text bricht um, Bilder werden beschnitten, der Navigation geht der Platz aus, und die schlimmsten Probleme zeigen sich in den Breiten zwischen den Breakpoints. Ich prüfe jede Seite vom kleinen Smartphone bis zum breiten Monitor, mit langen und kurzen Wörtern und echten Bildern, und löse die Änderungen in Figma, wo sie wenig kosten, statt sie im Browser zu entdecken, wo sie teuer werden.

Usability und Conversion, nicht nur Optik

Ein Design ist fertig, wenn Besucher erledigen können, wofür sie gekommen sind. Das heißt: Navigation in den Worten Ihrer Kunden statt mit internen Begriffen, ein klarer nächster Schritt auf jeder Seite, Vertrauen genau dort, wo Menschen zögern (Bewertungen neben dem Formular, Preise vor dem Kontaktbutton), und Landingpages ohne Ablenkung von dem einen, was Besucher tun sollen.

A/B-Tests: Die Zahlen entscheiden lassen

Wenn zwei Richtungen beide richtig wirken, können die Besucher entscheiden:

Eine Frage aus echten Daten: etwa, warum die meisten Besucher die Preisseite ohne Klick verlassen.
Zwei Varianten in Figma, die sie unterschiedlich beantworten: anderes Layout, andere Reihenfolge, anderer Call-to-Action.
Beide Varianten umgesetzt, der Traffic aufgeteilt durch ein Testing-Tool wie Webflow Optimize oder VWO oder durch den Code der Website, gemessen in Google Analytics.
Genug Zeit für ein sicheres Ergebnis. Ein Test, der beim ersten Unterschied gestoppt wird, kürt meist den falschen Gewinner.
Die Gewinner-Variante live, und das Ergebnis dokumentiert für die nächste Entscheidung.

Mein ehrlicher Hinweis: A/B-Tests brauchen Traffic. Mit ein paar Hundert Besuchern im Monat kann ein Test Monate laufen, ohne ein klares Ergebnis. Dann sagt Ihnen ein Test mit fünf echten Nutzern mehr, und das empfehle ich Ihnen in dem Fall.

Ein Design, das auf jedem Bildschirm funktioniert.