Introduction
As a web designer and developer with years of experience working in WordPress, Shopify, and coding custom websites, I’ve always been passionate about exploring new creative avenues. Today, I’m embarking on a new journey: a 21-day design portfolio course to learn Webflow from scratch. My ultimate goal? To harness the power of Webflow to bring 2D and 3D designs to life on the web.
This series will document my experiences, challenges, and milestones as I transition to this exciting platform. I’ll also be sharing daily updates on LinkedIn and X, so feel free to follow along if you’re interested in web design, development, and creative inspiration.
Why Webflow?
Webflow is a no-code website builder designed for creatives and developers who want to build powerful, visually striking websites without needing to write extensive code. What sets it apart from other platforms like WordPress and Shopify is its ability to support complex animations, transitions, and visually immersive elements. For someone like me, who’s fascinated by 2D and 3D designs, this platform offers a wealth of possibilities!
Key Features of Webflow:
- Visual Canvas: Webflow offers a unique visual canvas where you can build and see the design as it would appear live. It’s perfect for experimenting with layers, effects, and visual depth.
- Custom Animations: The platform supports custom animations and transitions, which is ideal for creating dynamic 2D and 3D interactions that grab users’ attention.
- Responsive Design: Webflow makes it easy to design responsive websites that look great on any device.
- Clean Code: Although it’s a no-code platform, Webflow generates clean, customizable HTML, CSS, and JavaScript in the background.
My Goals for the 21-Day Design Portfolio Course
Over the next 21 days, I’ll be diving into Webflow with a specific focus on creating a portfolio that showcases my 2D and 3D design skills. I aim to learn the ins and outs of Webflow, including:
- Building a Complete Website from Scratch: Designing a fully responsive, visually stunning portfolio site.
- Mastering Webflow Animations: Experimenting with 2D and 3D animations to add depth and interaction.
- Comparing Webflow with WordPress and Shopify: Documenting how Webflow stands out from the platforms I’m already familiar with.
- Sharing Tips, Tricks, and Tutorials: As I learn, I’ll share my findings with others, whether you’re a Webflow beginner or an experienced designer looking to expand your toolkit.
- SEO & Open Graph Settings: Learn SEO Fundaments and Open Graph Setting for site enhancements.
Day 1: Exploring the Basics of Webflow
To kick off my journey, I’m starting with the basics: learning Webflow’s interface, understanding its core features, and setting up my workspace. Here’s what I’ve learned so far today:
- The Designer Interface: Webflow’s Designer interface is a game-changer. I love that I can visually adjust elements on the page, add animations, and manipulate styles without touching code.
- Setting Up a New Project: Creating a new project in Webflow is simple, and it’s great to start from a blank slate or select from a wide range of templates. Today, I set up my portfolio project and planned out the structure of my site.
- Experimenting with 2D and 3D Elements: I’ve already started playing with layers, shadows, and a few basic animations. Webflow’s Interactions feature allows for sophisticated transitions, which I’m excited to explore more deeply over the coming days.
Why 2D and 3D Design Matters in Web Design
As a designer fascinated by 2D and 3D elements, I’m constantly looking for new ways to make websites more immersive. With Webflow, I can create websites that feel alive with movement and dimension. Here are a few reasons why 2D and 3D design can enhance any website:
- Improves User Engagement: Users are more likely to stay engaged with websites that feature interactive and visually appealing designs.
- Adds Visual Depth: 2D and 3D animations add layers of depth to a website, creating a sense of realism and making the experience more memorable.
- Increases Conversion Rates: Studies show that users are more likely to take action on websites with well-executed animations and engaging visuals.
As I dive deeper into Webflow, I’ll be experimenting with more 3D transformations, parallax effects, and animations to push the boundaries of what’s possible.
Follow My Journey on LinkedIn and X
I’ll be documenting each day of my Webflow journey on LinkedIn and X, where I’ll share tips, tutorials, and insights. Today’s post includes an overview of why I’m excited about Webflow, along with my goals for the challenge. I’ll also be sharing a few snapshots of my progress and key takeaways.
If you’re interested in learning more about Webflow, 2D and 3D design, or simply want to follow my journey, connect with me on these platforms:
- X (Twitter): https://x.com/@socialwaveai
Conclusion
I’m thrilled to start this 21-day portfolio design course to learn Webflow and expand my web design skills. If you’ve been curious about Webflow or want to learn more about incorporating 2D and 3D designs into your projects, join me on this adventure! Let’s push the boundaries of web design together.
Stay tuned for tomorrow’s post, where I’ll dive deeper into the Webflow Interactions panel and begin my first animation project.