Website Layouts direkt in Webflow umsetzen oder erst mit einem Design-Programm wie Sketch?

Ideen auszuprobieren geht in einem Layout-Programm meistens schneller

Ich persönlich kann mit einem Programm wie Sketch, in dem ich meine Layouts für Apps und Webseiten anlege, viel schneller arbeiten und denken, als z.B. direkt innerhalb von Webflow. Ich probiere einfach gerne Dinge aus und das geht in einem Design-Programm für mich einfach viel schneller und leichter.

Deshalb würde ich mir bei einem Kundenauftrag das Layout IMMER erstmal zusammenbauen, dann abstimmen und anschließend in Webflow* nochmal nachbauen und sozusagen programmieren. Wenn ich eine klare Vorlage habe geht bei mir persönlich auch die Realisierung / Umsetzung viel schneller.

In deiner Frage kommt außerdem vor, dass du das fertige Design dann anschließend noch zu einem Programmierer weiter gibst. Wenn du es direkt in Webflow umsetzt, bräuchtest du diesen Entwickler ja eigentlich nicht. Wenn du also so oder so mit einem Programmierer arbeitest, würde ich auf jeden Fall in deinem Design Programm bleiben und ihm das fertige Layout übergeben. Was bei mir auch hin und wieder schon vorkam, ist, dass ich Teile des Layouts schon mal in Webflow umgesetzt habe, obwohl ich einen reinen Website-Design Auftrag hatte. Dabei handelt es sich dann um bestimmte Animationen oder Button-Hover-States, die ich in Webflow einfacher visualisieren kann. Das ist oft in einem Design-Programm schwieriger aufzuzeigen. Den fertigen Code kann sich der Programmierer dann direkt rauskopieren.

Webflow spart dir sehr viel Zeit bei der Umsetzung der Website

Du kannst in Webflow Elemente in einem visuellen Designer reinziehen und bearbeiten und im Hintergrund werden direkt die dafür benötigten Zeilen Code mitgeschrieben. Das Frontend, das du damit gestaltest, könnte ein Profi Programmierer niemals so schnell selbst mitschreiben. Dafür sind wir als Menschen einfach zu langsam.

Wenn es aber darum geht, ein ganz neues Layout umzusetzen, dass sehr genau auf ganz bestimmte Bedürfnisse des Kunden abzielt, dann kann ich das direkt in Webflow nicht so schnell gestalten. Es ist zwar ein visueller Editor, braucht jedoch mehr logischen Aufbau außen herum. D.h. wenn ich ein Bild in Sketch reinziehe, kann ich es irgendwo platzieren und duplizieren und übereinanderlegen. Alles innerhalb einer Minute. In Webflow müsstest du dafür erstmal ein Raster wie Flexbox aufbauen, das Bild hochladen, eventuell absolut positionieren etc. Und am Ende soll es vielleicht doch gar nicht dort sein, da die Abstimmung mit dem Kunden etwas anderes ergeben hat.

Also wie gesagt, um neue, eigene Ideen und Dinge auszuprobieren, greife ich immer lieber zu einem Layout Programm zurück.

Wann kann eine direkte Umsetzung des Kundenauftrags mit Webflow trotzdem Sinn machen

Ich weiß, dass nicht jeder Kundenauftrag individuell und komplett etwas Neues sein muss. Oft ist das ja auch garnicht gefordert bzw. ein einfacher Aufbau einer Website mit ein paar Unterseiten, einer Kontaktseite und einem News-Archiv reicht für eine Vielzahl an kleineren Kunden komplett aus. Was diese Projekte letztendlich von anderen unterscheidet, ist der Inhalt, die Bilder und die Kommunikation zu ihrer Zielgruppe.

Wenn du also schon mal Zeit in ein Layout für beispielsweise eine benutzerfreundliche Website für ein Café gesteckt hast, warum dieses dann nicht beim nächsten Projekt als Vorlage verwenden? Wenn es sich wieder um eine Website in dem Bereich handelt, kannst du einige Dinge überarbeiten bzw. anpassen, aber im Grunde genommen, haben solche Kunden oft die gleichen Anforderungen. Sie sollte am Ende nicht identisch so wie die andere aussehen, das wäre zumindest immer mein eigener Ansporn, aber die Struktur der Seite im Hintergrund könnte schon die Gleiche sein. Den Unterschied machen dann eben eine neue Typo, andere Bilder und Texte. Oder einzelne Sektionen und Module ordnet man anders an. Bei dem einen Café kommen zum Beispiel News-Teaser auf der Startseite weiter oben, weil sie öfters Aktualisierungen veröffentlichen.

Da könnte ich mir schon vorstellen, das „alte” Projekt in Webflow einfach zu duplizieren (quasi ein Klick) und sich den ganzen Aufwand zu sparen. Dadurch kannst du ähnliche Preise abrechnen, hast aber nicht so viel Arbeit, da du aus deinem schon erarbeiteten schöpfen kannst.

Als Webdesigner musst du also definitiv nicht bei jedem neuen Kunden wieder versuchen die Welt neu zu erfinden. Im Gegenteil. Ich sehe extrem viele kleine Agenturen da draußen, die genau das als Business-Case haben. Sie suchen sich quasi immer wieder Kunden im gleichen Segment, sodass sie ähnliche Pakete aber mit anderen Inhalten verkaufen können. Und dann verwenden sie einfach vorgefertigte Module, die der Kunde auf der Website braucht.

Früher habe ich das vielleicht auch zwei oder drei mal gemacht. Aber auch wenn ich eine Vorlage bei jedem neuen Projekt verwendet habe, kam trotzdem wieder etwas Neues dazu, da ich mir in der Zeit auch wieder mehr Wissen angeeignet hatte und wusste, dass bestimmte Dinge auf eine andere Weise vielleicht besser umgesetzt werden. Und dann habe ich diesen Bereich eben nochmal überarbeitet.

Heute sind meine Kundenprojekte so individuell, dass ich nur sehr selten direkt die Seite programmieren könnte, ohne nochmal ein Layout anzulegen und dieses abzustimmen. Trotzdem verwende ich sehr oft Projektvorlagen auch in Sketch, wo schon verschiedene Symbole, Icons, Raster etc. vor angelegt sind.

Prototyping mit Webflow

Auch wenn ich selbst meine Prototypen gerne mit Flinto umsetze, kann es durchaus Sinn machen, mit Webflow direkt eine Idee zu veranschaulichen und dem Kunden in die Hand zu drücken. D.h. Prototypen oder spezielle Animationen mit Webflow zu starten geht durchaus schnell, hängt eben von der Genauigkeit und den Details ab. Nur mal eben eine User-Journey aufzuzeigen würde ich auch mal direkt in Webflow probieren. Aber das geht mittlerweile auch in den meisten Layout Programmen schon einfach mit den integrierten Prototyping Funktionen.

Wie ich in Flinto einen Prototypen umsetze: Online Shop App Design Prototyping mit Flinto – ohne Programmierung!

Hier gibts einen Einblick, wie ich mit Webflow arbeite

Noch mehr Videos und Tutorials findest du auf meinem YouTube Kanal.

Probiere Webflow hier einfach mal kostenlos aus: Webflow kostenlos testen *

Mit * gekennzeichnete Links sind Affiliate Links.