How I built and launched Design Resources using Webflow (in under 2 weeks)
👋 Hey everyone!
TLDR — I launched designresourc.es on ProductHunt which is a curated list of design tools ranging from learning resources to awesome podcasts from the community. I wanted to share my experience about the creation of the site and releasing it into the world (Heads up: I am no expert).
PSA — This article is not in anyway affilated or in partnership with Webflow. The goal is to dispel the stigma associated with “no-code” tools.
Where it began?
Two weeks ago I was stuck in a bit of a rut and lockdown was getting me a bit down so I decided to do some spring cleaning of my digital workspace and decided it would be useful to collate all of my bookmarked design resources over the years and so designresourc.es was born. I’ll try and keep this article as short as possible, let’s go…
Some facts and friends from launch day
📝300+ resources, 📊15+ categories, 🐦10k tweet impressions, ⬆️ Ability to upvote your favourite resources, 🌎Built using Webflow!
Step 1 — ⚙️ Gather resources and build back-end
When I say build back-end what I really mean is update the CMS and just use Webflow.
First things first, I needed a way to manage lots of resources and filter them in one place. I went down lots of rabbit holes which included Google Sheet’s APIs to no avail.
Eventually I settled on Webflow’s CMS platform, at first I was pretty hesitant to use a “no-code” because I was a web-developer (lol) but I realise now that it was completely the wrong attitude.
This site is a living example that anything you want to build is entirely possible and in many ways made easier with a tool like Webflow.
Step 2 —📚 Design the front-end
Secondly, thanks to Webflow I was able to rapidly iterate different design ideas before arriving at a split column layout with categories on the left and content on the right. I was pretty happy with the final outcome as each card was versatile in a way that I could add as much or as little information as I wanted.
In Webflow you can easily make Collection Lists from your CMS which basically outputs the contents into whatever format you design each “item”. If you want to learn more about how the CMS works in Webflow I suggest you watch the great tutorial resource provided here:
Step 3 — ✨Finishing touches and extra features
Creating an upvote system in Webflow
I thought it could be nice to implement an upvote system where designers could vote for their favourite resources. It involved a few technical steps but wasn’t too difficult, there is a wonderful tutorial by Ben Parker on how to this which I highly recommend you read.
It still blows my mind that something like this could be possible in a no-code tool!
Filtering dynamic content
I had to use a third-party plugin for implementing the filtering of my categories, it was pretty self-explantory though and explain very well by Anna Sabatini at Webflow.
I thoroughly recommend checking out Webflow’s university for tutorials and getting started with the platform, honestly the best way to is to just get started.
Also, I added a sweet interaction when you suggest a new tool by opening a modal. This was all done inside the tool and there are some great tutorials around on designing modals in Webflow.
Step 4 — 🏗️ Design launch materials
We are nearly there, I promise! I quickly drafted the promotional material I wanted to display on ProductHunt and other social platforms. It didn’t take long as I had a good idea on what I wanted the messaging to be. Here are some screenshots taken from Figma:
Step 5— 🎉 Launch!
This was the easy part for me, all the hard work had been done up until this point. It was just up to the community to see if it’s something that they’d like. I was fortunate enough to have some exposure by sending the site to some Twitter friends ahead of the launch but as well as that I shared it with the friendly Slack design community so that certainly helped with getting it out to more people!
👀 Clone the project
Yes, that’s right! I’m making the project available on Webflow community for you to take a look, duplicate and get inspired from for your own projects. You can view it below.
A parting note for fellow designers and makers
You made it to the end, thanks for putting up with all of my weird emoji choices. In all seriousness, I’m incredibly humbled by all of the support I’ve received. What started out as a passion project eventually grew to over a collection of 300+ resources and over 15 categories ranging from some great learning resources to some of my favourite podcasts.
I hope this post has inspired you to get creative and start a small side-project that you’ve been wanting to dig into for a while. I also hope you get as much joy out of the repository as I do and you find something new every day. Please feel free to contribute a tool by messaging me on Twitter or suggesting a link through the site.
Stay hungry, stay curious.
