Say Hello to Octicons - Speaker Deck

Slide 1

Slide 1 text

Cam & Rohan Making Icons @JONROHAN @CAMERONMCEFEE Saturday, July 21, 12

Slide 2

Slide 2 text

OCTICONS Say Hello To  Saturday, July 21, 12

Slide 3

Slide 3 text

FAMFAMFAM Say Goodbye To Saturday, July 21, 12

Slide 4

Slide 4 text

ZOOMED Saturday, July 21, 12

Slide 5

Slide 5 text

Saturday, July 21, 12

Slide 6

Slide 6 text

Saturday, July 21, 12

Slide 7

Slide 7 text

Saturday, July 21, 12

Slide 8

Slide 8 text

SOME FACTS Saturday, July 21, 12

Slide 9

Slide 9 text

11% 22% 67% BROWSERS Chrome Firefox Safari Saturday, July 21, 12

Slide 10

Slide 10 text

SCREENS Saturday, July 21, 12

Slide 11

Slide 11 text

SCREENS 2000px 6% 1600px 42% 1440px 14% 1280px 30% Saturday, July 21, 12

Slide 12

Slide 12 text

6 MILLION PAGE VIEWS Saturday, July 21, 12

Slide 13

Slide 13 text

1,469MS PAGE LOAD TIMES Saturday, July 21, 12

Slide 14

Slide 14 text

30+ HTTP REQUESTS Saturday, July 21, 12

Slide 15

Slide 15 text

MOSTLY ICONS Saturday, July 21, 12

Slide 16

Slide 16 text

ICON METHODS Saturday, July 21, 12

Slide 17

Slide 17 text

Images ICON METHODS Saturday, July 21, 12

Slide 18

Slide 18 text

Image Sprites Images ICON METHODS Saturday, July 21, 12

Slide 19

Slide 19 text

Image Sprites Images SVG ICON METHODS Saturday, July 21, 12

Slide 20

Slide 20 text

WHY CUSTOM ICONS? Saturday, July 21, 12

Slide 21

Slide 21 text

UNIQUE METAPHORS • Octocat • Repo • Issue • Fork • Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12

Slide 22

Slide 22 text

OLD METAPHORS • Octocat • Repo • Issue • Fork • Commit • Pull Request • Push • Submodule • Gist • Etc. Saturday, July 21, 12

Slide 23

Slide 23 text

NEW METAPHORS • Octocat • Repo • Issue • Fork • Commit • Pull Request • Push • Submodule • Gist • Etc.           Saturday, July 21, 12

Slide 24

Slide 24 text

CONSISTENCY Saturday, July 21, 12

Slide 25

Slide 25 text

SPRITES Saturday, July 21, 12

Slide 26

Slide 26 text

SPRITES Saturday, July 21, 12

Slide 27

Slide 27 text

SPRITES Saturday, July 21, 12

Slide 28

Slide 28 text

SPRITES Saturday, July 21, 12

Slide 29

Slide 29 text

SPRITES Saturday, July 21, 12

Slide 30

Slide 30 text

SPRITES Saturday, July 21, 12

Slide 31

Slide 31 text

SPRITES Saturday, July 21, 12

Slide 32

Slide 32 text

SPRITES Saturday, July 21, 12

Slide 33

Slide 33 text

SPRITES Saturday, July 21, 12

Slide 34

Slide 34 text

SPRITES Saturday, July 21, 12

Slide 35

Slide 35 text

SPRITES Saturday, July 21, 12

Slide 36

Slide 36 text

SPRITES Saturday, July 21, 12

Slide 37

Slide 37 text

SPRITES Saturday, July 21, 12

Slide 38

Slide 38 text

SPRITES Saturday, July 21, 12

Slide 39

Slide 39 text

SPRITES Saturday, July 21, 12

Slide 40

Slide 40 text

SPRITES Saturday, July 21, 12

Slide 41

Slide 41 text

SPRITES Saturday, July 21, 12

Slide 42

Slide 42 text

SPRITES SPRITE HELL Saturday, July 21, 12

Slide 43

Slide 43 text

Saturday, July 21, 12

Slide 44

Slide 44 text

Octicons                                     Saturday, July 21, 12

Slide 45

Slide 45 text

LET’S GET TECHNICAL Saturday, July 21, 12

Slide 46

Slide 46 text

STRATEGY Saturday, July 21, 12

Slide 47

Slide 47 text

