Webflow

Selected projects at Webflow 2015-2021

Upd:
  1. 1Grid layout with direct manipulation
  2. 2Components and instance overrides
  3. 3Interactions and animations
  4. 4Flexbox

Webflow is a “no-code” web platform.

I joined the team in its early days as one of the first two designers. From 2015 to 2021 I’ve worked on a variety of new features and enhancements for the “Webflow Designer” including layout systems and animation/interaction tooling among many others.

This is a collection of various projects I’ve worked on during these years. Latest and some of the most impactful things are still unreleased and, sadly, can not be shown.

Webflow Designer

Grid layout with direct manipulation  #

CSS Grid transformed the way web developers create layouts. The challenge was to abstract some of the complexity and translate this powerful new layout mechanism into Webflow.

Compared to all previous tools in Webflow where most style properties are adjusted via the inspector panel, we wanted the Grid to be different. Given the visual nature of CSS Grid, we felt that Webflow is the perfect medium to create a fully visual way of creating grid layouts by utilizing direct on-canvas manipulation.

Working with grid layout in Webflow

Together with the team I’ve worked on exploring various ways to interact with a grid on canvas. After months of iterations and tests, we came up with a powerful and simple solution that fully utilizes Webflow’s visual nature for creating grid layouts.

Overview of grid's main features
Grid playground built in Webflow for feature release

Shortly after the initial release, we’ve added support for working with Grid template areas, making it even easier to create and adjust grid layouts using direct on-canvas manipulation.

Defining grid areas on canvas
Dragging elements into grid areas
Adjusting areas for smaller screens

Components and instance overrides  #

Webflow used to have “Symbols” – a basic mechanism to reuse an element across multiple pages, for example: a navigation bar, a footer, or a sign up form. However, there was no way of using the same Symbol with different content. This limitation greatly decreased the range of cases where symbols can be used.

I worked on evolving Symbols to Components by adding parametric content overrides, which would let authors define text, images, links and other properties that are editable on individual Component instances.

This update allowed authors to utilize an existing mechanism for a much wider range of use-cases by turning various recurring layouts into Components and reusing them across their project with indvidiual content overrides. As they make structural and stylistic changes to the Components, each instance would reflect the new changes and still retain its content overrides.

Defining overrides on a component
Overriding content on instances
Adjusting layout across multiple instances

Interactions and animations  #

When I started working on “Interactions 2.0”, Webflow already had basic tooling to add interactions and animations to elements on a page. However, we wanted a more poweful and flexible solution that would let authors create rich, sequenced animations using a visual timeline. Another goal was to let authors create animations and interactions based on various dynamic inputs, like scroll position or mouse movement.

While exploring different approaches for a visual interface, I came up with the idea of a simplified vertical timeline that would let authors stack various “actions” along an axis. The vertical axis can represent either time or a dynamic value from user’s input, such as mouse position or scroll progress.

This interface metaphor proved to strike a perfect balance between a full-blown timeline usually found in professional animation software and a simple yet flexible way to create rich animations and interactions.

Examples of timed and dynamic animations triggered by various events
Overview of creating various animations
Adjusting the easing curve on an intro animation
In the wild: various animations and interactions created using this feature in Webflow

Flexbox  #

This was one of the first projects I’ve worked on after joining the team.

The challenge was to translate a powerful CSS layout mechanism into a simple and intuitive visual interface that allows designers to create expressive, responsive layouts on the web.

This feature was released in early days of Webflow, when the design team was just 2 people. In addition to product design work, I’ve also built a Flexbox learning game in Webflow and an educational marketing website for feature release.

Flexbox remains one of the most useful additions to Webflow Designer. Since the initial release in 2016, I’ve worked on several updates that improve and streamline the interface.

Flexbox in action
UI mockup for flexbox controls and the marketing site