Typographical Specimen-Poppins

Victor Jianto
Nov 2 · 6 min read

Goal

The goal of this project was to create a well structured and designed website that showcases a typeface chosen from a set of typefaces that were pre-selected, introducing viewers to the typeface, how it can be used, and whether they should download the typeface.

Typeface

Poppins really popped out from the list with its minimalistic and geometric design, so I decided to choose Poppins to work on for this project.

Objectives

There were also several other project objectives: learning to use of design inception worksheet (I will explain what this is in the next section) and mood board to guide the design process, thinking about composition when designing, and learning how to use Photoshop.

Design Inception Worksheet

The design inception worksheet that guided the Poppins typeface website design

Purpose | The purpose of a design inception worksheet is to guide the overall direction and the different elements of the project’s design in three different hierarchies: the why, the mood, and the visual language.

Why | The “why” is the core and main purpose of the project: introduce and showcase the Poppins typeface.

Mood | The mood is the overall feeling that the project is trying to achieve. Poppins is a relatively new sans serif typeface with a very clean and geometric design. The first things that came to mind were the sans serif typefaces used by companies such as Airbnb (Cereal) and Spotify (Proxima Nova).

Airbnb’s website landing page: https://www.airbnb.ca/
Spotify’s website landing page: https://www.spotify.com/ca-en/

The websites of these companies all have a modern, sleek, and invokes a chill and relatively light-hearted feeling. This lead to the decision of creating a chill and light-hearted mood with a sleek and modern look for the Poppins website.

Visual Language | The visual language consists of four categories: space, color, movement, and shape. The design decisions for the four categories of the visual language are guided by the mood the website attempts to evoke.

Space | The main contents are positioned on the center of the website and a generous amount of negative space is given throughout the website to highlight the main contents that showcase the Poppins typeface. The amount of space dedicated to the main content changes between different sections of the website, changing between spacious and dense, to showcase how Poppins would look when being used to show fields of text versus being used to show a few lines of text.

Color | The background of the website consists of only colors to highlight the typeface shown on the website. Gradient colors are used for the background to give the website a more modern and sleek look. Different hues and shades of blue are used for background colors because blue gives a chill vibe that the website intends to evoke. The shade of the background colors transition from bright to dark to showcase how the typeface would look when used with different shades of background colors. The website will have white texts so that the main content can stand out from the background to be legible.

Movement | Viewers of the website are expected to browse through fairly quickly to learn about the typeface and decide whether to download it without using too much time. The contents of the website are designed to be browsed from top to bottom, organized by guides and headers that allow for easier navigation through the website and better understanding of the contents.

Shape | The shapes used on the website are simplistic and geometric to complement the geometric design of the Poppins typeface. Circles, straight lines, and rounded rectangles are used.

Moodboard

The moodboard that guided the design of the Poppins typographical specimen website

Left | The image on the left gave an example of how texts can be organized using lines.

Middle | The nine images in the middle show different scenarios when the Poppins typeface can be used, whether on a website, on an app, or on a product. The three circles, placed on the border of the images, show the possible gradients of colors that can be used for the background of the website.

Right | The image on the right gave me the idea that I should organize the information on the website with lines and dots that connect together and guiding viewers through the website from one point to another.

The final design of the Poppins Typographical Specimen website

Call For Action Button

One feedback was that the design of the call-for-action button to download the Poppins typeface on the landing page is not succinct enough. It was recommended that the call for action button should say “Download Now”. Personally, I think “Download Now” is effective but it is a little bland and boring. I might change the call-for-action button to “Get Poppins”, that’ll be succinct enough.

Current landing page call-for-action button design [left], recommended call-for-action design [middle], potential new call-for-action design [right]

Font Size + Line-Height

Another feedback was that there are certain sections where the font size and line-height are a little too small, making the content a little hard to read. This is an easy issue to fix. Since there are plenty of negative spaces around the content, enlarging the font size for the content would not cause the website to look overcrowded.

The font size and light-height of the body text in the font pairing section are too small.
Increased font size and light-height of the body text in the font pairing section.

Fonts

Learned a lot about fonts and typefaces. Not only about the Poppins typeface but also about typefaces and fonts in general: the history of typefaces, how and why typefaces were created, the anatomy of a typeface, and font pairing. This newly learned knowledge about fonts and typefaces will definitely add value to the design of future projects.

Design Process

The design inception worksheet played an important role in the development of the design for the website. It helped organize my thoughts and connected the different elements of the design with the main goal of the design. This was my first time using a design inception worksheet, and I will use it again in the future.

Photoshop?

The reason for using Adobe Photoshop for this project was to give students an opportunity to learn the basics of Photoshop. However, Photoshop is not the most appropriate software to use for this project. I had to select every individual line and shape to change their properties, instead of being able to select all the similar lines or shapes with the command “select same” in Adobe Illustrator and change their properties all at once. There are 460 layers in the Photoshop file. Selecting, tweaking, and moving objects and texts took a little while.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade