Design Principles Behind Great Products

Lately, I needed to come up with some top level principles for the product I’m currently working on. I seek for some simple yet powerful concepts that will guide our team design decisions and break stalemates in discussions. For the first step, I decided to look around to see what others come up with. Through a miracle of time, I bring together this compilation, that should be useful for those who face the same challenge.

Jun 18, 2022 - 01:15

May 25, 2023 - 17:06

0 306

Lately, I needed to come up with some top level principles for the product I’m currently working on. I seek for some simple yet powerful concepts that will guide our team design decisions and break stalemates in discussions. For the first step, I decided to look around to see what others come up with. Through a miracle of time, I bring together this compilation, that should be useful for those who face the same challenge.

But first, I found that there are some misleading concepts what are design principles itself, so let me take a quick dive into the topic.

The range of principles

If you try to google “Design Principles” you most likely run into some basic rules of graphic design: proximity, balance, contrast, space, etc. Things that good designers usually familiar with, or, most likely, know inside out.

The next huge part is principles of a rational design process. It’s a set of concepts that makes you a true professional who’s able to provide an excellent design with great efficiency. Applying these principles to the whole team sets a bar of standards that new employees should match or reach in the short term. Let’s take a look at the GOV.UK Design Principles.

The list seems reasonable, but what I think is that such things are an industrial standard by now. Everybody design with data, and everybody tries to understands context. I believe that if you choose design principles for your team, you should pick some that are groundbreaking and challenge your team to go further.

Some teams put their principles online, and I regularly bump into some statements which sound like “be human” or “be communicative.” I hold a firm belief that such shit isn’t worth to be hanging on a wall unless your team is full of insensitive silent jerks and you want to change that fact. Why did you hire them in the first place?

So, what I was looking for, are product design principles. And the Gov.UK provides at least one:

This is for everyone
Accessible design is good design. Everything we build should be as inclusive, legible and readable as possible. If we have to sacrifice elegance — so be it. We’re building for needs, not audiences. We’re designing for the whole country, not just the ones who are used to using the web. The people who most need our services are often the people who find them hardest to use. Let’s think about those people from the start.

Design Principles of your product should tell you, your team and stakeholders which directions you should be going in the tough choices. They should focus on what distinct your product from others, how it feels and what is important for the business and your customers.

You are probably aware of the Apple’s Human Interface Guidelines or Google’s material design guidelines. Design principles behind these systems try to unify different products under the platform and bring the shared feeling to them.

If your product exists on various platforms, you should consider having a design system and some principles behind it, as well as the product design principles. You want to distance your product from others and unify the experience through different touchpoints, operating systems, and screens.

There goes the same problem: some teams put obvious design principles for their product: clarity, simplicity, usability — but you can’t create a good product without keeping such things in mind, and nowadays professionals stick with such principles by default.

Wrapping up

Principles of good design
a scope of rules that define a great design.
Principles for the design process
explains the way of work to create great products.
Design principles for the products
how a product should feel, what emotions should it brings, what distinct it from the others.
Design principle for the systems
unify your product experience in different circumstances.

Do you need design principles for your product?

Having strong principles doesn’t necessarily make your product strong at the end. Apparently, the great product requires great execution at all stages of creation, and design principles are just a small bit that guides your decisions and brings valid arguments in the disputes. They share the common vision and save time.

What are the good principles?

Simple
Have a real world examples
Guide design decisions
Reflect your brand

Collection

I gathered all principles that feel right to me. I don’t include basic design rules or process principles, but I added the Design Systems principles since they are overlapping with product design principles.

Cheers!

Here we go:

Airbnb

Unified
Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.

Universal
Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.

Iconic
We’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.

Conversational
Our use of motion breathes life into our products, and allows us to communicate with users in easily understood ways.

Design as the “mutual friend”
Helping minimize uncertainties and setting expectations online, in the product, is an enabler for a meaningful experience offline, in the real world. We build products to let users get to know each other; we also learn what you’re looking for, and with that knowledge, we open the door to new experiences. We set the stage, help make the introduction, then get out of the way. And like a good friend, we’re there for you when you need us.

Design for first impressions
Although Airbnb requires some information from our users to book, we don’t require disclosure. That is, we ask guests to tell us who they are, but it’s up to them to tell us about themselves.

