Through thick and thin: Style is always in fashion.

Didot typeface landing page UI project.

Image for post
Image for post

Introduction:

This case study gives an in-depth look at my design process for a typographic specimen landing page for Didot, a Linotype typeface created in the late 18th century.

To create a landing page that showcases the typeface in a creative and functional way and is optimized for conversion and to demonstrate the ability to apply the concepts learned in class, such as alignment, typesetting and layer management.

Adobe Photoshop

Research:

Image for post
Image for post
Didot typeface in the 1818 edition of La Henriade by Voltaire

Didot is a group of typefaces named after the family of French printers and typesetters. The most famous of the Didot typefaces were created between 1784 -1811 by Firmin Didot. One of the most celebrated uses of the typeface is still the 1818 edition of Voltaire’s “La Henriade”.

Since its debut, the Didot typeface went through many revivals that allowed for the typeface to move with the times by being adapted for use in the hot metal typesetting, phototypesetting, and digital mediums.

The 20th century made Didot the iconic font it is today. Thanks to its delicate but bold appearance - characterized by the extreme contrast, hairline serifs, and vertical stress of letters - it attracted the biggest names in the fashion industry such as the Harper’s Bazaar and Giorgio Armani.

Image for post
Image for post
Variations of the Didot typeface in use

Design Process:

After I finished my research I was fully aware that what I had to work with was one of the most iconic typefaces of the last century. I wanted to present it in a new and fresh way - I was even pondering getting away from Didot’s relationship with the fashion industry. But digging deeper into the history, and understanding its elegant, refined, and bold-but-almost-translucent quality, I knew that the only way to go forward with this project was to embrace Didot’s unbreakable bond with high-end fashion. Go bold, stylish, loud, and elegant.

Communicating a message is much easier once we know who we’re talking to. Adapting an appropriate language, visual tools and deciding on the content suitable for the audience is extremely important.

Thinking about my target audience I decided right away that they are a graphic designer, working in a fashion industry related field and looking for a headline/logo suited typeface.

So, without further ado, please, meet Becca. A young graphic designer who just landed a job with an online fashion magazine. She’s looking for a stylish and timeless font that would work well with fashion editorials.

Image for post
Image for post
Becca

Knowing why we create is important. It gives the design it’s meaning, pushes us for better solutions and keeps us focused.

I struggled with the “Why” of this project, at the beginning I focused only on the audience. After getting some feedback from my instructor I understood that the “Why” of this project is hidden in the typeface itself, it’s Didot’s qualities that are the source and the reason for this landing page existence.

With that in mind, I used the Design Inception Sheet to define the mood and the visual languages of my design.

Image for post
Image for post
Design Inception Sheet

Didot is a typeface of extreme contrasts; it encapsulates both feminine and masculine qualities. The Design Inception Sheet helped me realize that the design of the landing page has to be a marriage of both with an ambiance of luxury and elegance.

For me, nothing says “bold and feminine” more than red lips. That is why a striking image of red lips was the basis of my mood board. I also included vintage magazine covers and imagery evocative of high-end brands and French style.

Image for post
Image for post

The Design

Sketching is not my strong suit, at first I struggled to understand what the purpose of sketches is, exactly. It was really difficult for me to work on a wireframe without having it immediately translated into a mid- fi prototype. However, I decided to give it a try. I knew that I wanted to include a beauty portrait in my design, even had a specific photo I took in mind. That’s where the sketches proved to be helpful as they helped me decide where I could place the photo in relation to the headline and text boxes. I translated my sketches into hi-fi mockups using Photoshop and started tweaking the exact placement of the elements.

Image for post
Image for post

Final Design:

Image for post
Image for post

“Through Thick And Thin” is descriptive of Didot’s extreme weight contrast between thicks and thins followed by a statement relating to the unfading appeal of this typeface.

I used a simple beauty shot as a hero image to illustrate Didot’s unobtrusive characteristic. The pop of color on the lips echoes exudes the mood of vintage elegance and reinforces the statement to the left.

I also chose to highlight some of Didot’s attributes like unbracketed serifs, ears, and loops.

Since Didot is a typeface with a very rich history I wasn’t able to write about it in depth. Instead, I focused on the most important facts and the typeface itself.

I included a photo of perfume to illustrate a possible use of Didot on a high-end product and presented font pairing suggestions.

The tags will be presented in the form of an interactive carousel presenting brand logos that use the Didot typeface.

The magnifying glass will allow for a detailed look at each specific character.

In the future, I would like to include a “read more” section that would go further into the typeface’s history and specifications.

After presenting the landing page to my instructor I was told that the Call To Action button doesn’t really adhere to the current UI standards and that I might try changing it to a rectangular button. I would like to be able to have this feature A/B tested. I strongly believe that the circular button works well with the design and hope that this choice wouldn't negatively influence the conversion rate.

Conclusion:

This project taught me a lot about the importance of intent and research. I was positively surprised by the fact that following all the steps of the Design Process made my ideas more refined and my vision clearer.

I thoroughly enjoyed the process and am looking forward to implementing the interactive elements once I learn more.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store