What are the definitions of baselines, keylines, containers, and other key terms?
TL;DR
- Baselines are invisible lines on which text rests, aiding in rhythm and scannability.
- Keylines are imaginary lines that align elements, helping with navigation and structure.
- Containers hold content and dictate alignment and spacing, contributing to a clear, organized interface.
- Together, these elements reduce cognitive load, streamline design processes, and support scalability by maintaining design integrity as applications evolve.
Detailed answer
Spacing in UX/UI design is regulated by baseline grids, keylines, and containers to ensure consistency, readability, and accessibility across devices. They reduce cognitive load, making it easier for users to process information and complete tasks.
To learn more about other important spacing terms, check out this article about spacing in typography (leading, tracking, kerning, word, and paragraph spacing), UI (padding, gutters, and margin), and in visual design composition (positive and negative space).
Baseline
The baseline is the invisible horizontal line that the text rests on and below which descenders extend. Maintaining a consistent baseline grid creates visual rhythm and makes designs more scannable. However, occasionally breaking the baseline can intentionally draw attention to specific elements.
Keylines
Keylines are imaginary vertical lines that help align elements consistently. They are vital for keeping your content balanced, especially among different types of neighboring elements, such as a profile picture and text accompanying it.
Keylines create structure and visual harmony, governing the placement of icons, input fields, and major layout sections. Consider using an 8dp grid, where dp equals roughly 1px at 160dpi.
There are also icon keylines. While the grid gives a basic structure to start from when designing an icon, keylines provide a more nuanced guide. The keylines are like a starter kit for creating your icons and include a few basic shapes – usually a square, rectangle, and circle. They help you maintain consistent visual proportions in your icon designs without restricting your creativity.
Containers
Containers are modular boxes that hold content, such as cards, panels, or entire screens. They dictate the alignment, spacing, and sizing of their contents. Containers give the interface a clear structure, neatly organize information and bring a sense of order within the interface.
There are many different types of containers, including:
- Boxes: rectangular containers that hold and organize content within a user interface. They help group related items together and provide a visual hierarchy to the layout of an interface.
- Panels: containers that can be used to display content in a separate, visually distinct area of a user interface.
- Modals: containers that appear over the top of the main content of a user interface and display additional information or prompt users to take some action.
- Tabs: containers that allow users to switch between different views or pieces of content within a user interface.
- Accordions: containers that allow users to expand and collapse sections of content. They provide a compact way to display a large amount of content.
Strive for consistent container widths (e.g., 1040px for desktop, 320px for mobile) to maintain a coherent layout across pages.
Grids and containers streamline the design process and allow for effortless iteration. This saves time and reduces potential errors.
This can make it easier for users to understand and navigate the content within a user interface, in turn allowing them to enjoy a better user experience.
To apply spacing methods effectively:
- Define your baseline grid early in the design process.
- Use padding to create breathing room around elements.
- Employ keylines consistently to establish a clear visual hierarchy.
- Rely on containers to enforce alignment and proper spacing.
Most designers stick to an 8-point baseline grid and use multiples of 4px for more precise adjustments in spacing or line height.
Pro tip: By establishing a strong foundation of baseline, keylines, and containers, the design system becomes more scalable. This means that as the application grows and evolves, new features and content can be added more easily without compromising the overall design integrity.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
- Is my baseline grid consistent across the application? Are there any intentional deviations that enhance the design?
- Are my keylines creating a sense of structure and consistency throughout the interface?
- Are my containers effectively grouping related content and adapting to different screen sizes and content needs?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
- Inconsistent use of baseline, keylines, or containers across the application.
- Failing to adapt containers to different screen sizes or content requirements.
- Not testing the design in different screen sizes to validate the effectiveness of the layout choices.
🛠️ Useful tools
These tools will make your job easier and more effective.
- Gridulator – create custom grid systems based on their specific requirements. It provides a visual representation of the grid, making it easier to understand and apply in your designs.
- Modular Scale – create harmonious typography scales based on proportions and ratios. It can be particularly useful when defining a consistent baseline grid for your application.
- Design systems with spacing tokens – major companies often have predefined systems to ensure design consistency.
- Grid overlay extensions – these browser add-ons overlay a customizable grid on any webpage (e.g., Design Grid Overlay for Chrome).
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
- Spacing methods by Material Design
- Baseline grids & design systems by Dmitrijs Ginkuls