Header image for the Umbra Type App. Features the Umbra Type logotype on a marbling background.

Umbra Type App

Umbra Type is an app designed to fill three aspects of a problem in one, a font tracker, a font scanner, and a font inspiration platform. Umbra Type offers these features with a sophisticated algorithm to track your library of fonts. Umbra Type will recommend new fonts by analyzing your search queries and history of what you like while using the app. Lastly, a feature to scan fonts with the camera. Umbra Type will take that scanned image and find an exact match or likely alternative to the font.

Extensive research was conducted into learning about existing font discovery tools. From written research documenting Adobe Fonts, MyFonts, and FontBrief; to creating personas with needs and frustrations solved by Umbra Type, as well as sketches for app icons, screen wireframes, and user testing.

The audience for Umbra Type is tailored to other designers looking for an app for font inspiration and tracking their libraries and playlists of fonts. Users have an effective tool to capture the exact typeface they have in mind.

The color and font choices were all made to encompass a simple and minimal app in aesthetics, hiding complex functions. Layout, image, and texture all help complete the vision of the aesthetics with alignment, spacing, balance, and especially appearance with the icons used. The black and white are core, supporting tones for the eye-catching magenta hue. The typeface of the app branding is Degular Display and SF Pro for in-app body copy elements.

Wireframe, Logotype, & Icon Sketches

Wireframe sketch of the login screen.
Wireframe sketch of the home screen and type discover screen.
Wireframe sketch of the type scan and font page screens.
Script logotype sketch for Umbra Type.
Funky slab type sketch for Umbra Type.
Preliminary icon sketches for the Umbra Type App
Icon Sketches for the Umbra Type App
Icon sketches for the Umbra Type App

Visual & Functional Research

Visual and functional research of the established font tools that Umbra Type expands on.

Umbra Type Icons

All icons in the Umbra Type App, plus the app Icon.

Type & Color Study

Type and color study of the Umbra Type app.

Umbra Type App Screens

Mobile phone screens of the Umbra Type App.
Mobile phone screens of the Umbra Type App.