But I’ve noticed a growing bias towards design systems focusing on the components first. This suggests they’re designed components-first.
They’re not. Nor should they be.
One doesn’t create a design system starting with a loose collection of parts before creating the whole. It is in fact the opposite. Bear with me.
Good design systems start with a vision. A creative direction before they become a thing. They need to have the relationships between elements worked out. The hierarchies, grids and layouts need to flex and scale. Proximities, similarities and placement need examining. Gestalt theory has to get applied. None of these things are possible if you start with a loose collection of bits.
On the subject of Gestalt theory, if we see an object in its entirety before we see the individual parts, then the object as a whole needs to precede the component parts. The design system must be predicated on an initial, overarching direction, in this case the whole.
The page is dead. Long live the page.
This brings us to (gasp) page-based design.
Our collective movement towards modular, component-based design systems is the right one. In today’s multi-device web, focusing on the singular page is limiting. But that does not suggest a design workflow that incorporates page design is dead. Far from it, the lowly page is crucial in ensuring a strong, solid design system.
Perhaps its because I work agency-side, but given the choice between:
- trying to walk a client through a design system full of disparate interface elements, or,
- showing them a page that articulates what the solution might look like.
I’d prefer the latter. Why? Because pages offer faster agreement. They provide a shared understanding, and a vision of the future thing. Pages can be tested with real users, and they can be discussed with developers. The artefacts page design creates might be wasteful, but they are useful.
A workflow
It’s worth clarifying a few things here. I don’t focus on designing pages. I use a variety of methods and ways or working to create a direction first. I use element collages to hone in on the design direction and tone. I use a pen and paper to examine ideas of layout, hierarchies and relationships. But I always design a page or two. It’s these pages that set the direction. I work with my client to iterate through the design to ensure it addresses user needs first, business needs second.
All aspects of creative direction are borne out of this workflow. With the key pages designed, we decouple the elements, break them apart and create a design system. When recombined to create new pages, the creative direction remains intact. The system now contains the right balance, composition and hierarchies to meet the business goals and user needs.
Without creative direction, a design system becomes a group of disconnected elements existing alongside one another. Forgive the analogy, but an orchestra without a conductor is a group of disparate instruments in the same room. It’s the conductor who harmonises, balances and helps make the symphony. Make your own connections between creative direction and orchestral conductors as you see fit.
Design for the user first and the business second. Design as a whole, from 30,000 feet up, then create your swish new design system. Only once it’s designed in pages can you break apart and decouple it from the main design direction. With the direction set, the user goals met and the business happy, then your design system should stand the test of time.
Update: This is now published over at UX Design CC
This post was originally published over at Clear(left) Thinking on Medium