Zeit ist Geld - auch in der Webflow Entwicklung. Viele Webseiten haben ein ähnliches Layout, und dennoch müssen Entwickler oft bei null beginnen. Das Problem: Die immer gleichen Layouts müssen mühsam neu erstellt werden. Relume bietet eine Lösung für Webflow Entwickler: Du kannst Layout-Komponenten direkt in Dein Projekt kopieren, wodurch Du und Dein Kunde wertvolle Zeit sparen. Ich habe kürzlich mein erstes Projekt ausschließlich mit Relume entwickelt. Meine Erfahrungen und Erkenntnisse dazu möchte ich in diesem Blogbeitrag mit Euch teilen.
Intro Relume Library
Die Relume Library ist eine Kollektion von fertigen, qualitativ hochwertigen Komponenten und Features, die eigens für Webflow entwickelt wurden. Diese lassen sich mit einem Klick in Webflow integrieren und folgen der Client-First-Naming-Convention von Finsweet. Das garantiert eine stets einheitliche Struktur und einen konsistenten Aufbau. Zudem sind alle Komponenten responsiv gestaltet, was bedeutet, dass das Grundlayout schon für Desktop-PCs, Tablets und Smartphones optimiert wurde.
Mit über 1.000 unterschiedlichen Layout-Optionen findet sich für jede Art von Sektion, sei es Testimonial-, Call-to-Action- oder Logo-Bereiche, eine geeignete Komponente. Zusätzlich stehen komplette Seitenvorlagen zur Verfügung.
Die Chrome Extension von Relume für Webflow gibt mit der ‘Class Sync’ Funktionalität die Möglichkeit die Klassen von neuen und alten Komponenten zu synchronisieren, um Klassenduplikate zu vermeiden.
Die Relume Library ist darauf ausgerichtet, Webflow Experten und Designern so viel Zeit wie möglich zu ersparen. Sie bietet eine kostenlose Version an, die 30 Komponenten umfasst. Um jedoch Zugang zur gesamten Bibliothek mit über 1.000 Komponenten zu erhalten, beträgt der Preis 32 USD pro Monat.
Relume und Figma
Der typische Prozess für die Erstellung einer Webflow Website beginnt üblicherweise mit dem Design in Figma. Hierbei wird den Nutzern der Zugang zum Relume Library Figma Kit gewährt, welches alle notwendigen Komponenten enthält. Diese Komponenten können dann individuell angepasst werden, indem eigene Stilelemente wie Schriftarten, Farben, Bilder oder persönliche Elemente hinzugefügt werden. Zudem verfügt jede Komponente über eine entsprechende mobile Version. Wenn das Design auf der Relume Library basiert, ergibt sich ein fast nahtloser Workflow für Webflow, da dieselben Komponenten sowohl in Figma als auch in Webflow verwendet werden können.
Arbeit in Webflow (mit Relume Chrome Extension)
Im besten Fall startest Du Dein Projekt mit dem ‘Relume Library Style Guide* als Ausgangslage. Dieses basiert auf Client-First - dem selbem Klassenssystem wie auch die Komponenten. So kann eine reibungslose Entwicklung garantiert werden.
Wenn Du spezielle Komponenten von der Relume Website in Dein Webflow-Projekt integrieren möchtest, gehe folgendermaßen vor: Stelle sicher, dass die 'Class Sync'-Funktion in der Relume Chrome Extension aktiviert ist. Anschließend kannst Du die gewünschten Komponenten direkt von der Relume Website kopieren. Füge sie mit Strg + V in Dein Webflow-Projekt ein. Alle Elemente sind professionell und nach bewährten Praktiken gestaltet, sodass Du direkt mit Deinen individuellen Anpassungen beginnen kannst. Beachte, dass manche Komponenten zusätzliche Animationen enthalten, die Deinem Projekt zusätzliche Dynamik verleihen können.
Vorteile- und Nachteile von Relume
Vorteile
Zeitersparnis - Die Verwendung vorgefertigter Layouts reduziert den Arbeitsaufwand erheblich, was eine schnellere Kundenbetreuung und Präsentation erster Ergebnisse ermöglicht.
Gemeinschaft und Support - Relume bietet eine aktive Community-Plattform mit Projekten von Mitgliedern und die Option, einen Relume Experten für spezifische Anliegen zu kontaktieren. Zusätzlich bietet die Relume University Anfängern die Chance, sich essenzielles Wissen anzueignen.
Responsives Design - Durch das automatisch anpassbare responsive Layout wird viel Zeit gespart und die Herausforderungen bei der Gestaltung für verschiedene Bildschirmgrößen werden minimiert.
Industrie-Standard - Relume bleibt stets am Puls der Zeit, indem es seine Layouts und Stylesheets regelmäßig aktualisiert, um immer die neuesten Best Practices, wie zum Beispiel Client-First 2.1, in seiner Bibliothek zu integrieren.
Individuelles Design (keine Templates) - Obwohl mit Vorlagen gearbeitet wird, kannst Du der Website trotzdem 100 % individuell und nach den Anforderungen der Kunden gestalten. Nur die Grundlayouts werden durch Relume bereitgestellt.
Nachteile
Bei komplexen Layouts nicht nützlich - Für besonders komplexe oder individuell gestaltete Layouts bietet die Relume Library begrenzte Unterstützung. Sie umfasst eine Vielzahl von Komponenten, die tendenziell einfach gehalten sind und primär als Ausgangspunkt dienen, aber bei sehr spezifischen Anforderungen an ihre Grenzen stoßen können.
Preis - Mit einem Monatspreis von 32 Dollar, der sich auf nahezu 700 Dollar jährlich summiert, stellt die Relume Library eine beachtliche Investition dar. Für regelmäßige Nutzer zahlt sich diese Investition definitiv aus, während der Preis für Hobby-Entwickler als recht hoch angesehen werden kann.
Persönliches Fazit
In meinem Projekt habe ich mit einem Design gearbeitet, das auf Relume basiert und in Figma erstellt wurde - die Entwicklung lag in meiner Hand. Das war ideal: Ich konnte viel Zeit einsparen und dadurch meinem Kunden ein besseres und saubereres Ergebnis liefern. Die nächsten Designs und Projekte habe ich bereits mit dem Figma-Kit von Relume umgesetzt. Für zukünftige Projekte plane ich, weiterhin auf Relume zu setzen und zumindest Teile meiner Projekte darauf aufzubauen.
Ausblick
Relume und Finsweet sind ein starkes Duo und bieten enorme Unterstützung. Ich bin überzeugt, dass beide Unternehmen auch in Zukunft an ähnlichen Tools arbeiten werden, um das volle Potenzial von Webflow auszuschöpfen. Darüber hinaus profitieren Einsteiger von den Systemen, da sie einfach und bequem zu bedienen sind. Sie bieten eine saubere Ausgangslage und bedienen sich an Best Practices aus dem Webdesign.
Add-on: Relume Icon Library
Unter der Relume Icon Library hast Du Zugriff auf mehr als 20.000 Icons, aufgeteilt auf 10 verschiedene Icon-Pakete. Ebenso wie die Relume Component Library lassen sich die Icons mit nur einem Klick perfekt für Webflow und Figma kopieren.
Mit Sternchen * markierte Links sind Affiliate-Links.
