Space, Size & Style

The building blocks of Design System

Content (Shape), Space, Size and Style are the basic elements of design. No matter how simple the design is, these elements are always present. Let’s look at a circle for example.

As we can see, it has a specific Shape, a specific Size, a specific Style (White color fill) and the Space around it. If we take away any of these elements, the circle cannot exist. Imagine removing these elements and you’ll realize all these elements are connected.

In this article, I want to share my understanding of these basic elements and how to systematize these elements in design systems. So let’s dive in :)

Content (Shape)

Content is anything that we use to convey our message. Simple shapes, icons, graphics, pictures, characters, words, paragraphs, etc.

Content is defined by the product objectives and the message that has to be communicated. I won’t talk much about Content, because it cannot be standardized to reuse. There are some UX guidelines to follow, but the Content mostly depends on product objectives.

Space

Space by its nature is the gap between contents. It’s the gap between characters, words, lines, and paragraphs that you are reading. It’s the gutters on the sides of this page. Once we see it, we realize that more than 80% of the canvas is filled with empty space. Space is as important as the content. It’s like music, where the pause between notes is as important as the notes.

Spacing is required to make the content legible. It also defines relationship & separation of elements. Elements which are closer are perceived as related and elements which are far from each other are perceived as unrelated or separated. Let’s take a simple example to understand this effect.

In the image, we see white circles and we also see groups of those circles. Even though all circles have the same size and same style. We still see the groups. And that’s because of the space between them.

Spacing can be seen in UI design as well. Let’s look at a form for example. The label, input, and description of each field are placed close to each other, as compared to the gap between two fields. We do this to make sure users can see each form field clearly and things do not get mixed up. Spacing can also present information architecture through nested groups. This helps users comprehend complex interfaces.

There are multiple ways to communicate groups & information architecture to the user, but space is the most minimal & effective hint. Especially because it doesn’t require any alteration to the original content nor does it require the addition of any other element. Imagine if there was no Spacebar on the keyboard and we were changing color to differentiate each word 😅

Size

Size is simply size, yeah, it doesn’t need any explanation.
It generally affects the visual hierarchy of the content. Bigger elements are perceived as higher in the hierarchy and smaller elements are perceived as lower in the hierarchy. To understand this effect let’s look at this illustration.

Most of us will see a parent and a child. Even though it’s just a scaled-down copy of the same person. We perceive bigger things as more powerful and dominating as compared to smaller ones. So whenever we see this difference in size, we automatically put them at different levels in the hierarchy and define a relationship.

In UI the effect is commonly used with typography. Title, headings, and paragraphs decrease in size respectively.

Creating a visual hierarchy in UI is really important. It helps users scan through the content at a high level before diving deeper into the content. This improves discoverability and let’s user jump to his desired content without reading through everything. Size is the best element to do this because it brings the content in focus without changing its meaning and relationship with other elements.

Style

Style is the color, borders, shadows, font, and other visual effects. Styling content is a choice, yet we cannot eliminate it completely. At the least, the content will have some color.

Style mainly affects the meaning and importance of the content. Different colors and visual effects have a different meaning. Different color contrast can also change the importance of elements.

A traffic signal would be the simplest example. All the lights have the same shape, same size, and the same spacing, but the colors are different, and that is what defines the meaning of each light.

Similarly, we use these colors in UI to distinguish errors, warnings and success messages.

Another common example of style in UI design is buttons. We use style to convey different states of a button and we also use style to create different types of buttons. For example opaque buttons for primary actions, hollow buttons for secondary actions and red buttons for destructive actions.

Distinguishing content is important to help users understand the meaning, importance, and behavior of different UI elements. Style is the right way to do this without affecting other aspects of our design. And also because our friends Space & Size are busy with other things. 😊

In brief, Space defines the relationship, Size defines the hierarchy, and Style defines the meaning and importance of the Content.

Space, Size & Style in Design System

Design Systems provide reusable components that designers directly use to design products. It takes care of common UI/UX standards and gives designers more time to focus on solving the actual problem than worrying about individual components and tiny details.

But designing components, maintaining consistency and building a harmonious system is also a challenge. And this is where the understanding of basic elements Space, Size and Style can help us. All design is composed of these basic elements. Thus, all the components in our design system are built from these basic elements. We also saw that each element has one or two dominating effects. So let’s see how can we systematize these basic elements and control their effects to improve our design system and design process.

