Webflow-Vorteile für No-Code-Webdesign – Eine Fallstudie

Unzählige Designtool-Add-Ons wurden entwickelt, um den holprigen Weg der Designer-Entwickler-Zusammenarbeit zu ebnen. Der typische Webdesign-Workflow ist jedoch weiterhin voller Ineffizienzen und erstickt die Kreativität. Eine neue Generation von visuellen Webdesign-Tools ohne Code verspricht, Designer von den kreativen Fesseln und der Langeweile der traditionellen Webentwicklung zu befreien.

Viele No-Code-Webentwicklungsplattformen sind in letzter Zeit wie Manna vom Himmel in der Designlandschaft gelandet. Designer, die „die Code-Barriere durchbrechen“ wollen, sind endlich in der Lage, die Realität einer utopischen Zukunft ohne Code zu erkennen. Sollten die Sterne stimmen, ist es nicht mehr nötig, Designs mit detaillierten Spezifikationen an Front-End-Entwickler zu übergeben. Designer haben die Freiheit, Elemente visuell auf einer Zeichenfläche anzuordnen und mit einem Seufzer der Erleichterung auf „Veröffentlichen“ zu klicken.

Bevor es keine Code-Design-Tools gab, mussten sich Designer auf Front-End-Entwickler verlassen, um alles zu implementieren. Das Ändern eines Textes auf einer Website in eine andere Schriftgröße kann Tage dauern. Selbst für eine kleine Marketing-Website oder eine einfache Zielseite würden Designer die Designs rüberschicken, sich zurücklehnen, die Daumen drücken und beten, dass alles pixelgenau zurückkommt. Der Vorgang war, als würde man Farbe beim Trocknen zusehen.

Website-Builder ohne Code erkennen jetzt überall ihre Chance. Einige sind experimentell, andere robust und leistungsfähig. Doch viele liefern immer noch zu wenig, wenn es darum geht, unbegrenzte kreative Kontrolle zu bieten. Fast alle sind unflexible, vorlagengesteuerte Plattformen, die auf kleine und mittlere Unternehmen abzielen.

Die meisten professionellen Designer haben sich danach gesehnt, reaktionsschnelle Websites schnell, mit absoluter kreativer Kontrolle und ohne Code zu entwerfen und zu erstellen. Dieser Tag könnte sich schnell nähern, da das Schlachtfeld für die No-Code-Vorherrschaft jetzt von einer Handvoll ernsthafter Konkurrenten wimmelt: Editor X, Bubble, Ceros und Webflow.

Webflow trat 2013 in den Kampf ein und hat sich im Laufe der Jahre zu einem ausgereiften Produkt entwickelt. Webflow wurde als Absolvent des Startup-Accelerators von Y Combinator gegründet und hofft, die No-Code-Webdesign-Landschaft zu revolutionieren, und stellt sich eine Welt vor, „in der jeder leistungsstarke, flexible Websites so einfach erstellen kann, wie er Dokumente erstellt“.

Wie man Buy-in von Stakeholdern erhält

Wenn Designer die Möglichkeiten dieser Plattformen entdecken, stellen sie schnell fest, dass Unternehmen jeder Größe von der Einführung eines No-Code-Webdesign-Tools profitieren können. Die Vorteile könnten erheblich sein, insbesondere für kleinere Teams mit begrenzten Ressourcen. Dennoch reicht es nicht aus, von einem neuen Webdesign-Tool betört zu sein; Die Beteiligten müssen davon überzeugt werden, dem Wechsel zuzustimmen.

Wie setzen Designer es um? Ich war Produktdesigner bei einem B2B-Startup mit einem einzigen Entwickler, der sich auf das Kernprodukt konzentrierte. Das Unternehmen benötigte eine Marketing-Website, verfügte jedoch nicht über die Entwicklerressourcen. Wir standen vor einem Rätsel: Wie bauen wir eine Website ohne Entwickler? Nachdem ich Webflow erkundet und mich damit vertraut gemacht hatte, wurde mir klar, dass ich es alleine schaffen könnte .

Ich habe das Wochenende damit verbracht, Designs in Webflow für ein Stakeholder-Meeting am Montag zu implementieren. Während des Meetings beschrieb ich die Vorteile von Webflows und demonstrierte, wie einfach es ist, vom Design zum Code zu gelangen, responsive Designs zu erstellen und schnell etwas zu ändern. Das Entwerfen und Starten von Webseiten würde nur eine Frage von Tagen dauern.

