Modern Classic

The conditions were ideal. One of great retail brands of the world, the inventor of denim. A brand with a rich history that not only evolved with the spirit of the times, but in some ways, was part of progress itself.

But online, it was a mess. Stuck with an albatross e-commerce platform bound by maintenance contracts that hindered innovation. Our mission: design over it.

This was January 2012, a perfect time to completely re-invent the Levi’s brand, online. Combing through the vast amounts of material created by W+K for brand and seasonal campaigns, and in-house brand design, and bringing it to life online like never before. Over 6 months of design concepts, and another 6 months of execution, we took the best practices of the time, and applied them in a way that amplifies the character of the brand, while better serving a varied audience on their various devices.

The plan was to start with the global platform, and unify all countries outside the USA with the same design, and then bring that home to the USA.

The final product is rough around the edges, and five years on, looks dated. A few ideas live on in the current website. Like any first attempt, it was a big step forward, but needed ongoing edits, care, improvements. It needed the kind of relationship we couldn’t provide, as an agency too expensive to keep around, for a brand likely planning to build an in-house team.

Our success was in getting a big brand to start embracing new at the time but now commonplace ideas that would help make e-commerce part of everyday life, and eventually prepare them for the mobile present we live in today.

Smart Layout

This wasn’t a new idea in 2012, but it wasn’t something big brands were doing yet. That customers would use a phone as readily as a desktop computer to shop online was still an idea that had to be fought for.

Bold Images

Images previously reserved for print. Product, lookbook, campaign, brand, history: all impeccably photographed and an internet with the bandwidth to show it big and borderless.

True Voice

A brand that for a century had a truly American typographic character (and helped define what that means), suffered the scourge of Arial for decades. Finally, we had web fonts, but brands this big were still afraid to use them.

Brand Positioning

Dress for Purpose

Beyond workman’s denim: practical fashion, for men and women. This was the positioning for the products, so we applied it to the website. Make it elegantly functional; design it to do a job.

No tricks. Flat. Photos on white, black text. These were the days of iOS 6, but the thinking was Classic MacOS. And by going counter to the stylistic conventions of the time, we’d also align ourselves with the fashion brands Levi’s was chasing with its expanded clothing line and ambitions beyond denim.

Layout

  • Fluid
  • Expansive
  • Adaptive
  • Focused
  • Rhythmic
  • Narrative

Photography

  • Refined
  • Tailored
  • Natural
  • Emotive
  • Nostalgic
  • Reflexive

Typography

  • Unadorned
  • Direct
  • American
  • Printerly
  • Timeless
  • Pragmatic

This is a pair of Levi’s

Concept

Home Department Category Product Detail

Some ideas fell into place immediately: long pages of “filmstrips” instead of click-through carousels. Grids that behaved like text, wrapping with the page, centered like words. A loose layout that uses typographic contrast and whitespace as signposts.

Eventually, extra elements snuck their way in, adding more refinement, but also losing that initial naively spartan purity.

Revised Concept

Home Concept1_1 Concept1_3
The Levi’s® Brand Online

Style Guide

Tone

Simple

The straightforward, honest voice of the brand is best expressed when all distractions are eliminated.

Refined

Care and attention to detail, consistency, pattern, rhythm, elegance.

Bold

Fearless, confident. We express our ideas clearly. We speak in caps without shouting.

Classic

Built to last beyond fashion seasonality. History sets the stage for the future.

Color

Black

The strength of black is controlled visually through line weight and dotted lines.

White

White is negative space, or knocked-out elements on a photographic background.

Type

A Case of Confidence

Although uppercase text has become associated with shouting, historically, it's common in signage and commercial titling. The uppercase on Levi.com connects us with that history.

We reserve caps for titles and brief callouts.

Whenever possible, caps should be gently letter-spaced to allow the letters to breathe.

The Color of Weight

Instead of using color to denote visual hierarchy, we use font weight. Heavier type is optically darker, while thinner is lighter. This, along with size, white-space and border lines, allows for limitless variation.

As in photography, the constraints of black and white can be an opportunity.

The Right Face

Webfonts and CSS3 are the key to using Trade Gothic on Levi.com. In CSS, always obtain licensing through fonts.com for Trade Gothic.

Always ensure that the fonts are correctly mapped to their respective weights, to avoid the “fake bold” effect that distorts the typeface.

Layout

Home
Home

Department

This design seems so obvious, so pedestrian today, but at the time, the struggle was real.

The idea: users scroll without thought, without having to make any decision. But a click is a decision, it’s heavy.

Let the images loose and tell a vertical story, like a super-tall magazine, simplify the interaction to one axis, no clicks, and let it unfurl.

Home

Category

Home

Search

Home
Home

Product Detail

Home
Home
Home
Home

Outfits

Home
Home Home

Purchase Flow

Home Home
Home
Home Home

Fit Guides

Men

Home

Women

What’s your Curve ID?

Tell us about your shape to find your custom fit.

Home Home
Home
Home
Home
Home