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.

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
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