2016 | Personal
2016 | Personal

Designing For Fun

Building an app that generates random type constraints

What is it?

Letter Better is a very simple app designed to randomly generate type constraints for people practicing hand-lettering or type design, something I typically found myself wanting.

A picture of the onboarding UI for LetterBetter

What it solves

The problem Letter Better solves is "blank canvas syndrome"; aka not knowing where to start. Introducing constraints helps breed ideas, but the problem is choosing these constraints can be a challenge in itself.

Why not let this choose for you?

Sketches for LetterBetter's UIA pencil sketch of LetterBetter's end-to-end flow

How it works

This app is intended to do just one thing and do it well.

All you need to do to get a new set of constraints is click “Let’s try another”. To switch difficulties, you simply need to swipe the screen left or right.

I used Origami Studio to prototype and record it in use.

*Note: Since these GIFs were created, the UI has been updated to be accessible and may not match completely.

A screenshot of the prototyping nodes for LetterBetter in Origami Studio
An animated GIF of pressing the button in LetterBetter to get a new set of type constraints
An animated GIF of switching difficulty levels in LetterBetter

Designing the icon

From here, I started sketching how this app would best be conveyed through an icon on the App Store or home screen.

Whether we like it or not, people do judge books by their cover, and apps are no exception.

Initial logo sketches for the LetterBetter logo3 variations of using an upper and lowercase letter as the app icon

Initially, I thought upper and lowercase letters would best represent a typography app.

But after further exploration I felt there was too much of a similarity to Adobe’s app icons.

3 logo iterations using the shaft of a pencil as a lowercase 'l' and the circle of the pencil's eraser behind it, forming an 'l' and 'b'

After going back to the drawing board, the concept of using lettering tools as the app initials was conceived.

At first, using a ruler to reference drawing guides seemed like the best choice, but ultimately the pencil and eraser became the final direction.

the final version of the pencil and eraser logoShowing the pencil and eraser logo in an app iconShowing the app icon in the iPhone's dock on the home screen

This is an ongoing project for fun and I'm currently looking into how to code it.