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

Say Hello to Octicons

Say Hello to Octicons

Cameron McEfee and Jon Rohan talk about GitHub's icons.

Jon Rohan

July 21, 2012
Tweet

More Decks by Jon Rohan

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. FAMFAMFAM
    Say Goodbye To
    Saturday, July 21, 12

    View full-size slide

  4. ZOOMED
    Saturday, July 21, 12

    View full-size slide

  5. Saturday, July 21, 12

    View full-size slide

  6. Saturday, July 21, 12

    View full-size slide

  7. Saturday, July 21, 12

    View full-size slide

  8. SOME FACTS
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  10. SCREENS
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  12. 6 MILLION PAGE VIEWS
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  14. 30+ HTTP REQUESTS
    Saturday, July 21, 12

    View full-size slide

  15. MOSTLY ICONS
    Saturday, July 21, 12

    View full-size slide

  16. ICON METHODS
    Saturday, July 21, 12

    View full-size slide

  17. Images
    ICON METHODS
    Saturday, July 21, 12

    View full-size slide

  18. Image Sprites
    Images
    ICON METHODS
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  20. WHY CUSTOM ICONS?
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. NEW METAPHORS
    • Octocat
    • Repo
    • Issue
    • Fork
    • Commit
    • Pull Request
    • Push
    • Submodule
    • Gist
    • Etc.










    Saturday, July 21, 12

    View full-size slide

  24. CONSISTENCY
    Saturday, July 21, 12

    View full-size slide

  25. SPRITES
    Saturday, July 21, 12

    View full-size slide

  26. SPRITES
    Saturday, July 21, 12

    View full-size slide

  27. SPRITES
    Saturday, July 21, 12

    View full-size slide

  28. SPRITES
    Saturday, July 21, 12

    View full-size slide

  29. SPRITES
    Saturday, July 21, 12

    View full-size slide

  30. SPRITES
    Saturday, July 21, 12

    View full-size slide

  31. SPRITES
    Saturday, July 21, 12

    View full-size slide

  32. SPRITES
    Saturday, July 21, 12

    View full-size slide

  33. SPRITES
    Saturday, July 21, 12

    View full-size slide

  34. SPRITES
    Saturday, July 21, 12

    View full-size slide

  35. SPRITES
    Saturday, July 21, 12

    View full-size slide

  36. SPRITES
    Saturday, July 21, 12

    View full-size slide

  37. SPRITES
    Saturday, July 21, 12

    View full-size slide

  38. SPRITES
    Saturday, July 21, 12

    View full-size slide

  39. SPRITES
    Saturday, July 21, 12

    View full-size slide

  40. SPRITES
    Saturday, July 21, 12

    View full-size slide

  41. SPRITES
    Saturday, July 21, 12

    View full-size slide

  42. SPRITES
    SPRITE HELL
    Saturday, July 21, 12

    View full-size slide

  43. Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  45. LET’S GET TECHNICAL
    Saturday, July 21, 12

    View full-size slide

  46. STRATEGY
    Saturday, July 21, 12

    View full-size slide

  47. METAPHORS
    Saturday, July 21, 12

    View full-size slide

  48. METAPHORS
    Saturday, July 21, 12

    View full-size slide

  49. FLEXIBLE SIZES
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. CRISPNESS
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  54. CRISPNESS IS KEY
    Saturday, July 21, 12

    View full-size slide

  55. RESIZING = BAD
    Saturday, July 21, 12

    View full-size slide

  56. RESIZING = BAD
    Redesigned Scaled
    Saturday, July 21, 12

    View full-size slide

  57. DESIGN
    >
    Saturday, July 21, 12

    View full-size slide

  58. PHOTOSHOP TRICKS
    Saturday, July 21, 12

    View full-size slide

  59. PHOTOSHOP TRICKS
    ILLUSIONS
    Saturday, July 21, 12

    View full-size slide

  60. 2-UP VIEW
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. PIXEL SNAPPING
    Saturday, July 21, 12

    View full-size slide

  64. BOXED ICONS
    Saturday, July 21, 12

    View full-size slide

  65. SOURCE FILE
    Saturday, July 21, 12

    View full-size slide

  66. GLYPHS PRIMER
    Saturday, July 21, 12

    View full-size slide

  67. SKIPPING AHEAD
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. BASICALLY THE SAME
    width
    Saturday, July 21, 12

    View full-size slide

  73. BASICALLY THE SAME
    height
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. MAKE THE FONT
    Saturday, July 21, 12

    View full-size slide

  78. ALIGNMENT IS HARD
    Saturday, July 21, 12

    View full-size slide

  79. ALIGNMENT IS HARD
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  83. STAGE IT
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  85. IT’S A FONT
    Saturday, July 21, 12

    View full-size slide

  86. IT’S A FONT
    Saturday, July 21, 12

    View full-size slide

  87. TO THE CLOUD
    Saturday, July 21, 12

    View full-size slide

  88. OPENTYPE
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  90. PRIVATE USE UNICODE
    Saturday, July 21, 12

    View full-size slide

  91. SUBSET FOR VICTORY
    Saturday, July 21, 12

    View full-size slide

  92. @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

    View full-size slide

  93. CSS CLASSES

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

    View full-size slide

  94. CSS ANTI-ALIASING
    Subpixel
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  96. ANTI-ALIASING
    Without With
    Saturday, July 21, 12

    View full-size slide

  97. Saturday, July 21, 12

    View full-size slide

  98. WHAT WORKED
    Saturday, July 21, 12

    View full-size slide

  99. ALL THE COLORS
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  101. ANY SIZE
    Saturday, July 21, 12

    View full-size slide

  102. ANY SIZE
     

    Saturday, July 21, 12

    View full-size slide

  103. Saturday, July 21, 12

    View full-size slide

  104. Retina Timing
    Saturday, July 21, 12

    View full-size slide

  105. Saturday, July 21, 12

    View full-size slide

  106. Saturday, July 21, 12

    View full-size slide

  107. WHAT DIDN’T WORK
    Saturday, July 21, 12

    View full-size slide

  108. TOO COMPLEX
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

  110. GLYPHS IS LIMITED
    Saturday, July 21, 12

    View full-size slide

  111. CLEAR TYPE
    Saturday, July 21, 12

    View full-size slide

  112. ACCESSIBILITY
    Saturday, July 21, 12

    View full-size slide

  113. @FONT-FACE DISABLED
    Saturday, July 21, 12

    View full-size slide

  114. MAKING THINGS BETTER
    Saturday, July 21, 12

    View full-size slide

  115. GRAPHIC CHANGES




    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  120. THANKS
    @JONROHAN
    @CAMERONMCEFEE
    Saturday, July 21, 12

    View full-size slide

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

    View full-size slide