Connected
Spacing has the power to separate elements but also to bring them together. Creating a proximity effect through spacing is key to separate or connect elements.
Foundations – Spacing
It is essential when composing any design, fundamental to locate and position any component we add to the layout. It helps to create a consistent and predictable structure in the content.
Consistency
Consistent use of spacing adds a semantic value to bigger and smaller units of structure by creating visual similarities or disparities. Enabling users to understand and predict content in a faster and easier way
Structure
For layouts and designs to be coherent the spacing system is ruled by a scale that allows to keep a proportion and visual logic between elements.
Values
Following our 4pt grid baseline, we are taking 4px as a base unit to scale spacing.
Our spacing system is divided into 12 possible spacing options that cover a range of values enough to create a wide variety of patterns when using white space as part of the visual language.
Logical Scale
It is important to understand the correlation between the different values and the pattern behind them.
Our spacing system follows a non linear scale, meaning the difference between the incremental values is not equal. This allows to create a perceivable difference in the progression, incitando/ayudando to create harmonious patterns with coherent structures.
Our scale follows a mathematical system what increments x2 every other value, but on the smaller ones (to allow granularity on a smaller groups of elements).
This implies that even though we have constrained it to 12 values it’d be easy to keep scaling for higher ones if the context would require it.
Vertical Spacing
Stacking
Understood as a way of composing and order elements one on top of the other with a common spacing between them. Is a way of keeping a consistent spacing between similar or equal elements, creating a predictable rhythm and facilitating readability.
Alignment
Vertical alignment can be very useful to replace spacing, specially when the height is variable, sometimes working as an alternative to the existent spacing system values. This will ensure the design to be consistent along the different screens, keeping a coherent structure inside a group of elements.
Using Spacing
Relationships
Space has the power to connect and disconnect elements, creating visual relationships. We can play with the proximity of elements to create hierarchy and improve readability by aligning the structure to the user expectations.
White Space
Spacing is usually allocated between points of high contrast, creating a visual language that goes from «loud»(block of content) to «quiet» (white space). Both are key to create a coherent visual whole.
Rhythm
To create a harmonious visual flow that covers users expectations and allows predictability on content, spacing can be used in a repetitive way while introducing different points of inflexion that allow bigger smaller smaller content stories to coexist.
Hope you find something that you like or something