webflow - Website-Programmierung für Designer

Heutzutage verschmilzt vor allem für selbstständige Designer der Prozess des Gestaltens einer Website viel mehr mit dem finalen Erstellen dieser. Hierfür haben sie neben dem Coden der Website auch mittlerweile die Möglichkeit viele Tools und Programme im Internet zu verwenden, die ihnen dabei helfen sollen. Auf den ersten Blick ist die Auswahl an Programmen sehr groß, aber es gibt viele Unterschiede, und nicht alle sind wirklich hilfreich. Am einfachsten ist es für den Designer wenn er sich nicht groß in das Programm einarbeiten muss, und die Software auf den Beruf des Designers angepasst ist. Diese Kriterien erfüllt am besten “webflow”. Im folgenden Beitrag stellen wir die Vorteile von webflow vor und leiten ein bisschen in die Arbeitsweise ein.

Die Vorteile von webflow

1. Baukastensystem

Bei webflow gilt das Prinzip “what you see is what you get”. Der Website Builder ist auf dem Drag and Drop Prinzip aufgebaut. Es lassen sich jegliche Elemente in die Arbeitsfläche ziehen. Diese können dann mit Hilfe der Seitenleiste angepasst werden, ganz ohne eine Zeile an Code schreiben zu müssen.

2. Viele Design Möglichkeiten

Jedes Element kann bis ins kleinste Detail auf die Wünsche des Kunden angepasst werden. Eigene Bilder und Designs einzufügen ist leicht getan, und auch bei Animationen, Overlays und Burger Menus sind webflow keine Grenzen gesetzt. Alles was mit CSS möglich ist kann webflow auch, nur ohne das Wissen über Webentwicklung benötigt wird.

3. Einfach für Designer

Designer werden sich schnell mit webflow wohlfühlen, da ihnen auch vieles sehr vertraut vorkommen wird. Das User Interface sieht den bekannten Design Programmen wie Photoshop und Figma ähnlich und Designs können einfach umgesetzt werden.

Einführung in webflow

Im folgenden werden wir anhand eines kleinen Beispiels die Vorgehensweise in webflow zeigen, und einen einfachen Block erstellen und gestalten.

Zuerst startet man mit einer leeren Seite. Aus der rechten Leiste lassen sich viele verschiedene Elemente auswählen, die dann nach belieben gestaltet werden können. Für dieses Beispiel haben wir den Block “Feature Section” genommen. In der rechten Spalte kann man diesen dann anpassen. Die Schriftart, Schriftgröße und Abstände haben wir hier angepasst. Das Bild lässt sich durch einen Klick auf den Platzhalter hochladen. Dem gesamten Block wurde dann noch eine Border und Schatten verpasst.

Ebenen lassen sich wie in der HTML Struktur über die linke Liste ansehen. Ist man zufrieden mit dem Ergebnis, kann man die Seite entweder auf der gewünschten Domain veröffentlichen, oder mit einem Premium Zugang sich auch den Code ausgeben lassen.

Fazit

Wir sind auf jeden Fall der Meinung, dass webflow eines der besten und einfachsten Programme zur Webentwicklung für Designer ist. Dadurch, dass keinerlei Vorkenntnisse in HTML, CSS oder Javascript von Nöten sind, ist der Einstieg kinderleicht. Wir können webflow ohne schlechtes Gewissen weiterempfehlen, besonders für Freelancer.