Die besten Made-In-Webflow Websites | Februar 2024

In dieser Episode werden einige beeindruckende Webflow-Websites aus dem Monat Februar 2024 vorgestellt. Die erste Website ist von der Agentur ESE aus der Schweiz, die mit beeindruckenden Animationen und einem kreativen Design überzeugt. Danach wird Diego's fiktionales Nebenprojekt vorgestellt, das die Möglichkeiten von 3D-Modellen in Webflow demonstriert. Anschließend wird die Website Redchurch präsentiert, die mit Pixel-Animationseffekten und einem aggressiven Design beeindruckt. Zum Schluss wird die Website BEGG vorgestellt, die für Experimental Niche Food Producers entwickelt wurde und mit einem einzigartigen Layout und kreativen Animationen überzeugt.

00:00 ESE Agenturseite
05:57 Iridescent AI- Spline + Webflow landing page
07:07 Redchurch Agenturseite
09:00 BEGG – Niche food producer

‍ESE Agenturseite
https://webflow.partnerlinks.io/ESE-Agenturseite *

Iridescent AI- Spline + Webflow landing page (Free Cloneable)
https://webflow.partnerlinks.io/iridescent-ai *

Redchurch
https://webflow.partnerlinks.io/redchurch *

BEGG – niche food producer
https://webflow.partnerlinks.io/begg *

* Affiliate-Links

Takeaways

• Webflow bietet vielfältige Möglichkeiten für beeindruckende Animationen und kreative Designs.
• Die Verwendung von 3D-Modellen in Webflow ermöglicht beeindruckende visuelle Effekte. Pixel-Animationseffekte können eine Website besonders machen und das Design abheben lassen.
• Ein einzigartiges Layout und kreative Animationen können das Markenimage einer Website stärken.

Transkription des Videos

Jonas Arleth (00:00.046)

Wir schauen uns heute mal ein paar tolle Webflow -Websites aus dem Monat Februar 2024 an und fangen direkt an mit einer Agentur aus der Schweiz, ESE, und die habe ich im Account hier auch schon immer wieder erwähnt in Videos, weil auch dieses Babel Race Champion Run war auch mal eins, was ich jetzt als Spiel richtig cool fand, wie das umgesetzt wurde. Und überhaupt haben die echt geile Projekte drin. Und was man sagen muss, ist, ich denke mal im Hintergrund auf jeden Fall hier mit G -SAP gearbeitet, weil allein schon, wenn ich hier klicke von Home to Work zum Beispiel,

haben wir hier so einen Würfeleffekt, der quasi die aktuelle Seite immer wieder so ein bisschen nach oben schiebt. Und trotzdem hat man das Gefühl, die wird so ein bisschen zusammengepresst und dann nach oben geschoben. Und das ist super, super weich. Und ich denk mal, nicht nur G -Sap, sondern vielleicht irgendwie muss man auch mit Ajax also irgendwie vorladen oder so. Das fühlt sich einfach super toll an. Ich weiß nicht, ob das jetzt schon hier ein bisschen gecasht ist bei mir. Aber es ist einfach ein tolles Gefühl. Und allein solche kleinen Sachen zeigen einfach schon, dass da schon jemand dabei ist, der es wirklich drauf hat.

Gespür und ein Händchen dafür. Am Anfang, sag ich mal, für einen Einstieg für eine Home -Seite ist es ... Ja, wir haben hier eigentlich nur im Hintergrund hier ein ganz kurzes ... Ich weiß nicht, ob es ein Video ist, könnte ein Video sein, das sich hier kurz abspielt. Und man braucht so ein bisschen länger, um den Text zu lesen. Es ist nicht unbedingt mein bevorzugter Einstieg, aber als Agentur in dem Bereich kann man sich das vielleicht leisten, einfach da so kreativ zu sein. Und ansonsten ... Ah, guck mal, hier die Frau schaut sich das sozusagen an, während man hochscrollt. Dann wird's wahrscheinlich doch eine Lottie sein.