Size & Spacing System

Grid & Scale

To define the size and spacing system, we first need a basis. Otherwise, we have a huge range of values to choose from. So we follow a grid of 4x4 and 40x40, and define a scale of multiples of 4 and 40. We will be using only these values to define size and spacing rules.

There are multiple theories around picking grid size. We won’t worry about that right now. Once we build the system, we’ll have complete control over it and we can easily tweak these numbers as we desire.

Size

To define the system of size we have to group our UI elements based on their usage. The elements that are frequently used together, we put them in one group. For example, Checkbox and Typography should be in the same group because we’ll frequently place them next to each other in our forms. This will make sure we have the right sizes available for the elements that we want to use together.

To illustrate the system we’ll look at two categories Primitives and Components.

• Primitives are the raw UI elements such as Typography, Icon, Radio Button, Checkbox and Toggle Switch.
• Components are composed using primitives and sometimes just by adding a frame around primitives. Like Button, Input, Dropdown, Table Cell, Sidebar Item, Tab and Callout.

Then, for each group, we define a set of sizes and also define a default. For Primitives, the line-height of the body (20px in this example) is a good reference for default size. For Components, let’s pick 40px as it’s a multiple of body line-height (and it also matches the larger grid that we are following).

Space

To define the system of space, we group all the spacing based on the composition of UI elements. For example, a form field which is composed of Primitives and Components will be in a different spacing group than a form which is composed of multiple form fields. This will make sure the users are able to see and understand the architecture of the content clearly.

To illustrate the system, we'll look at three groups: Widgets, Templates, and Layout.

• Widgets are a simple composition of Primitives and Component. Like Form Field, Navigation Bar, etc.
• Templates are a composition of widgets such as Form, List, etc. This category also includes Boxes and Separator Lines used to group & separate Widgets in UI.
• Layout means the page layout, columns, gutters and spacing between page sections, etc. It is the highest level of composition.

Now for each group, we define a default size, and also define a smaller & larger size that we might need for subtle visual corrections at times. For layout, we do not need subtle variations but we need different values for the gap between columns (20px), the gutters (40px) and the gap between sections & pages (80px).

We have intentionally chosen the same size as default for Templates & Layout. So, when we create multiple columns in UI, it looks harmonious and creates a uniform grid.

Another thing to note here is we did not define any rules for micro spacing inside components. For example, the padding inside the input. Because at that scale, matching the size of components and fitting them on the grid is more important than those micro spacings. We can calculate that spacing based on the size of inner content and the component size that we desire.

Here is an example UI created using the size & spacing system:

How does this system help?

• All UI elements and the pages follow the grid perfectly.
• Spacing appears consistent and harmonious.
• A visual hierarchy is formed automatically in UI as we use this system.
• Less choice and less cognitive load while deciding size and spacing.
• Less cognitive load when creating new components (required sizes are known).

Style System

This is really simple and fun to create. Yet it’s really powerful.

To create the style system, we create a table where each column represents a state. We define a common set of states such as Default, Disable, Highlight, Error, Warning, Success, etc. We can easily create this by looking at different states of components in our existing design system. Then, we put different components in each row and add the style of different states in most relevant columns.

To represent a style, we resemble the style with squares (and concentric squares for frame and content). We apply all the styles from our original component to the squares such as background, border, corner radius, shadow, etc.

How does this system help?

• We can see how much cognitive load we are putting on our users.
• We can easily minimize the cognitive load and simplify the UI.
• We have control over the meaning and importance of the colors we are using throughout the product.
• We have a ready reference for styles when creating new components.
• We can spot outliers and improve consistency. For example, in the above system, the hover style of Hollow Button has a shadow, unlike other buttons.

Thank You 🙏

The systems shown here are based on early versions of Space, Size & Style systems we are using at Helpshift. We would love to hear any feedback/thoughts/comments on these systems! Have a nice day!

References

• https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
• https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c
• https://www.smashingmagazine.com/2014/05/design-principles-space-figure-ground-relationship/
• http://vanseodesign.com/web-design/design-space/
• https://en.wikipedia.org/wiki/Figure%E2%80%93ground_(perception)