Introduction
Trade Gothic is a typeface first designed by Jackson Burke, who continued to
work on further style-weight combinations until 1960 while he was director
of type development for Linotype in the USA.
Like many gothic typefaces of the nineteenth and early twentieth centuries, Trade Gothic is more irregular than many other sans-serif families that came later, especially later ones like Helvetica and Univers. I designed a landing page to showcase the different styles within Trade Gothic and how they interact with each other.
Research
Through research, I found that Trade Gothic is an irregular typeface that has a certain personality and quirkiness to it, while still being versatile enough for everyday use. These qualities had to be reflected in the landing page, which also had to fulfill its central function of showcasing the typeface.
Target market
The target market included designers who would be interested in finding out more about a typeface. In particular, the landing page had to showcase the various styles within the typeface. Through domain research, I found that it would be very useful to have at least 1 section that could be edited by the user, along with a full character set somewhere on the page.
The Design Process
Design Inception
Why was Trade Gothic created? Because there needed to be a font that gives of a sense of reliability while still retaining a certain degree of quirkiness. This determined the creative direction for the landing page: functional, reliable, yet somewhat quirky.
Research showed that functionality and reliability are valued when it comes to landing pages for typefaces. As such, I decided to include a character set, a text sample that can be edited, and something to showcase all the different styles within the typeface. As for the quirkiness, I decided to express that through the colour scheme.
Mood
I aimed for a mood that was reliable, lively, assertive, pleasant, collaborative, likeable, and youthful, with a sense of humour as well. As such, I had to choose colours that evoked these things without clashing with each other.
4 Elements of the Visual Language
Colour: Bold, Vibrant
Movement: Strong, Forward, Deliberate
Shape: Sans serif, Irregular
Space: Clean, Uncluttered
Style Tile & Brand Guideline
The mood board went through a couple of iterations before I settled on the final version, which had a more focused colour scheme than previous versions:
I chose images that reflected the reliability, assertiveness, and the quirkiness of the Trade Gothic typeface. Detective Pikachu is quirky, so he was put on the mood board, which led to a certain shade of yellow becoming one of the featured colours. Likewise, the other pictures exuded reliability, assertiveness, etc. which gave us the remaining two colours.
Once we had the colours, I put together a style tile.
The drop of water, which I used for the hero image, evoked a sense of cleanliness, which is something that Trade Gothic is known for. The lighter blue is part of the top nav bar, which looked best when it blended in with the hero image. The rest of the images on the page were examples of Trade Gothic in action, so they weren’t put into the style tile. I chose not to have any other pictures to avoid cluttering up the page.
User Testing
Wireframes
My initial sketch included a couple of key features that were directly inspired by the landing pages in the domain research:
I soon realized that this was inadequate. For starters, there had to be a way for the user to obtain the typeface. In addition, the typeface includes a number of different styles, all of which should be viewable. Finally, it would be nice if the user was able to see real-world examples of Trade Gothic being used.
While I would eventually realize that some of the sliders made no sense with regard to the different fonts (e.g. they weren’t simply sorted from light to heavy), this wireframe did provide a basic structure for the page.
Usability Testing
I tested the mood board first, which led to changes in both the design inception and the colour scheme.
Testing with the prototype revealed that the top nav bar should blend in with the hero image. It was previously brown due to the colour scheme having brown instead of yellow.
Testing also revealed that there wasn’t enough contrast between the different lines of text over the hero image, so it was changed accordingly:
The sub-headings were changed to all caps and spacing between them was increased. The first letter of the body was also resized and put in a different coloured box to add a little bit of quirkiness:
Prototype
Finally, I had a prototype ready:
While this did showcase a lot of different functions, it didn’t have the same impact as a clickable prototype on InVision, so I made just that:
Conclusion
The highlight of this project was the hi-fi prototype, which I used to showcase the typeface in all its different styles. As a designer, I feel that I excel the most where UX and UI intersect, so creating hi-fi prototypes will probably be my main focus wherever possible.
Through this project, I learned a number of things, including the use of Photoshop to create prototypes, how to create a mood board, etc. In terms of meeting the user’s needs, it did very well, as it showcased the typeface in an effective manner while providing effective ways for the user to check individual characters.
While I did provide various font pairings within the landing page, they were all between different variations of Trade Gothic. For future versions of the landing page, I would like to add a section in which I explore pairings with other fonts, such as Times New Roman and Baskerville.