Toll gemacht. Und dann haben wir hier einen großen Text, der einfach erst mal die Agentur so ein bisschen beschreibt. Dann geht's direkt ins Portfolio rein. Und hier muss man auch sagen, die Teaser sind halt einfach sehr, sehr gut. Also die verlocken richtig, sehen hochwertig aus. Genial. Also jedes von diesen Dingern würde ich sehr gerne anklicken wollen. Und ich glaube, dann hat man auch eine hervorragende Arbeit gemacht, wenn man die Teaser schon schafft, dass die einfach toll aussehen. So ein Video über die Agentur selbst zu machen, ist auch immer der Lüge, wenn man das überhaupt kann.

Und das habe ich auch mal ein Video bei mir auf dem Account auch von der Agenturseite hier gemacht, aber von der alten Seite, wie dieses Video hier per Play quasi hier integriert werden kann und das wird jetzt über Vimeo hier geladen und man kann es hier neu starten, man kann den Ton an und aus machen oder hier einfach draufklicken und das pausieren, das war früher so, jetzt haben sie das geändert, aber da habe ich auch ein Tutorial zu, finde ich auch eine coole Variante, um das zum Beispiel einfach automatisch schon abspielen zu lassen. Dann teasern Sie hier unten noch mal so ein bisschen die Services an, die Sie anbieten.

Jonas Arleth (02:24.078)

Auch nochmal groß mit einer Marke der horizontal automatisch durchscrollt und das hier ist aber auch jetzt während dem scrollen fühlt sich hier der Balken also ist eigentlich auch nett und leicht umzusetzen auch direkt in Webflow mit den Interaktionen jetzt haben wir Webseiten und jetzt kommt aber auch genau der Schiebeffekt Content Marketing ich finde das ist ein bisschen ja mein eigener Geschmack er fällt nicht so auf jetzt das so klein zu machen und jetzt immer zwar hier Webflow aber jetzt Content Creation linked ja sowas immer ich habe immer so ein bisschen

Mit diesen ganzen Horizontaltext -Scrollen. Man liest die ja nicht wirklich, ist eher so nett anzusehen. Und das, ich meine, vielleicht ist das hier auch einfach wieder nur kreativ, aber sonst natürlich wieder hervorragend umgesetzt, sag ich mal, vom Feeling her, wie man da durchgeht. Und das ist auch mal cool, hier die ... Kleins quasi on hover abzudunkeln und nur die, über die man drüber geht. Und das ist auch mal eine Sache, wenn man hier wieder reingeht, von unten nach oben scrollt, ist auch schön, dass da auch passt, die Animation, wie es wieder reinkommt.

von oben nach unten, sondern dass das Ganze wieder resettet wird. Dann noch ein paar Kundenstimmen. Oh ja, das ist auch geil gemacht, wie das hier nochmal hier drüber liegt und man die auswählen kann. Das finde ich auch richtig cool. Und da sieht man, dass das einfach so richtig schön custom -made ist. Das sieht man jetzt nicht so oft irgendwie premade bei irgendwelchen anderen Agenturseiten. Dann gehen wir mal auf den Workbereich. Und wenn wir jetzt hier reingehen, und das ist wirklich super nice, ich gehe jetzt hier rein und dann highlighten Sie den Teaser und dann scrollt der nach oben und jetzt haben wir das in groß. Und ich finde,

Das wirkt doch einfach fantastisch. Also wenn man sowas machen kann, auch der Zurückbutton ist super weich und wir gehen hier rein, zack und dann wird es groß. Also finde ich echt geil gemacht. Auch wahnsinnig viele Projekte. Wow. Gehen wir mal rein und gucken, ob es vielleicht doch noch mal eins im Webdesign Bereich gibt. Hier ist jetzt auch Branding wahrscheinlich, aber da genau einfach mal schöne Screenshots noch mal dargestellt. Alles sehr, sehr groß. Das ist leider sehr, sehr unscharf.

Aber ich meine, da können Sie die Sachen auch noch mal setzen. Das ist auch immer so ein bisschen ein Nachteil. Wenn man mit solchen großen über die 100 Prozent Breite geht mit den Bildern, dann ist es halt immer riskant, wenn man einfach die Sachen nicht komplett high resolution exportiert, sondern einfach da einen Mittelweg findet, damit die auch schnell laden. Und das merkt man dann doch hier, dass die auf meinem 5K -Bildschirm jetzt sehr unscharf aussehen. Aber das ist halt einfach eine Sache, die man, wo man abwiegen muss, wie viele Leute das überhaupt auf so einem großen Bildschirm einmal anschauen.

