Designing hacks

382 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
382
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Designing hacks

  1. 1. Designing Hacks Jeremy Cimafonte “Turns out good design is just a collection of hacks” Thursday, September 5, 13
  2. 2. who i am. Thursday, September 5, 13
  3. 3. Thursday, September 5, 13
  4. 4. Thursday, September 5, 13
  5. 5. Thursday, September 5, 13
  6. 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. 7. Developers want good design. "Attractive things work better." Don Norman Thursday, September 5, 13
  8. 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. 9. minimal is what works Thursday, September 5, 13
  10. 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. 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. 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. 13. cohesive idea. not groups of a few ideas Thursday, September 5, 13
  14. 14. • who do you think will use your app? • draw out an interface tailored for them. x Thursday, September 5, 13
  15. 15. Sketch Your Ideas. Thursday, September 5, 13
  16. 16. Alignment...Spacing.. Visual Hierarchy Thursday, September 5, 13
  17. 17. “Design is as much an act of spacing as an act of marking.” Thinking with Type Ellen Lupton Thursday, September 5, 13
  18. 18. Use Margins so everything lines up equally Thursday, September 5, 13
  19. 19. = Thursday, September 5, 13
  20. 20. Thursday, September 5, 13
  21. 21. Thursday, September 5, 13
  22. 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. 23. Visual Hierarchy Size Color density density density Value whitespace Thursday, September 5, 13
  24. 24. Debug Your Design 1. Desaturation Test 2. Blur Test 3. Upside Down Test Thursday, September 5, 13
  25. 25. Typography Thursday, September 5, 13
  26. 26. Text-background color contrast Lazy handling of titles and subtitles Common Mistakes Thursday, September 5, 13
  27. 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. 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. 29. content is the center of attention, content deserves the most love from the designer Common Mistakes Thursday, September 5, 13
  30. 30. content is the center of attention, content deserves the most love from the designer Common Mistakes Thursday, September 5, 13
  31. 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. 32. Use Icons http://fortawesome.github.io/ Thursday, September 5, 13
  33. 33. Use Icons Place them next to text to indicate action. Thursday, September 5, 13
  34. 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. 35. A note on Responsive Design Thursday, September 5, 13
  36. 36. courtesy open signals iOS Thursday, September 5, 13
  37. 37. courtesy open signals Android Thursday, September 5, 13
  38. 38. courtesy open signals Comparison Thursday, September 5, 13
  39. 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. 40. Think Before You Shrink Thursday, September 5, 13
  41. 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. 42. Inline Elements do thisInline Elements do this Block Elements do Table Cell’s can do this (verticalalign!) Thursday, September 5, 13
  43. 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. 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. 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. 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

×