1

Every design is a system

 3 years ago
source link: https://uxdesign.cc/every-design-is-a-system-28bb9bf028b7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Every design is a system

The mark of a great designer is their awareness of system thinking.

Image of design system components & documentation
Image of design system components & documentation
Image by Benek Lisefski

When I encounter inexperienced designers, there’s one thing that always sticks out about the way they think. Or more specifically, the way they don’t think.

They don’t think of every design project as a design system. They don’t appreciate the interconnectedness of their design decisions. They solve design problems in isolation, not as a whole.

In short, noob designers lack system thinking, and it holds them back from thriving in the big and meaningful projects they dream of. This worries me because skills and tools can be taught, but new modes of thinking are difficult to adopt. There’s a lack of system thinking in our modern design education.

What is system thinking?

According to Wikipedia:

Systems thinking is the ability or skill to perform problem-solving in complex systems. In application, it has been defined as both a skill and an awareness. A system is an entity with interrelated and interdependent parts; it is defined by its boundaries and is more than the sum of its parts. Changing one part of the system affects other parts and the whole system, with predictable patterns of behaviour.

System thinking can be about the universe, our planet, a local community, an organisation, or the ecosystem of a household — anything that has groups of interrelated parts that interact to form a greater whole.

Systemsthinker.com describes the awareness and process of system thinking like this — Systems thinking replaces Design Thinking’s reductionism (the belief that everything can be reduced to individual parts) with:

  1. Expansionism (the belief that a system is always a sub-system of some larger system)
  2. Analysis (gaining knowledge of the system by understanding its parts)
  3. Synthesis (explaining its role in the larger system of which it is a part)

In UX/UI design, system thinking doesn’t always equate to creating a design system, although pattern libraries and design systems are frequent artefacts of large-scale system thinking applied to a digital design process.

What system thinking really means in design is this: every decision you make affects other past and future decisions. Every pixel you draw is bound by rules governed by your previous choices. When you make a change — no matter how big or small — it may reverberate through your entire design and require other updates to keep the coherence of the system intact.

Tyler La sums it up like this:

It recognizes that there’s a role of structure and order in the conditions that we face. It observes closely the relationships of events and data in a system, trying to identify common patterns, and anticipating the potential impact of each trade-off.

When you see a design that looks messy and inconsistent, it’s the result of a lack of system thinking. When your design breaks when it’s stretched beyond the happy path, your incomplete system thinking is to blame.

Everything you design, even if it’s only a single page, is an ecosystem of choices that must live together in harmony. If your system is inconsistent or incomplete, it fails to support its creations. Forgetting system thinking always leads to unintended consequences.

Why designers underestimate system thinking

Complexity is hard. You’re bombarded by the mantras of simplicity and minimalism. When a new layer of interaction is added to a situation, problem-solving in that space becomes exponentially more difficult. Sometimes that’s enough to make you want to run away — or leave that responsibility to someone else. But striving for simplicity is not gained by ignoring complex problems.

System thinking is an awareness that requires you to hold a lot of details and connections in your head at one time. It requires immense focus and broad vision. It’s draining. No wonder many designers try to avoid it.

You avoid it when you think you’re working on something too simple to require a design system. What if I’m designing a basic blog, portfolio, brochure website, or single landing page? Does that really need a design system? Isn’t it only product designers making enterprise apps that need to worry about design systems?

You may also abandon system thinking because it feels incompatible with other theories of design thinking. But that’s a fallacy. They both support each other’s weaknesses, and the best design practice is one that finds the balance between system thinking and design thinking.

Other times you avoid system thinking when your work is so siloed that you can’t even see the rest of the system your creation will live in. This is always a disaster because context is king.

Systems can be far simpler than you think

Consider this: every time you save a colour swatch or text style, you’re defining a system. When you reuse a consistent margin, you’re following the guidelines of your system. All of those micro-decisions you make — sometimes subconsciously — add up to create a system, no matter how simple or small it is.

When you look at it in this way it’s clear that every design project is a system. There is no avoiding system thinking. You’re doing it all the time whether you realise it or not. The question is, are you doing it well?

What good system thinking looks like

Expert designers approach every project this way — no matter how large or small. A successful design process includes a constant awareness of system thinking, which includes:

  • Working atomically and making things reusable early and often — this automates system-wide changes and helps you avoid rework and unintended consequences.
  • Defining the basics — such as type, colour, spacing— before you get too stuck into other details. Modifying these fundamentals have the greatest impact on your system, so it’s best to nail them down as early as possible. Don’t allow them to stay in flux too long or your system will spiral into a mess.
  • Respecting the butterfly effect. Is a decision in isolation, or will its impact reverberate across other areas of your system? Never make a design decision without first understanding the scope of its consequences. Something that feels like a small change in one place can amplify into massive revisions on the other end of your system.
  • Oscillating between micro and macro vision. This is how you keep track of the details and the big picture at the same time. Never lose sight of the wholeness and coherence of your system while you’re considering even the smallest details.
  • Consistency is law. You don’t get the privilege of breaking it until you’ve learned to follow it to a T. Strive for ultimate consistency in your system until…
  • Empowering yourself (or others) for exploration. A system that’s too prescriptive will stifle creativity. Systems need to evolve organically over time. Defining a system means finding the balance between consistency and flexibility. You’ll feel it when you're too limited by your system. When you hit that wall, allow it to adapt.
  • Rationalising your decisions against the system. When you choose a specific text style or form control, do you understand why? You will frequently have to justify and “sell” your design choices to clients, superiors, or collaborators. If you can’t explain why your choice is the right one, it’s probably wrong!
  • Documenting your system. This can be a laborious task, but if anyone other than yourself might collaborate with your designs (including front/back-end dev), you need to document the decisions you make so they can understand the system you’ve created. If you work alone, that documentation still happens, but it may be all in your head — never externalised.

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK