Wie wir mit Figma Missverständnisse im Webprojekt eliminieren

Bevor Code geschrieben wird: das Projekt sichtbar machen

Figma ist eine webbasierte Design-Plattform, auf der wir Layouts, Seitenstrukturen und Abläufe gestalten — klickbar und navigierbar, lange bevor die eigentliche Entwicklung beginnt.

Das Entscheidende daran: Du klickst durch deinen zukünftigen Webauftritt wie durch das fertige Produkt. Du siehst, wie die Navigation funktioniert, wie ein Formular aufgebaut ist, wie Inhalte auf dem Mobilgerät dargestellt werden. Nicht als statische Skizze sondern als interaktiver Prototyp.

Was das konkret bedeutet: Wenn dir im Prototyp auffällt, dass der Bestellprozess einen Schritt zu viel hat oder die Kontaktseite am falschen Ort sitzt, lässt sich das in Figma in wenigen Minuten anpassen. Dieselbe Änderung nach dem Entwicklungsstart kostet ein Vielfaches an Zeit und Budget.

Wie wir Figma in Projekten einsetzen

Konzept und Struktur, bevor das Design beginnt

Zu Beginn jedes Projekts erstellen wir Wireframes: vereinfachte Layouts ohne Farben und Grafiken, die zeigen, welche Inhalte wo stehen und wie die Seiten miteinander zusammenhängen. Hier klären wir Grundsatzfragen — Welche Seiten braucht es? Wie ist die Navigation aufgebaut? Wo steht der wichtigste Call-to-Action? — bevor Designentscheidungen getroffen werden.

Das spart in der Praxis regelmässig mehrere Feedback-Schleifen, weil strukturelle Korrekturen in dieser Phase unkompliziert sind.

Visuelles Corporate Design im Designsystem verankert

Farben, Typografie, Abstände, Button-Stile, Formularfelder — all das wird in Figma als Designsystem angelegt, bevor es auf der Website erscheint. So wird sichergestellt, dass die Website visuell konsistent bleibt, auch wenn sie später erweitert wird oder verschiedene Personen daran arbeiten.

Für KMU ist das besonders relevant: Wächst das Unternehmen, wächst meist auch die Website. Ein sauber dokumentiertes Designsystem verhindert, dass spätere Erweiterungen optisch aus dem Rahmen fallen oder aufwändig nachgebessert werden müssen.

Klickbare Prototypen: testen, bevor es teuer wird

Der wohl grösste Mehrwert von Figma im Projektalltag: klickbare Prototypen, die reale Abläufe simulieren. Ein Anmeldeprozess, ein mehrstufiges Formular, eine Produktkonfiguration, das alles lässt sich in Figma durchspielen und mit echten Nutzern oder intern testen.

Erfahrungsgemäss werden in dieser Phase 60 bis 70 Prozent aller Navigations- und Usability-Probleme identifiziert, also genau dort, wo eine Korrektur noch keine Entwicklungskosten verursacht.

Templates für wiederkehrende Seitentypen

Bei umfangreicheren Projekten, etwa einer Website mit Newsblog, Produktseiten und Landingpages, erstellen wir Templates für wiederkehrende Strukturen. Das beschleunigt nicht nur die initiale Entwicklung, sondern erleichtert auch interne Content-Teams bei der späteren Pflege: Neue Seiten entstehen nach einem klaren Schema, ohne jedes Mal von vorne anzufangen.

Volle Transparenz für dich als Auftraggeber

Figma ist keine Black Box. Du erhältst Zugang zum Projektfile und siehst jederzeit den aktuellen Designstand, ohne Status-Meeting, ohne Nachfrage. Kommentare lassen sich direkt im Design platzieren: «Hier soll der Text kürzer», «diese Farbe passt nicht zum Markenauftritt», «können wir diesen Schritt im Prozess weglassen?»

Alle Rückmeldungen sind dokumentiert, versioniert und für alle Projektbeteiligten sichtbar. Das reduziert den Abstimmungsaufwand erheblich und verhindert die klassische Situation, in der nachher niemand mehr weiss, was wann entschieden wurde.

Was du als Auftraggeber davon hast

Figma ist kein Selbstzweck. Es ist ein Werkzeug, das den Designprozess für beide Seiten nachvollziehbar macht und das Budget schützt. Wer frühzeitig sieht, wie das Endprodukt aussieht und funktioniert, trifft bessere Entscheidungen. Und wer Korrekturen im Prototyp vornimmt statt nach dem Go-live, spart Zeit und Geld.

Bei INSOR ist Figma deshalb fester Bestandteil jedes Webprojekts, nicht als optionaler Schritt, sondern als Standard. Weil wir die Erfahrung gemacht haben, dass Projekte damit reibungsloser laufen, Überraschungen seltener werden und das Endresultat näher an dem liegt, was du dir von Anfang an vorgestellt hast.

Planst du eine neue Website oder eine Web-Applikation? Im ersten kostenlosen Gespräch zeigen wir dir, wie unser Designprozess konkret aussieht und was das für dein Projekt bedeutet. Melde dich bei uns, wir helfen dir gerne.