Fantasivärld

Webflow projekt

Webb design, motion

Kund

Eget projekt

Team

Solo

Vertyg

Figma & Webflow

Roll

Webmaster

01 – Breif

Bli en webmaster

Att drömma sig bort till en fantasivärld kan vara en skön känsla. Där kan man andas ut och hitta ny motivation och energi. Jag följer en byrå på Instagram som brukar köra en timmes frilek där man hinner prova på olika program, någon cool effekt eller bara leta efter inspiration. Saker man aldrig annars har tid för men som kan vara så nyttiga. Jag brukar kicka igång varje fredag med att gå tillbaka till mina sparade videos för att hämta inspiration och prova på nya tekniker. Det var då jag kom på denna idéen som dock blev mer än en timmes frilek.

Min frågeställning: Hur kan man skapa en hero i Webflow med motion design som inte tar för mycket plats och därmed är miljövänlig?

02 – Research & idé

Så många effekter som möjligt

Jag började med att leta efter inspiration och fastnade snabbt för fantasivärldar. Det jag tyckte var roligt med detta var att man kunde bygga upp en hemsida med olika effekter som gör att man trollas bort till en annan värld. En effekt jag verkligen fastnade för var att det bildades vattenringar när du rör musen och ännu mer när du klickar. Jag hittade även ett webflow projekt där dem hade skapat en bild/illustration utifrån divar, en cool idé som jag också ville prova. Utifrån detta bestämde jag mig för att göra en "under vatten" hemsida för att se hur långt jag kunde dra det. Jag hade inget syfte mer än att lära mig Webflow och försöka mig på så mycket effekter som möjligt. Därefter körde jag igång med att börja skapa.

03 – Lösning

En fantasivärld uppbyggd på fyrkanter

Motion design kan göra att en hemsida blir väldigt tung vilket jag ville undvika i detta projekt. Min lösning för att undvika detta var att jag byggde upp heron med hjälp av endast divar (se videon ovanför), det blev ca 70st vilket tillsammans skapar en fin illustration av en solnedgång där jag även har lagt till rörliga element i Webflow. Jag jobbade länge med fyren för att få den att snurra 360 grader vilket är en effekt som gör att det känns mer verklighetsbaserat.

En hemsida som måste upplevas och utforskas själv, länk nedanför.

https://fantasivarld.webflow.io/