Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Creating Design Language  ›  Lesson

Vision and Design Principles

Design Principles 12 minA design system's vision states why it exists and whom it serves, and its three to five design principles are specific statements that take a side so they can settle design arguments.

Vision and Design Principles

Two Tiffinbox designers are arguing. One wants a carousel of offers on the checkout screen, because offers raise order value. The other wants checkout to hold nothing but the order, because every extra thing slows people down. Both have good reasons. Without shared principles, the argument is settled by whoever is most senior or most stubborn.

The rule

A vision says why the system exists; principles settle the arguments.

A vision is one or two sentences about what the design system is for and whom it serves. It guides the system's own roadmap. Thali's vision:

"Thali helps every Tiffinbox team ship warm, accessible and consistent experiences, fast enough that nobody is tempted to build their own."

Design principles are three to five short statements that guide trade-offs across the whole product. A good principle has three qualities:

  • Specific. It is about this product and these users.
  • Choosing. It has a reasonable opposite that another team could sensibly pick. "Make it user-friendly" chooses nothing, because nobody argues for unfriendly.
  • Illustrated. It comes with a real example of the principle deciding something.

Thali's principles:

  1. Hungry people are in a hurry. Fewer steps beat more options.
  2. Clear before clever. If a delightful idea costs understanding, understanding wins.
  3. Everyone can order. Accessibility is a requirement, never a nice-to-have.
  4. Warm, never loud. Friendly colour and words, without shouting for attention.

Apply the first principle to the argument above, and the carousel leaves checkout. Offers can live on the menu screens instead, where people are browsing rather than finishing.

The shortcut

Run the "could anyone disagree?" test on every draft principle. If no reasonable team would choose the opposite, it is a platitude, not a principle. Rewrite it until it takes a side.

Testing draft principlesStep 1 of 4
  1. "Be simple"

    Could anyone disagree? Not really; nobody aims for "complicated". A platitude.

Drills

Answer fast — trust the rule.

quick drill

What is the job of a design system's vision?

quick drill

Which draft passes the "could anyone disagree?" test?

quick drill

About how many design principles should a system have?

quick drill

Using "hungry people are in a hurry", where should the offers carousel go?

Remember

  • A vision says why the system exists; three to five principles settle the arguments.
  • Shortcut: "could anyone disagree?" If not, it is a platitude. Rewrite it until it takes a side.
  • Trap: principles so safe that they never decide anything.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainLet a principle decide

A designer wants to add an animated mascot to the rider app's delivery confirmation screen. Using Thali's principles, explain whether it should be added, and show why a principle like "make it delightful" would not have helped.