Caroline Liu
In the design brief, I was asked to pair three snippets of marketing copy with visual metaphors to form a marketing message that would be seen on the GitHub website and on the narrower, mobile-sized version. My first instinct was to take notes on what the current GitHub graphic identity looks like to gain inspiration and more importantly, to communicate in the same cohesive visual brand language that is already instilled.
Current GitHub Identity

Overall style:
GitHub's graphics are clear, friendly, pragmatic, and intelligent, just like the product it sells. The graphics and layout are executed with a purposeful minimalism and finesse, with the end goal of educating the user and visually conveying a sense of smart engineering and technology.

Helvetica Neue and Helvetica are the typefaces most often used, oscillating between regular and boldface type. Occasionally, a slab serif font, Apex Serif Book, is used as an emphasis. Most of the text is center aligned, or left justified.

Color and Pattern:
A subdued color scheme of cooler colors can be found, including blues, greens, purples, black, gray and white. There is often the use of color gradients as backgrounds. Geometric patterns can be found in the background of some banners, as well.

Other visual devices:
Circular icons that echo the circular shape of the logo, colorful infographics (sometimes animated), and photographs all serve to clarify ideas and inform the user in a sophisticated yet playful way. Rounded rectangles are also a commonly used shape.

Direction A: Photo Circles

Taking a visual cue from the circular icons and logo, I immediately thought of doing three circular callouts with sub copy placed underneath. A photo background would be a good idea because it would reinforce the idea of each respective headline and it would make the overall look more enticing. I put in icons I found on the website, and used Apex Serif Book and Helvetica Neue. A minimal palette of black, gray, and white is used.

Direction B: Text Emphasis

In a totally different approach, I decided to play with just text in varying sizes to emphasize different words and to employ a visual hierarchy. Taking the action-verbs from the beginning of each sentence, I wanted to make this the largest set type to highlight the main goals ("see, learn, share") and to start each grouping in an exciting way, both linguistically and visually. The purple hues are shades I found on the website.

Direction C: Icon Headline

Lastly, in a traditional approach that is often seen on the website, I have paired each of the texts with similarly themed circle icons. The headline is highlighted with Apex Serif Book, and the sub copy is in the regular gray Helvetica Neue.

← Back