Let me introduce you to INTRO

As the first project of our UI design program, we were assigned a randomly selected typeface and tasked to build a landing page to promote it. The objective was to showcase its character and usability, as well as our ability to apply the concepts learned in class, such as layer management, alignment, typesetting, font pairing, etc...

Ultimately, the goal was to present our typeface in an appealing way, to persuade users to download it and eventually convert into paying customers.

Phase One: Get to know INTRO

Although we were asked to put our first impressions of its visual appeal on paper, I was unsuccessful at judging INTRO by its cover, not being receptive to the emotions and vibe it was giving me. And as a fairly new addition to the typeface realm, INTRO didn’t have much of a pedigree to help me overcome its current quiet state. Born in 2012, created by Svet Simov of the Fontfabric family. Claimed to bring a calligraphy feel to an otherwise geometric shape, INTRO was made to be versatile. Although it is seen as a headline typeface, it does very well in smaller body text and is optimized for both print and web display. Making it the new Swiss army knife on the block.

However, much like people, typefaces can communicate a lot through their look and posture. When isolated, they speak louder than words. One night, after trying to connect with INTRO for a few hours, I closed shop for the night and once off guard, it spoke to me.

Phase Two: Refining a new language

Despite my love for abstractly triggered emotions, none of my previous endeavours had ever forced me to share those feelings using words and colours.

What INTRO seemed to say, was that it didn’t matter what you used it for. And it may have had an older frame, but had been refined to suit the needs of nowadays designers, with added style and subtle curves to please the eye. Its young status wanted nothing but to be heard, and that is where we met, at the cross-road of its coming out, and of my revelation that I was now emotionally opened to typefaces. To me, INTRO was like a stem cell; ready to bloom and be turned into anything the heart of its user desires.

So I set sail to go spread the news, but one thing was still standing in the way: Photoshop. This dreaded beast was not going to let me tame it in time to create a well designed, engaging and impactful landing page within a week. I soon found out that I would either have to hand out an incomplete project, deliver a finished, but rushed and unrefined piece, or to skip class and buy myself an extra day to work on it in order to meet expectations. Unfortunately, my current knowledge of the design field would not allow me to miss out on anything and I was told that done was better than perfect, so I ran with it.

Phase Three: Design Inception

As I believed that the purpose (the why) of INTRO was to be heard, the first thing that came to mind was a bullhorn, and the idea that it could be used for virtually anything made me see its power. I concluded that the use of bright colours with contrast would help highlight the fine details hidden within its otherwise bulky figure. Elements of geometry relating to its origin were incorporated, as well as rounded shapes to connect with both its older frame and newer look. The terms nostalgia and timelessness were also involved at the time of the design inception, as it will inspire a new generation of designers, the same way its ancestor did in the past.

Phase Four: Visual Language

After retrospection, I regret spending so much time on the mood board. Now I realize that it is just a visual version of the inception sheet and should be born out of pure inspiration rather than design. However, I did what I thought was right at the time and with only basic knowledge of photoshop, I was happy to gather what I did. Although it is versatile, INTRO strives to be heard. It is powerful and makes heads turn. It has a familiar feel and a strong backbone, nonetheless it is modern and does have an edge by breaking the pattern with elegance and variations. It is not aggressive, but it can’t be ignored.

BE HEARD, Empowerment, Edgy, Timeless, Familiar, Nostalgia, Geometry, Modern, Bright & Contrast

Phase Five: Delivery

Once all the pieces were gathered, I had to put them together with the main goal in mind. User conversion. The first item was the font. I picked the black alt at 75pt for INTRO’s first appearance and for the body text as well, this time in size 22 for an easy and pleasant read. As the content does not include much text, it did not overcrowd the page and left plenty of space for complimentary design. I chose to keep the kerning in the default setting, as it appeared adequate and visually sound. Tracking was brought down to minus five and leading slightly stretched to 31pt, for a less condense and clearer reading. INTRO was also used for the title of the other body text section to demonstrate its great pairing ability with itself. A 55pt font in black all caps was used to bring the attention of the user, as well as to respect a ratio of roughly two for one in font size.

I made sure to incorporate the colour palette of the mood board to reflect the same feel. I also kept in mind the positioning of items, based on my knowledge of the on-page heat map. Information was laid out to flow in an intuitive way and meant to draw users’ attention back to the heat zone. Calls-to-action were distributed evenly throughout the page to ensure users would not have to search for it when ready to download.

Overall, I am happy to have managed to deliver what I did with the skills and time I had. I have learned a lot during that week, not only about photoshop or the typeface world but also about myself, my ability to poke my head out of the box and to use what I know to understand what I don’t. I also take home an eagerness to do better and the knowledge that despite running out of time, the main obstacle to my project was my difficulty to value the items of my to-do list appropriately. Doing so will help me spend the right amount of thoughts on each section, maximizing my time for better results. Because something is certain, time is precious, it is limited and will always have the last word.