a Sentimental Sentinel Story
GOAL:
The goal was to create a well structured click-through web desktop landing page to increase sales in the typographical family of Sentinel. Visual directional cues such as spacing, colour, encapsulation, as well as call to action buttons were used to reach this goal.
APPLICATIONS:
Photoshop, InVision
A FIRST ENCOUNTER
Every project definitely has a trial and error period. As an individual just dipping her toes into the world of design, I’m sure these tribulations were bound to take place. What I did not expect, was that my struggles with Sentinel occurred really early on in my journey. From the day we were assigned our fonts for this type spec project, I had difficulty even finding information regarding this font. When searched upon, the top hits of Sentinel brought only information regarding institutions, geographic locations, as well as a well known character from a comic. Digging deeper, I was only able to find a paragraph that was rephrased on one of the two available sources.
“Sentinel: the slab serif that works. For everyone who’s ever wished Clarendons had italics, everyone whose favorite slab serif is shy a few weights, and everyone who’s ever needed a slab serif to thrive in text: we designed Sentinel for you.” — typography.com
“Sentinel is a slab serif typeface designed by Jonathan Hoefler and Tobias Frere-Jones. It was released in 2009 through H&FJ (now known as H&Co). Sentinel was created to address the shortcomings of classical slab serifs such as Clarendon, such as the lack of italics and insufficient weights. With six weights and matching italics, Sentinel makes an excellent font for display use as well as body copy.” — typewolf.com
With the lack of information available regarding Sentinel, I had to incorporate my own emotions and feelings (trust me, this was definitely a love-hate relationship). Some keywords that popped up during this time included classic, antique, constructed, iconic, bold, etc. With these words, I plugged them onto a design inception worksheet describing the visual language, mood and the core personality of Sentinel.
MATCHMAKING
In order to show the versatility of Sentinel, I played with its’ different weights and also paired them up with various complimentary fonts. For example, I matched Sentinel bold in all CAPITALS with its’ qualities of craftsmanship, and Sentinel italics with its’ iconic personality. Furthermore, I found that Tungsten made for a great partner along with that of Proxima Nova Light (just to name a few). Some worked quite flawlessly but some definitely looked better in my mind than on screen.
THE DATE
As the days passed, Sentinel grew on me. If I had been smart enough to keep some of the original mockups that I had created, you would be able to witness the maturing of this passion. In the meantime, I learned to change up some of the font pairings as well as the visual layout of things. The wireframes I put together, changed endlessly for this project. One wireframe would work for the personality and mood I had created, but would look horrendous for another. It took us to version four of the wireframes before I could envision all aspects being covered.
The best part of this process was with the colour pairing. I loved how the contrast of the red and grey tones worked so well with each other and would compliment nicely regardless of a dark or light background.
THE BITTERSWEET ENDING:
Like all things nice, they must come to an end. Sticking to the timelessness and craftsmanship values that first came to mind when I laid eyes on Sentinel, ended up giving me a bold but iconic final design. Although it didn’t have that consistent flow throughout the landing page, I found that the components gave Sentinel a good balance between what it was and what it can become.
Until Next Time…
