Website Design Adventures with Webflow and ADPList
Date
Reading Time
 minutes
Read if
Tags
Team Journal

Website Design Adventures with Webflow and ADPList

Hi! I am Kiana, a Junior Brand Designer at Eskwelabs. Ⓖⓡⓐⓟⓗⓘⓒ ⓓⓔⓢⓘⓖⓝ ⓘⓢ ⓜⓨ ⓟⓐⓢⓢⓘⓞⓝ, literally. I love watching tutorials and learning new techniques that I can apply to my designs. If I am not designing, I either over consume internet content or I’m outside, capturing moments. I am also working on being a key-shaped person and this is my first step into becoming one by writing a blog about my Webflow journey. 

Recently, I have been into website design. This new interest of mine sparked when I helped in crafting Eskwelabs’ current website. We used a no-code website builder called Webflow. What I found amusing about Webflow is their Webflow University feature where they upload their tutorials and free video lessons on how to navigate and start with Webflow. You can also join their Webflow Community on Discord or go to the Webflow Forum to ask questions. If you’re wondering if they answer—yes, people do respond to your queries. 

I shared my new goal of learning website design with my fellow designer in Eskwelabs. The universe heard me because later on, my teammate sent me a link to a free Intro to Webflow Series in collaboration with ADPList. Of course, I pressed the link immediately and signed up. If you’re not familiar with ADPList, they are an organization that provides free mentorship to guide you in your professional development. The mentors are volunteers, and you can also sign up as one. Going back to my website design journey, ADPList emailed me after a few days saying I got in their free Webflow course. Hooray! 🕺🏽

About the Intro to Webflow Series

So, what’s the difference between the Intro to Webflow Series of ADPList and Webflow University if both offer Webflow tutorials? That’s a good question! Webflow University is like a Massive Open Online Course (MOOC) while the Intro to Webflow Series is like a cohort-based learning course. It is a 4-week virtual course that includes a demo day—a chance to get featured during a live feedback session, on the last day. Since there were around 5,000 learners, the team handpicked just a number of projects to be presented on demo day. Learners are eligible to receive a certificate if they submitted their case study and followed the guidelines. 

All sessions were live so learners could ask questions in real time. The sessions were also recorded and posted on YouTube for learners who missed the live sessions and for the public to view. If you’re considering learning Webflow, you might want to check this playlist. They also provided some reading materials and video resources to review and prepare for the live sessions. Here are the covered topics: 

  • Intro to Webflow 1: Getting started with Webflow
  • Intro to Webflow 2: Designing in Webflow
  • Intro to Webflow 3: CMS & Dynamic Content
  • Case 1: Building a Portfolio in Webflow
  • Case 2: From Figma to Webflow
  • Case 3: Webflow E-commerce
  • Website teardown 1: Mistakes to avoid, what not to do
  • Website teardown 2: Top websites, best features 

Experience

Since I am based in the Philippines and they are in the Pacific Time Zone, I had to adjust my body clock. The live sessions were scheduled at 12:00 AM in my area so I adjusted my work schedule and tried my best to stay awake to process new knowledge. Unfortunately, there were some live sessions that I missed, but even so, it did not stop me from continuing the course. I made sure I allotted a time slot on my calendar to watch the recordings and prepare for my chosen case study. 

Entering this course, I already have a bit of knowledge about Webflow. The first 3 sessions were led by the Webflow University team, McGuire, Grímur, and Nelson. They started by giving us a tour of Webflow, defining the use of the different tabs and sections. 

Later on, they introduced the power of animation and the CMS collection of Webflow. The CMS feature is a game changer as it makes you manage your content easily. With one layout, it can cater to multiple content that you want to showcase. 

The next 3 sessions were by different experts explaining their process of creating projects using Webflow. They showed real-life examples of how to use Webflow for different types of websites, such as portfolios and e-commerce sites. For the last 3 sessions, they focused on demo day and gave the learners live feedback on their websites. 

Learning Outcome

After completing this course, I gained more understanding about designing and developing websites using Webflow. One of my main takeaways is that websites are just made out of boxes—boxes that define the content and navigation of a website. Getting into website design, it’s important to master the basic design principles because it will guide you in creating an effective website layout. The instructors always mentioned the importance of hierarchy in order to establish a clear structure and to form smooth navigation. Another important component of a website is its responsiveness. If you want to test your CSS flexbox skills, you can enjoy the Flexbox Game made by Webflow. 

Webflow is known for its animation aspect and it’s fun to experiment with it. One of the instructors said that it’s okay to maximize the platform’s abilities, but make sure that once you’re comfortable with it, be consistent and focus on the needs of your audience. Once you’re getting the groove, align the website you’re making with your goals and the needs of your audience. Grace Walker, an instructor, showed a simple metric we can use in identifying what a website is for or what kind of website we should create.


That’s it! Thanks for taking the time to read my Webflow journey. I hope you found it informative and helpful. If you want to check out my case study project, you may go to this link or if you want to share your own experience with Webflow or website design in general, feel free to leave a comment. And remember, always keep learning and exploring new concepts to improve your skills and knowledge. Happy designing!