Case Study

Figma-to-Webflow Service

Building complex and creative layouts for a recruitment firm website.

The client

Interskillar

Design

Polish Studio

Webflow Development

SA-C

Date of completion

2023

The Brief

Step 1

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

The Process

Step 1

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Step 2

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Step 3

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

The Results

Key Highlights

Lorem ipsum dolor sit amet consectetur. Diam habitasse habitasse tempus dictum amet adipiscing volutpat ante. Vitae mi nec sit venenatis diam lacus ut placerat. Auctor cursus tincidunt nibh ultrices non fringilla maecenas. In neque morbi venenatis nisl vestibulum elit adipiscing libero feugiat.

Masterpiece Tattoo

Client:

Materpiecex

View Site

Webflow Animation

Custom CSS

Finsweet Attributes

Swiper JS

Overview

Choosing and Setting up CSS framework

The site is an super complicated site structure with Section stacking on top of each other in a 3d coordinate (depth view). Therefore, the best way to execute this layout is for each section to scale up or down depending on the screen size through View Width unit.

Challenging sections:

3D Asset to After Effect to Webflow

  • Simple high-detailed 3D models Interaction with Blender, After Effect and Webflow
  • Making an Interaction on Blender and export as mp4.
  • reformat to lottie for Webflow Interaction

Result

Memberstack Member Hub Set up for Webflow CMS

  • How to plan an structure membership content page and dashboard with Memberstack.
  • List each plan price out and sort out the hierarchy for each of the plan
  • Each individual Video Product will act as a single plan and every video is on the same level hierarchy
  • Membership Plan will be monthly subscription and has the highest hierarchy
  • Set redirect for Gated Content.
  • Structuring a Gated content ID field on Webflow CMS to match the Gated Content on Memberstack
  • Structuring a View button system on Webflow base on the hierarchy of the plan and set visible condition to the Gated Content
  • Create a member banner and set conditional logic as above.

Nav Menu for member or non-member Users

Nav Menu for general users.
  • Nav Menu for non-member has 2 state that is trigger by Scroll Event. When scrolling to a certain percentage of the page height, a Contact CTA Button appear along side it  SVG vector decoration.
  • Member Hub Link also act as The Login Button since a redirect had been set up to redirect non-member user to login page.
  • Nav Menu for member User applied the same logic with Scroll Event but hide the Log Out Button with is vector by Memberstack member attribute.
Nav Menu for member user.s