Trust takes effort
As with most things in life, you get out of Airbnb what you put into it. Trust on Airbnb is shared; it goes both ways. We’ve found the more effort a guest can signal to a host, the more trust a host is willing to give that guest.

Facebook

Universal
Our mission is to make the entire world more open, and this means reaching every corner, every person. So our design needs to work for everyone, every culture, every language, every device, every stage of life. This is why we build products that work for 90% of users and cut away features that only work for just a minority, even if we step back in the short term.

Human
Users return to our site to be surrounded by friends and other people near to them. This is a central promise of our product, that the people you care about are all in one place. This is why our voice and visual style stay in the background, behind people’s voices, people’s faces, and people’s expression.

Clean
Our visual style is clean and understated, to create a blank canvas on which our users live. A minimal, well-lit space encourages participation and honest transparent communication. Clean is the not the easiest approach to visual style. To the contrary, margins and type scale, washes and color become more important as we reduce the number of styles we rely on.

Consistent
We invest our time wisely, by embracing patterns, recognizing that our usability is greatly improved when similar parts are expressed in similar ways. Our interactions speak to users with a single voice, building trust. Reduce, reuse, don’t redesign.

Useful
Our product is more utility than entertainment, meant for repeated daily use, providing value efficiently. This is why our core interactions, the ones users engage daily, are streamlined, purged of unnecessary clicks and wasted space.

Fast
We value our users time more than our own. We recognize faster experiences are more efficient and feel more effortless. As such, site performance is something our users should never notice. Our site should move as fast as we do.

Transparent
Users trust us with their identity, their photos, their thoughts and conversation. We reciprocate with the utmost honesty and transparency. We are clear and up front about what’s happening and why.

Apple

Aesthetic Integrity
Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.

Consistency
A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.

Direct Manipulation
The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.

Feedback
Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.

Metaphors
People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences — whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

User Control
Throughout iOS, people — not apps — are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.

Google Material Design

Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the∫study of paper and ink, yet technologically advanced and open to imagination and magic.

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

Bold, graphic, intentional
The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.
An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

Motion provides meaning
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efﬁcient yet coherent.

Microsoft

Keep it simple
We start with simplicity as the ultimate unifier. When design is intuitive, we just know. We can feel it. The result is an experience that’s honest and timeless.

Make it personal
Next, we challenge ourselves to create emotional connection with an individual person. We design for the ways people really live and think and act. The result is an experience that feels like it was created for one person.

Think universal
We design to embrace the things that make us human. It’s more far more than an attitude for making stuff — and into creating a world that makes lives better. The result is technology that’s inclusive.

Create delight
Our final principle is about energy within a structure. It’s how you know the experience was made by a real person. The result is an experience that surprises and has a sense of place.

Medium

Direction over Choice
This principle was often referred to while we were designing the Medium editor. We purposely traded layout, type, and color choices for guidance and direction. Direction was more appropriate for the product because we wanted people to focus on writing, and not get distracted by choice.

Appropriate over Consistent
This might seem controversial, but when applied across devices, its purpose is clear. We were willing to break consistency if it was more appropriate for the OS, device, or context.

Evolving over Finalized
This is exemplified in the ability to share Medium drafts, write responses, and leave notes. The content on Medium should be antifragile, improving with use and evolving overtime. We did not want to design printed books for the internet.

Firefox Design Values

Takes care of you
Firefox champions you — your security, privacy, and the quality of your online life. It makes sensible decisions for you that respect your time, data, and attention.

user-sovereignty
default to privacy
no surprises
actionable advice

You help make it
Firefox is crafted to have the best possible user-experience, but it’s only a perfect fit once it’s in your hands and can make it your own.

research gives a voice to our non-core community
start people with smart defaults
implicit as well as explicit customization
invite people to be more than users

Plays well with others
Firefox is part of the community of products you choose because they’re great, not because they’re the defaults. In that sёpirit, Firefox never locks you into particular services or providers. Instead, it gives you choice and independence (along with great suggestions) so you can have the best possible experience.

user control and choice
simple to use the services you choose
suggest ways to get the most out of the web

Exuberant
Where other browsers might be plain and minimal, or sleek and impersonal, Firefox is human, fun, whimsical, and joyful. We all love the web and so does Firefox.

feels like there is a person at the other end
fun tools are easier to use
humour and whimsy
have a point of view

Finely crafted
Firefox is made by people who care about the details. A beautiful product is a pleasure to use and feels easy and clear. This only comes with craft and attention to detail.

