Wenn man Webflow kann, muss man nicht coden können. Das klingt jetzt sehr gewagt, aber es trifft bei einfachen Webdesign-Projekten zu. In dem Webtool “Webflow” kann man Webseiten gestalten und der Code schreibt sich im Hintergrund selbst. Sogar responsive!

Webflow schreibt HTML und CSS Code automatisch

In den letzten Jahren haben immer mal wieder Startups versucht ein Tool auf den Markt zu bringen, das einem Designer das Coden abnimmt. Da ich selbst auch nicht der größte HTML und CSS Jedi bin, habe ich mir diese Programme immer genaustens angesehen und wurde wieder und wieder enttäuscht. Bis Webflow kam.

Wer sich das erste mal in Webflow einloggt hat fast das Gefühl sich in Photoshop CC zu befinden. Links ist eine schmale, dunkle Werkzeugleiste und rechts ist eine breiterer Bereich mit verschiedenen Panels. Aber der Schein trügt,  mit Webflow arbeitet man von Grund auf anders als mit Photoshop. Wer denkt man kann einfach ein paar Boxen zusammenklicken und alles mit Drag and Drop hin- und herschieben, der liegt absolut falsch. Man muss erst eine Section erstellen, die die gesamte Seitenbreite einnimmt und diese Section kann man dann mit einem Containerbefüllen und darein kann man dann Bilder und Texte setzen. Darunter kommt eventuell die nächste Section und so weiter.

Der Einstieg in Webflow

Das Ganze ist wesentlich technischer aufgebaut als vorherige Tools, die versprochen haben einem Designer das Coden abnehmen. Aber genau deshalb funktioniert Webflow so gut, im Gegensatz zu all den anderen Tools. Man kann nicht einfach blind in Webflow reinspringen und hoffen, dass man das schon irgendwie selbst hinkriegt, man muss sich wirklich die Video-Tutorials angucken oder die Dokumentationen lesen, die von den Machern liebevoll erstellt wurden. Wenn man diesen Rat befolgt, findet man sich aber sehr schnell in das Programm ein und die Lerkurve geht dann steil nach oben. Nach einer Stunde findet man sich plötzlich wieder wie man eine einfache Responsive-Webseite erstellt hat, die perfekt funktioniert und praktisch so online gehen könnte und fühlt sich wie der Houdini des Codings. Nur das man nicht eine Zeile Code geschrieben hat.

Man kann mit Webflow wirklich relativ komplexe Seiten mit unterschiedlichen Unterseiten und Parallax-Effekten erstellen und das Tool frisst ungefähr jedes Bildformat (auch SVG) und geht souverän damit um. Je mehr man mit dem Programm arbeitet desto mehr liebt man es und es ist schon fast unheimlich wie schnell man eine funktionierende Webseite zusammengeklickt kriegt. Das Programm wird außerdem stetig weiterentwickelt und so wurde zum Beispiel jetzt die “Symbol”-Funktion zu Webflow hinzugefügt, die vergleichbar ist mit der neuen Symbol-Funktion in Sketch 3 oder dem Smart Object in Photoshop.

Sauberer Code-Export

Wenn man mit seinem Projekt fertig ist, kann man sich das gesamte Projekt exportieren lassen, oder es auch direkt auf den Webflow Servern belassen, entweder unter einer “.webflow.com” Subdomain oder auch unter einer eigenen Domain. Wenn man sich allerdings für den Export entschieden hat, schmeißt Webflow den gesamten HTML und CSS Code aus und packt den Code zusammen mit den Image Assets in eine ZIP die man dann direkt herunterladen kann. Ich habe den Code von befreundeten Front Endern ansehen lassen und alle waren ziemlich begeistert, wobei man bei der Erstellung der Webseiten ein wenig darauf achten muss, dass die Verschachtelungen der Elemente sinnvoll sind und man nicht zu viele Styles verwendet, ansonsten wird der Code unübersichtlich.

Fazit:
Ich selbst habe schon einige Projekte (ein Beispiel) mit Webflow erledigt und je mehr ich damit arbeite, desto weniger nutze ich ein Layoutprogramm wie Sketch oder Photoshop im Vorfeld, sondern fange nach einer Bleistiftskizze direkt an in Webflow zu arbeiten. Man sieht einfach direkt ob etwas funktioniert oder nicht und spart sich doppelte Arbeit. Unter all den Tools die den Designer versprechen das Coden abzunehmen, ist Webflow mit Abstand das Beste. Man muss Webflow zwar kostenpflichtig abonnieren, aber wenn man professionell Kundenaufträge damit bearbeitet, sollten die Kosten geradezu lächerlich erscheinen, für den Mehrwert den Webflow bietet.

Webflow hat verschiedene Abo-Pakete (ab 14 Euro/Monat) aber auch eine kostenlose 14-tägige Trial

Der Beitrag Webflow erschien zuerst auf DesignDash.