Ich habe auch die CMS-Fähigkeiten von Webflow und die Leichtigkeit vorgestellt, mit der SEO integriert werden kann. Als Nächstes legte ich die Kosteneinsparungen eines einzelnen Designers dar, der alles ohne die zusätzlichen Kosten für die Beauftragung unseres Entwicklers implementierte . Sie wurden verkauft.

Dies war auch eine Gelegenheit, die volle kreative Kontrolle zurückzugewinnen. Ich war nicht mehr nur ein Designer, der Modelle in Sketch erstellte und Designs an einen Entwickler weitergab. Dieses neue Paradigma verwandelte mich in ein Kraftpaket für die Webentwicklung: Ich konnte die Website entwerfen, erstellen, testen, optimieren, SEO integrieren, A/B-Tests durchführen und veröffentlichen. Es hat mich gestärkt und mir eine stärkere Stimme im Unternehmen gegeben.

Fallstudie zum Webflow-Design

Bei Upvest war ich neben dem Design der Kernprodukte des Unternehmens auch für das visuelle Branding verantwortlich. Dazu gehörte die reaktionsschnelle Website des Unternehmens, die häufig aktualisiert werden musste. Upvest war ein Startup in der Frühphase, und das Produkt befand sich noch in der Entwicklung. Daher mussten wir unterwegs verschiedene Marketingseiten erstellen und A/B-Tests durchführen. Außerdem mussten wir Blog-Artikel mit einem CMS-System veröffentlichen und dedizierte Zielseiten für verschiedene Verkaufsaktionen starten.

Erschwerend kam hinzu, dass das Unternehmen in der Anfangszeit einige Weichen gestellt hatte. Es ging vom Verkauf einer API über den Aufbau von Blockchain-Wallets bis hin zum Angebot von „Asset Tokenization“ für Immobilienunternehmen. Folglich musste ich im weiteren Verlauf eine Vielzahl von Zielseiten in Webflow entwerfen.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Der Einstieg in Webflow war relativ unkompliziert. Tutorials werden von der Webflow University bereitgestellt. Ich hatte die erste Version unserer Marketing-Website in wenigen Tagen entworfen und erstellt. Die Drag-and-Drop-Oberfläche war einfach zu bedienen, und die Überprüfung des Designs auf unterschiedliche Bildschirmabmessungen war nur einen Klick entfernt. Bei der Arbeit mit Webflow habe ich auch viel über das korrekte Zusammenstellen von Seiten mit dem Box-Modell für responsive Layouts gelernt.

Nachdem sich alle auf das visuelle Branding der Website geeinigt hatten, erstellte ich in Webflow einen Styleguide, dem wir alle folgen konnten. Ich habe auch verschiedene Klassen und wiederverwendbare Symbole für spätere Seitenaufbauten eingerichtet. Die Symbole von Webflow funktionieren ähnlich wie die Symbole von Sketch und die Master-Komponenten von Adobe XD. Wenn ein Symbol aktualisiert wird, spiegeln alle anderen Instanzen dieser Komponente im Projekt die Aktualisierung wider.

Nach dem Start der ersten Website habe ich mich mit Webflow immer wohler gefühlt. Um verschiedene Metriken zu verfolgen, habe ich gelernt, wie man Messtools wie Google Tag Manager und Hotjar installiert. Die Geschwindigkeit, mit der ich verschiedene Marketing-Assets zusammenstellen konnte, verbesserte sich ebenfalls. Das Unternehmen musste während der Entwicklung des Produkts eine Reihe von Layouts und Inhalten testen, und Webflow ermöglichte es, Designs zu ändern und schnell live zu gehen, ohne sich auf Entwickler verlassen zu müssen.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Da Webflow einen Staging-Link zur Vorschau der Website bereitstellt, konnten die Beteiligten die Entwicklung der Designs überprüfen und sofortiges Feedback geben. Sobald die Anpassungen formalisiert waren, konnte ich Änderungen direkt in Webflow vornehmen – anstatt zu einem Designtool wie Sketch zurückzukehren – und die Site in Staging veröffentlichen. Die Ausgabe besteht ausschließlich aus Code, der sofort auf der Staging-Site veröffentlicht wird und für eine weitere Überprüfungsrunde bereit ist. Als alles in Ordnung war, veröffentlichte ich die Website in der Domain des Unternehmens.

