Building Design Plate: from Idea to Launch

How I designed and built Design Plate from Idea to launch.

Image for post
Image for post

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.

Design

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.

Image for post
Image for post
Dark Mode Layout
Image for post
Image for post
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.

Image for post
Image for post
Colour Code

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.

Development

I started building the layout visually in CarrdCarrd 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.

Image for post
Image for post
The whole platform in Carrd

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

Image for post
Image for post
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.

Mailing List

Image for post
Image for post
Subscribe to Design Plate

I added a section for designers interested in getting those resources into their inbox every month to subscribe to the mailing list.

Image for post
Image for post
Welcome email automation in Mailchimp

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.

Launch

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

Thanks for reading!

Hi, I’m Soliudeen Ogunsola. You can check out my portfolio and also follow me on Twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store