Warum mit Webflow arbeiten (Website Layout Umsetzung)

Was macht Webflow aus?

• Simple drag and drop Interface
• Basics in HTML und CSS sollten vorhanden sein (Box Model, Padding, Margin, Positionierungen von Elementen)
• Wenn du das kannst, ermöglicht dir Webflow wirklich beeindruckende Ergebnisse in kurzer Zeit zu bauen
• Export Code für Entwickler
• Responsive Anpassungen sind einfach gelöst
• Custom Code: Du kannst zu jeder Zeit eigenen Code hinzufügen, was dir sozusagen alles ermöglicht. Spezielle Bereiche kann jemand anderes programmieren und du bindest sein Code einfach mit ein.
• Du kannst nicht Sketch, Figma oder sonst welche Files hochladen. Du musst sie sozusagen neu nachbauen. Für eine Bedienung im Web brauchst du realen Code und die Logik hinter deinem Layout.
• Du kannst Schriften hochladen oder sehr schnell Google und Adobe Fonts verknüpfen
• Bilder, Icons, Videos einfach per Drag and Drop reinziehen
• SEO freundlich: Responsive Images von Haus aus umgesetzt (schnelle Ladezeit)
• Viele Module sind schon vorgefertigt, enthalten: Slider, Hintergrundvideos, Formulare und Dropdowns, Lightbox Gallerien, Navigationen, Button etc
• Eigenes CMS, wenn du möchtest. Du musst es nicht nutzen.
• Client-Pricing: Webflow berechnet deinen Kunden die Kosten für das CMS und Hosting und du kannst deine eigene Marge oben drauf hauen (taucht nirgends auf).
• Richtig, richtig starke Animations und Interaktionsmöglichkeiten
• Sogar Prototypen lassen sich damit gut umsetzen
• Aus hunderten vorgefertigten Templates in dein Projekt starten

Webflow ist für jeden Einsteiger kostenlos! Du kannst zwei Projekte umsonst anlegen und direkt loslegen → www.bit.ly/webflow-testen (Affiliate Link)

Wenn du Code exportieren möchtest oder mehr Projekte brauchst, kostet es für Freelancer 16$ pro Monat (etwa 14,50€) oder du brauchst einen Site-Plan. Falls dich das Preismodell von Webflow genauer interessiert (es kann anfangs etwas verwirrend sein) kann ich dir folgenden Beitrag empfehlen: Webflow Preise einfach erklärt.

Wie du mit Webflow mehr verdienen kannst

• Indem du deinen Kunden eine fertige Website lieferst, kannst du dir ordentlich was dazu verdienen
• Die Kosten an Entwickler sind oft hoch oder sogar mehr als die Hälfte
• Du kannst mit Webflow Webseiten schneller umsetzen, als ein Entwickler sie von Hand coden kann
• Du sparst dir dadurch Zeit, der Kunde hat sein Ergebnis schneller und du verdienst mehr
• Ein Layout, für welches ich früher mit CMS Anbindung mindestens zwei Wochen gebraucht hätte, habe ich beim ersten Mal Webflow ausprobieren in weniger als 5 Tagen geschafft. Komplett responsive und bereit für den Kunden.
• Wenn du also mehr verdienen möchtest und bisher ausschließlich als Designer arbeitest, rate ich dir auf jeden Fall Zeit in Webflow zu investieren und das Tool zu lernen.

Vorteil für Entwickler, die von Hand coden möchten?

Webflow ist ein Werkzeug, welches dir hilft, schneller zu einem Ergebnis zu kommen und gerade für Web-Layouts unglaublich effektiv.

Ich weiß, dass einige Vollblut Programmierer wahrscheinlich eher davon Abstand halten wollen, weil sie den Code selbst schreiben möchten. Das wäre aber das gleiche, als wenn ich immer noch in Photoshop meine Web Layouts anlegen würde, obwohl es mittlerweile viel bessere Editoren dafür gibt.

Viele Module einer Website kannst du gar nicht so schnell schreiben, wie du sie mit der Maus einfach in ein Div ziehen kannst.

Deshalb würde ich jedem Programmierer empfehlen z.B. mal einzelne Bereiche damit zu bauen und den Code anschließend einfach zu exportieren und selbst weiter zu verarbeiten. Vielleicht findet man damit einen guten Mix. Wie schon gesagt, sind gerade komplizierte Parallax Effekte, Scroll-Animationen oder Page-Transitions von Hand oft schwer zu coden und in Webflow siehst du parallel direkt ein Ergebnis. Vielleicht für sowas einfach mal Webflow ausprobieren.

Meine Erfahrungen mit dem Webflow CMS bei einem Kundenauftrag

• Kunden sind super happy
• Benötigt extrem wenig Schulung da sehr intuitiv
• Kann seine Inhalte einfach editieren, indem er auf der Website in eine Textbox klickt und einfach den Text umschreibt (visuelle Content Editierung)
• Kein unübersichtliches Backend mehr wie das bei Typo3 oder ähnlichem der Fall ist
• Der Webflow Editor – so bearbeiten deine Kunden ihre Website

Nützliche Beiträge, Tutorials und Anleitungen zu Webflow (kostenlos)

Professionelle Webflow Tutorials (kostenlos):

• Meine Webflow Tutorials (deutsch)
• Webflow Designer 101 Crash Course (englisch)
• Webflow E-Commerce Crash Course (englisch)

Die Grundlagen von HTML und CSS lernen:

• Crash Course auf Webflow.com (einfach erklärt, englisch)

Website Animationen und Prototypen in Webflow entwickeln:

• Ein Einblick in die Animations-Möglichkeiten von Webflow: Die Zukunft von Website Animationen
• In diesem Tutorial bauen wir zusammen in Webflow eine 3D Scroll-Animation, mit der du während des Scrollens ein Tablet langsam zum Betrachter hin drehen lassen kannst.
• Oder hier eine eigene Galerie Slider Animation in Webflow bauen
• Eine Sammlung an Mikro-Interaktionen habe ich in dieser Tutorial-Reihe gestartet.

Inspiration: Welche Webseiten schon mit Webflow umgesetzt wurden

• 11 kreative Agenturseiten gebaut in Webflow
• 10 beeindruckende Webflow Website Animationen
• 10 geniale Webflow Portfolio Websites

Mein Webflow Online Kurs (auf Deutsch) ist online!

Lerne eigene Layouts professionell umzusetzen

Da die Nachfrage nach Webflow immer größer wird, habe mich entschieden meinen kompletten Webdesign Prozess in einen Online Kurs zu packen. Dieser ist jetzt online!

Dieser Kurs ist der einfachste Weg, den visuellen Editor von Webflow zu beherrschen.Von den Grundlagen über beeindruckende Animationen bis hin zur Veröffentlichung und Übergabe an deine Kunden. Lerne individuelle Webseiten ohne Programmierkenntnisse zu realisieren.

Hier gehts zu meinem Online Kurs

Mehr Webflow Beiträge auf meine Patreon Channel

Für alle Podcast Supporter: Hier findest du alle Beiträge und Webflow Sonderfolgen auf meinem Patreon Channel. Hole dir jetzt einen Zugang und unterstütze damit auch den Blog hier.