Design

What’s It Like To Build In Webflow? [Video Series]

What’s it like to build in Webflow? Our friends at Edgar Allan invited us to their “EA Live” series to show you the ropes. In this video walkthrough, their team does a live design & build of the Punchlist.com homepage.

Webflow is an online visual editor platform allowing users to create websites without having to code.

In this edu-taining 3-part series, watch Edgar Allan’s Felix and Florencia flex their skills and teach the whole process:

  • Re-creating the Punchlist style guide in Figma
  • Transferring the style guide from Figma to Webflow via Knockout
  • Developing the homepage in Webflow
  • Building custom components like sliders and carousels

Enjoy!

Episode 1: Creating The Style Guide

Episode 2: Homepage Development (Part I)

Episode 3: Homepage Development (Part II)

Bonus: Interview with Punchlist Founder

Special thanks to Punchlist members at Edgar Allan for partnering with us and giving the Punchlist homepage a Webflow makeover! Check out their beautiful work at edgarallan.com.

Zack Kinslow

Zack Kinslow

Zack Kinslow is the Product Marketing Director at Punchlist. Formerly the Education Production Lead at Foundr, Producer at Skillshare, and Zack-of-all-trades at the Art Directors Club, he has a passion for creativity and entrepreneurship. Zack has produced over 100 online courses serving 500,000+ students worldwide.
Other Posts
How to Write a Creative Brief That Inspires Your Team
June 29, 2022

Learning how to write a creative brief might sound tedious, but it’s one of the most important aspects of any creative endeavor. To understand the relationship between a creative brief and finished project, let’s talk structural engineering for a moment. We’re all familiar with Italy’s Tower of Pisa. Did you know that a faulty foundation [...]

Read More...

5 Ways to Get Better Design Feedback from Your Client
March 25, 2022

Your design team spends various sprints working on a large project for a prominent client, and the most important day arrives — the big unveiling. Presenting the creative work is exciting and fun (and yes, a bit anxiety-inducing). But what follows is actually the most crucial part: the client’s feedback. How do you get productive [...]

Read More...

What These 15 Web Design Terms Mean – And Don’t Mean
March 24, 2022

There are few groups who use more jargon than those tackling web design. Design terminology especially causes confusion on cross-disciplinary creative teams and full-service agencies, where not everyone speaks the same language. In order to design great websites, landing pages, product UX, and other digital experiences that are as usable as they are pleasing to [...]

Read More...

5 Tips for Better Client-Designer Communication
September 22, 2021

The client-designer relationship can be a breezy ride or a teeth-grinding journey. It all depends on how prepared you are to effectively communicate with your designer. Going in blind is a normal thing for clients to do when first looking for a designer. But starting the design process with a little preparation will go a [...]

Read More...

Freelance Design Websites for Every Project
September 16, 2021

The freelance design world is hot with talent waiting for your project — you just have to know where to find it. We’ve marked out 10 platforms with freelance designers available for hire. Each one differs in price, client leg-work and expertise. So, jot out your priorities and see which fits your project best! Fiverr [...]

Read More...

4 Things To Consider When Creating Your New Website
January 4, 2021

They say your business website is like your virtual handshake – the first impression you will make on a potential client. With this in mind, it is vital that your website is seamless, easy to maneuver, and on brand. Whether you are building your website yourself, or you’ve reached out to an agency for support, [...]

Read More...

Your Pre-Launch Checklist!
December 21, 2020

We all know the pressure that comes when it’s finally time to launch a website. With all the complexities, we can often catch ourselves thinking of all the things that could go wrong. No one wants to experience the frustration of grammatical errors or a failed capture form. That’s why we created our Pre-Launch essential [...]

Read More...

Punchlist gathers all of your design & content feedback — in one place

Try Punchlist for Free