Brand Everywhere: Myspace

In our continuing series, Brand Everywhere, we look at organizations who present a strong, seamless identity by standardizing their typography across all media. After our first case study on Ally Bank, today we switch gears to social networks, demonstrating the power of consistent typography in the relaunching of a well-known but reimagined brand, Myspace.

Myspace profile page

The new Myspace, designed by Josephmark, is unlike anything you remember from the infamous user-customizable disarray of the old social network. The new design approach could be considered more authoritarian/top-down, but results in a much cleaner, more sophisticated look. And there are still plenty of opportunities for users to customize pages, it’s just that now they’re offered within a clear structure and functional type.

In fact, the entire experience is driven in large part by typography. A broad variety of views and layouts are all anchored by a single type family, Benton Sans.

The new typographic look is obvious from the start, as Benton Sans welcomes new users and guides them through the process of creating a profile.

The new typographic look is obvious from the start, as Benton Sans welcomes new users and guides them through the process of creating a profile.

Mashable ran an in-depth interview with Josephmark CEO Ben Johnston and Creative Director Jess Huddart about the project, but we wanted to hear more about their approach to the type, of course, so here’s a quick Q&A with the firm:

Why did you select the typefaces? How do they support the brand?
We were heavily involved in selecting, refining and using the Benton Sans typeface. We were looking for a clean, modern, sophisticated font, but most importantly we were looking for something that aided the design, without overtaking it. So Benton Sans, being a fairly neutral font, was the front-runner from the beginning. Having a large family, with a variety of weights and availability of different languages also helped. This was partly why we decided against creating our own typeface.

The complex hierarchy of information on Myspace demands more than the standard regular and bold weights. The site is clarified through the use of variety of styles – from Thin and Light to Bold and Black.

The complex hierarchy of information on Myspace demands more than the standard regular and bold weights. Views are clarified through the use of a variety of styles — from Thin and Light, to Bold and Black.

How was the experience of licensing and implementing the fonts? Did you make any customizations to the typeface?
For such a massive site, licensing naturally took a bit longer to do. We worked with the guys at Webtype to make sure the font was completely web-optimised for both Windows and Mac, especially for sizes 14px and less. For a long time, designers have been limited by web-safe fonts, so we needed to cross-test on multiple platforms (from desktop to television and portable device) to ensure it was truly optimized for a universal audience.

Myspace’s new infographic views give musicians new insight into their fanbase. The clarity but subtle personality of Benton Sans shows, even in the figures.

Myspace’s new infographic views give musicians insight into their fan base. The clarity and subtle personality of Benton Sans is evident, even in the figures.

What other elements — such as color, structures, imagery, language — are key to the brand?
The new Myspace brand is exciting and raw, so we needed to design a platform that could complement this energy and immersiveness. We intentionally made the colour palette simple and neutral so that the emphasis is placed on the content, rather than the structure. During conception, the words “expansive”, “unconfined”, “free” and “full-screen” were used a lot. We wanted profiles to feel like blank canvases, where the user has the freedom and space to express themselves.

Big, bold type makes every search a more engaging experience.

Big, bold type makes every search a more engaging experience.

iPhone App

Myspace’s new look extends to their iOS app where Benton Sans is embedded and used exclusively throughout. The app not only offers a mobile-optimized view of the site but also tosses in the ability to create animated GIFs and listen to personalized radio stations.

myspace-app-content
myspace-app-prefs

Benton Sans replaces iOS’s standard Neue Helvetica for all UI elements, including the controls in the GIF animation creator.

Benton Sans replaces iOS’s standard Neue Helvetica for all UI elements — including content from the site, app preferences, and controls in the GIF animation creator.

TV Advertising

The identity type makes a couple of quick but significant appearances in the first TV commercials to air since the official Myspace debut. The raucous 30-second spots begin with “this is myspace” in the brand’s signature Benton Sans, and end with a list of Myspace URLs for the participants in the ad. These brief bookends are all one needs to associate the commercial with the new site. It’s a testament to the power of a comprehensive typographic brand.

myspace-ad

You can read more about the new Myspace design at Co.design and The Next Web. (Coincidentally, TNW launched a redesign using Benton Sans, too. No wonder they’re a fan.)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>