Social

Element Human UI Kit

element human ui kit

 

The project

UI Kit design for Element Human.

Introduction

Element Human is the Human Experience platform, which allows you to capture emotion and behaviour across your digital experience. Thinking about the implementation of a Design System to define a consistent user experience (Web & Platform) in order to create an UI Kit and a Library to be shared with Front End developers.

Process

My approach was applying Brad Frost’s Atomic Design to the system. Deconstructing the site in small components (atoms, molecules, organisms), coming with templates + pages and identifying common patterns.

The benefits? A Design System is a good way to show, in a short period of time, how you can save time, money and set the footprint for building consistent and robust products in the future.

Outcome

Element Human developers are currently using this UI Kit to build reusable components for a variety of clients.

Download UI Kit (pdf & png)

  • element-human-atoms
  • element-human-molecules
  • element-human-organisms
  • element-human-templates
  • element-human-pages
  • element-human-design-tokens