Cameron McEfee and Jon Rohan talk about GitHub's icons.
Cam & RohanMaking Icons@JONROHAN@CAMERONMCEFEESaturday, July 21, 12
View Slide
OCTICONSSay Hello ToSaturday, July 21, 12
FAMFAMFAMSay Goodbye ToSaturday, July 21, 12
ZOOMEDSaturday, July 21, 12
Saturday, July 21, 12
SOME FACTSSaturday, July 21, 12
11%22%67%BROWSERSChromeFirefoxSafariSaturday, July 21, 12
SCREENSSaturday, July 21, 12
SCREENS2000px 6%1600px 42%1440px 14%1280px 30%Saturday, July 21, 12
6 MILLION PAGE VIEWSSaturday, July 21, 12
1,469MS PAGE LOAD TIMESSaturday, July 21, 12
30+ HTTP REQUESTSSaturday, July 21, 12
MOSTLY ICONSSaturday, July 21, 12
ICON METHODSSaturday, July 21, 12
ImagesICON METHODSSaturday, July 21, 12
Image SpritesImagesICON METHODSSaturday, July 21, 12
Image SpritesImages SVGICON METHODSSaturday, July 21, 12
WHY CUSTOM ICONS?Saturday, July 21, 12
UNIQUE METAPHORS• Octocat• Repo• Issue• Fork• Commit• Pull Request• Push• Submodule• Gist• Etc.Saturday, July 21, 12
OLD METAPHORS• Octocat• Repo• Issue• Fork• Commit• Pull Request• Push• Submodule• Gist• Etc.Saturday, July 21, 12
NEW METAPHORS• Octocat• Repo• Issue• Fork• Commit• Pull Request• Push• Submodule• Gist• Etc.Saturday, July 21, 12
CONSISTENCYSaturday, July 21, 12
SPRITESSaturday, July 21, 12
SPRITESSPRITE HELLSaturday, July 21, 12
Octicons Saturday, July 21, 12
LET’S GET TECHNICALSaturday, July 21, 12
STRATEGYSaturday, July 21, 12
METAPHORSSaturday, July 21, 12
FLEXIBLE SIZESSaturday, July 21, 12
FLEXIBLE SIZES16px 32pxSaturday, July 21, 12
FLEXIBLE SIZES• 16px: Optimized for 16px. Never scaled• 32px: Optimized for n*32px. Scaled when necessary.Saturday, July 21, 12
CRISPNESSSaturday, July 21, 12
CRISPNESS IS KEYHelve cons Pictos Oc consSaturday, July 21, 12
CRISPNESS IS KEYSaturday, July 21, 12
RESIZING = BADSaturday, July 21, 12
RESIZING = BADRedesigned ScaledSaturday, July 21, 12
DESIGN>Saturday, July 21, 12
PHOTOSHOP TRICKSSaturday, July 21, 12
PHOTOSHOP TRICKSILLUSIONSSaturday, July 21, 12
2-UP VIEWSaturday, July 21, 12
2-UP VIEW• Window > Application Frame• Window > Arrange > New Window for …psd• Window > Arrange > 2-Up VerticalSaturday, July 21, 12
PIXEL GRIDView > Show > Pixel GridSaturday, July 21, 12
PIXEL SNAPPINGSaturday, July 21, 12
BOXED ICONSSaturday, July 21, 12
SOURCE FILESaturday, July 21, 12
GLYPHS PRIMERSaturday, July 21, 12
SKIPPING AHEADSaturday, July 21, 12
THE BASICSMxCap-heightX-heightM-widthSaturday, July 21, 12
MATH3216= 23232= 1Saturday, July 21, 12
OUR “LOGICAL” SETUP32 points32 pointsSaturday, July 21, 12
THE MAGIC 2048204816= 128204832= 56Saturday, July 21, 12
BASICALLY THE SAMEwidthSaturday, July 21, 12
BASICALLY THE SAMEheightSaturday, July 21, 12
BASICALLY THE SAMEresolu on (sort of)Saturday, July 21, 12
FILE SIZE IS WEIRDSize Grid Quality File Size (kb)512 4 Meh 28512 8 Meh 271024 0 Good 371024 32 Meh 291024 64 Bad2048 32 Good 332048 64 Good 332048 128 Good 33Saturday, July 21, 12
OUR FINAL FILE• Cap-height/x-height = 2048 points• Units per em = 2048 points• Grid spacing = 32Saturday, July 21, 12
MAKE THE FONTSaturday, July 21, 12
ALIGNMENT IS HARDSaturday, July 21, 12
THE GRID(0,0)Glyphs Illustrator(0,X)(X,0) (0,-X)(0,0) (X,0)Saturday, July 21, 12
STAGE IT(0,0)2 grid squarebaseline shift2048pts256ptsSaturday, July 21, 12
STAGE ITpaste at 16ptsSaturday, July 21, 12
STAGE ITSaturday, July 21, 12
STAGE ITdelete thiscopy thisSaturday, July 21, 12
IT’S A FONTSaturday, July 21, 12
TO THE CLOUDSaturday, July 21, 12
OPENTYPESaturday, July 21, 12
OTF > WEB FONTFONTQUIR L.otf.eot.svg.ttf.woffSaturday, July 21, 12
PRIVATE USE UNICODESaturday, July 21, 12
SUBSET FOR VICTORYSaturday, July 21, 12
@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-FACESaturday, July 21, 12
CSS CLASSES.mini-icon {...-webkit-font-smoothing: antialiased;}.mini-icon.search:before {content: "\f02e";}Saturday, July 21, 12
CSS ANTI-ALIASINGSubpixelSaturday, July 21, 12
CSS ANTI-ALIASINGSubpixelNone An -aliasedSaturday, July 21, 12
ANTI-ALIASINGWithout WithSaturday, July 21, 12
WHAT WORKEDSaturday, July 21, 12
ALL THE COLORSSaturday, July 21, 12
ALL THE COLORSSaturday, July 21, 12
ANY SIZESaturday, July 21, 12
ANY SIZE Saturday, July 21, 12
Retina TimingSaturday, July 21, 12
WHAT DIDN’T WORKSaturday, July 21, 12
TOO COMPLEXSaturday, July 21, 12
UPDATES ARE TEDIOUS1.Icon concept2.Draw 2 icons3.Copy into Illustrator4.Copy into Glyphs5.Export font6.Convert font7.Update font8.Deploy GitHubSaturday, July 21, 12
GLYPHS IS LIMITEDSaturday, July 21, 12
CLEAR TYPESaturday, July 21, 12
ACCESSIBILITYSaturday, July 21, 12
@FONT-FACE DISABLEDSaturday, July 21, 12
MAKING THINGS BETTERSaturday, July 21, 12
GRAPHIC CHANGESSaturday, July 21, 12
CSS PERFORMANCE.mini-icon {font-icon: stuff;}.mini-icon.private-repo {font: unicode;}Saturday, July 21, 12
20K+ CSS MATCHES PER PAGESaturday, July 21, 12
BREAK UPdata-icon=”f023”.mini-icon:before {content: attr(“data-icon”);}Saturday, July 21, 12
BREAK UP.mini-icon {font-icon: stuff;}.mini-icon-private-repo {font: unicode;}Saturday, July 21, 12
THANKS@JONROHAN@CAMERONMCEFEESaturday, July 21, 12
THANKS@JONROHAN@CAMERONMCEFEE Saturday, July 21, 12
jonrohan
makomakok
takahirom
speed1313
cocoeyes02
coa00
mpyw
ivargrimstad
tanakahisateru
usamik26
yusukebe
star_zero
os1ma
lauravandoore
jakevdp
jonyablonski
paulrobertlloyd
lara
productmarketing
phodgson
garrettdimon
frogandcode
pauljervisheath
shpigford
thoeni