1. Designing Hacks
Jeremy Cimafonte
“Turns out good design is
just a collection of hacks”
Thursday, September 5, 13

2. who i am.
Thursday, September 5, 13

3. Thursday, September 5, 13

4. Thursday, September 5, 13

5. Thursday, September 5, 13

6. how to make your
hack that stand out.
design principles
elements of design
responsive design
debug design / things watch out for
css
Thursday, September 5, 13

7. Developers want
good design.
"Attractive things work better."
Don Norman
Thursday, September 5, 13

8. "its a lot easier to execute a minimal
design than it is for you to get
ambitious.
“you get ambitious you fail"
Idan Gazit
Thursday, September 5, 13

9. minimal is what works
Thursday, September 5, 13

10. your users can only focus on one thing
at a time.
"Do not try to do everything. Do one
thing well.”

Jeff Raskin
Steve Jobs
Thursday, September 5, 13

11. Knowing how people
will use something is
essential.
"Everyday people are not very
good designers."
Don Norman
Designers are not good
designers.............
Thursday, September 5, 13

12. think humane.
your flow. and interface.
should help the user.
one obvious way to do things.
easy to learn, easy to remember.
Thursday, September 5, 13

13. cohesive idea. not groups of a few ideas
Thursday, September 5, 13

14. • who do you think will use your app?
• draw out an interface tailored for them.
x
Thursday, September 5, 13

15. Sketch
Your Ideas.
Thursday, September 5, 13

16. Alignment...Spacing..
Visual Hierarchy
Thursday, September 5, 13

17. “Design is as much an
act of spacing as an
act of marking.”
Thinking with Type
Ellen Lupton
Thursday, September 5, 13

18. Use Margins so
everything lines up
equally
Thursday, September 5, 13

19. =
Thursday, September 5, 13

20. Thursday, September 5, 13

21. Thursday, September 5, 13

22. Visual Hierarchy
• Contrast shows relative importance.
• Repetition attaches meaning to new
elements.
• Alignment creates order.
• A single element that breaks the
established alignment calls attention to
itself and it’s importance. Think of a pull
quote.
• Proximity groups elements within a
hierarchy and creates new sub
hierarchies.
Thursday, September 5, 13

23. Visual Hierarchy
Size
Color
density density density
Value
whitespace
Thursday, September 5, 13

24. Debug Your Design
1. Desaturation Test 2. Blur Test 3. Upside Down Test
Thursday, September 5, 13

25. Typography
Thursday, September 5, 13

26. Text-background color contrast
Lazy handling of titles and subtitles
Common Mistakes
Thursday, September 5, 13

27. Text Size
Have fixed sizes for headers, subheaders, body copy. Go for consistency.
Provide adequate line spacing. Don’t decrease linespacing...
Common Mistakes
Thursday, September 5, 13

28. Text blocks that are not split up into enough small, scannable, digestible parts
Indiscernible links.
Text is not treated as an interface but as decoration
Common Mistakes
Thursday, September 5, 13

29. content is the center of attention, content deserves the most love from the
designer
Common Mistakes
Thursday, September 5, 13

30. content is the center of attention, content deserves the most love from the
designer
Common Mistakes
Thursday, September 5, 13

31. Find Fonts?
• Go to fontsinuse.com
• Look for fonts and font combos you like.
• Try and find similar ones on google fonts so you can
embed easily. (no searching around internet)
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Thursday, September 5, 13

32. Use Icons
http://fortawesome.github.io/
Thursday, September 5, 13

33. Use Icons
Place them next to text to indicate action.
Thursday, September 5, 13

34. Colors
Go to http://colourlovers.com/
Pick a Color Palette that you think fits your app.
create variable for them and reuse throughout.
$blue: #939393
$dark-blue: #121234
$green: #734323
Thursday, September 5, 13

35. A note on Responsive
Design
Thursday, September 5, 13

36. courtesy open signals
iOS
Thursday, September 5, 13

37. courtesy open signals
Android
Thursday, September 5, 13

38. courtesy open signals
Comparison
Thursday, September 5, 13

39. Use a CSS
Framework
• frameworks give equal margins and grids.
for easier alignment
• prebuilt components you can restyle
• so you can use your app on any device.
(if its good, you can use later..)
• Use Foundation or SASS
Thursday, September 5, 13

40. Think Before You Shrink
Thursday, September 5, 13

41. Use this to fix box model.
*{box-sizing: border-box;}
• drop this in your CSS.
• something 200px wide. will
always be 200px wide
• otherwise, with padding/
margin, could be different
size....
Thursday, September 5, 13

42. Inline Elements do thisInline Elements do
this
Block Elements do
Table Cell’s
can do this
(verticalalign!)
Thursday, September 5, 13

43. display property controls what type of box is generated for an element
Values:
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-
group | table-header-group | table-footer-group | table-row | table-column-group
| table-column | table-cell | table-caption | none | inherit
Thursday, September 5, 13

44. float property allows element boxes to be shifted to the right or left on
the current line
Floated boxes are block boxes
Floated boxes are “pulled out” of the normal flow and repositioned
Must have explicit width
May overlap other boxes
clear property specifies which side(s) of an element should NOT be
adjacent to a floating box that is specified earlier in the document
Thursday, September 5, 13

45. position property:
static – box is positioned according to normal flow
relative – box is positioned relative to where it would have been placed in the
normal flow
absolute – box is positioned relative to its containing block; these boxes are
taken out of flow
fixed – box is fixed in relation to the viewport (a browser window or a printed
page)
Thursday, September 5, 13

46. CSS allows authors to generate content that is not part of the
document tree using the following entities:
:before pseudo-element
:after pseudo-element
content property
Thursday, September 5, 13