Opinions on corporate and brand identity work.

A division of UnderConsideration.








Share ›

New Logo, Identity, and UI for Codecademy by Pentagram
 

before

after

Reviewed May. 12, 2014 by Armin

Industry / Education Tags /

Established in 2011, Codecademy is an online education platform that offers courses on six popular programming languages — HTML and CSS, jQuery, JavaScript, PHP, Python, and Ruby — through a community-driven environment of over 24 million users. Last month, Codecademy introduced a redesigned website and new identity designed by Pentagram partner Eddie Opara.

The new wordmark is constructed of two distinct parts that convey Codecademy’s core values. Inspired by programming cues, the word “code” has been highlighted in a frame or field that sets off what the platform is all about. The frame can also be used to hold iconography, programming symbols, or other typography. At the same time, the second “c” is underlined like a cursor, suggesting a sense of open-ended possibility and change, as well as evaluation and exploration. The “cademy” is an educational anchor for whatever is placed before it.

Pentagram project page

New Logo, Identity, and UI for Codecademy by Pentagram
Logo detail.
New Logo, Identity, and UI for Codecademy by Pentagram
Logo grid.
Animation and variations.

The old logo — created “in a few minutes by browsing through various fonts in a word processor” by one of CodeCademy’s co-founders — was set in the mock-inducing, free Lobster font, which leads to no further comment on the old logo. Well, maybe a little: it was lame. The new wordmark now has a proper concept and solid execution. First, it clearly looks code-y thanks to the cursor device and the evenly spaced letterforms. Framing “code” also helps establish the clear focus of the site. The stenciled approach to DIN Next adds a layer of coolness that makes the wordmark more unique and memorable than out-of-the-box Lobster. I wish they had tweaked the individual letters a little further to make them truly monospace (perhaps with the exception of the “m”) as it would have created a link with the monospace fonts coders are used to working with.

The font FF DIN Rounded was chosen for its easy readability and modern look and feel. The new wordmark is set in CoDIN, a modified version of DIN Next that we customized with cuts to the letterforms. The primary typeface for the identity program is FF DIN Rounded Light, with DIN Rounded Regular used as the secondary font.

Pentagram project page

New Logo, Identity, and UI for Codecademy by Pentagram
Modified DIN Next, nicknamed “CoDIN”.
New Logo, Identity, and UI for Codecademy by Pentagram
App icon.
New Logo, Identity, and UI for Codecademy by Pentagram
Programming language icons.
The new user interface is designed as a kit of parts that has been applied across the platform for a consistent experience. Clean and minimal, the modular system uses the structure of a regimented grid to tie together the various elements. A UI toolkit and style guide was built for every element on the site, including headers, footers, form fields, button styles, sign up modules and other interactions.

Pentagram project page

New Logo, Identity, and UI for Codecademy by Pentagram
Tooklit. (Awesome image).
New Logo, Identity, and UI for Codecademy by Pentagram
Sample web pages. (You can see many more on Pentagram’s project page.)

In application — mainly on the user interface — the logo looks great and it’s never a bad thing to use DIN as a primary typeface, specially now that you can deploy it online with such webfont-ease. The gray color palette with accents of red and mint feels fresh and is easy on the eyes. From header to footer, it’s a simple and airy design that should make learning Python a breeze. Sort of.

Your opinion…

On Logo


Total

On Custom DIN


Total

On UI


Total
See what else happened on Brand New each year since publication began in 2006

Comments


Share ›

Spotted Around the web

New Logo for Fnatic

New Logo for Fnatic
 
Spotted Feb. 20, 2020

New Logo for The Group

New Logo for The Group
 
Spotted Feb. 19, 2020

Pinned Recent, Big Stories


Curated MELLOW YELLOW