Playfair Display Type Specimen — UI Case Study

RED Academy UI Communication Program

The purpose of the P1 project was to create a purposefully designed typographic specimen for Playfair Display and showcase it as a desktop landing page.

The following case study will outline my process from research to prototype.

Research

A type specimen is a publication in which a typeface is shown and presented, detailing what fonts the typeface consists of. These specimen can be used by graphic designers and typographers to judge how a particular typeface behaves on the printed page, and to decide if they want to buy and use the typeface in question.

Moen, Denmark

History

Characterization

Design

Purpose

  • It is still quite rare to find a classical typeface tuned for display sizes

Influence

A comparison between William Martin’s Boydell’s Shakespeare venture, Baskerville by John Baskerville, and Playfair Display

Font Pairing

Places Used

The Design Process

Design Inception

Before designing the landing page I had to consider why would someone want to use Playfair Display. Using the history of the typeface I concluded the reason a designer would purchase the typeface.

“To provide designers with an elegant yet modern typeface that offers a feeling of sophistication to their content”

Mood

Combining classical and modern elements was a difficult tasks. It took boiling down the two themes to uncover what moods are shared between them. Contemporary, rich, classic, trustworthy, and elegant were feelings that I felt both expressed the modern and classical elements of Playfair Display’s mood.

Visual Language

The visual language used to showcase the typeface stems from the mood. Broken down into 4 categories I was able to paint a picture of how Playfair should be shown. Strong colours like navy, black, gold, and white give a feeling of sophistication. The space, shape, and movement of the landing page all take cues from the characteristics of the typeface’s design.

Mood Board

Style Tile & Brand Guideline

User Testing

  1. I first started with usage. Right away the potential customer could see what the typeface is used for and decided if that meets their needs.
  2. Next I created a style section so the customer could tryout the font to see if the design matched their content.
  3. Following the style section, I created the design section to give more detail about the actual typeface. This section is important because it breaks down the key elements of Playfair Display differentiating it from other serif typefaces.
  4. Finally I finished the page with a download section that reiterates the key points of the typeface and provides a simple CTR for customers to download the typeface.

When creating the design of the landing page I had originally started moving towards a more flat design. I had flattened the images in Adobe Illustrator to give almost a painted or drawn feeling. Although this created continuity between the images it gave the landing page too much of a classic / interior design feeling and lacked the modern touch that I was working so hard to integrate. For the final design I recreated the inspiration picture as the background and used modern opaque panels to make a place for easy to read content to be displayed.

Design iterations of the landing page

Prototype

Conclusion

See more on my portfolio at www.devonseidel.com

Hey, I’m an experiential marketer and designer. If I'm not learning new Illustrator techniques I’m at a craft brewery or listening to new music. devonseidel.com