INTERACTIVE WEBSITE PROTOTYPE
WEBSITE BREAKDOWN
MODULAR TYPEFACE & WEBSITE
Iowa State Rome Program
This modular typeface is called Cutout. The aim of the webisite is to display the 'mood' of Cutout, which is very playful. My original thought for this typeface was to resemble a mosaic-like pattern. After messing around with the idea more, I came up with this solution. Cutout now also resembles a stencil-like design. By spacing out and rotating the modules in the specific position they are in, an illusion is created. Your brain fills in the missing spaces between the modules to complete each letter. While also being functional, this typeface is a fun game to engage in as well!
This typeface aims to “keep it simple” by using only 3 modules throughout the whole typeface. Using these three shapes keeps strict boundaries on how to design each glyph. Some may call this puzzle ambitious, but I took it as a challenge.
The edges of the modules are rounded, to give an organic and soft feeling, differing it from most hard edged serif fonts. The modules themselves never touch or overlap, giving the typeface a light and airy aesthetic. The soft edges and airiness gives a young sense of play to the typeface, yet it maintains the traditional and sophisticated look of a serif font.
The website was made through Figma. This was my first time using this interface, it was intimidating to figure out, but by the end of this project, now I love it!
DELIVERABLES
Website
Interactive prototype built in Figma
Set of uppercase alphabet, numerals, and basic punctuation
TOOLS
FIGMA
ADOBE PHOTOSHOP
ADOBE ILLUSTRATOR
