Design Philosophy


Published on

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.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Design Philosophy

  1. 1. Chuck Mallott 7 JULY 2014 A DESIGN PHILOSOPHY And other humble opinions
  2. 2. Color KEY CONCEPTS 2 1 Whitespace2 Simplicity3 Pixel Precision4 Subtlety6 Form v. Function7 MVP8 Always ask “What if?”9 Typography5 Process10
  3. 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. 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. 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. 6 pixel precision ─ Craftsmanship matters. ─ No fuzzy pixels. ─ No random values. ─ Sensible corner radii.
  7. 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. 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. 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. 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. 11 always ask “what if?” ─ Realize that interfaces are fluid. ─ Build for flexibility. ─ Plan for scalability. ─ “What if this changes?”
  12. 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. 13. LET’S DISCUSS