Tweet
Tweet

Slide 1

Slide 1 text

DESIGN HACKS with @jm3!

Slide 2

Slide 2 text

Design Hacks in 90 minutes 10M who am i 20M design strategies 50M design exercises 10M Q+A

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Show of hands survey: designers? (hopefully not) ? hackers?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

What are Design Hacks? ★ Cutting corners? ★ Faking it until you make it? ★ I like to think of it as…

Slide 9

Slide 9 text

“The 20% of design that makes 80% of the difference”

Slide 10

Slide 10 text

Minimal schooling Free / non-traditional tooling What to learn

Slide 11

Slide 11 text

Last Chance for Caffeine

Slide 12

Slide 12 text

1 U r Space 12

Slide 13

Slide 13 text

1 K w r : raster 13

Slide 14

Slide 14 text

1 f p (R,G,B,A) R r r b b ’r big ass array 14

Slide 15

Slide 15 text

1 r r ; v r r w . O shrink 15

Slide 16

Slide 16 text

Raster scaling 1

Slide 17

Slide 17 text

1 I ’ . W b vectors? 17

Slide 18

Slide 18 text

1 I malleable 18

Slide 19

Slide 19 text

1 infinite scaling

Slide 20

Slide 20 text

1 Actual code

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

live demo 1

Slide 23

Slide 23 text

Review ★ raster images = pixels ★ vector images= math ★ (fonts can be images)

Slide 24

Slide 24 text

1 GIF v. PNG v. JPG v. PDF K w r Formats 26

Slide 25

Slide 25 text

1 . f v r ’ f v r : GIF 27

Slide 26

Slide 26 text

1 p r b w r r p 8b r 24? PNG 28

Slide 27

Slide 27 text

1 r r, DCT p r p JPG 29

Slide 28

Slide 28 text

1 pr pr r ( p b ) L r + v PSD 30

Slide 29

Slide 29 text

1 ( rr b r ) R r / v r br PDF 31

Slide 30

Slide 30 text

2 . Blocking 32

Slide 31

Slide 31 text

2 ? A 10% p , w Mona Lisa 33

Slide 32

Slide 32 text

2 (probably not)

Slide 33

Slide 33 text

2 S pw r , Sketching 35

Slide 34

Slide 34 text

2 (S r p )

Slide 35

Slide 35 text

2 f r r W r Black+White 2 37

Slide 36

Slide 36 text

2 - r v Pr copy- 38

Slide 37

Slide 37 text

2 Tr r Tweet 39

Slide 38

Slide 38 text

2

Slide 39

Slide 39 text

2 M r ’ r . A w b Shipping 42

Slide 40

Slide 40 text

2 M r w mantras 43

Slide 41

Slide 41 text

Example

Slide 42

Slide 42 text

3 f . K w Right 20% 45

Slide 43

Slide 43 text

3 S + Cr pp G r w Boxes 46

Slide 44

Slide 44 text

All the web is boxes

Slide 45

Slide 45 text

L r r 3 - r Rect 48

Slide 46

Slide 46 text

3 r p… r r . I P p + Pr v w, Crop 50

Slide 47

Slide 47 text

3 : r , , p transform 52

Slide 48

Slide 48 text

4 Keyboard 62

Slide 49

Slide 49 text

4 63

Slide 50

Slide 50 text

4 S r F (+ V G f) P w r r Shortcuts 64

Slide 51

Slide 51 text

4 M , F (f) . Pr w r isolation 65

Slide 52

Slide 52 text

4 p v r w r . L r - Text Tricks 66

Slide 53

Slide 53 text

4 - r G p option- 67

Slide 54

Slide 54 text

0 P tweets 77

Slide 55

Slide 55 text

0 Cr r p r. r No Shame 78

Slide 56

Slide 56 text

“The first law of creativity is theft; everything’s stolen from somewhere.” — some guy

Slide 57

Slide 57 text

“If you can't explain it simply, you don't understand it well enough” — A. Einstein

Slide 58

Slide 58 text

Design everything. ★ You can only code certain things, but you can design almost everything.

Slide 59

Slide 59 text

Thanks! Follow @jm3 on Twitter, Email me at jm3@jm3.net any time