Wie bei vielen anderen Designern ist Sketch mein bevorzugtes Designwerkzeug. Wenn ich fertig bin, teile ich die Entwürfe mit verschiedenen Interessenvertretern zur Überprüfung. Sobald sie sie genehmigt hatten, würde ich fortfahren und sie in Webflow implementieren. Nach einer Weile war ich mit Webflow so vertraut, dass ich Sketch nicht mehr verwenden musste. Wann immer es ein neues Projekt gab, bin ich direkt zu Webflow gegangen. Dieser neue Workflow sparte dem klammen Startup viel Zeit und Geld. Für eine Marketingkampagne zur Generierung von Leads habe ich beispielsweise die folgenden Landingpages vollständig in Webflow erstellt.

Für unsere Blog-Anforderungen habe ich einige Webflow-Grundlagen mit Stakeholdern geteilt und ihnen gezeigt, wie man sein CMS verwendet. Sobald sie damit vertraut waren, luden sie selbst Blog-Artikel hoch. Ich nutzte die CMS-Sammlungsfunktion von Webflow und hatte das System bereits eingerichtet. Sie mussten nur den Inhalt für Artikel hinzufügen und sie live schalten.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Integration von Webflow in den Designprozess

Die Integration von Webflow in einen Designprozess ist einfach. Darüber hinaus können viele traditionelle Designschritte eliminiert werden – insbesondere am Ende. Es gibt keine Entwicklerübergabe. Allein der Wegfall dieser letzten Phase spart viel Zeit – kein „Redlining“ und Mühsal mit Spezifikationen mehr.

Wenn Designer an Wireframing, Prototyping und UI-Design mit Sketch/XD/Figma gewöhnt sind, fühlen sie sich mit diesem Arbeitsablauf möglicherweise wohler. Sie sollten jedoch in Betracht ziehen, direkt in Webflow einzusteigen , Designs zusammenzustellen und sie mit dem Staging-Link live im Browser zu testen – insbesondere für kleinere Projekte. Es geht darum, die Bedürfnisse auszugleichen, da das Erstellen von Projekten in Webflow je nach Umfang länger dauern kann als mit einer anderen Methode. Für Designexperimente wie A/B-Tests oder multivariate Tests kann es auch sinnvoll sein, direkt in Webflow einzusteigen – dort zu entwerfen, zu bauen und zu testen.

Designer können Projekte schnell starten, indem sie aus einer Vielzahl verschiedener Webflow-Vorlagen auswählen und diese anpassen. Alle Vorlagen werden mit Webflow erstellt, ohne Code schreiben zu müssen, und sind daher mit der visuellen Entwicklungsoberfläche von Webflow vollständig anpassbar.

Komponenten, aus denen ein Design besteht, können in Webflow-Symbole umgewandelt werden, die wiederverwendet werden können, um nachfolgende Seiten in wenigen Minuten zusammenzustellen. Wie bei Sketch können Designer Symbole einrichten, bindbare Felder für jede Komponente erstellen und Inhaltsüberschreibungen für jede Instanz hinzufügen. Das bedeutet, dass Designer eine Komponente mit einer Überschrift, einem Bild und einem Textblock erstellen und auf Seiten mit unterschiedlichen Inhalten wiederverwenden können.

Webflow ist auch ein hervorragendes Werkzeug zum Erstellen von Designsystemen. Mit der kürzlich veröffentlichten Veröffentlichung von Inhaltsüberschreibungen für Symbole können ganze Designsysteme erstellt werden, die Teams dabei helfen, Designs schneller zu erstellen, ohne die visuelle Identität oder die Kernwerte ihrer Marke zu beeinträchtigen oder zu verwässern.

No-Code-Tools reduzieren den Zeitaufwand und das Programmier-Know-how, die erforderlich sind, um eine Idee in etwas zu übersetzen, das von Menschen verwendet werden kann. Sie müssen kein Programmierer mehr werden, um Dinge zu bauen und eine neue Welle von Machern mit unterschiedlichen Hintergründen und Perspektiven zu befähigen. Ryan Hoover, Gründer von Product Hunt, in The Rise of No Code

Die Vorteile von Webflow für Webdesign

Das Erstellen reaktionsschneller Websites in Webflow kann schnell erfolgen, da die Benutzeroberfläche die Bearbeitung und Vorschau auf verschiedenen Geräten nahtlos integriert. Mit einem Klick können Designer sehen, wie Websites auf dem Desktop, Tablet und Mobilgerät angezeigt werden, und sie können Layouts, Komponenten und Schriftarten für jeden Bildschirm anpassen.

