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 Slide

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

    View Slide

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

    View Slide

  4. ZOOMED
    Saturday, July 21, 12

    View Slide

  5. Saturday, July 21, 12

    View Slide

  6. Saturday, July 21, 12

    View Slide

  7. Saturday, July 21, 12

    View Slide

  8. SOME FACTS
    Saturday, July 21, 12

    View Slide

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

    View Slide

  10. SCREENS
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. MOSTLY ICONS
    Saturday, July 21, 12

    View Slide

  16. ICON METHODS
    Saturday, July 21, 12

    View Slide

  17. Images
    ICON METHODS
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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










    Saturday, July 21, 12

    View Slide

  24. CONSISTENCY
    Saturday, July 21, 12

    View Slide

  25. SPRITES
    Saturday, July 21, 12

    View Slide

  26. SPRITES
    Saturday, July 21, 12

    View Slide

  27. SPRITES
    Saturday, July 21, 12

    View Slide

  28. SPRITES
    Saturday, July 21, 12

    View Slide

  29. SPRITES
    Saturday, July 21, 12

    View Slide

  30. SPRITES
    Saturday, July 21, 12

    View Slide

  31. SPRITES
    Saturday, July 21, 12

    View Slide

  32. SPRITES
    Saturday, July 21, 12

    View Slide

  33. SPRITES
    Saturday, July 21, 12

    View Slide

  34. SPRITES
    Saturday, July 21, 12

    View Slide

  35. SPRITES
    Saturday, July 21, 12

    View Slide

  36. SPRITES
    Saturday, July 21, 12

    View Slide

  37. SPRITES
    Saturday, July 21, 12

    View Slide

  38. SPRITES
    Saturday, July 21, 12

    View Slide

  39. SPRITES
    Saturday, July 21, 12

    View Slide

  40. SPRITES
    Saturday, July 21, 12

    View Slide

  41. SPRITES
    Saturday, July 21, 12

    View Slide

  42. SPRITES
    SPRITE HELL
    Saturday, July 21, 12

    View Slide

  43. Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

  46. STRATEGY
    Saturday, July 21, 12

    View Slide

  47. METAPHORS
    Saturday, July 21, 12

    View Slide

  48. METAPHORS
    Saturday, July 21, 12

    View Slide

  49. FLEXIBLE SIZES
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

  52. CRISPNESS
    Saturday, July 21, 12

    View Slide

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

    View Slide

  54. CRISPNESS IS KEY
    Saturday, July 21, 12

    View Slide

  55. RESIZING = BAD
    Saturday, July 21, 12

    View Slide

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

    View Slide

  57. DESIGN
    >
    Saturday, July 21, 12

    View Slide

  58. PHOTOSHOP TRICKS
    Saturday, July 21, 12

    View Slide

  59. PHOTOSHOP TRICKS
    ILLUSIONS
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. PIXEL SNAPPING
    Saturday, July 21, 12

    View Slide

  64. BOXED ICONS
    Saturday, July 21, 12

    View Slide

  65. SOURCE FILE
    Saturday, July 21, 12

    View Slide

  66. GLYPHS PRIMER
    Saturday, July 21, 12

    View Slide

  67. SKIPPING AHEAD
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

  77. MAKE THE FONT
    Saturday, July 21, 12

    View Slide

  78. ALIGNMENT IS HARD
    Saturday, July 21, 12

    View Slide

  79. ALIGNMENT IS HARD
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. STAGE IT
    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  87. TO THE CLOUD
    Saturday, July 21, 12

    View Slide

  88. OPENTYPE
    Saturday, July 21, 12

    View Slide

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

    View Slide

  90. PRIVATE USE UNICODE
    Saturday, July 21, 12

    View Slide

  91. SUBSET FOR VICTORY
    Saturday, July 21, 12

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

  93. CSS CLASSES

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  97. Saturday, July 21, 12

    View Slide

  98. WHAT WORKED
    Saturday, July 21, 12

    View Slide

  99. ALL THE COLORS
    Saturday, July 21, 12

    View Slide

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

    View Slide

  101. ANY SIZE
    Saturday, July 21, 12

    View Slide

  102. ANY SIZE
     

    Saturday, July 21, 12

    View Slide

  103. Saturday, July 21, 12

    View Slide

  104. Retina Timing
    Saturday, July 21, 12

    View Slide

  105. Saturday, July 21, 12

    View Slide

  106. Saturday, July 21, 12

    View Slide

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

    View Slide

  108. TOO COMPLEX
    Saturday, July 21, 12

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

  110. GLYPHS IS LIMITED
    Saturday, July 21, 12

    View Slide

  111. CLEAR TYPE
    Saturday, July 21, 12

    View Slide

  112. ACCESSIBILITY
    Saturday, July 21, 12

    View Slide

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

    View Slide

  114. MAKING THINGS BETTER
    Saturday, July 21, 12

    View Slide

  115. GRAPHIC CHANGES




    Saturday, July 21, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide