2015 – 2020

Typewriter

Branding & UX/UI design for a custom content management system.

An easier way to manage a website.

 

Nicholai Ronningen, founder of Ronningen Design, had noticed for a long time that most content management systems made things too complicated. In 2015, he and his team began building a new CMS that would put the needs and convenience of the end user first.

I was a member of that team and worked to establish a brand for the new product and design the user interface. I also worked closely with Nicholai and the development team to define the clear, easy user interface.

Branding

From the outset, it was important to established Typewriter as a friendly, approachable solution for website construction and maintenance. This was seen in the name — Typewriter — which was chosen to evoke a sense of reliability and time-tested reliability as well as familiar simplicity. We researched many examples of the device throughout history, but settled on a 1960 Hermes Baby as inspiration for the logo, which I executed in Adobe Illustrator.

The Typewriter logomark and Typewriter & Co. wordmark. I used Abril Fatface Italic as a starting point for the wordmark.

The Typewriter logomark and Typewriter & Co. wordmark. I used Abril Fatface Italic as a starting point for the wordmark.

typewriter_icon-set.png
 

In addition to the Typewriter logo, I also created a custom icon set to unify the UI. Since Typewriter’s base functionality is based on layout, with more complex pages being built out of simpler elements, most of the icons were designed to quickly represent the construction of those elements and allow them to be visually distinguished quickly.

Along with the icon set, I also established a color palette and selected Didot Regular and Avenir Next for typography. With these visual tools established, it was time to pull them together into a cohesive user interface.

UX/UI

I worked exclusively in Sketch, whose powerful, focused vector editing tools allowed me to quickly turn concepts into detailed mockups. I was also able to quickly build prototypes and upload to Sketch Cloud for review.

typewriter_dashboard_1280.png
typewriter_add-new-page_1280.jpg
typewriter_hero-photo_1280.png
typewriter_block-editor-changes-made_1280.png
typewriter_delete-user-confirmation_1280.jpg
typewriter_user-list_1280.jpg
typewriter_assets-1280.png

Templates

In addition to the user interface for the CMS’ back-end, I also designed the first round of front-end templates. Typewriter clients may select from these and other options as starting points for new websites.

typewriter_website-template-theme_allegan.jpg
typewriter_website-template-theme_holland.jpg
typewriter_website-template-theme_saugatuck.jpg
typewriter_website-template-theme_portage.jpg

A major upgrade to Typewriter based on the preceding mockups is currently in development in preparation for a 2020 release. To take a closer look at my work on this project, please visit the Sketch Cloud prototype below.

View the Prototype →

Branding
Logo Design
Icons
UX/UI Design
Web Design

Opening photo by Luca Bravo on Unsplash

Previous

Princess Cut