Webflow-Vorteile:

• Eine komprimierte Zeitleiste. Ein schneller Weg von der Idee zum Design, Prototyping und MVPs.
• Webflow schließt die Lücke zwischen Design und Inhalt. Es ermöglicht Autoren, Redakteuren und Vermarktern, Inhalte auf Websites sofort zu aktualisieren.
• Designer können Low- oder High-Fidelity-Prototypen in Webflow erstellen, indem sie Sketch oder ein anderes Prototyping-Tool überspringen. Sobald Prototypen getestet sind, können sie schnell in das Endprodukt umgewandelt und live im Internet bereitgestellt werden.
• Erstellen, hosten und pflegen Sie mehrere Websites und Zielseiten.
• Integrieren Sie Messtools wie Hotjar oder Google Tag Manager.
• Senken Sie die Eintrittsbarriere für Marketer und andere nicht-technische Personen.
• Einfache Bearbeitung von Inhalten durch andere direkt auf der Seite über den Webflow-Editor.
• Webflow E-Commerce ermöglicht eine schnelle Gestaltung und Skalierung von Online-Geschäften.
• Webflow bietet Designkonsistenz und -geschwindigkeit mit Teamvorlagen.
• Designer können Websites mit echten Inhalten erstellen und die CMS - Sammlungen von Webflow verwenden – Inhaltsvorlagen, die andere Teams ohne technische Kenntnisse verwenden können.
• Automatische Site-Backups (Versionierung) und Staging-URLs.
• Websites müssen nicht mit Webflow gehostet werden. Da alle Websites in Standard-HTML, CSS und JavaScript codiert sind, können Websites exportiert und auf jeden Host hochgeladen werden.
• Wenn Sie Webflow verlassen, können Sie die Datenbank zusammen mit den HTML- und CSS-Dateien für die zukünftige Verwendung exportieren.

Zusammenfassung

Unzählige geschäftliche Vorteile können realisiert werden, indem Code für die Webentwicklung abgeschafft wird. Webflow überragt minderwertige DIY-Webdesign-Tools und bietet eine überzeugende Lösung, die für die meisten professionellen Webdesign-Anforderungen geeignet ist. Die Plattform entwickelt sich ständig weiter und es sind weitere aufregende Entwicklungen auf dem Weg.

Ich habe in weniger als zwei Monaten eine Unternehmenswebsite mit Webflow im Alleingang entworfen und gestartet. Webflow bot eine beispiellose Flexibilität im Designprozess und mehr kreative Kontrolle, ohne sich um den Code kümmern zu müssen. Der schnelle Webdesign-Workflow ohne Code ermöglichte einen schnelleren Start und senkte die Produktionskosten im Vergleich zur herkömmlichen Webentwicklung um die Hälfte.

Die Lernkurve ist nicht steil. In ein paar Wochen können alle Vor- und Nachteile von Webflow mit Tutorials ausreichend gemeistert werden – genug, um mit der Erstellung einer vollwertigen Website zu beginnen. Sobald Designer Webflow gelernt haben, kehren sie möglicherweise nie mehr zur traditionellen Art der Webentwicklung zurück.

No-Code-Webdesign-Tools sind hier, um zu bleiben. Der Wert und die Flexibilität, die sie bieten, stehen außer Frage. Die No-Code-Bewegung beruht auf der grundlegenden Überzeugung, dass Technologie die Erstellung ermöglichen und erleichtern sollte und keine Eintrittsbarriere darstellen sollte. Webflow ermöglicht es Designern, aufwändige Produkte in kürzerer Zeit zu entwerfen und zu bauen. Es hilft Designern, mit der Geschwindigkeit des Geschäfts Schritt zu halten, und eröffnet eine Welt voller Möglichkeiten für diejenigen, die nicht programmieren können. Es kann an der Zeit sein, an Bord zu springen.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Webanimation in der Post-Flash-Ära
• Einfachheit ist der Schlüssel – Exploring Minimal Web Design
• Responsive Design – Best Practices und Überlegungen
• Brutalistisches Webdesign, minimalistisches Webdesign und die Zukunft von Web UX
• Lohnen sich alle Trends? Die 5 häufigsten UX-Fehler, die Webdesigner machen