Typographical Specimen
Introduction
Our initial project in the UI program is to design a web desktop landing page for a typeface. The typeface I am designing for is Rubik. In this case study, I am going to show my design process and the current prototype of the landing page design
Project goal| A well structured and designed web desktop landing page that showcases the content and context about Rubik font.
Users | People, especially designers who are looking for a clean simple free typeface
Project Timeline| 1 week
Design Process
Research
History
Rubik is a sans-serif typeface designed by Philipp Hubert and Sebastian Fischer of Hubert & Fischer, a design studio based in Berlin and New York. The typeface was commissioned by Google for use in a Rubik’s Cube exhibition, hence the name Rubik. The design features stout proportions with rounded corners and low stroke contrast. The entire five weight family is open-source and available for free on Google Fonts.
About Rubik’s Cute
The Cube was invented in 1974 by an architecture professor Ernő Rubik, as a teaching tool to help him and his students better understand space and 3D. The Cube challenged us to find order in chaos.
Design Inception
Following the research, I started on the design inception. This process helped me to determine why this font is interesting and why people would choose this font over others. Developing the why first allowed me to find my design direction and stay focused on it.
After my research, I got really interested in some characteristics about the font that Hubert & Fischer wanted to designate — the letters fit perfectly in a single cubelet of the Rubik’s Cube. I decided to also use Rubik cube as the inspiration and guideline for my own design as well
Why | Rubik Cube — finding orders in chaos
Mood | contrast/ focus/logic/but playful
Space | simple/geometric/square
Colour | yellow / Orange / Red / Green / Blue/ white/Black
Movement | Grids/sections/bold/symmetrical
Moodboard
The images that make up the moodboard contains colours and elements from Rubik’s cube which reflect the inspiration for Rubik font. I want to use this moodboard to show how colours and shapes can be arranged in certain ways to reflect on “finding order in chaos”
After creating this moodboard I decided to design a colour palette to make sure that a colour hierarchy can be found when viewers are looking at the landing page.
Typeface Properties
Classification: sans serif
Font Family
……………………………………………………………………………………….
Final Prototype
Hero Image
By using red- the primary colour from my design colour palette to draw visitors attention, using a rotating Rubik’s cube like Texts to designate the inspiration for the font. 1366 x 768 — banner size that can fit the whole screen of the laptop.
Content Transition
It shows the taking on the Rubik’s cube — colour and shape and by using a 3x3 square grid to show the character of the font — fits in a single cubelet of the Rubik font.
Font Family
By rotating the text 45 degrees to create a point down rectangular to guide viewers eyes to the next part.
Font Description
Similar to the font style, I keep the grid look from Rubik’s cube. This part shows some more thorough information about the font.
Exhibition Gallery
I would like to show some designs from the online exhibition as well at the last part of the landing page to show more content about the exhibition which is what the font was designed for in the first place.
Footer — CTAs
There are a total of 2 call to action (CTA) buttons on the landing page — top and bottom.
They are strategically placed on the page. The top CTA is primarily for users who already knew about the font and want to download instantly. The CTA at the bottom of the page serves as the last gentle reminder to download font after
Key Takeaways
The most important takeaway from this project is that always find a why behind your design decision and also stay focus on the why you find for the design product. The design inception also helped me focus my design elements on the user. I have learned to continuously carry this design process for future projects.
