SystemFlow Landing Page

Landing page version 1
Landing page version 2
Logo
3D Icons

Inspiration

Few months back with my friend Matt, we've started building SystemFlow - complete UI Framework for Webflow. Initially it was built to speed up our web design process but as we refined it, we decided we'll launch it as a product for designer community. Webflow Global Maker Day seemed like a great opportunity to finally find time to create a landing page for SystemFlow

*Our idea for SystemFlow *

What if Tailwind CSS and Webflow teamed up for a common, low-level Framework with readymade classes and components, built to be tailored to any style? This was our aha-moment while thinking of a design framework that would boost our freelance and agency work. As designers, we love both solutions but see their limitations. Webflow doesn't come with a framework, rather than empty canvas. Tailwind is an awesome low-level, responsive framework but lacks an easy, visual eitor. We decided to iterate on this idea to create our own framework from scratch. We aimed for it to be more visual and UI designer oriented yet maintaining the level of customisation offered by clean developer solutions.

There is an important difference between SystemFlow and most UI Kits. Readymade templates are usually built around certain styling that determines all the components and layout. This makes them easy to start with but the more you want to change and restyle the harder it becomes... until you end up frustrated. We've been there. That's why SystemFlow is all about fundamentals - layout, typography, grid & color, followed by styling.

For the Webflow Global Maker Day the challenge was to create a landing page for early registrations to SystemFlow. There was no previous plan and this opportunity seemed like a great motivation

What it does

The Landing Page is simple and I wanted it to have Webflow's vibe. It's a presentation of SystemFlow, its features, and in upcoming versions will have pricing, testimonials and other sections. For now it's aim is to gather emails of people interested in our idea and the Framework.

Current version has the following features I managed to deliver during the hackaton:

Email form with Mailchimp Subscriptions
Animated Feature Previews
Page copy (boring but took a while)
Custom icons
Animation concept for the icons
Trailer video

How I built it

This is the fun part! I spent 22 hours writing copy, creating feature videos in After Effects, preparing layout in Figma, drawing icons... and sleeping (9 hours) and then 1 hour creating the Landing Page in Webflow! How I did this so fast? Thanks to the SystemFlow framework, which is the base for all my projects ✨

Most of the layout was prebuilt in Figma and styled from readymade SystemFlow's Components.
I spent few hours in After Effects - creating cool animations for features and making an icon model in 3D
I implemented the layout in Webflow and connected the form to Mailchimp via Integromat
And I recorded the trailer video including Webflow Global Maker Day using GH5 and Resolve

Challenges I ran into

The biggest challenges I faced was creating animations - took a long time, and create a 3D representation of the icon. It seems impossible to create a Lottie animation with camera flying around and text emboss as 100 layers in AE. Apart from that it went pretty smooth thanks to SystemFlow!

Accomplishments that I'm proud of

Making it happen thanks to Maker Day!

What I learned

Few things about After Effects and Lottie, and Webflow integrations with Mailchimp and Integromat. Oh! And I've finally checked out Jetboost, although did not use it in this project - it's pretty cool

What's next for SystemFlow Landing Page

Before the launch of SystemFlow, I'll be adding few sections to the landing page, including:

Testimonials
Pricing
Feature List

And some others. Hopefully we'll be able to launch SystemFlow soon and landing page I've created for Webflow Global Maker Day will help us accomplish that!