see also our visual design guidelines
continuity of look and feel across platforms
perceivable quality is vital

Global
Firefox is used and made by people all around the world. It’s not just translated — it’s designed for the whole world, place by place. While certain activities are universal, there’s a real diversity of use and need across the globe, and Firefox cares about these differences.

global means local and local and local

Balances power and simplicity
Firefox is simple and easy to use, clean and straightforward in its design. But simplicity is a means, not the end — the end is understanding and user-agency.

80/20/2: default to surface minimalism and easy access to the rest
user-agency and understanding, not just less

Makes sense of the web
The web is huge and hard to comprehend. Firefox helps make sense of it by focusing on your real human goals and activities and giving you the tools you need to accomplish your ends.

focus on real human tasks and contexts
many real tasks involve a browser and other tools
quick access to your stuff and web
no jargon

High user-performance
Speed is still the most important part of a good browser experience, but on top of benchmarkable technical performance, the browser must feel viscerally responsive.

performance is objective, but responsiveness is subjective
a happy user performs better

Salesforce

Clarity
Eliminate ambiguity. Enable people to see, understand, and act with confidence.

Efficiency
Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.

Consistency
Create familiarity and strengthen intuition by applying the same solution to the same problem.

Beauty
Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

IBM UX

Discover, Try and Buy
Meet users where they are. Show, don’t tell. Create a seamless transition from “try” to “buy.”

Discover
One ideal discovery experience occurs when people feel they found the answer for themselves.
Try
Trying out a product should be as engaging as taking a test drive in your first car.
Buy
Purchasing a software-based product or digital service should be as simple and straightforward as buying a coffee. Steps and details about what goes where should always be obvious. Give users a sense of excitement once their purchase is complete.

Get Started
Invite users in and show them what they can do. Initial experiences create lasting impressions.

People are quick to form opinions when introduced to something new, especially if it is something we expect will improve their lives.
Get users to their work fast and show them personally relevant ways to get value from your product. Charm them with unexpected moments to show them you thought of everything, just for them. Never underestimate the little things; users are instantly gratified when you save them time, attention, hassle or even space on their desk.
First use isn’t finished until personal or business value is delivered.

Every Day Use
Users should get personal value every time they interact with your product.

Whether it’s every day or once a year, users should always feel in control, able to pick up right where they left off. Users should immediately understand the usefulness of your product. The system should convey its conceptual model so that your users know what to expect and can perform necessary actions or derive insights.

Defer to the content to help users understand the path to reaching their goals.
Allow them to personalize the product to better fit their needs.
Provide a forgiving environment where mistakes are easily reversible.
Keep them motivated by ensuring that the right actions and tools are readily present.
When they’re done, give users a sense of accomplishment and help them feel proud of their work.

Manage and Upgrade
Upkeep and receiving the newest improvements should be as elegant and predictable as using the product every day.

Manage
A product that’s easy to manage invites frequent use. A user who doesn’t have to think deeply about managing how well a product works is a happy user. Whether it’s an administrator who’s responsible for an entire organization or an end user getting the job done, designing management tasks to be obvious makes for positive experiences. Remember, with either user group, the expectation is “don’t trouble me with management.”
Upgrade
Minimize user involvement and disruption in the upgrade process.
When introducing significant user experience changes, don’t leave your users guessing at what’s new or what has been removed. Notify them that a change is happening or has happened, what occurred and how it affects them.

Get Support
Support users in the ways they want to get help. Expand their knowledge and encourage them to share it.

The iconic “support” experience exists across all five experiences. Support is proactive, engaging and comes in many forms:

On user-desired forums (for example, web search results and sites such as TechCrunch)
As nurturing during Discover, Try and Buy or Getting Started
As easily accessible during Everyday Use
As command line interface help for Leverage and Extend

When users look for support, help them find what they need easily. Know your users’ habits and equip them with tools that are flexible and ready-at-hand.

Guide them with thoughtful interactions and content so they can learn as they go, understand how to move forward, and acquire the necessary skills to succeed. Where possible, help users avoid mistakes rather than waiting for an error to occur.

When your product or service breaks or becomes unavailable, provide users with factual status that will help them understand how and when they will regain use. Determine the best way to make these notifications meaningful (that is, “seen”) for your users, across all experience contexts.

