Patryk Ilnicki

  • Save

Check out more on:

Introducing Tetrisly with @Andrew Mialszygrosz

Tetrisly is the result of several months of trying to find a perfect structure to organize a library with interface elements during our work on design systems that we create for digital products.

For a couple of years, we used to use the methodology of Atomic Design in our everyday design process. The methodology is a big breakthrough, and it surely changed the approach to designing digital products. However, after working with Atomic Design on different design cases for a fair amount of time, we noticed its shortcomings.

Atomic Design gives too much space for interpreting its rules by team members, from UI Designers to Frontend Developers. Correct classification of atoms, molecules and organisms turned out to be problematic. It took much more time to assign certain interface elements to their categories (considering their complexity) than to create them.

A wide and varied distribution of elements belonging to the same family turned out to be the biggest disadvantage of the methodology. The main criteria of assigning elements (atoms, molecules, organisms) to groups is their complexity rather than logical classification. New designers who join a project that is based on Atomic Design methodology face numerous problems; adaptation time and understanding the whole project take a lot of time.

As the next step after using Atomic Design's libraries in our everyday work and noticing its numerous shortcomings, we decided to create our own structure of organizing interface elements. We decided to stick to the main principles of Atomic Design, but we also wanted to make it simpler and organize it better. The aim of our methodology is to create a logical structure and classification, thanks to which it will be easier and faster to access all elements. Tetrisly is not only a tool to organize things but also a library of UX elements that will make creating mockups easier than ever.

Thanks to Tetrisly, you can focus on creating mockups of your new products without worrying about consistency of elements. When you edit typography, colors or a certain interface element, you do it globally and there's no need to check if the changes are visible in the project. We take care of consistency in your mockups and you can focus on what you do best - delivering the best products.

Check out more on:

keyboard shortcuts: L or F like