Web App Clones

UI exploration on what makes great web apps great
Project Overview

In a bid to learn what makes great dashboards work, I have been recreating dashboards from world-class tools to learn more about what makes them great.

Below is a list of the dashboards I have cloned

  1. Canva

I will continue adding to this list as I clone more dashboards

Tool Used

Canva Clone

Lessons learned from cloning Canva

  1. Consistency is Key: Canva uses the 4/8/16/24/32 sizes on everything on their dashboard. From font and icon sizes to padding and margin. This consistent use of these sizes creates great visual hierarchy in a way that the brain appreciates when you see it. Its very few places where Canva has broken this pattern and I think that's why you will feel that the site is really well put together as a user but not know why
  2. Use Color Very Sparingly: Canva only uses color to things that they would like the user to focus their eyes on. The fact that they use color so infrequently makes your eyes go directly to those call to actions and important sections. It also makes the main content the templates and your designs pop.

Below is the Figma file of the clone. Explore it for yourself!

Figma Prototype of the Canva Clone

Figma Prototype of the Canva Clone