Support experiences should help people feel knowledgeable. Enlighten users to become experts. Use plain language that is appropriate for your target audience. Give them opportunities to provide feedback and share what they have learned. Users often trust advice from peers, so facilitate community learning when possible.

Bing

Design for explorers
Delight and surprise our users
Earn Trust
Be the brand
Make money
Showcase our best
Organize the page by relevance
Respect the need for speed
Give just enough and offer more
Present a seamless experience

BBC GEL

Universal
Our messages are clear and are communicated through simple, useful and intuitive interfaces. Our services are inherently open and accessible.

Compelling
Our voice ranges from serious and authoritative through to witty and entertaining. We sound authentic and relevant, warm and human. We engage our audiences with compelling storytelling.

Authentic
We value the familiarity and trust placed in us. We acknowledge the BBC’s heritage of iconic design and broadcasting history with subtle references.

Pioneering
We pioneer design innovations that surprise and delight. We introduce the unexpected but always take our audiences with us.

Current
We curate a timeline of Britain; reflecting the present as it happens and adding relevant contextual links with the past.

Distinctive
We stand out by looking to tomorrow instead of simply referencing the design trends of today. We strike a balance between cookie-cutter design and beautiful anarchy.

Joined-up
All our services and platforms are one connected whole which deliver experiences sensitive to their context of use. We enable coherent journeys both within and outside familiar paths. We connect our audiences where there are shared interests and experiences.

Local / Global
We need to speak to everyone but we recognise the individual. Our message is scalable and localisable.

Modern British
Our services are woven into the fabric of everyday life in the UK. They embrace a modern British design aesthetic that extends outside national boundaries. Our character is vibrant and sometimes quirky.

Best
Last but not least we put quality first.

Lucid

It’s intuitive, not learned
You understand how things work without any direct explanation.
It makes the user feel powerful
Nothing makes you feel uncomfortable or like you can’t trust the system. The system provides you with the right components and asks you what to do next.
It makes the content taste better
The framework is totally seamless and hidden. You don’t notice it until you interact with it. You get to decide what you want it to be, instead of us forcing it on you.

Animated

It’s colorful
The personality is bold and stands out.
It’s visually responsive
The experience interactions in a physical way.
It’s unexpected
The experience is playful and fun, but never overwhelming.

Unbreakable

It’s built for exploration
Just like a children’s toy, you want to try it out just to see what will happen. The more you investigate, the faster you learn and the more you get in return.
It’s impossible to mis-tap
Everything is designed to help you navigate easily and do exactly what you had in mind.
It’s reversible
If you accidentally do something that doesn’t produce the results you were looking for, it’s obvious how to correct it.

Lyft Design Principles

Nail the basics
Clear choice and context
Build confidence
Consistency and transparent
Be unique
Own-able and delightful

Foursquare

Individual recommendations and experience
There’s no reason why we should all get the same recommendations when looking for a place to eat, drink or shop. Getting a one-size-fits-all list of places may have been innovative in 2006, but it feels downright antiquated now. Our tastes are all different, so why should we all see the same results?

Continuous data collection and situational usage
Our phones should learn about us — our tastes, our social connections, and our preferences. And, using what they know, they should help us better explore the world around us. If you love vintage clothing, it should tell you that there is a hidden gem nearby. If you’re in a new city, it should tell you that your friend Katy highly recommends this hole-in-the-wall restaurant downtown. If you crave spicy food, it should advise which dishes you should order when you sit down for dinner.

Playful visual language
Involving into city exploration with an entertaining, easy, playful visual experience: bold icons, bright and deep colours, logo as a combination of superhero emblem & map pin.

Asana’s Design Principles

Allow users to focus on their work without interference.
A user’s focus should be in their control, only distract users with changes that are personally relevant.

Increase confidence through clarity.
Within the application, and more broadly within teams, it is unambiguous what is happening and why.

Foster productive and emotionally satisfying interpersonal dynamics.
Users feel like they are part of a team, where they can count on each other to do their part, and feel like they’re moving forward towards a common goal.

Design for fast, effortless, and intentional interactions.
Simple and common tasks should be frictionless and obvious; complex tasks should feel efficient and delightful. But, speed should not lead to inaccuracies.

Empower everyone through progressive discoverability.
Everyone at all levels of experience with Asana should feel like they know how to use the product, regardless of how many features they use.

Be consistent and standard, and innovate when it’s worth it.
Users should feel like Asana is familiar yet modern.