METAPHORS Saturday, July 21, 12

Slide 48

Slide 48 text

METAPHORS Saturday, July 21, 12

Slide 49

Slide 49 text

FLEXIBLE SIZES Saturday, July 21, 12

Slide 50

Slide 50 text

FLEXIBLE SIZES 16px 32px Saturday, July 21, 12

Slide 51

Slide 51 text

FLEXIBLE SIZES • 16px: Optimized for 16px. Never scaled • 32px: Optimized for n*32px. Scaled when necessary. Saturday, July 21, 12

Slide 52

Slide 52 text

CRISPNESS Saturday, July 21, 12

Slide 53

Slide 53 text

CRISPNESS IS KEY Helve cons Pictos Oc cons Saturday, July 21, 12

Slide 54

Slide 54 text

CRISPNESS IS KEY Saturday, July 21, 12

Slide 55

Slide 55 text

RESIZING = BAD Saturday, July 21, 12

Slide 56

Slide 56 text

RESIZING = BAD Redesigned Scaled Saturday, July 21, 12

Slide 57

Slide 57 text

DESIGN > Saturday, July 21, 12

Slide 58

Slide 58 text

PHOTOSHOP TRICKS Saturday, July 21, 12

Slide 59

Slide 59 text

PHOTOSHOP TRICKS ILLUSIONS Saturday, July 21, 12

Slide 60

Slide 60 text

2-UP VIEW Saturday, July 21, 12

Slide 61

Slide 61 text

2-UP VIEW • Window > Application Frame • Window > Arrange > New Window for …psd • Window > Arrange > 2-Up Vertical Saturday, July 21, 12

Slide 62

Slide 62 text

PIXEL GRID View > Show > Pixel Grid Saturday, July 21, 12

Slide 63

Slide 63 text

PIXEL SNAPPING Saturday, July 21, 12

Slide 64

Slide 64 text

BOXED ICONS Saturday, July 21, 12

Slide 65

Slide 65 text

SOURCE FILE Saturday, July 21, 12

Slide 66

Slide 66 text

GLYPHS PRIMER Saturday, July 21, 12

Slide 67

Slide 67 text

SKIPPING AHEAD Saturday, July 21, 12

Slide 68

Slide 68 text

THE BASICS Mx Cap-height X-height M-width Saturday, July 21, 12

Slide 69

Slide 69 text

MATH 32 16 = 2 32 32 = 1 Saturday, July 21, 12

Slide 70

Slide 70 text

OUR “LOGICAL” SETUP 32 points 32 points Saturday, July 21, 12

Slide 71

Slide 71 text

THE MAGIC 2048 2048 16 = 128 2048 32 = 56 Saturday, July 21, 12

Slide 72

Slide 72 text

BASICALLY THE SAME width Saturday, July 21, 12

Slide 73

Slide 73 text

BASICALLY THE SAME height Saturday, July 21, 12

Slide 74

Slide 74 text

BASICALLY THE SAME resolu on (sort of) Saturday, July 21, 12

Slide 75

Slide 75 text

FILE SIZE IS WEIRD Size Grid Quality File Size (kb) 512 4 Meh 28 512 8 Meh 27 1024 0 Good 37 1024 32 Meh 29 1024 64 Bad 2048 32 Good 33 2048 64 Good 33 2048 128 Good 33 Saturday, July 21, 12

Slide 76

Slide 76 text

OUR FINAL FILE • Cap-height/x-height = 2048 points • Units per em = 2048 points • Grid spacing = 32 Saturday, July 21, 12

Slide 77

Slide 77 text

MAKE THE FONT Saturday, July 21, 12

Slide 78

Slide 78 text

ALIGNMENT IS HARD Saturday, July 21, 12

Slide 79

Slide 79 text

ALIGNMENT IS HARD Saturday, July 21, 12

Slide 80

Slide 80 text

THE GRID (0,0) Glyphs Illustrator (0,X) (X,0) (0,-X) (0,0) (X,0) Saturday, July 21, 12

Slide 81

Slide 81 text

STAGE IT (0,0) 2 grid square baseline shift 2048pts 256pts Saturday, July 21, 12

Slide 82

Slide 82 text

STAGE IT paste at 16pts Saturday, July 21, 12

Slide 83

Slide 83 text

STAGE IT Saturday, July 21, 12

Slide 84

Slide 84 text

STAGE IT delete this copy this Saturday, July 21, 12

