Ein Website-Design muss nicht jedes Mal mit einem leeren Frame beginnen. Viele Arbeitsschritte lassen sich standardisieren, automatisieren oder als wiederverwendbare Komponenten vorbereiten.
Der wichtigste Grundsatz ist einfach: Zuerst werden Regeln, Inhalte und Grundelemente definiert. Erst danach entstehen daraus die einzelnen Seiten. Dieser Ansatz beschleunigt nicht nur den ersten Entwurf, sondern vor allem die Entwicklung weiterer Unterseiten, mobiler Versionen und späterer Website-Updates.
Gerade bei Websites für Kanzleien, Beratungen und mittelständische Unternehmen spart ein strukturiertes Figma-Setup viel Zeit. Diese Projekte bestehen häufig aus zahlreichen ähnlichen Seitentypen: Leistungen, Branchen, Teamprofile, Publikationen, Referenzen, Karriere und Kontakt. Werden diese Seiten ohne gemeinsames System gestaltet, entstehen schnell Inkonsistenzen und unnötige Abstimmungsschleifen.
1. Nicht mit einem leeren Frame beginnen
Eine der häufigsten Ursachen für langsame Designprozesse ist, dass Struktur, Inhalte und visuelle Gestaltung gleichzeitig entwickelt werden. Während die Startseite entsteht, wird noch über Navigation, Texte, Seitentypen und Markenpositionierung diskutiert.
Effizienter ist es, zunächst die vorhandenen Materialien zu sammeln. Dazu gehören die geplante Seitenstruktur, Logo und Markenfarben, bestehende Texte, Präsentationen, Broschüren, Referenzwebsites und eine Liste aller benötigten Seitentypen.
Bei einer Kanzlei sind das beispielsweise die Startseite, einzelne Rechtsgebiete, Branchen, Anwaltsporträts, Publikationen, News, Karriere und Kontakt. Bei einem B2B-Unternehmen kommen häufig Leistungsseiten, Lösungen, Case Studies und Produktbereiche hinzu.
Anschließend werden die wiederkehrenden Bausteine identifiziert: Seiteneinstieg, Leistungskarte, Personenprofil, Publikationskarte, Formular, Call-to-Action, Navigation und Footer. Aus diesen Elementen lässt sich später ein großer Teil der Website zusammensetzen.
2. Bestehende Websites direkt in Figma übernehmen
Bei einem Relaunch muss die bisherige Website nicht vollständig von Hand nachgebaut werden. Tools wie html.to.design können eine vorhandene Seite über ihre URL importieren und in editierbare Figma-Ebenen umwandeln.
Das ist besonders praktisch, wenn bestimmte Inhalte oder Strukturen erhalten bleiben sollen. Nach dem Import lassen sich Texte, Farben, Bilder und Größen direkt bearbeiten. Auch Websites, die zunächst in einem Website-Builder, mit einem AI-Tool oder als HTML-Prototyp entstanden sind, können auf diese Weise als Ausgangspunkt verwendet werden.
Ein importiertes Layout ist allerdings noch kein fertiges Designsystem. Meist müssen überflüssige Ebenen entfernt, Abstände vereinheitlicht und wiederkehrende Elemente in saubere Komponenten umgewandelt werden.
Auch Wettbewerberseiten können auf diese Weise analysiert werden. Dabei sollte es jedoch nicht darum gehen, einen bestehenden Auftritt zu kopieren. Sinnvoller ist es, einzelne Lösungen zu untersuchen: die Navigation einer Website, den Aufbau einer Leistungsseite oder die Darstellung von Publikationen und Expertenprofilen.
3. Auto Layout von Anfang an verwenden
Auto Layout gehört zu den wichtigsten Figma-Funktionen für responsive Websites. Elemente reagieren damit automatisch auf veränderte Texte, Containergrößen oder zusätzliche Inhalte.
Wird eine Schaltfläche lediglich aus einem Rechteck und einem Textfeld gebaut, muss ihre Größe bei jeder Textänderung manuell angepasst werden. Mit Auto Layout wächst die Schaltfläche automatisch mit ihrem Inhalt.
Dasselbe Prinzip funktioniert bei Menüs, Teamprofilen, Formularen, Leistungsübersichten, Publikationskarten und Footern. Statt viele Elemente frei auf dem Bildschirm zu positionieren, wird die Seite aus verschachtelten Containern aufgebaut: Seite, Abschnitt, Inhaltscontainer, Überschrift, Text und Kartengruppe.
Diese Struktur ähnelt stärker dem späteren Aufbau der Website und erleichtert die Übergabe an Entwickler. Gleichzeitig können mobile Ansichten schneller aus den vorhandenen Komponenten abgeleitet werden.
4. Wiederkehrende Elemente als Komponenten anlegen
Sobald ein Element mehrfach verwendet wird, sollte geprüft werden, ob daraus eine Komponente entstehen kann.
Statt auf jeder Seite eine neue Schaltfläche oder Teamkarte zu zeichnen, wird ein zentrales Master-Element erstellt. Ändert sich später die Höhe, Schriftgröße oder Gestaltung, werden alle verbundenen Instanzen automatisch aktualisiert.
Für eine normale Unternehmenswebsite muss am Anfang keine umfangreiche Komponentenbibliothek entstehen. Meist reichen zunächst zehn bis fünfzehn wirklich häufig verwendete Elemente: Buttons, Eingabefelder, Navigation, Leistungskarten, Personenprofile, Publikationskarten und Calls-to-Action.
Ähnliche Zustände lassen sich über Variants in einer Komponentenfamilie zusammenführen. Eine Schaltfläche kann beispielsweise verschiedene Größen, Farben und Zustände enthalten. Auch geöffnete und geschlossene FAQ-Elemente, aktive Tabs oder unterschiedliche Varianten einer Publikationskarte können auf diese Weise organisiert werden.
Das Ergebnis ist kein starres Template, sondern ein kontrollierbares System mit klaren Einstellmöglichkeiten.
5. Farben, Abstände und Größen als Variablen speichern
Wenn dieselben Farben, Abstände oder Rundungen an mehreren Stellen verwendet werden, sollten sie nicht jedes Mal neu eingegeben werden.
Figma Variables ermöglichen es, wiederverwendbare Werte zentral zu speichern. Wird später beispielsweise die primäre Markenfarbe verändert, aktualisieren sich alle damit verbundenen Elemente.
Für eine mittelgroße Website genügt zunächst ein überschaubarer Satz aus Markenfarben, Textfarben, Hintergrundfarben, Abständen und Radien. Entscheidend ist nicht die Zahl der Variablen, sondern ihre konsequente Verwendung.
Ein Layout mit zufälligen Abständen von 17, 19, 22 und 25 Pixeln wirkt schnell unruhig. Eine definierte Skala schafft einen gleichmäßigen Rhythmus und reduziert die Zahl der Designentscheidungen.
Die Variablen sollten nach ihrer Funktion benannt werden. Eine Bezeichnung wie color/text/secondary bleibt verständlich, selbst wenn sich der konkrete Grauton später ändert.
6. Eine kleine Designsystem-Seite anlegen
Auch eine Website mit nur wenigen Unterseiten profitiert von einer separaten Designsystem-Seite in Figma.
Dort werden Logo, Farbpalette, Typografie, Grid, Abstände, Radien, Icons und Bildsprache dokumentiert. Auf einer zweiten Seite liegen die wichtigsten Komponenten wie Buttons, Formulare, Karten, Navigation und Footer. Die eigentlichen Desktop- und Mobile-Layouts folgen anschließend.
Diese Ordnung hilft nicht nur dem Designer. Auch Kunden, Entwickler und andere Projektbeteiligte sehen schneller, welche Regeln gelten und welches Element die aktuelle freigegebene Version ist.
Eine vollständige unternehmensweite Designsystem-Infrastruktur kann mehrere Hundert Komponenten enthalten. Für einen klassischen Website-Relaunch reicht jedoch häufig ein kompaktes System, das die wichtigsten Gestaltungsentscheidungen festhält und später erweitert werden kann.
7. Zuerst drei wichtige Seitentypen gestalten
Es ist selten effizient, sofort jede einzelne Website-Seite zu gestalten.
Für eine Kanzlei reichen in der ersten Abstimmungsphase häufig drei zentrale Templates: die Startseite, eine Seite für ein Rechtsgebiet und ein Anwaltsporträt. Zusammen enthalten diese Seiten bereits einen Großteil der später benötigten Elemente.
Bei einem B2B-Unternehmen können es die Startseite, eine Leistungsseite und eine Case Study oder Branchenlösung sein.
Nach der Freigabe werden weitere Seiten aus den bereits entwickelten Komponenten aufgebaut. Dadurch müssen grundlegende Entscheidungen zu Typografie, Abständen, Karten und Formularen nicht auf jeder Seite neu diskutiert werden.
Dieser Ablauf reduziert auch die Zahl der Korrekturen. Wird ein Problem in einer zentralen Komponente gelöst, muss es nicht anschließend in zehn verschiedenen Screens einzeln korrigiert werden.
8. Komponenten mit echten deutschen Texten testen
Ein Design kann mit kurzen Platzhaltertexten sehr ordentlich wirken und mit realen Inhalten sofort auseinanderfallen.
Das ist bei deutschen Websites besonders relevant. Überschriften, Berufsbezeichnungen und Leistungsbeschreibungen sind häufig deutlich länger als in englischen Entwürfen. Begriffe wie „grenzüberschreitende gesellschaftsrechtliche Restrukturierungen“ passen nicht automatisch in eine Karte, die mit „Corporate Law“ getestet wurde.
Komponenten sollten deshalb früh mit realistischen Extremszenarien geprüft werden: sehr langen und sehr kurzen Überschriften, fehlenden Bildern, mehreren Berufsbezeichnungen, langen Adressen und unterschiedlichen Sprachversionen.
Bei mehrsprachigen Websites reicht es nicht, den deutschen Text später einfach durch eine englische oder französische Version zu ersetzen. Navigation, Karten, Buttons und Formulare müssen unterschiedliche Textlängen verkraften können.
Ein eigener Testbereich in Figma hilft dabei, solche Probleme vor der Entwicklung zu erkennen.
9. AI für Entwürfe, nicht für das fertige Design nutzen
AI-Funktionen können erste Wireframes, Seitenstrukturen oder alternative Layoutideen erzeugen. Das ist hilfreich, um schnell verschiedene Richtungen zu testen oder einen frühen Gesprächsentwurf vorzubereiten.
Ein möglicher Prompt wäre beispielsweise die Anforderung einer Rechtsgebietsseite mit Leistungsübersicht, relevanten Anwälten, aktuellen Publikationen, Projekterfahrung und Kontaktmöglichkeit.
Das Ergebnis sollte jedoch als Ausgangspunkt und nicht als fertige Website betrachtet werden. AI-generierte Layouts benötigen fast immer eine Überarbeitung von Typografie, Abständen, Informationshierarchie, Markenstil und responsivem Verhalten.
Besonders häufig entstehen austauschbare Lösungen mit übergroßen Überschriften, gleichförmigen Karten, zufälligen Farbverläufen und abstrakten Bildern. Für eine Kanzlei oder ein beratungsintensives B2B-Unternehmen reicht ein optisch moderner Entwurf allein nicht aus. Die Website muss die konkrete Positionierung, Expertise und Arbeitsweise des Unternehmens vermitteln.
10. Ein eigenes Starter-File aufbauen
Einer der wirksamsten Wege zur Beschleunigung künftiger Projekte ist ein eigenes Figma-Starter-File.
Es kann bereits Desktop- und Mobile-Frames, Grid, Typografie, Abstände, Basisvariablen, Formulare, Navigation, Footer und häufig verwendete Karten enthalten. Bei einem neuen Projekt wird die Datei dupliziert und anschließend an Marke, Inhalte und Anforderungen des Kunden angepasst.
Ein solches Starter-File bedeutet nicht, dass alle Websites gleich aussehen müssen. Es speichert lediglich die technische Grundlage. Visuelle Idee, Seitenaufbau, Bildsprache und Positionierung werden weiterhin individuell entwickelt.
Agenturen können zusätzlich zwischen einer allgemeinen technischen Bibliothek und kundenspezifischen Designsystemen unterscheiden. Universelle Elemente wie Formulare oder grundlegende Interaktionsmuster lassen sich wiederverwenden. Die eigentliche Markenidentität bleibt im Projekt des jeweiligen Unternehmens.
Ein effizienter Workflow für Website-Projekte
Ein sinnvoller Prozess beginnt mit Inhalten, Sitemap und Markenmaterialien. Danach werden Grid, Typografie, Farben und Abstände definiert. Auf dieser Basis entstehen die wichtigsten Komponenten und drei zentrale Seitentypen.
Erst wenn diese Seiten mit realen Inhalten und auf unterschiedlichen Bildschirmgrößen funktionieren, wird das System auf weitere Bereiche der Website übertragen.
So entsteht nicht nur schneller ein erster Entwurf. Auch Abstimmungen, Entwicklung und spätere Pflege werden einfacher. Änderungen lassen sich systematisch umsetzen, statt auf jeder Seite neu begonnen zu werden.
Für Unternehmen bedeutet das weniger Korrekturschleifen, eine nachvollziehbarere Kalkulation und eine Website, die sich später leichter erweitern lässt.
Website-Konzeption und Design mit Smartiee
Smartiee entwickelt Websites und Designsysteme für Kanzleien, Beratungen und B2B-Unternehmen. Wir verbinden Informationsarchitektur, Content, Design und technische Umsetzung zu einem konsistenten Prozess.
Dabei geht es nicht darum, möglichst viele Seiten zu gestalten. Ziel ist ein flexibles System, mit dem neue Leistungen, Expertenprofile, Publikationen und Sprachversionen langfristig ergänzt werden können.