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.

Partition Studio

Client:

Partition Studio

View Site

Webflow Animation

GSAP

Swiper JS

Custom CSS

Overview

Partition Studio came to us with their landing page design ready, featuring specific interactions and animations. They want us to convert it from Figma to a stunning website using the Webflow platform. The challenge was to bring their vision to life exactly as they imagined it, with the best SEO practices.

Choosing and Setting up CSS framework

Partition Studio landing page design is in somwhere between standard Industrial Site design and Creative Site with a lot of animation. Therefore, some section would have to stay inside a container with its max-width under 1920px, and some would have to be scalable with view width units for the animations to work best. The solution for it is to use a CSS framework with EM units to easily control the responsiveness through the parent section tag. Custom CSS is applied to define global style for certain tags.

How the page look on 2K screen (2560x1440px)


Challenging sections:

Auto-played Varied Content

The most effective an fastest way to accomplish this interaction is to use Webflow native tab component with addition javascript to auto switch between tabs. That way users who browse to this section will have an option of clicking to the next content. Custom CSS was applied for the 3 columns layout and the text-masked loading animation.

The result:

Regional Content

The request for this page pricing table is to have the price in Pound for UK visitors only. In order to accomplish the requirement, Geo JS was applied to filter out UK country by its Country Code Property, and regional content was hidden and shown with condition logic (via javascript). Furthermore, additional logic was applied to make register form appear and auto selected option depend on the click event from the price table

Conditional Logic to Review Table based on user's country


Text Animation

For Text Animation, GSAP was the best library to use because of its Stagger Property. Other library was applied to help structuring html dom for animation such as Split Type and GSAP Scrolltrigger Plugin.