Your Classes are Waiting
Create an account to get started.
You’re just one step away.
Already have an account? Log in
Create an account to get started.
You’re just one step away.
Beginner – Advanced
0min
Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.
Beginner – Advanced
0min
Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.
Nice job, we did some time travel into the future and it is looking amazing!
0
%
Completed
0
of
0
Lessons done
In this course, we’ll use our tried-and-true workflow to create a website from scratch. We’ll start by iterating on low and mid-fidelity designs in Figma. Then, we’ll create and render 3D product assets in Cinema 4D and Octane. We’ll use After Effects to export them as Lottie JSON files — and build our landing page complete with animations and interactions in Webflow. Finally, we’ll tie it all together with a custom domain, then hit publish for the world to see!
0
Lessons
{{group_start}}
group: Getting clients
Pilot | https://player.vimeo.com/video/153749651?h=50b23c33ff | 3:03
Cute Poison | https://player.vimeo.com/video/153748906?h=847b19281c | 3:06
Sleight of Hand | https://player.vimeo.com/video/153749393 | 4:23
Tonight | https://player.vimeo.com/video/168525464 | 5:23
{{group_end}}
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.
Per lesson:
Figma (or similar tool like Adobe XD, Sketch, Photoshop, Illustrator, or pen and paper)
Maxon Cinema 4D - link
Octane render - link
Adobe After Effects
Figma (or similar tool like Adobe XD, Sketch, Photoshop, Illustrator, or pen and paper) - link
Maxon Cinema 4D - link
Octane render - link
Adobe After Effects
Webflow
Webflow
Lorem ipsum is dummy text. Web designers use it to fill a page. It lets people see the design without reading real words.
Lorem ipsum is dummy text. Web designers use it to fill a page. It lets people see the design without reading real words.
Lorem ipsum is dummy text. Web designers use it to fill a page. It lets people see the design without reading real words.
Lorem ipsum is dummy text. Web designers use it to fill a page. It lets people see the design without reading real words.
Beginner – Advanced
Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.
Beginner - Intermediate
Jump right in to Webflow — get an overview of the basics and get started on building your first website, without learning or writing code.
We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.
