index
Selected projects at Webflow 2015-2021

Webflow

Webflow is a “no-code” web platform. I joined the team in its early days as one of the first two designers.

Starting from 2015 and until 2021, I’ve worked on a variety of designer-focused products ranging from layout systems and animation tools to marketing pages and iconography in my early days.

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.


Grid

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 designed in Webflow where most properties of an element are adjusted via a 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.

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.

Product overview on Webflow ↗
Overview of grid's main features
Grid playground built in Webflow for feature release

Shortly after the initial release, we’ve added a fully visual 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

Symbol overrides

Webflow’s symbols let authors reuse a common layout across multiple pages — for example, a navigation bar, a footer, or a sign up form.

Up until now, 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’ve worked on adding dynamic content overrides to symbols, which would let authors define text, images, videos or links that are editable on different symbol instances.

With this feature, authors can utilize symbols for a much wider range of use-cases by turning various recurring layouts into symbols, each with its own content. As authors restructure the layout of that symbol, each instance will preserve its unique content.

Feature overview on Webflow blog ↗
Defining overrides inside a symbol
Overriding content on a symbol instance
Adjusting layout across multiple symbols

Interactions and animations

When I started working on “Interactions 2.0”, Webflow already had simple tools 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, like 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, uncomplicated way to create rich animations and interactions.

Product overview on Webflow ↗
Launch page that fully utilizes the feature ↗
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

Here are various animations and interactions created using this feature in Webflow.


Flexbox

Flexbox was one of the first projects I’ve worked on at Webflow.

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 used layout tools in Webflow. Since the initial release in 2016, I’ve worked on several updates that improve and streamline the interface.

Educational site I built for feature release ↗
Flexbox learning game I built in Webflow ↗
Flexbox in action
First iteration of Flexbox controls
Educational marketing website