How I designed and built Design Plate from Idea to launch.
What’s Design Plate?
Design Plate is a handpicked collection of tools and resources for designers.
Why I built Design Plate?
I designed and built this project myself when I noticed that some designers usually reach out to me about needing resources they can use to learn UI/UX design and discovered that I usually send them the same resources I bookmarked in my folder all the time.
So, the Idea of publicly keeping all the resources and links to tools/courses in one place so as to make it available for anyone that needs it was what brings about building Design Plate.
I already have a structure of what I wanted to build and I quickly put together a high fidelity wireframe in Figma. I designed two variations which are dark mode layout and light mode layout.
I ended up going with the dark layout because I loved the look and feel.
I used IBM Plex Sans for the fonts and for the colour, I used pure black (#000000) for the background, dark grey (#272727) for the elevation of some containers and blue (#2F80ED) for the call to action buttons.
After completely the UI, I shared it on Twitter as a form of building in public and I noticed people are actually interested in it, this also motivates me to complete the project.
I started building the layout visually in Carrd — Carrd is a simple, free, fully responsive one-page site builder for pretty much anything. Most people don’t believe that I used Carrd but the truth is, I expanded its capabilities in terms of design and am also on the Pro Plus plan.
Adding of Resources
All the resources on Design Plate were added manually and I already have them stored in a Notion document which makes it easier to copy and paste. The hardest part here was getting the logo of the tools I added as part of the resources, I used the Image Downloader & SVG Export chrome extension to extract the logos of some sites. I later noticed that those extensions weren’t able to extract the logos of some sites, so I used GetFavicon to pull the favicons and also used Convertico ICO to PNG Converter to convert some .ico favicons to png file so that I can easily use them in Carrd.
In the future, I might look into using Airtable as the CMS for Design Plate so as to make it easier to manage the resources but right now, it’s solving the problems I made it for.
Suggest a Resource
I added another section for other designers to submit links to some resources that are helpful to them. All submissions will go directly to Design Plate email address, then I will review it and manually add it to the platform.
I added a section for designers interested in getting those resources into their inbox every month to subscribe to the mailing list.
This is powered by Mailchimp which was integrated with Carrd via Design Plate account API Key and the Audience ID. I also created an automated welcome email in Mailchimp to send to new subscribers when they signed up.
I shared my progress on this project publicly on Twitter and when I completed everything I did a soft launch.
View the project on — designplate.xyz