header.png

findfonts

Web Design

 

FindFonts is a typography website that helps people identify typefaces that they are interested in but don't know what the typefaces are called. It is also an inspirational website. FindFonts is created for people who are new to the design field.


Font Match

When user uploads an image of a typeface that the he wants to identify, the website is able to analyze the image and provide the name of the typeface and other typographic information of the image such as tracking, font styles, and colors. The website also provides the purchase options to the users if they are interested in the typefaces. 

 

Result Page of Font Match:

The website will automatically detect and label different typefaces appearing on the image the user submits, the user can then use the panel on the right to learn what typefaces have been used as well as the alternative typefaces that are similar to the chosen typefaces. The panel also provides purchase links of the typefaces so that people can access their interested typefaces more easily.

 

Font Gallery

Font Gallery contains tons of inspirational typographic design works. It allows people to view the works in different orders by using the sorting tool. In addition, people can search for a specific typeface and view various works that are created with the same typeface.

Similar to Font Match, the result page will also provide purchase links of typefaces that are detected on the image. This page will be a resource for people who want to learn how typefaces are arranged on the shown image, what typefaces are used in the image, the relative size and leading of typefaces, etc. 

 

Responsive Design

This is a responsive website. The layout of the website will be adjusted base on the screen size. However, the interactions language will remain consistent.

 

 

DESIGN PROCESS

 

Research

This is a class project from my Web Design class. Our assignment is to design a website in any topic related to typography. 

My project started with primary research by giving a survey asking people what they are looking for when they go to typographic websites and secondary research with a brief study of 60 existing typographic websites.

 

 

Many people rely on internet for their typographic works and their desired websites are the one with clear navigations and are easy to use. People generally have the needs to download fonts; however, there are some reasons cause people be less willing to actually purchase fonts. It could be the costly price of the font, or the complex process of purchasing a font.

My website is going to target the people who are new to the design field. The website will be a font tool that can help new designers to get familiar with typefaces. The interface will be clean and easy to navigate, giving users a smooth and intuitive experience.

Insights From Research/ Project Direction

 

Information Architecture

FindFont is a tool/inspirational website. The main features of the website is “Font Match” and “Font Gallery”. The website is created for people who are new to the design field and therefore need a good source of inspiration and need help to identify the typefaces.

Font Match helps people to identify typefaces. By uploading an image of a typeface that the user wants to know. The website is able to analyze the image and provides the name of the typeface and other typographic information of the image such as tracking, font styles, and colors. The website also provides the purchase options for the users if they are interested in the typefaces. 

 

Font Gallery contains tons of inspirational typographic design works. It allows people to view the works in different orders based by using the sorting tool. By using the searching tool, people can search a specific typeface and view various works that are created with the same typeface.

 
Natalie Huang_UX MAP.jpg
 

Interaction Models

Before the final wireframe, I tested and refined many different interaction models in order to have the best version that perform nicely on both desktop and mobile.

 

Wireframes

 

Screenshots (desktop)

 

 

Screenshots (mobile)

 

For more details, check out the full-version process book below!