In this course, we run through the entire design process, from concept to completion. We start in Figma, create some stunning 3D assets in Cinema 4D and Octane, create animated Lottie files in After Effects, and finally, we build our site in Webflow with interactions.

In this lesson, we’re going to go through a process we use internally all the time: we’ll be using Figma collaboratively to design and iterate upon all the stuff that’s going to make our project go from no-fidelity, low-fidelity, and finally, mid-fidelity.

This lesson is a primer on how to use Cinema 4D to model and animate 3D designs of our fictional carbonated water bottle product. We then add the surface textures and light our 3D design with Octane Render.

After generating our 3D product renders in Cinema 4D and Octane, we then convert them to JSON Lottie files — animated designs we can use on our website — using After Effects and the Bodymovin’ plugin.

We've made some recent changes to the Webflow Designer and added a new plugin since launching this course so wanted to share an update with you before you start.

Now that we have our wireframe designs and 3D assets, we can build our site in Webflow. We use our Figma wireframe design and 3D Lottie files to build out the site in Webflow with rich interactions to engage our customers.

Now that we have our site built in Webflow, it is time to publish the site to a custom domain. We run through the process of setting up your custom domain with Webflow.

In this lesson, we bring together all of the elements of this design workflow, and underscore some of the nuances to help you refine your own design workflow.

Additional layout learning

Use the Quick Stack element to structure content on your site.

Use the V Flex and H Flex elements for more efficient layout design.