Intro: UI design for the typeface landing page
Intro font family: introduce versatility to you
I. Project
Project Scope | Design the landing page for a typeface: Intro
Timeline | 9 days
The audience | Designers who need to purchase the typeface
Audience goals | By understanding the typeface history and usage to purchase the font family
Opportunity | To demonstrate the characteristic and versatility of Intro.
II. Research
About the designer & design of typeface
Intro was designed by Svetoslav Simov in 2012. Svetoslav Simov who is the founder of Fontfabric was born in Bulgaria. His background was in industrial design.
Svetoslav Simov used constructed forms as a basis for his grotesque Intro, and invigorated the font with a number of friendly details like rounder shapes and cute finishes.
This San Serif typeface is famous for its geometric design and optimized kerning.
Obviously, it is fairly new and modern. Intro’s variety gives it the versatility necessary to meet any type of graphic design challenge.
The grotesque expresses a playful feeling, while the equal kerning between each letter reveals professional.
Usage
Intro is most suitable for headlines of all sizes, but it does well in a variety of text lengths as well. It is a perfect use for web, print, motion graphics. Also for t-shirts, posters, and logos etc.
Intro’s playful character and the fun atmosphere is perfect for invitations, fun activities’ posters and colourful packages.
Font Family
Intro contains 50 unique font styles and weights. It comes with corresponding italics, condensed, bold width. By digger more of the Intro design and usage. I was impressed by its versatility, grotesque and cute shape, but still professional looking due to its equal kerning.
My design inception was formed by the research findings.
III. Design
From the research findings, I come up with the why. To create a playful( due to its grotesque and cute design) & professional ( due to its equal kerning) image of Intro, and connect a variety of products with audiences. Thus make them purchase the font as the main project goal.
Design inception & Mood board
In order to express the playful feeling in my design, I decided to use the vibrant and young colours. Be inspired by the geometric design. The elements I wanted to use are triangle and round circle. In a way to combine them and make a grotesque feeling. For the movement, I would try to make the design not boring but playful and interactive. Since the colours might be too much for an interface. I am afraid it will look cluttered so the white space will help out with that.
Overall, I wanted to display a young & modern; fun & energetic mood for the Intro landing page. Here comes my mood board.
Sketches
I brainstormed the wireframes first to give out a whole picture that how I am going to lay out all the contents and elements. I created an S flow using the geometric shape like triangle and semi circle as the basic structure. And tried to place everything in a playful way.
I also used the elements that complement each other. Make the screens consistent when audiences scroll down with the smooth and fluent experience.
Since I would use a variety of vibrant colours, white space is given out here to balance out the screens. In this way, the screens will not be filled tightly. Moreover, the screens need to be clean and not cluttered to achieve user-friendly.
Style Tile
I listed out the design elements and inspirations in the style tile:
The buttons I will use in orange to draw the audiences’ attention;
Small elements that combine semi-circle with triangle to make them grotesque;
Vibrant colours to stress a fun and playful feeling;
Intro Black Inline as the font for title and intro regular as the body font.
IV. Prototype
For the first part of the landing page, I randomly placed the grotesque elements around INTRO to emphasize the title and attract audiences’ attention.
There are two drop-down buttons that allow users to search more of the font family. Movements are made in an interactive way.
White space is creating a contrast with the colourful and versatile design patterns.
I considered about the ending for a long time. How to make it more fun and also correspond with the beginning. The final concept is the semi-circle button becomes larger like a bowl, and all the elements drop down to the bowl as a triangle shape meanwhile pointing down to the main user goal- to purchase the typeface.
Please take a look at the further details in Invison — click here.
