Content
@
0 reply
0 recast
0 reaction
Nicolaus
@nicolaus
We made significant improvements to the foundations of our designs this month, introducing a design language upon which we will further improve and systems our existing screens. First massive steps toward converting our designs from a series of disconnected UI patterns into a proper MVP design system.
4 replies
1 recast
8 reactions
Nicolaus
@nicolaus
These changes connect our existing designs to Decent’s brand and begin defining our own unique design language. We started by returning to the vision and auditing what we had in place to figure out where to make the right changes.
1 reply
0 recast
3 reactions
Nicolaus
@nicolaus
Starting with the backbone, we created new grids and column guides to direct spacing and composition of elements. Too many new screens and components had been built without any unifying structure to ensure quality consistency across the board. We were basically copy/pasting and doing our best guesswork to keep things even.
1 reply
0 recast
1 reaction
Nicolaus
@nicolaus
Spacing guidelines were created to further assist with padding needs and vertical rhythm. We build on a 4px baseline grid to allow for precision and flexibility across devices and screens.
1 reply
0 recast
1 reaction
Nicolaus
@nicolaus
It wasn’t always clear which type style to use and we had several styles with the same parameters so unintuitive selection happened often and slowed down the iterative process (ie obsessing over the type style instead of the overall solution) We purged over 50% of our existing type styles to create a streamlined stack with clear hierarchy. Semantic names aid with style selection within a design. We also dabbled in a first set of design tokens. Much more for us to convene with our dev team on to fully connect design to code here.
1 reply
0 recast
1 reaction
Nicolaus
@nicolaus
Finally, many of our dense design screens suffered from lack of clear visual hierarchy. Everything started to look the same size. We applied our new type stack across all designs to improve hierarchy and reduce cognitive fatigue for our users scanning over a screen.
1 reply
0 recast
1 reaction
