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.

Neographe Factory

Client:

Neographe Factory

View Site

Webflow Animation

Custom CSS

Finsweet Attributes

Swiper JS

Overview

Choosing and Setting up CSS framework

After analyzing the design, we realize that the designer use a moderately small aboard for the layout. Therefore, the CSS framework approach for this project is a full-out scalable CSS for every screen size. The ratio of the original design would be on both HD screen (1920x1080px) and 2k or 4k monitor screen.

Challenging sections:

Layout Effect with Posistion Sticky CSS

  • Many section designed with a trendy on scroll effect can be complete by setting the Sticky Posistion
  • Webflow Pre-Build Interaction such as Slide In, Fade In or a custom Timeline is added to complete the second phase of the required animation or to make the section more alive

Repeat Slide Testimonial using Webflow Tab Component

  • Webflow Tab Component & Webflow Interaction is used to create slide effect whenever the user click on the other name.
  • Finsweet Mirror Click is added to mirror the first tab clicked event in order to take advantage of the pre-build loop function from Webflow Tab

Circular CMS Carousel

  • For CMS Carousel, we want and infinite loop carousel that also animate with a circular rotate part instead of slide.
  • Swiper JS is used as the core to create the Carousel, loop function is also made with Swiper JS properties
  • Custom CSS is added to create the circular layout and the animation when change Slide with the Active Slide switching to another color

Result