Atomic design is the framework that can help you accelerate your process for creating amazing design systems.

It consists of 5 different stages


  • We start with the basic or most fundamental elements that can’t be broken down further anymore.
  • form labels, inputs, buttons, colors, etc.




  • Wireframe
  • Recipe App Manual Design
  • Recipe App Digital Design


A wireframe is the structure of the design, layout of the design, or just a basic sketch of an app or website to view how it looks.

If you know Html, then what HTML is to the website is Wireframe to design.

There are types of Wireframes

  • Low fidelity wireframe: include the most basic content and visuals and are usually static (not interactive).
  • High fidelity wireframe: looks and feels like more towards the end product.

Recipe App - Manual

  • For every single page, I go through different versions

Login/Signup Page

Home Page