Jonas Arleth (04:45.422)

Dann haben wir hier die Expertise. Gehen wir mal auf Website. Das ist eigentlich im Prinzip das, was Sie auf der Startseite auch schon integriert haben. Plus noch ein bisschen mehr dann unten drunter. Also auch raffiniert diesen Teil hier oben einfach nochmal zu nutzen als Komponente sozusagen und dann auf der Startseite zu implementieren. Und dann eigentlich auch sehr, sehr luftig, sehr viel Freiraum gelassen, wenn mal die große Typo und auch viel kommuniziert einfach über die Projekte, die Sie eben machen. Und das ist ja auch richtig. Gehen wir mal auf Agentur.

Was ich hier auch cool finde, dass sie halt einfach diese Stimmen von den Mitarbeitern hier wirklich schaffen mit reinzuholen. Ich finde das macht es immer richtig toll, wenn man auch mal auf Mitarbeiter -Suche ist. Professionelle Fotos zu machen vom Team ist auch immer richtig, richtig wertvoll. Ja, dann kann man hier halt auch die Story noch so ein bisschen erzählen. Und das finde ich auch immer toll bei eigenen Portfolio -Seiten, dass man eigentlich diese About -Page richtig toll machen kann, wie man möchte. Guck mal, hier nochmal eine ganz eigene, ähm, fresher als dein letzter Arbeitsgeber.

Ja, aber finde ich auch cool, dass man das halt einfach vom Design noch mal ganz anders macht. Und auch mega große Bilder im Hintergrund, die dürfen unscharf sein, das soll ja hier auch der Fall sein. Und das ist ja hier auch Absicht. Also ganz cool, einfach hier auch noch mal eine andere Font. Das nächste ist ein fiktionales Nebenprojekt von Diego, der auch echt viel für die Community macht. Und das kannst du dir sogar in Webflow klonen und dann mal anschauen, wie das eben gemacht ist. Und hier muss man sagen, hat er einfach mal noch mal demonstriert, wie man mit 3D -Modellen jetzt in Webflow ...

arbeiten kann und die seite ist auch butterweich zumindest bei mir auf dem gerät ich weiß nicht ob da wirklich auch performance technisch das noch mal einen großen unterschied macht wie die rechenleistung einfach von laptops oder sowas sind aber wenn ich das hier mal neu lade dann haben wir im prinzip auch eine sehr schnelle ladezeit von dem 3d modell und obwohl es ich weiß nicht sind jetzt nicht viele texturen drauf aber doch viele farben und man kann hier wie in so einem tunnel quasi durch scrollen und es ist wirklich butterweich also hier ist gar nichts mit

mit ruckeln oder irgendwas ich kann hier hin und her gehen und dann kommt man hier in das schwarze loch und dann kommt aber hier noch mal in der mitte quasi richtig schön so ein element mit und dreht sich hier so fancy wie das ja gerade viele auch mit einer markie dann ja einbinden und Einfach noch mal zu demonstrationszwecken dass man 3d echt gut nutzen kann in in web flow und finde ich ein tolles beispiel kann man sich einfach mal anschauen wie das dann animiert ist auch in web flow wie gesagt das klonobel verlinkt ja eine video beschreibung dann haben wir red

Jonas Arleth (07:09.39)

und das ist wieder eins, wo Joseph Berry zugeschlagen hat. Laden wir hier mal die Startseite nochmal neu. Da kriegen wir hier auch richtig schöne Pixel -Animationseffekte mit Bildern, die sich im Hintergrund austauschen. Und dann geben wir direkt ein leichtes Scrolling rein, auch ganz weich. Und der macht echt viel mit den Interaktionen, auch die in Webflow zur Verfügung stehen.

