Grids
Overview
What is Grid?
A grid system is used in UX to provide structure for organizing content, create visual consistency and balance, and enable responsive design across various devices and screen sizes. By establishing a framework for alignment, spacing, and hierarchy, grids enhance readability and aesthetics, simplify the design process, and facilitate collaboration between designers and developers
The 12-column grid
Most university websites use a 12-column grid, which is good for UX and web design because its flexibility, consistency, and responsiveness make it easy to create layouts that adapt to various screen sizes.
Benefits of Using a Grid System
Consistency & Cohesion
Grids ensure that elements like text, images, and buttons are consistently spaced and aligned, leading to a unified and professional appearance across the entire user experience.
Visual Appeal & Balance
The structured layout provided by a grid creates a more aesthetically pleasing and harmonious design, guiding the user’s eye and creating visual equilibrium.
Responsiveness & Scalability
A grid system allows designs to adapt and scale effectively to different screen sizes and resolutions, ensuring a consistent and usable experience on desktops, tablets, and mobile devices.
Improved Readability
Proper alignment and spacing, guided by the grid, make content easier to read and digest, helping users navigate and understand information logically.
Efficiency in Design & Development
Grids serve as a framework, streamlining the design process by providing a clear structure and making it easier for developers to implement the designs accurately
Clear Communication
By providing a shared structural understanding, grids improve collaboration and communication between designers and developers, reducing misinterpretations and ensuring designs are buildable.
Organization of Content
Grids help to organize complex layouts and varying content heights in a clear, logical, and organized manner, preventing visual clutter.
More on the 12-column grid
The 12-column grid is good for UX and web design because its flexibility, consistency, and responsiveness make it easy to create layouts that adapt to various screen sizes, ensuring a positive user experience across devices. The number 12 is highly divisible, allowing for simple divisions into two, three, four, six, or even twelve columns, which is ideal for complex and responsive layouts.
High Flexibility
- 12 is divisible by 2, 3, 4, and 6, which allows for a wide variety of layout combinations:
- 2 columns (6 each)
- 3 columns (4 each)
- 4 columns (3 each)
- 6 columns (2 each)
- Even asymmetric layouts like 3–9 or 5–7
Consistency and Alignment
- It enforces consistent spacing, alignment, and rhythm throughout your UI — essential for visual harmony and readability.
Responsive Design Friendly
- 12 columns adapt well to responsive breakpoints. You can collapse or rearrange columns easily for different screen sizes (e.g., 12 columns for desktop, 6 for tablet, 1 for mobile).
Widely Supported
- Frameworks like Bootstrap, Foundation, and many design systems default to 12 columns, making implementation easier.
Scalability
- Great for both simple and complex layouts, whether you’re building a landing page, dashboard, or ecommerce site
The 3px grid unit
On the University website
The primary university website grid system uses a 3px grid unit. IN general, the 3px grid unit is not recommended for web design; instead, designers generally use an 8px or 4px base unit for consistency and ease of use, as these values are easily divisible, allowing for balanced spacing and alignment of elements. A 3px unit creates too many variables, making it difficult to maintain consistency and ensure elements are properly aligned across different screen sizes and devices.
Why 3px isn’t ideal
- Too many variables:
Using a 3px increment leads to a large number of possible measurements, making it challenging to create a consistent design system that a team can easily follow. -
Alignment issues:
Elements may not align as cleanly on different screen sizes and devices, which is crucial for a responsive design.
Why 8px or 4px is better
- Simplicity:
An 8px or 4px grid is easier for designers to use and for developers to implement. - Divisibility:
These numbers are easily divisible by other smaller units (e.g., 8/2=4, 4/2=2), which provides flexibility for various design elements like icons, typography, and spacing. - Consistency:
Using a common grid unit like 8px helps ensure that all elements are scaled and spaced consistently, leading to a more polished and unified design. - Industry Standard:
4px and 8px are popular base units in modern UI and web design because they offer a good balance between flexibility and consistency.