Design for Composition
Why does including an icon alongside text cause our buttons and whole libraries to break? Here’s what we should do instead.
Intended audiences: UI designers & developers of design systems and libraries;
Terms used: User Interface (UI), Design System (DS), white space or negative space, optical spacing, typography, iconography, and bounding boxes.
I have previously addressed topics such as removing extra space in typography and aligning objects respecting optics several times. This article serves as the final piece of the puzzle, focusing on composing with white space in mind.
I will outline a series of challenges that I believe a design system or library should address. I encourage you to experiment with these challenges using your own tools and examine how well your design system or library handles them.
Let’s dive in!
The dichotomy of Text and Icon Components
There exists a fundamental distinction in how we approach various UI elements. In some cases we enforce symmetry, while in other cases, we disregard any disparities. Consider a basic request to design a button with an icon.
To fulfil these challenges I will be using:
- a play icon in circle from the Lucide icon library;
- the Inter font face by Rasmus Andersson.
Both are well designed and a typical choice in User Interface design.
Let’s begin with the basics, shall we?
Challenge #1: Designing Text with an Icon
When designing on the canvas, the primary focus should be on achieving optical balance between text and surrounding objects. However, in my experience (feel free to correct me in the comments), the very composition of these objects is often treated as an afterthought, introducing exceptions and resulting in inconsistencies:
Differences in the bounding boxes of the Icon and Text are apparent caused by the very way how they are commonly defined:
- their heights differ;
- paddings are regular for the Icon but irregular for Text.
Importantly, the introduction of a gap, an unintended artefact, deviates from the original task of designing text with an icon.
GAP: An extra, but more importantly an unintended artefact introduced into the Design system prematurely.
While a design system should establish a set of spaces to use, in this specific case, the objective was to design text with an icon WITHOUT A GAP.
Specifying a gap creates further challenges that were previously out of scope.
However most (if not all) of the design systems are lay out this way. They also ignore the need to optically align rounded objects due to negative space, but that’s a different story.
Challenge #2: Design a Button with a Text call to action
A dear task for every designer for which the whole industry itself exists.
Designing a button entails creating a large enough hit area for user interaction, along with balanced optical spacing around the button text. However, despite intentions, the actual horizontal and vertical paddings of buttons often differ, introducing another exception:
PADDINGS: We describe the intention of the design and the construction differently — while the intention may be to have consistent paddings, the materialized reality is often far from it.
Challenge #3: Designing a Button with an Icon and a Text call to action
The incorporation of an icon requires yet a different approach, with unequal paddings on the left and right and differing vertical spaces between the icon and text. We’ve added yet another exception. This adds another layer of exceptions, complicating the design process. This adds another layer of exceptions, complicating the design process exponentially with each additional element:
A GROWING COMPLEXITY OF COMBINATIONS: Even a simple button is a massive set of exceptions depending on the combination of the icon and text. Who is up for adding another feature? Anyone?
Takeaways
After just three design iterations, we find ourselves at a point where restructuring and refactoring are necessary, potentially leading to breaking changes for consumers of the design system.
Takeaway #1: Prioritize Composition
The ability to stack components in rows and columns without adjusting margins or gaps, and without altering the behavior or appearance of the parent container, should be a priority. Designing with composition in mind simplifies UI creation, akin to playing with wooden blocks.
When you design for composition in mind, the building of the UI becomes a child play with the wooden blocks again.
Takeaway #2: Avoid using Gaps to adjust misalignments
Consider gaps or spaces as elements themselves and refrain from introducing them until the design system necessitates a way to visually separate items into groups.
Takeaway #3: Maintain symmetric paddings of Container components
Consistency in design is crucial. Distribute paddings evenly between parent and child elements.
The point (pun intended) is that 18 points is 75% of 24 points.
- icons are usually designed in 24×24 points boxes but the height and width of the actual icon is 18×18 points—white space is 3 points on each side;
- 24 point font sizes produce the “M” letter of 18 points high—white space is 3 points on the top and the bottom. We need to add extra 3 points in horizontal direction ourselves;
- given you set the line-height to 30 points, that means we need to subtract 3 points with a negative margin before and after the text block.
Unify the construction rules for icons and text for interchangeability.
The WHYs
- Reducing exceptions and complexity results in fewer issues, easier composition, and expanded design possibilities.
- Elements with single responsibilities simplify composition, treating containers as black boxes independent of their contents.
- Unifying inner paddings improves touch areas, enhancing user interaction.
- Improving the optical alignment by incorporating negative space into design.
I hope you ♥︎️ the article and feel free to share your thoughts and questions in the comments bellow.
Thanks for reading!
