A quick deck I put together to communicate to my team some things that are important to me - and a lens through which I will view their work.

1. Chuck Mallott
7 JULY 2014
A DESIGN
PHILOSOPHY
And other humble opinions

2. Color
KEY CONCEPTS
2
1
Whitespace2
Simplicity3
Pixel Precision4
Subtlety6
Form v. Function7
MVP8
Always ask “What if?”9
Typography5 Process10

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.

6. 6
pixel precision
─ Craftsmanship matters.
─ No fuzzy pixels.
─ No random values.
─ Sensible corner radii.

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

13. LET’S
DISCUSS