Design Principles are the high level agreements we have as a team about design. They are the foundation of the culture of the UX team. However, design principles are not rules. They are guidelines. There are always exceptions - sometimes contextual, sometimes performance related. I also recognize that different countries and cultures have different aesthetics. I spent several years working with teams in China and Japan and have direct experience adapting solutions to those markets.
Design principles need to be specific enough to apply directly to a company and it's products, but not so general that they are not actionable. I typically encourage teams to define principles (in blue below) and them provide some guidelines and examples of how those can guide designs. These are works-in-progress. We have tried high fidelity images vs. schematics for examples. Both have pros & cons.
Here are a few examples of design principles for the PicsArt team which operates in the creative, photo sharing and community space. There is some overlap between these points which is intentional. Repetition contributes to learning outcomes.
Design principles need to be specific enough to apply directly to a company and it's products, but not so general that they are not actionable. I typically encourage teams to define principles (in blue below) and them provide some guidelines and examples of how those can guide designs. These are works-in-progress. We have tried high fidelity images vs. schematics for examples. Both have pros & cons.
Here are a few examples of design principles for the PicsArt team which operates in the creative, photo sharing and community space. There is some overlap between these points which is intentional. Repetition contributes to learning outcomes.
Design for beauty, power, and simplicity
Keep designs as simple as possible without compromising power
Remove dividing lines and use whitespace to separate elements
Use icons and visuals instead of text whenever possible
Create space around elements and make them larger whenever possible
Use floating controls and semi-transparent backgrounds when possible
Avoid putting controls on images whenever possible
Design for beauty, power, and simplicity
Keep designs as simple as possible without compromising power
Remove dividing lines and use whitespace to separate elements
Use icons and visuals instead of text whenever possible
Create space around elements and make them larger whenever possible
Use floating controls and semi-transparent backgrounds when possible
Avoid putting controls on images whenever possible
Highlight the creative work
Promote the visual work first and the creator/comments second
Make images as large as possible within the constraints of the view
Avoid putting controls or other objects on top of photos and images
Fade in controls that need to touch or overlap images
Note that this example has a different layout from the one above but both follow the design principles
Don't make me think
Make interactions and designs as simple as possible, but not too simple
Avoid multiple rows of tabs and icons
Reduce icons and controls whenever possible
Provide a label if an icon is not easily understandable
Make sure users know where they are & how to get back home
Make sure users know when an error happens and how to correct it
Reduce the number of levels to reduce cognitive effort
Be consistent
Use icons for one purpose/meaning only
Be consistent so users can easily learn any part of the app
Don’t use similar words that mean different things (Sign in & Sign out)
Use consistent messaging and patterns for feedback, dialogs, and buttons
Design for play
Encourage users to interact with the surface of images (tap, swipe)
Guide users to interactions that involve brushing or tactile actions
Give immediate and visually rewarding feedback
Provide users with endless exploration (no dead-ends when swiping)
Recognize and reward users for engagement and achievement
Give users clear choices & feedback
Every view should have an easily identifiable and visually salient primary action
Make it easy to undo and reset changes everywhere
Provide feedback on actions so users know they succeeded
Make sure users know what the error is and how to correct it
Show where things can be found after acting on them
Iteratively reveal functionality
Point users to the primary controls that have the largest impact
Guide users at appropriate moments to access the full set of advanced functions
Create transitions and levels (Android) that highlight the important controls
Provide tooltips for the important or hard-to-discover functionality