Responses by Ryan Morrison, brand design lead, Webflow
Background: The purpose of this page is to announce the future arrival of Webflow Ecommerce. Our audience is not only the designers that will be building the ecommerce stores, but also users who are thinking about setting up online stores. It was important to let the world know that an entirely new way to approach building an ecommerce store is coming.
Highlights: The core of the site shows how simple and powerful it is to build ecommerce sites with Webflow. I wanted the viewer to be able to focus on a concise story, without too many distractions, while still allowing the possibility to dig deeper. Webflow product marketing manager Barrett Johnson’s copy was written really well for that, getting to the point with the main captions and providing more detail behind a click.
Favorite details: Strangely, what came first to mind is the hover state on the “Play Demo” button. It just flashes rainbow colors and I did it on a whim last minute, but it makes me happy. The whole page is also animated, and each section took many hours of design, testing and iteration.
Anything new: I learned a lot about animation with this project, from how to put together larger animations to getting better at working with timing and easing. What is even more exciting is that I found new boundaries for what can be done with Webflow’s animation tools.
Technical features: I built the site with Webflow, but what doesn’t get as much attention is that the beautiful intro animation was done by Sam Mularczyk using After Effects and exporting it as Lottie. The animation is impressive to me as it is complex and fast, but it is also incredibly smooth and lightweight, since it’s largely vector.