Ich finde, man sieht schon, dass die so ein bisschen anders eben rüberkommen wollen. Es ist schon sehr aggressives Rot, auch mit dem Schwarz zusammen. Und dann hier der Octopus, der hier drüber scrollt über die Texte. Und das Geile ist, das Ding hier ist irgendwie, es ist ein Video, ja, wenn ich das im neuen Tab öffne. Und ich wusste nicht, dass Videos auch transparente Hintergründe haben können. Ist natürlich auch eine geile Idee, eigentlich das hier so zu nutzen im Loop. Und wirkt natürlich ein bisschen unheimlich, aber ...

Weiß nicht, finde ich als Idee habe ich das eigentlich noch nicht gesehen, dass man die Videos mit transparenten Hintergrund einsetzen kann. Und dann haben wir hier einfach ein paar Bilder, die vor und hinter dem Text durchscrollen. Die Seite geht in einen dunklen Modus über, da haben wir unsere Qualle wieder. Und ich finde, er hat einfach auch immer ein schönes Gespür dafür, wie man Typografie setzt. Also die ist ja alles fast in Versaglien geschrieben. Das finde ich eigentlich immer schwieriger zu lesen, wie jetzt eben kleinere Buch, Kleinbuchstaben. Aber so wie er das setzt, finde ich, macht es durchaus Sinn, dass man

Lust hat sich das anzuschauen und zu lesen. Projekte, die hier angeteasert werden in Kacheln, auch schön eigentlich gehighlightet. Was passiert, wenn wir hier mal draufklicken? Kommen wir auf eine Unterseite, aber da gibt es nicht mehr Infos außer das Video. Und genau, das finde ich ein bisschen immer zu lange. Also die Page Transition ist für meinen Geschmack dann zu lang, wenn man doch mal einfach schneller sich durchklicken will. Aber das bleibt hier eben überlassen. Gucken wir uns das Menü noch kurz an.

wie die Nufflings sich animieren. Ja, so kennt man das von ihm. Schick. Als nächstes haben wir BEGG, eine Website für Experimental Niche Food Producers. Wir sind ja also im Essensbereich und das Tolle ist, dass ich finde, das ist eine wunderbar geniale Demo, wofür Webflow hervorragend gemacht ist. Wir haben hier eine Website, die halt vom Layout her sehr besonders und eigen ist. Sowas findest du quasi. Also das ist wirklich für dieses Produkt gebrandet und gemacht.

Jonas Arleth (09:25.742)

Und dann muss dazu eben die Umsetzung auch passen. Da kannst du nichts Vorgefertigtes nehmen. Das muss custom -made von null, von einem weißen Artboard aus gemacht sein. Und das tut's eben hier. Gerade solche einfachen Sachen, wo sich auch jemand aus dem Design überlegt hat, hier zum Beispiel hier, ich weiß nicht, ob's Milch sein soll, dass man das halt einfach als SVG, diesen oberen Teil hier exportiert, damit drüberlegt an der Sektion am Anfang, sowas hier, was alles irgendwie enthalten ist.

Das sind ja einfach tolle, simple Ideen, die das Design unheimlich abheben von Konkurrenten, die was ganz Eigenes dem Produkt geben. Und man kann die ja so einfach dann animieren. Und das finde ich ist einfach so toll. Das ist ja jetzt auch nicht zu aggressiv, das ist aber einfach ein schönes Design dazu und ein bisschen diese Elemente anders positionieren. Kannst du alles drehen in Webflow, wie du willst. Hier kleine Hover -Effekte. Also finde ich einfach toll. Guck mal hier, die Zun verfolgt hier die Maus. Auch eine geile Idee. Das sind einfach simple Sachen, die dann richtig toll mit Webflow umzusetzen sind.

Hier hat man noch die Eier, das ruckelt ein bisschen muss man sagen. Aber ich finde das toll. Also das macht Bock und ich finde so eine Seite umzusetzen, das macht echt richtig Spaß. Großes Menü. Hier dreht sich auch einfach nochmal ein Lottie oder ein Video. Auch geil. Also ganz toll würde ich mir an deiner Stelle mal anschauen und durchklicken, weil ich finde bei sowas kann man einfach schön Inspiration sammeln. Guck mal, das ist ja auch eine geile Idee im Package Design, dass man das so nebeneinander legen kann.