I was given the assignment of creating a how-to app on a topic of my choice — in this case I chose type basics.
Type Basics is not something that a designer can just run-and-gun, so an app that just taught type basics in a step by step process — like baking a cake — was not realistic, so I decided to create an app that could serve as an instructional tool and a reference at the same time for designers, or those who are simply curious.
The name, based on the highlighted attribute in the app icon and splash screen is based on a typographic term —
terminal: the end of a stroke that isn’t terminated with a serif.
The chosen font for the word mark and icon is Roman du Roi, a font commisioned by Louis XIV in 1692, an appropriate font for this purpose because of it’s grid constructed nature and contrast between thick and thin properties.
Although it was not required, I created an experience map to simply show all the options that a user would have when going through the app, along with concept wires to show the scructure of the app.
The presented deliverables at the bottom of this post were the final design concepts.
sketches: these were a couple of structural drawings as well as levels of organization that I mapped out before putting the different pieces of information together.
The grid structure seen around the Roman du Roi font inspired me to use this concept to create a strong background for the splash screen and app icon. These grids remind me of development, growing, and the overall thought process involved in good design — particularly the type aspect.
These first three splash screens weren’t really grounded when it came to the grid, but before I tried to use Roman du Roi, I utilized Times just to figure out how I wanted to use this idea of development and construction within the design.
App Icon Design
The icon is centered around the idea construction and the design process which type basics play a major role in.
The app icon, and splash screen (which is seen in the composition below) make more use of this gridded background and type construction/anatomy.
