3. 3
COLOR
─ Never use true black - for background color or text color.
─ Use neutral colors that allow the interface to get out of the way.
─ Color should be used for emphasis and calls-to-action.
4. 4
WHITESPACE
─ Don’t be afraid of it - whitespace is your friend.
─ Interfaces don’t have to look like newspapers, with every bit of space filled.
─ There is no fold.
5. 5
SIMPLICITY
─ Plays off the previous point about whitespace.
─ Less is more. Reduce/remove unnecessary elements.
─ Organize elements/information.
─ Make processes more efficient - savings in time feels like simplicity.
─ Look for ways to hide complexity.
7. 7
typography
─ No more than 2 typefaces in any one interface (preferably only 1).
─ Use a font with multiple weights - normal, light, semibold, bold, etc.
─ Pay attention to line-height and line-length.
─ Use transparency as a way to control emphasis rather than always relying
on weight (when possible).
─ For interfaces, choose a simple typeface.
─ NEVER use small-caps. Ever. For any reason whatsoever.
8. 8
SUBTLETY
─ This crosses over other subjects like simplicity and color.
─ “Just enough” contrast for elements like:
• Border width
• Border color
• Background shading
• Gradients
• Drop shadows
Edward Tufte’s Principle of Least Effectual Difference:
“Make all visual distinctions as subtle as possible, but still clear and effective.”
9. 9
FORM V. function
─ Having one without the other is not an option.
─ Functionality informs design. Design informs the experience.
─ Design is not a skin.
─ UX design is not an exercise in decorating interface elements.
10. 10
MVP
─ Minimum viable product.
─ Everyone has their own definition of what that means.
─ Avoid trying to deliver a product that is a mile wide, but only an inch deep.
11. 11
always ask “what if?”
─ Realize that interfaces are fluid.
─ Build for flexibility.
─ Plan for scalability.
─ “What if this changes?”
12. 12
Process
─ Everyone has a process.
─ A repeatable series of actions to achieve consistent results.
─ Sketches and wireframes are essential.
─ Deliver browser-ready code, but don’t skip sketching and wireframing.
─ Under promise. Over deliver.
Understand
requirements
Discovery
Information
Architecture
Sketches
Wireframes
Design
Mockups
Code