From Adobe MAX: Design Systems, Not Pages

The days of one-off apps are over.

The days of creating one-off apps are long gone, but that old way of thinking still persists. And it’s not sustainable.

Digital design has shifted to accommodate any and all devices, screen sizes, and mediums. The concept of designing for these systems isn’t new, but somehow it feels new.

Maybe it’s because we need to deliver content as fast as possible. We start from scratch, every time, and stick with what we know. There’s no time for a new way of thinking.

So, how do we get unstuck?

3 tips on getting to reusable, repeatable, and agile

At this year’s MAX, Tor Gundersen, ECD of Perficient Digital, explored the idea in his breakout session, “Designing Systems, Not Pages.”

If you think you don’t understand design systems, think again. Tor relied on the most cogent example of a truly effective design system at work, one that has been with us since childhood: Lego. It may even be a perfect example because it has a ton of different designs, models, variations, and even audiences.

Getting unstuck requires aiming for a connected, consistent system like this one as the end goal. Here are 3 tips to help you get there:

1. Start with atomic design

The starting framework for any design system is atomic design, a term created by front-end designer Brad Frost.

Atomic design involves breaking a website layout into its most basic components so that those components can be reused and repeated in the design process. Think mix-and-match style.

It starts with the simplest elements and moves to the most complex: atoms and molecules (super basic page components), to organisms, templates, and, finally, the pages that represent what the user will see. Even at its simplest form, you can duplicate and combine atoms to make molecules — a very simple approach to creating a range of “remixed” page designs.

2. Think scale and consistency

When you see an intuitive consistency, you know it. The way to faster design (the high-quality kind) depends on building out this consistency from scratch with repeatable patterns, colors, typography, and so on.

There’s an entire business case to be made around potential efficiencies like faster delivery and increased ROI, but it really comes down to scalability and consistency. For example, one common client challenge is the need to resolve a disconnected ecosystem. Maybe it’s a newer mobile app that doesn’t quite gel with the website. Or it’s the need to create a more connected customer experience across multiple channels.

A design system approach serves as a basic style guideline that can be extrapolated and expanded upon as you go. It’s a way to ensure consistency from the ground up, across all relevant components and channels.

You can combine the atomic elements with branding (look and feel, such as logos, fonts, colors), then the visual style (typography, spacing, scale, animation, or image styles). And finally, the guidelines and governance (component usage, accessibility, etc.).

3. Start small, and don’t get too comfortable

Design systems can be complex, and they’re changing all the time. Elements and patterns are constantly shifting.

The best plan? Start small, and build as you go. And expect things to change along the way.

First, build a style tile that suggests an overall visual direction instead of using a hard-and-fast prescriptive style guide. Then, make a list off all the required components, but then pull out the ones you don’t need. Keep only what you’ll be using. This becomes your dynamic style guide.

Then, you can start designing screens and components that are based on your styles, and it becomes a circular workflow. The more you work through it, the more the system gets refined. By default, the process gets easier. The delivery is faster. And the results are better.

The best place to start is by doing your own research. You’ll quickly see that there are some name variations for design systems, like Lightning or Global Experience Language (GEL).

Be sure to dig into how Adobe XD can help.

Adobe XD makes it easy to create your own design system by using features like symbols, asset extraction, and developer specs. Look for a follow-up article on this very topic, coming soon.

Start your next project in Adobe XD now.