Typology
From a typeface's history, to its form and function, TYPOLOGY offers a wealth of typography materials to strengthen a designer's typographic knowledge.
Skills
UX Design, UI Design, Branding
TOOLS
Adobe XD, Photoshop, Illustrator, Figjam
TIMELINE
Two weeks, Individual
Overview
TYPOLOGY provides designers an intimate knowledge of the fundamentals of typographic identity through an app. It details a typeface's history and its creators, its modern usage, and offers a deep-dive into its form and function. Designers can access a wealth of typographic studies, helping them strengthen their resolve with typography and its uses.
Context
How good are you with remembering faces?
I consider myself to be pretty good at recognizing people's faces, but when it comes to fonts, not so much. As a designer, this is a national tragedy, but it's something I've tried to work on. You see, I've found myself on many occasions searching the web for a tool that would help me become better at identifying and recognizing fonts. After all, they're just as important as the faces of my friends!
Unfortunately, aside from Stephen Coles' Anatomy of Type, and Typographica.org - both of which offer knowledge and commentary to a limited degree, what I was looking for simply didn't exist. With this, I wanted to create an all-in-one pocket guide that offers an active role in learning typography and fonts, teaching even at an atomic level by delving into a individual glyphs and typographic characteristics like x-height, ascenders, of a font family and more!
When an interface design course I was taking asked us to design an app that provided a product or service with the intent of educating a group of users, I thought it would be a fantastic opportunity to bring this to life. Formally, the deliverable only required a finished high-fidelity product, but I did carry out some usability formalities before designing.
Unfortunately, aside from Stephen Coles' Anatomy of Type, and Typographica.org - both of which offer knowledge and commentary to a limited degree, what I was looking for simply didn't exist. With this, I wanted to create an all-in-one pocket guide that offers an active role in learning typography and fonts, teaching even at an atomic level by delving into a individual glyphs and typographic characteristics like x-height, ascenders, of a font family and more!
When an interface design course I was taking asked us to design an app that provided a product or service with the intent of educating a group of users, I thought it would be a fantastic opportunity to bring this to life. Formally, the deliverable only required a finished high-fidelity product, but I did carry out some usability formalities before designing.
TYPOLOGY logo
USER PERSONA
Someone with a creative knack
Even though I wasn't going to have the chance to scout prospective users and designers for insights, I still wanted to create a persona to help guide the designs that I would create. I made sure to include brief points related to their goals, needs, and frustrations, so that the product functionalities could be rooted to a benefit that could be targeted to someone.
User persona crafted for Typology
user flow
The experience of learning typography
As the project was going straight into high-fidelity prototyping, I also opted to create a user flow to better visualize the different pathways and actions a user could take with each task I had set out to do. This was particularly helpful when developing screens and reusable components for my tasks, as I able to plan for the actions that took place at each stage.
Creating guidelines
Design artifacts like Personas and User Flows can still be important, even when not required, as they help bring focus and context to the designed deliverables.
HI-FI PROTOTYPE
Presenting an encyclopedia for typography
Following the direction of Casey's goals, I focused on supporting his needs by creating an archive of typography knowledge and exercises that weren't comprehensively presented together in other resources. With this iteration of the prototype, TYPOLOGY is currently split between three main areas:
Home
The homepage acts as a dashboard, displaying progress for the fonts that have been read by the designer, while making suggestions for popular fonts that are hot within the community. This overview consolidates ongoing learnings and brings new material into a designer's view.
The homepage acts as a dashboard, displaying progress for the fonts that have been read by the designer, while making suggestions for popular fonts that are hot within the community. This overview consolidates ongoing learnings and brings new material into a designer's view.
Deep Dive
For each typeface selected, designers can browse through a detailed write-up on the font's designers, why it was created, common uses and applications. It also includes visual examples of its appearance in media, the font's anatomy and their glyphs.
For each typeface selected, designers can browse through a detailed write-up on the font's designers, why it was created, common uses and applications. It also includes visual examples of its appearance in media, the font's anatomy and their glyphs.
Challenge
Under Challenge, designers can use flashcards to strengthen their memory or quiz themselves to test their learnings. Quiz mode offers the ability to select different genres, allowing the designer to pick what they want to practice. They go through a multiple-choice quiz that provides a final score at the end.
Under Challenge, designers can use flashcards to strengthen their memory or quiz themselves to test their learnings. Quiz mode offers the ability to select different genres, allowing the designer to pick what they want to practice. They go through a multiple-choice quiz that provides a final score at the end.
Branding
Inspirations from pen, ink, and paper
When it came to figuring out an identity system for TYPOLOGY, I wanted to incorporate a thematic approach to what it was representing. As I've mentioned earlier, since type lends a given space with its own quirks, I thought it would be fitting to have the typography mold the context. I selected a neutral canvas to let the fonts and weights drive the identity. The color palette consists of various shades of grey, as well as a royal blue to make odes to traditional pen, ink, and paper.
Style guide and components created for TYPOLOGY
Reflections
Turning another page
Even though the project was gifted only but a short timeframe, I was really proud of this was because the outcome was something that still has practicality and can be heavily expanded upon. It may only possess limited depth now, but for how rare consolidated typography resources can be out there, it truly has merit to snowball.
I would love to expand on TYPOLOGY one day when I can integrate more features and thoroughly walk through a proper development process with it. Even though these attributes were mostly absent, when I pitched this idea, several designers mentioned that they would find tremendous value with an app like this - which I happily take as a win.
To realize TYPOLOGY further, these are some of the next steps I'd explore with:
I would love to expand on TYPOLOGY one day when I can integrate more features and thoroughly walk through a proper development process with it. Even though these attributes were mostly absent, when I pitched this idea, several designers mentioned that they would find tremendous value with an app like this - which I happily take as a win.
To realize TYPOLOGY further, these are some of the next steps I'd explore with:
- Conduct user testing to get further insights on how prospective designers are finding the interface, the layout, the experience, and what they think could be added on.
- Complete the challenge experience as I only prototyped the Quiz component and not Memorize. Getting user feedback would help build the Memorize task, so it can be created with concrete user behavior and data.
- Adding more details to the Deep Dive section to fully support its role as an educational archive. Designing apps with no pre-existing content is especially hard when it's a three-way juggle between usability, design, and content writing. As this was a design course, my focus wasn't content writing, but each type page deserves to have its potential realized.
© jeffrey chan, 2024.