UI Case Study: Roboto
A web page design showcasing the universal font
TASK
Design a web desktop landing page showcasing Roboto as a versatile typeface and encourage downloads.
PROJECT DURATION
35 hours
TOOLS
Pen and paper, Adobe Photoshop CC, Adobe Illustrator CC
THE TYPEFACE
Roboto is a geometric sans-serif typeface that is thoughtfully designed for a wide range of devices, sizes and resolution. It features 12 different weights and supports Latin, Greek and Cyrillic scripts. The Regular family can be used in combination with Roboto Condensed and Roboto Slab.
OVERVIEW
- Research
- Design Process
- Outcome
RESEARCH
First released in 2011, Roboto was designed in-house at Google by Christian Robertson to replace Droid as the Google system font for Android. Its objective was to look good in a wide range of screens — from a smartwatch to a slablet.
Classified as a neo-grotesque typeface, it’s composed with straight sided capitals and distinctive racetrack-shaped rounded letters. Unlike other grotesque fonts, Roboto allows letters to take up as much space as it needs and ultimately, making for an improved experience for the reader.
Roboto was not an immediate hit in some smaller communities — specifically with some Typography experts. It was dubbed as a “Frankefont”, meaning that it borrowed elements from other typefaces. Specifically from Helvetica, Myrida, Ronnia and Univers.
In 2014, Roboto was updated to address some of the criticisms but more importantly, the redesign allowed the font to truly come to its own. What exists today is the modern, yet approachable typeface. The makeover provides a preview of its future, unafraid to adapt as the digital landscape continues to evolve.
DESIGN PROCESS
Following a careful review of Roboto’s short history, I identified some anchor points to help guide my overall process —
- Careful craft involved in the design and development of the typeface
- Contrasting but balanced physical attributes of Roboto — modern, yet approachable; friendly but not casual; geometric lines with rounded curves
- Flexibility of its use
With these in mind, I began curating some inspiration to help direct the look and feel of the webpage, ensuring that all colours and textures related to Roboto.
COLOUR — Roboto being a pretty neutral font, I gravitated towards a monochromatic gray scheme. I wanted to make sure though that it doesn’t become too cold or boring and so, I added a bright accent colour. I chose orange since it’s typically associated with friendliness and confidence.
TEXTURE — I opted for subtle textures that are more abstract so that they didn’t took any attention away from the content.
WIREFRAMES + ORGANIZING CONTENT
In my initial draft of the wireframes, I was very keen on telling the Roboto story.After taking a step back and reviewing the objective, I realized that it was more important to be upfront with the practical attributes of the typeface to encourage download. Even more important was that I provided a CTA at different points of the journey.
OUTCOME
The final design uses a balance between contrasting elements. I wanted to make sure that the structure gave users the opportunity to learn about the font, as well as play with it. Similar with the visual itself, I ensured that clean lines were matched with more casual, organic strokes. It was also very important that I showed Roboto’s flexibility as a font used in a block of text and something that can stand on its own.
A CLOSER LOOK
CONCLUSION
Intended to be a flexible digital font, Roboto exceeds its purpose. It is slowly evolving into a universal font that can serve many purposes, whether digital or print. Of course, there is a best case use for it bBut when a typeface has the objective of simply being easy to read, then it may not have no limits.
