0
Chuck Mallott
7 JULY 2014
A DESIGN
PHILOSOPHY
And other humble opinions
Color
KEY CONCEPTS
2
1
Whitespace2
Simplicity3
Pixel Precision4
Subtlety6
Form v. Function7
MVP8
Always ask “What if?”9
Ty...
3
COLOR
─ Never use true black - for background color or text color.
─ Use neutral colors that allow the interface to get ...
4
WHITESPACE
─ Don’t be afraid of it - whitespace is your friend.
─ Interfaces don’t have to look like newspapers, with ev...
5
SIMPLICITY
─ Plays off the previous point about whitespace.
─ Less is more. Reduce/remove unnecessary elements.
─ Organi...
6
pixel precision
─ Craftsmanship matters.
─ No fuzzy pixels.
─ No random values.
─ Sensible corner radii.
7
typography
─ No more than 2 typefaces in any one interface (preferably only 1).
─ Use a font with multiple weights - nor...
8
SUBTLETY
─ This crosses over other subjects like simplicity and color.
─ “Just enough” contrast for elements like:
• Bor...
9
FORM V. function
─ Having one without the other is not an option.
─ Functionality informs design. Design informs the exp...
10
MVP
─ Minimum viable product.
─ Everyone has their own definition of what that means.
─ Avoid trying to deliver a produ...
11
always ask “what if?”
─ Realize that interfaces are fluid.
─ Build for flexibility.
─ Plan for scalability.
─ “What if ...
12
Process
─ Everyone has a process.
─ A repeatable series of actions to achieve consistent results.
─ Sketches and wirefr...
LET’S
DISCUSS
Upcoming SlideShare
Loading in...5
×

Design Philosophy

348

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
348
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×