The Anatomy of user Interfaces

Rania Mdimagh
April 6, 2021
Design System

No matter how creative you can get with your UI there is always a structure and architecture to respect! Designing UI is not random it follows The Anatomy of the user interface that describes the separation and positioning of different parts within the visual interface

Composition of a digital screen 

Every digital screen you see is is a composition of 3 major elements:
* Color
* Typography
* Spaces 

No user interface can exist without those elements and it is very important to start your UI design process by identifying them while Other parts might be complementary like Iconography, Depth, and Motion.

This anatomy applies to all elements of the UI. Every aspect is composed primarily of space, color, and typography and then secondary of an icon, depth, sound, or motion to complement the design. UI designers do identify those 3 major elements through the entire UI and whoever ever coding the page would incorporate the same parts via CSS declarations to declare rules and aspects of Color, Space, and Typography according to designers’ given values. Failing in this step can lead to server inconsistent UI and a below-average UX.

PS: The space element controls the flexibility and responsiveness of the design regardless of the screen dimensions.

Example of UI elements that follow the same rule: Buttons 

The same anatomy applied to all aspects of UI here’s the anatomy of buttons


This is an example of a typical button you might come across in apps, websites, etc

As mentioned before his button follows the typical UI anatomy where its existence elements are
* color: gradient of #3180ce
* Typography: Fuse regular
* space 

And its complementary elements are:
*  Depth
* icon

You Can open your favorite app and try to decompose available buttons into elements to master the anatomy of each type. 

Applying correct anatomy via Arsenic Design System

Scale your UI composition in outstanding consistency via using a design system. The rich tool and interface of Arsenic Design system allow all designers to easily change the values of their UI elements without losing any bit of consistency thanks to its very coherent framework, living guidelines, and unified set of UX design decisions.

Leave a Reply

Your email address will not be published. Required fields are marked *

20 − thirteen =

You might also read