This wireframe design system and token library was built for teams at Gameberry labs studio.


🕵️ My Role

Research, analysis, creating UI tokens, UX documentation

⏳ Timeline

Aug 2024 - Ongoing

Creating a Design system consists of 3 different layers

  1. Understanding what are design systems?
  2. Why do we need design systems?
  3. How to create a design system?
  4. Documentation

Wireframe design system library

Wireframe design system library


1. Understanding what are design systems?

A design system is a unified language that helps a team solve problems consistently. But, what is a design system for you? Defining that is crucial in helping us create what will work for us and what is the need. Therefore, A design system was essential to us to build unified, consistent components and define functions to improve the efficiency of creating solutions.

2. Why do we need design systems?

The major thing design system was that it was helping us prevent *****technical debt.

Hence,* Developed a set of principles after thorough consideration and research to define the core attributes and requirements of our design system.

🧩 Templatisation Ensures visual consistency & boosts efficiency by providing standardised components.

♻️ Reusability Enhance scalability & modularity to facilitate easier maintenance and updates.

📚 Library Centralised design assets for easy management & collaboration by providing a single source of truth.

3. How to create a design system?

I built a framework that would incorporate all stages of our creation process and helps us along the way.