Case Study: San Francisco Type Specimen
What is a Type Specimen?
In typography, type specimen refers to any presentation of a certain typeface to showcase its design and/or use.
Project Goal
To create a well structured and designed web desktop landing page that is optimized for conversion and showcases the features and benefits of the typeface San Francisco.
Research
The Typeface
As the first step of my design process, I’ve conducted research on the San Francisco typeface that I’ve chosen to create a landing page for. This was to get a better understanding of the typeface’s history and to develop a sense of the design direction I wanted to go in.
San Francisco is a sans-serif semi-grotesque font, created by Apple in 2014. It is inspired by Helvetica Neue and DIN and has 5 variations. San Francisco is better optimized for mobile devices, as the pixels are closer together which is easier to read and the text overall seems friendlier than it’s predecessor, Helvetica.
Planning
My design direction was inspired both by the city of San Francisco and Apple. The first initial thoughts I had with the typeface San Francisco is ‘golden’. This is because of the famous Golden Gate Bridge. The main reason why I’ve chosen this typeface is that I am a big fan of Apple products and have recognized the typeface when I did preliminary research on it. Some of the elements of San Francisco, the city, came to the top of my head. Naturally, I felt like I would include some elements of the friendly city of San Francisco.
Design Inception
An inception sheet was created in order to compile my ideas together and get a sense of the overall mood I wanted to create for my landing page. I believe this was an important step to do before going ahead in Photoshop and creating a design that I would be satisfied with.
Mood Board
Combining the two elements of San Francisco and Apple, I’ve incorporated these two characteristics into this Type Spec. The overall mood board that I’ve created has a general theme of blue and orange (complementary colours), as you can see below.
Design
Initial Ideas
My initial thought process on creating this type spec was to have it more image-dominant and to showcase images that represented different elements of San Francisco, the city. After some time, I’ve realized that my design was a bit distracting and wanted to simplify it more. As I initially wrote on the design inception sheet, I wanted the design to come across as simple, modern, and clean.
Landing Page Structure
The overall landing page structure is meant for the user to become informed with the typeface variations and how it looks on different coloured backgrounds. I felt that it was important to mention the history towards the top of the landing page in order to give the user context as to who, where, and how the typeface was developed. My first design iteration was busy and lacked a sense of direction. As you can see, I was conflicted on where the text and images would be located, and if there were to be overlap. After some further edits, I’ve made a much more simplified final version of my landing page that I am quite proud of.
The call-to-action button is a main point of difference as it is placed centrally on the page. Most landing pages position their buttons towards the top or the bottom of the page. The reason why I’ve chosen a different approach for the button position is for it to stand out and encourage the user to download the typeface.
Final Deliverable
After completely redesigning my final landing page from my initial iteration, I am much more satisfied with this final result. A few images are included to communicate the ‘golden but simple’ vibe of this typeface. There is a balance between text and visuals, to make it clean, creative, and easy on the eyes.
Conclusion
As a Photoshop beginner, I’ve encountered the main challenge while creating my design process: Finding design elements that would communicate the overall mood of ‘simple, friendly, easy, happy, modern, clean, and creative’. Also, as a Photoshop beginner who has never used this amazing piece of software before, it was challenging to learn all of the tools that I had at my disposal.
