TypeGen
Project | Digital | Prototype
An app which can generate a one time editable font
An app where users can generate a font, edit and share. This app is created not only to be used for designing but to educate someone who is just starting out in learning about typography as well as for anyone interesting in learning more.
Due to the educational factors, the app is created to cater to English, Arabic, Chinese and Russian alphabet.
Typography + Generating
= TypeGen
My main focus of this project is to develop a prototype of an app that can generate unique one time generated fonts. My focus is to make it inclusive to users with little to expert knowledge in editing and using tools. In my research I have found that there were no apps able to of this and saw this as an opportunity on which I am able to develop upon. I built upon this my starting out by exploring the brand identity, exploring the different ways a logo can be created and using this for branding materials.
In my development stage, I looked at exploring the brand identity as the starting point. Developing upon creating a logo, font and colours. Taking the development stage to the next step and working on screen designs and designing the set up of screens. Below are presentation pages of my progress and development at that stage. Using Adobe software in my design process such as Illustrator, Photoshop, After Effects and XD.
My final logo and icon design was created in Illustrator. The initial idea was to combine the letter from the Typegen title to create a unique logo, combining both T and G to create
the icon.
I went with the bold letters that stands out and flexible in how it can be used further in branding material.
Further developing on my logo, I wanted to look at how I can create an interactive logo, my plan was to include this animation which will be used as a loading screen. Using After Effects to animate the logo I create a short video.
Animate clip created in After Effects featuring a short clip of the logo.
I started creating animated videos in After Effects, to be used in demonstrating how certain key editing functions within the app are used and implemented this video within the final prototype video.
The Bold / Thin sliders will be used in the introduction and how to section and added to the main screen where these editing steps will take place.
I felt that the use of sliders have the best ease of use and freedom for experimentation from a person just starting out to one which is moderately skilled in using editing tools.
With my own personal research in using editing apps I felt that a slider option was simple to use and does not require too much information on how to be used.
I further developed on the sliders, buttons and icons which will be used throughout the app, paying close attention to how these tools will react to being clicked and selected. These are the final selection of icons which I personally created, using the app identity colour, ensuring I stick to the main colour selected at the beginning of the project and infusing some contrasting colours. Creating shadows under the tool for an effect of being lifted off the screen.
Promotional Material
To further develop upon the brand, I created a set of mockups of how the app can be advertised on different types of promotional materials, I have created a s set of posters and banner designs and used mockups to use for the design to come to life.
