Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Hacks

Design Hacks

Like anything else, design can be hacked! Although I wasn't born with any particular sense of design, after years of working alongside world-class visual + experience designers, I've learned what I call "the minimum viable 20%" of design.

These slides accompanied my class at General Assembly, a startup incubator / co-working thing.

Design is no mysterious black art that requires loving Helvetica and smoking a lot. Design is something you do, not something you are, and everyone, even straight up command-line nerds like us, can learn it, at least well enough to bang out some decent looking version-ones. Time to get serious.

Df3d720b0387da4124961d1de6622632?s=128

jm3 (John Manoogian III)

September 13, 2012
Tweet

Transcript

  1. DESIGN HACKS with @jm3!

  2. Design Hacks in 90 minutes 10M who am i 20M

    design strategies 50M design exercises 10M Q+A
  3. Who am I, aka, “Why listen to this guy?” ★

    CTO, engineer working next to designers for years ★ Watched the flow of power around design to initiate things. ★ Never took design classes. Never read design books. ★ Have designed: beds, chairs, fliers, film titles, dvd labeling systems, signs, slides, ads, t-shirts, album covers, posters, applications, websites @jm3
  4. Show of hands survey: designers? (hopefully not) ? hackers?

  5. It’s easier than ever to learn to code… ★ from

    scarce resources: books, smart people ★ to plentiful + cheap ubiquity: Google, blogs, StackOverflow, Skillshare, General Assembly, etc. ★ (none of which existed when I learned to code.)
  6. But Design hasn’t bent itself to be very approachable to

    Engineers yet. ★ While there are dozens of “learn to code” classes popping up, we mostly still think in terms of roles that sound innate: ★ designer vs coder ★ ux designer vs visual designer vs x designer ★ But design ISN’T something you ARE; design is something you do. ★ Design, like code, should be open to everyone!
  7. Why Hack Design? ★ Lone wolf; you want to work

    independently. ★ You’re speaking at a conference and want your slides to look cool. ★ You just like learning cool new stuff. ★ Iconoclasty: you hate smarmy people acting like they know something you don’t (this was kinda me) ★ Other?
  8. What are Design Hacks? ★ Cutting corners? ★ Faking it

    until you make it? ★ I like to think of it as…
  9. “The 20% of design that makes 80% of the difference”

  10. Minimal schooling Free / non-traditional tooling What to learn

  11. Last Chance for Caffeine

  12. 1 U r Space 12

  13. 1 K w r : raster 13

  14. 1 f p (R,G,B,A) R r r b b ’r

    big ass array 14
  15. 1 r r ; v r r w . O

    shrink 15
  16. Raster scaling 1

  17. 1 I ’ . W b vectors? 17

  18. 1 I malleable 18

  19. 1 infinite scaling

  20. 1 Actual code

  21. 1 (v r b ) S r r fonts! 23

  22. live demo 1

  23. Review ★ raster images = pixels ★ vector images= math

    ★ (fonts can be images)
  24. 1 GIF v. PNG v. JPG v. PDF K w

    r Formats 26
  25. 1 . f v r ’ f v r :

    GIF 27
  26. 1 p r b w r r p 8b r

    24? PNG 28
  27. 1 r r, DCT p r p JPG 29

  28. 1 pr pr r ( p b ) L r

    + v PSD 30
  29. 1 ( rr b r ) R r / v

    r br PDF 31
  30. 2 . Blocking 32

  31. 2 ? A 10% p , w Mona Lisa 33

  32. 2 (probably not)

  33. 2 S pw r , Sketching 35

  34. 2 (S r p )

  35. 2 f r r W r Black+White 2 37

  36. 2 - r v Pr copy- 38

  37. 2 Tr r Tweet 39

  38. 2

  39. 2 M r ’ r . A w b Shipping

    42
  40. 2 M r w mantras 43

  41. Example

  42. 3 f . K w Right 20% 45

  43. 3 S + Cr pp G r w Boxes 46

  44. All the web is boxes

  45. L r r 3 - r Rect 48

  46. 3 r p… r r . I P p +

    Pr v w, Crop 50
  47. 3 : r , , p transform 52

  48. 4 Keyboard 62

  49. 4 63

  50. 4 S r F (+ V G f) P w

    r r Shortcuts 64
  51. 4 M , F (f) . Pr w r isolation

    65
  52. 4 p v r w r . L r -

    Text Tricks 66
  53. 4 - r G p option- 67

  54. 0 P tweets 77

  55. 0 Cr r p r. r No Shame 78

  56. “The first law of creativity is theft; everything’s stolen from

    somewhere.” — some guy
  57. “If you can't explain it simply, you don't understand it

    well enough” — A. Einstein
  58. Design everything. ★ You can only code certain things, but

    you can design almost everything.
  59. Thanks! Follow @jm3 on Twitter, Email me at jm3@jm3.net any

    time