Typeplay: Play, Discover, Maintain and Pair Typefaces

Idea

Initial Research:

  1. Graphic Designers
  2. User Interface Designers
  • Discovering new typefaces is hard (unless you know the name).
  • Need for more knowledge around matching/pairing typefaces.
  • Type designers post a lot of new typefaces that they have designed and look for feedback from early users.
  • Looking for that typeface (Discovery)
  • Seeing if it is paid or not if paid then making the decision of getting it before even trying it out
  • Download
  • Extract the files
  • Install them
  • Re-start Figma :(
  • Finally we’re ready to try the typeface. But what if it doesn’t goes well with the use case? GO THROUGH THE STEPS AGAIN
I have kept those 2 typefaces in a block is because they go really well together
  • Discovery becomes easy, since we’re given a single repository and trying them out first, we’re more likely to make a better decision. Also trying lots of typefaces makes it easy to filter out the bad ones ahead.
  • Economical, because we’re paying for the time we’re using the typeface.
  • Maintaining typefaces with Collections and Pairs.
  • Faster workflow, because most of these steps happen through browser (10–12 websites in a visit).

Designing a Figma Plugin

Ex, Unsplash, Font replacer, Visual eyes
Using developer tools to find out the font sizes spacing and colours

Information Architecture

  1. Collections (maintaining) — System typefaces, Collections, Pairs, Typeplay Pro
  2. Playground (playing) — For searching and exploring new typefaces
Collections (Left icon), Playground (Right icon)

Visual Design

Basics first

Collections

  • Typefaces — Typefaces already installed in your system
  • Typeplay pro- Only for pro members who want to add typefaces in their Figma file
  • Collections — To maintain typefaces with similar use-case and properties
  • Pairs — Maintaining matched/paired typefaces for later
I’ll also share some facts and quotes that really inspired me
  1. Preview of the Type family, which is large enough to get the basic idea of its style
  2. Name of the Type family
  • Add — Add the typeface to a collection
  • Play — Start playing with the typeface in the playground
List view
Hover states for list view cards
  • Recent — Recently added, Last play activity
  • Typeface classifications — Sans-serif, Serif, Display, Script, Monospace
  • Sort Typeface from a Collection — Select a particular collection and all above sort options will be available to sort typefaces within the collection.
Different states for Sort card
Sort results
When multiple sort options are selected
Search results
Different states for a Collection’s card
Collection
Sort option clicked “Monospace”
Settings for the collection
On hover, it also shows a preview of the Pair
When there’s a pair of 3 typefaces, the 3rd typeface is visible on the hover state
Global Collection of Type Foundries
We can also click on a Type Family and know about its Designer and Foundry

Playground

By default always Global Collections dropdown will be open to help user explore
Meta data is also shown with the searched typeface- Designer, License
On hover, you can add the typeface to a collection or remove it from the playground
  • Background colour
  • Layout
  • Screenshot (It will put a screenshot of your canvas in your Figma file)
  • Font
  • Size
  • Font colour and Background colour
Having more than one typeface in the playground enables the option for pairing
Hover state for adding them as pair

Learnings

  • With every other design project that I’m doing, the thought behind “Iteration” gets more strong. To get to these designs I did around 2–3 entire redesigns and re-thought the project from different questions.
  • Writing down thoughts behind every design in Figma has helped me a lot in later writing the case study or explaining it to someone. Ends up improving my writing and articulating design decisions.
  • I really need to improve my colour choosing skills, till now I’ve been doing them with looking at what the pattern is followed for the use case.

--

--

--

Art is an irresistible magnet, process of creation makes it even satisfying.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

11 Features that Make Mockplus iDoc Standing Out

Firm Mattress Vs Soft Mattress CompareAdvantages https://t.co/5SgBeGSQIv

Ways to Choose the very best Type of Mattress For YourHome? https://t.co/y9OClq71DU

Betafying Betafi: How user feedback on our design prototypes helped shape Betafi’s user interview…

Housekeeping and keeping the peace at home, an application exercise

Thesis Update-Open studio

The evolution of a company’s digital transformation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kushal yadav

Kushal yadav

Art is an irresistible magnet, process of creation makes it even satisfying.

More from Medium

Design digest #12: war-life balance

Redesigning a mental well-being service, CHAT, in Singapore — a UX casestudy

Website’s color research in 2004

Overview of readability and aesthetics of the color schemes in diagram

I Dub Thee “The Old Hi & Bye”