Background
Our current web-based products do not feature a shared baseline grid and responsive layout system. Every Wikimedia team has to solely rely on their experience and judgement. There have been some early design explorations lead by @Pginer-WMF to address this task and in-product context-specific implementations too but we didn't manage to consolidate, establish and document a shared practice around grids and layouts.
Most recently the Readers Web Team has been leading the #desktop_improvements initiative where they have been exploring also different layout options and potential grid solutions.
In late November 2021, the designers of the Design-System-Team gathered a first collection of requirements that we surveyed during a Design Review meeting. The session resulted in a set of shared priorities and follow up conversations that we conducted in the following weeks with @RHo, @Pginer-WMF, @alexhollender_WMF, and @KieranMcCann for specific grid-related topics.
The following content outlines the baseline grid requirements necessary to extensively support the design team and the features and products that they build.
User stories
Scenario: designing a component
- As a designer, I want to learn about of a shared baseline grid for our products, so that I can use it and apply it to the new components and layouts I design.
- As a designer, I want to understand how to space elements inside a component, so that I can set the padding, the dimensions and alignments following the same rules applied to existing components.
- As a designer, I want to set the aspect ratio of photos, pictures, and illustrations, so that I can craft assets and layouts that are consistent across features and products.
Scenario: designing a layout
- As a designer, I want to have access to a sizing scale, so that I can space, distance and layout components consistently with the rest of the product experience.
- As a designer, I want to align components to a responsive column grid, so that I can define how elements move across different viewports. In order to achieve this I need to know how the grid changes across breakpoints, which are those breakpoints, what are the outer margins of this grid, and which gutters are set between columns.
- As a designer, I want to layout elements within a page accordingly to existing screen regions, so that end-user will find familiar content in familiar location hence lowering the cognitive load when they one a new page.
- As a designer, I want to understand how to expose information through different panels, so that I can reorganize the hierarchy of content when there isn't enough real estate available.
- As a designer, I want to visually align element along the edge of a vertical keyline, so that I can place elements outside of the layout grid.
- As a designer, I want to space content following an established vertical rhythm, so that I can learn how to leverage white space to convey hierarchy and reading order.
Conditions of Satisfaction
- Overview presentation during a Design Practice & Systems Meetup.
- The Codex design system features a new page detailing the baseline grid specs and recommendations.
- Showcase examples of how the grid is applied to common components, eg. lists.
- Guides on how to adopt the baseline grid incrementally in design and product.
- The base unit and the sizing scale are specified as design tokens.
- The baseline grid specifications are available as (hidden) layout grids in every component featured in the "WikimediaUI – Components Library" Figma file.
Testing Instructions
- Test the grid on the atomic level components, eg. buttons.
- Test the grid on common patterns, eg. lists.
- Test the grid to define the layout of the entire site, eg. Wikipedia main page.
- Test the grid on the 3 most common page layouts: panel, no panel, full.
- Test the grid to layout the interior content of pages, eg. article page.
- Test the grid to retro fits current layouts, eg. newcomer homepage.
- Test the grid on small devices and viewports, eg. m.wikipedia.org.