{"id":56075,"date":"2021-02-04T09:29:20","date_gmt":"2021-02-04T17:29:20","guid":{"rendered":"https:\/\/github.blog\/?p=56075"},"modified":"2021-02-11T12:10:50","modified_gmt":"2021-02-11T20:10:50","slug":"how-we-illustrate-at-github","status":"publish","type":"post","link":"https:\/\/github.blog\/engineering\/user-experience\/how-we-illustrate-at-github\/","title":{"rendered":"How we illustrate at GitHub"},"content":{"rendered":"

In the fourth installment of our five-part series on building GitHub\u2019s new homepage, we\u2019ll explore the artistic pipeline at GitHub to explain story, character and color, and to show how we collaborate across teams to tackle site design.<\/p>\n

    \n
  1. How our globe is built<\/a><\/li>\n
  2. How we collect and use the data behind the globe<\/a><\/li>\n
  3. How we made the page fast and performant<\/a><\/li>\n
  4. How we illustrate at GitHub<\/a><\/li>\n
  5. How we designed the homepage and wrote the narrative<\/a><\/li>\n<\/ol>\n

    Collaborative design<\/span><\/a><\/h2>\n

    On the surface, our new homepage exemplifies the spirit and ingenuity of designers, engineers, and more. But dig a little deeper, and you unlock the interconnected world of software development. There\u2019s plenty to be wowed by, from ourinteractive WebGL globe to character illustrations to mesmerizing product shots. Yet less apparent, it reveals a new way of designing at GitHub. I\u2019m Tony Jaramillo, Design Director at GitHub. Our team is responsible for, among many things, the beloved GitHub mascot, Mona the Octocat.\u00a0 Here\u2019s a peek at our new approach to illustration at GitHub\u2014from idea to ship.<\/p>\n

    Story<\/span><\/a><\/h2>\n

    \"\"<\/p>\n

    We have a unique opportunity to tell a compelling brand story through design, product, and character IP. \u00a0 To meet this challenge, we\u2019ve combined the talents of our various teams through seamless collaboration.\u00a0 This page was a perfect opportunity to blend our storytelling skills with the site team. We approached the same story from two perspectives: character and UX\/UI.\u00a0 From an illustration angle, we viewed the page as a visual narrative explaining the power of GitHub while highlighting our most important asset, the developer.<\/p>\n

    The origin of the octocat has its mysteries. Still, it\u2019s never strayed from the idea that octocats represent developers<\/b>. This feline cephalopod species is forever tenacious and searching for something more.\u00a0 Like the human developers they represent, their curiosity fuels this push towards innovation and a better future.\u00a0 This same sentiment is at the core of our branding: whether it\u2019s octocats, conference motion graphics, or office branding, we strive to visually represent the acceleration of human progress that developers drive every day.<\/p>\n

    So here, we sent our octo-avatar, Mona<\/a>, on a journey explaining the benefits of GitHub and how we provide the tools needed for any code exploration.\u00a0 Just like her, you too can venture into the unknown with the security of knowing we\u2019ve got your back.<\/p>\n

    \"\"<\/p>\n

    At the start, Mona stands on a blank planet staring at the title,\u00a0 \u201cWhere the world builds software.\u201d\u00a0 Behind her is a globe teeming with actual GitHub activity, highlighting the global development community.\u00a0 Earth\u2019s kinetic energy stands juxtaposed against Mona\u2019s potential.\u00a0 The sprouts and Git lines around her feet are hinting at growth and possibility.<\/p>\n

    As you scroll down the page, we highlight the many features that make GitHub unique.\u00a0 Collaboration, community, automation, and security are just some of the elements we underscore that improve your development workflow, giving you the security and confidence needed to innovate.<\/p>\n

    \"\"<\/p>\n

    Follow the git line to the footer, and you\u2019ll find a space lander with larger groups of octocats spilling out of it.\u00a0 If humans are the pioneers building the code that transforms our planet, then octocats are the explorers that create physical worlds in their universe.\u00a0 The footer illustration shows that adventurous spirit.\u00a0 The various octocats are surveying the land, utilizing their bots, and working together to create something new.\u00a0 It\u2019s here that we extend a hand to you, the viewer, to ask if you\u2019d like to make a contribution to the community and highlight others who have taken that leap.<\/p>\n

    Visual development<\/b><\/span><\/a><\/h2>\n

    \"\"<\/p>\n

    Building is key to the story.\u00a0 To weave the human and Octocat worlds together, we had to develop a common shape language.\u00a0 Git lines were a perfect choice because they\u2019re unique, we can manipulate them into various shapes and sizes, and they\u2019re symbolic for code development.\u00a0 Pushing a commit, submitting a pull request, or creating a new branch, each one of these actions would expand the git line by one node.\u00a0 We felt this symbol was the best example of the metaphorical thread between us.\u00a0 You can find them on rocks, in plants, and more.\u00a0 It\u2019s reminiscent of the expansive fungi networks underneath Earth\u2019s forests.<\/p>\n

    Illustration<\/span><\/a><\/h2>\n

    \"\"<\/p>\n

    We then used that visual framework to create the various octocat compositions.\u00a0 Our illustration process is straightforward.\u00a0 Thumbnails, concepts, line art, color, and final asset creation, are all based on a shared brief.\u00a0 Our characters are drawn utilizing existing model and expression sheets to ensure consistency.\u00a0 All illustrations were (digitally) hand-painted in-house by our senior artist, Jo\u00e3o Ribeiro.<\/p>\n

    It\u2019s worth noting that web illustration poses some additional challenges where elements like responsiveness, performance, and UI layout need to be taken into account.\u00a0 Again, our cross-team collaboration enabled us to work closely with the site team to address these limitations.\u00a0 Specifically, we leveraged their knowledge around compression to improve page performance, which you can read more about in the \u201cMaking GitHub’s new homepage fast and performant<\/a>\u201d post.<\/p>\n

    Globe<\/span><\/a><\/h2>\n

    \"\"<\/p>\n

    It was imperative to show the actual activity of our development community.\u00a0 We\u2019re proud of our users and jumped at the opportunity to highlight their contributions.\u00a0 The globe design needed to be engaging, informative, and easily legible.\u00a0 It also epitomized the driving force of the Octocat world, so it was essential to make that connection.<\/p>\n

    To start, our artists created concepts to broadcast this narrative through shape and color.\u00a0 We needed to exemplify the potential of our platform and the wide-reaching expanse of code collaboration.\u00a0 It took multiple iterations to find the right balance. These drawings gave our engineers a baseline to build a dynamic WebGL interactive experience.\u00a0 In the end, this collaborative effort distilled the final product down to its most essential\u2014visual appeal, data visualization, interactivity, and speed.<\/p>\n

    As a reminder, there are links in the introduction to Tobi<\/a> and Tal\u2019s<\/a> blog post about the globe\u2019s creation.\u00a0 I recommend checking them out for a deeper understanding.<\/p>\n

    Color<\/span><\/a><\/h2>\n

    \"\"<\/p>\n

    Color proved to be a fun challenge.\u00a0 We aim to represent the GitHub UI as accurately as possible in our marketing, so specific UI colors need to be considered.\u00a0 Our product color palettes are designed for utility, of course, but marketing allows us to stretch and flex those fundamentals to provide for a more engaging story.<\/p>\n

    The core of the visual narrative was energy.\u00a0 We needed a palette that could exemplify the inherent potential of the platform and our community.\u00a0 We iterated by dialing up the saturation without straying too far from our UI hues.\u00a0 It was critical to blend the globe design, character illustrations, typography, and product shots through color.<\/p>\n

    This new palette is based on a triad\u2014green, violet, and orange.\u00a0 But we needed more options to distinguish each feature section on the page, so we layered a split complementary on top. You may notice a couple of additional \u201ccheat colors,\u201d which again were needed for UI.<\/p>\n

    Afterward, we developed color scripts to treat the page as a narrative arc to carry the viewer throughout.\u00a0 The header sets the framework for our triad by using those dominant colors on the focal elements\u2014the orange tones on Mona\u2019s face, the violet on the globe, and the green CTA button.\u00a0 As we roll down the page, we rotate around the color wheel using dedicated sections of the palette to define each area visually.\u00a0 The footer then resolves the page by anchoring back into the primary triad colors again.<\/p>\n

    Going forward<\/span><\/a><\/h2>\n

    This mix of art + design + engineering represents a new way of telling our brand story.\u00a0 It\u2019s pushed us into new realms of exploration and experimentation, and our collective design toolbox just grew exponentially.\u00a0 I think we\u2019re onto something, and this is just the beginning.<\/p>\n

    Also, just a reminder about our homepage wallpapers.\u00a0 Make sure you take a piece of the octocat world with you.<\/p>\n