Case Study

Variety500

View Website

Variety500 is an index of the 500 most influential business leaders shaping the global $2 trillion entertainment industry.

Intro

Variety500 was an entirely new product that Variety launched in the fall of 2017. For the site I wanted to use big and bold typography and overlapping elements to create some motion. Profiles are typically a little dry in content so for this project I wanted to go heavy on graphic design elements and large on photography. The photos of the honorees were sourced from various places so to create a uniformity to the site I had the background of the photos removed and went with black and white. The overall effect was to intended to make it appear like each honoree was photographed in the studio.

Services

Web Design, Art Direction, UI & UX

Clients

Penske Media Corporation

Color & Texture

For the site I wanted to go in a clean and airy yet bold direction. I used a nice shade of red to give pops of color and create the bold graphic designed look. A light yellow diagonal pattern was used to create some texture and too also tie the site into the Variety.com redesign.

Red

#ED2929

Black

#000000

Diagonal Lines

Texture

Austin Text
Teko

Typography

For the typography of the site I mixed the sans-serif font Teko with the serif font Austin. The beautiful curves of Austin gave a rich quality to the typography and displayed elegantly at the larger sizes that I wanted to use it in. The condensed nature of Teko made it a great pairing to contrast with the large and airy Austin.

The Designs

Homepage

The homepage of Variety 500 is intended to both inform the viewer of what the Variety 500 is as well as give them a destination for exploring the honorees. The site features a sizzle reel at the top of the page which tells the story of the idea behind the project.

The spotlight section is a handpicked selection of a few of the honorees.

Who makes up the Variety500 section allows the viewer to see at a glance the different business areas, nationalities and job functions that the honorees makeup. If one field is of particular interest the category can be clicked which leads to a search results page that fits the criteria.

All of the various animations and states for each section were prototyped using Principle and given to the developers who did a great job at implementing.

Profile Page

The profile page is where a user takes a deeper dive into getting to know the honorees.

Search Page

Section front pages were designed to stand out from tag pages by featuring articles at the top of the page in a large format. The scale of these stories is intended to create a feeling of importance and highlight the best content of the day from that category of content.

Mobile Designs