Portal 2 Identity and Game UI

Tasked to create an identity for the sequel to Valve’s sleeper hit Portal, I explored several directions, many of which were variations on the original game’s solid mark, which employs a stylized portal in place of the ‘O’. An alternative direction that emerged focused on depicting a figure ‘portaling’ from one side of the mark to the other in an attempt to illustrate the franchise’s distinguishing gameplay mechanics. Eventually the left half of the portaling figure was omitted which immediately made it feel more dynamic and intriguing, and the Portal 2 logo was born. This was a departure from the original, but still paid homage to the signage contained in the test chambers of the Portal game world.

Portal2_logo

In the increasingly noisy landscape of video game branding, the Portal 2 mark stands out as a refreshingly simple pictographic logo. The stickman, as he has become affectionately known around the Valve test chambers, lends himself well to both a vertical lockup and an abbreviated icon.

Portal2_logo_variations

boxes

In addition to getting the job done in the standard website, banner ad and packaging applications, this little guy really popped at landmarks around the globe during the game’s launch. Browse the gallery below for a closer look:

 

Game UI

The menus and in-game UI needed to extend the brand of the title without clashing with the experience of the game itself. With the joint goal of allowing players to start or resume play as effortlessly as possible and to echo the foreboding (but fun) environment of the game, I set out mapping user flows.

P2_Play_flow_header

For the visual design of the menus, I drew inspiration from the backlit signboards that illuminate the eery high-tech test chambers throughout the game. As a nod to the game’s reconfigurable wall panels, transitions between screens consist of a grid of individually flipping tiles. The number of tiles corresponds with the necessary content area of each screen. I worked with Valve’s world-class environment artists to create background images which corresponded to the player’s game progress.

Portal2UI_main

Portal2UI_trans

Portal2UI_friends

In addition to the menus, I created a number of assets to support the game world including ‘ping tool’ icons used by co-op players to communicate non-verbally with their partners, hint icons, achievement icons, loading screens, and chapter titles.

Portal2UI_pingtool