Type on Point• is a web-based tool for creating typographic art. My love of typography and the idea sharing power of the internet led me to design and build this web based app.
The TyPo Studio landing page (below), is where text based art comes to life. Once text has been entered to the Headline input it appears on the art-board where it can be manipulated. By using the range sliders, each which control a different typographic property, the user can manipulate their design with precision. Hovering over the icons that accompany each range slider reveals a tool-tip which defines a typographic property. If you are on a touch device items can be resized with a pinching motion.
The Problem: Everyone has a message worth sharing with the world, but design software can be cost prohibitive and more complicated than it needs to be.
The Solution: Type on Point has constraints which make the creation of short form text easier to create in less time. Because it was created with this specific goal in mind it dispenses with some features to focus the user on their end goal.
*This is an ongoing personal project. Yes, I am a type nerd, but I'm not a jerk about it.
Why is the website dark grey? To leave space for the designer to experience their design against a neutral background. The environment is designed to give the impression of an open desktop, where the paper (art-board) lays flat and tools physically slide over and away.
Introduction
The Type on Point interface is intended to be an intuitive and exploratory space for type. The end goal being a typographic image called a typo. Shared within the Type on Point community and across social media typos are a new form of memes. Type on Point encourages positive messaging by example and will reward users who create insightful, meaningful, interesting, or profound typos by promoting their work.
Messages must be said plainly and in public to have an impact. The written word is a powerful information delivery system and typography serves to encode it. The design of type contributes to an idea's meaning in various ways as the viewer decodes the message. We perceive the shape of the letters as we read them.
John and Yoko attempt to spread a meme through society: this effort took considerable physical effort and economic means. Conversely, today anyone has the ability to share an idea world-wide as long as they have access to the internet.
Competitor Analysis
The public can contribute to the creation of media, where mass media once was a one-way street, now our ability to create consumable ideas to share and comment on them dwarfs what one outlet can produce.
To find out how web-based meme generators work I examined a few examples. My goal was to analyze their design patterns and features so that I could use a format that meme creators already understand but with the intention of evolving the experience and final product.
Some considerations that came from this exploration are listed below.
•The parameters of a quote/headline/thoughts in type
•Rectangle - bounding box
•Grid structure / Margin(s)
•Point size - “heading” size vs copy text
•Width / Weight
•Kerning / Leading / Tracking
•Small caps
•Background image
•Bold / Italic / Underline
•Rectangle - bounding box
•Grid structure / Margin(s)
•Point size - “heading” size vs copy text
•Width / Weight
•Kerning / Leading / Tracking
•Small caps
•Background image
•Bold / Italic / Underline
Personas
The User Tapestry™️ helped to explore the broader user base for the site. Each individual identifies with the design of a specific glyph to create a sense of their personal brand. I got a broad picture of the people who might use the site; think of it like a proto-persona on steroids.
Site Flow
Concept Sketching
As ideas were being explored flat mock-ups were generated as proof-of-concept in Adobe Illustrator. At the top left there is an experimental layout of the user interface for the Ty-Po Studio. The elements of the WYSIWYG editor came together after researching other sites with similar functionality. Your typo can then be instantly posted to the gallery where image options like download, share, and print were proposed.
Prototyping
Whenever I wanted to add new functionality to the Type on Point web app I made working prototypes with Codepen. In this way I could make sure that the code functioned properly and made integration into the system much easier.
*The prototypes below are interactive, try them out!
On-boarding
Ty, the site's mascot, will show you around with a modal tour the first time you visit the page. Writing this on-boarding flow took multiple edits to get text that read fluidly and matched system vocabulary.
TyPo Studio
Users of Type on Point will find that there is a step by step process which guides them towards their message creation. Each control panel has unique inputs for the user to experiment with. Navigate to any control panel by choosing its corresponding navigation tab.
On the color and border control panel each element has a corresponding color-picker.
Instant feedback is given to the user as their actions are reflected immediately on the art-board.
Instantly add text styles (shadows, three dimensionality, outer glows, and backgrounds) to any glyph.
Rotate text in 3D space using a novel UI. Add perspective or draw your text on an arc. (see prototype section above)
Log-In and Profile
Type on Point has its own profile system, each typographer gets their own profile page and the ability to update their profile in the database I set up. The site uses PHP and AJAX.
Profiles are an important part of the site because it allows users to save their favorite work, delete Typos that aren't up to their standards, and track stats on their word counts. It's essentially a CRUD web-app.
Social
A complete suite of socially networked Typos: Share your TyPo with typographer friends, post a status, and manage your posts and messages. You can add friends to your friend list and follow their activity in the feed.
Mobile optimized!
find a friend in the directory
Made possible by a database, I used this visual structure designer to associate User IDs to their comments and Typos
The Gallery
TyPos appear in the gallery with a single click at the end of the Typo Studio process. Each Typo is a shareable piece of art!
Visit the Gallery to see what is happening now.
Design Iterations
After many design iterations, tests and explorations, the UI keeps getting improved upon. My main goal is to find an order of operations that makes the experience streamlined with the user arriving easily at the last step of the studio. I was fortunate enough to sit down with people willing to let me look over their shoulder as they used the site, because of this I gained great insight into how other perceive this interface. Along the way I removed steps entirely or rearranged them, I adopted new way of producing images, and gained an appreciation for managing large code bases.
an early version of the typo studio
a middle skeuomorphic version of the typo studio
text-shadow v1
text-shadow v2
tet-shadow v3
background image before
background image after
Final Thoughts
This project influenced my understanding of how design systems work, how moving from desktop to mobile is a totally different experience and should be treated as such and just how difficult it is to support all screens and browsers. Through this work I learned a vast number of CSS properties and HTML elements along with their attributes. I feel that I know a bit more about what is possible on the web, and now I am even more interested in the cutting edge of web applications.
Next Steps:
There is always work to be done. One of my future plans is to run this through Phone Gap a tool that promises to turn web apps into native apps. I hope to clean up code and improve the site speed. The navigation a bit better across the site, especially on mobile where I intend to make it a bottom navigation. *update: The mobile version now has bottom nav :)
There is always work to be done. One of my future plans is to run this through Phone Gap a tool that promises to turn web apps into native apps. I hope to clean up code and improve the site speed. The navigation a bit better across the site, especially on mobile where I intend to make it a bottom navigation. *update: The mobile version now has bottom nav :)
People need the ability to share their views in public and to feel that they are heard. Writing is a powerful form of communication that can reach many people across time. We are not always able to express ourselves verbally, it's why the poet writes, sometimes our thoughts and feelings need to be revealed. It's time that we update the way we design and share typographic messages to meet a human need to communicate while impacting culture in a positive way.
Next Project