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.