Slide 85

Slide 85 text

IT’S A FONT Saturday, July 21, 12

Slide 86

Slide 86 text

IT’S A FONT Saturday, July 21, 12

Slide 87

Slide 87 text

TO THE CLOUD Saturday, July 21, 12

Slide 88

Slide 88 text

OPENTYPE Saturday, July 21, 12

Slide 89

Slide 89 text

OTF > WEB FONT FONT QUIR L .otf .eot .svg .ttf .woff Saturday, July 21, 12

Slide 90

Slide 90 text

PRIVATE USE UNICODE Saturday, July 21, 12

Slide 91

Slide 91 text

SUBSET FOR VICTORY Saturday, July 21, 12

Slide 92

Slide 92 text

@font-face { font-family: 'Octicons Regular'; src: font-url('octicons.eot'); src: font-url('octicons.eot#iefix') format('embedded-opentype'), font-url('octicons.woff') format('woff'), font-url('octicons.ttf') format('truetype'), font-url('octicons.svg#newFontRegular') format('svg'); font-weight: normal; font-style: normal; } @FONT-FACE Saturday, July 21, 12

Slide 93

Slide 93 text

CSS CLASSES .mini-icon { ... -webkit-font-smoothing: antialiased; } .mini-icon.search:before { content: "\f02e"; } Saturday, July 21, 12

Slide 94

Slide 94 text

CSS ANTI-ALIASING Subpixel Saturday, July 21, 12

Slide 95

Slide 95 text

CSS ANTI-ALIASING Subpixel None An -aliased Saturday, July 21, 12

Slide 96

Slide 96 text

ANTI-ALIASING Without With Saturday, July 21, 12

Slide 97

Slide 97 text

Saturday, July 21, 12

Slide 98

Slide 98 text

WHAT WORKED Saturday, July 21, 12

Slide 99

Slide 99 text

ALL THE COLORS Saturday, July 21, 12

Slide 100

Slide 100 text

                                                                        ALL THE COLORS Saturday, July 21, 12

Slide 101

Slide 101 text

ANY SIZE Saturday, July 21, 12

Slide 102

Slide 102 text

ANY SIZE    Saturday, July 21, 12

Slide 103

Slide 103 text

Saturday, July 21, 12

Slide 104

Slide 104 text

Retina Timing Saturday, July 21, 12

Slide 105

Slide 105 text

Saturday, July 21, 12

Slide 106

Slide 106 text

Saturday, July 21, 12

Slide 107

Slide 107 text

WHAT DIDN’T WORK Saturday, July 21, 12

Slide 108

Slide 108 text

TOO COMPLEX Saturday, July 21, 12

Slide 109

Slide 109 text

UPDATES ARE TEDIOUS 1.Icon concept 2.Draw 2 icons 3.Copy into Illustrator 4.Copy into Glyphs 5.Export font 6.Convert font 7.Update font 8.Deploy GitHub Saturday, July 21, 12

Slide 110

Slide 110 text

GLYPHS IS LIMITED Saturday, July 21, 12

Slide 111

Slide 111 text

CLEAR TYPE Saturday, July 21, 12

Slide 112

Slide 112 text

ACCESSIBILITY Saturday, July 21, 12

Slide 113

Slide 113 text

@FONT-FACE DISABLED Saturday, July 21, 12

Slide 114

Slide 114 text

MAKING THINGS BETTER Saturday, July 21, 12

Slide 115

Slide 115 text

GRAPHIC CHANGES     Saturday, July 21, 12

Slide 116

Slide 116 text

CSS PERFORMANCE .mini-icon { font-icon: stuff; } .mini-icon.private-repo { font: unicode; } Saturday, July 21, 12

Slide 117

Slide 117 text

20K+ CSS MATCHES PER PAGE Saturday, July 21, 12

Slide 118

Slide 118 text

BREAK UP data-icon=”f023” .mini-icon:before { content: attr(“data-icon”); } Saturday, July 21, 12

Slide 119

Slide 119 text

BREAK UP .mini-icon { font-icon: stuff; } .mini-icon-private-repo { font: unicode; } Saturday, July 21, 12

Slide 120

Slide 120 text

THANKS @JONROHAN @CAMERONMCEFEE Saturday, July 21, 12

Slide 121

Slide 121 text

THANKS @JONROHAN @CAMERONMCEFEE                               Saturday, July 21, 12