TypeFont is a website focused on providing a good platform to reliably and consistently find free typefaces.
Its a simple and straightforward goal with a lot of competition from various different web experiences out there. It will be difficult to separate it from the rest to provide users with a clear value and use.
This is a project I have worked on since last year and the last iteration was completed early on in 2024. It will be an ongoing project I continue to improve and learn from.
CONSTRAINTS
This project was my first time going from nothing to something. The quality and quantity of specifics may be in question across various areas. My main focuses were on the visual design, design system (which is also limited), wireframing and prototyping.
It lacks much of the research from market and target audience. I did some informal user testing by asking uni friends what they think and limited prototyping testing.
DESIGN STYLE
Considering the constraints of the project I decided to focus on shaping the design style and direction was clear and consistent. This was achieved by constant thinking, wireframing, and UI ideas.
The design system was limited as I was basically creating it from very little knowledge of design systems. I decided to try creating one anyway so I could in the future look back to understand, learn and, recognize the importance.
NAVIGATION
The website features two nav bars, the top one changes based on what page the user is on. It features simple tags/labels and buttons of the same style on certain pages. The left and right element stay the same but can resize. Whereas the middle element can and does change to be titles of the page a user is on. As you can see in the example below it can also be a button.
The bottom navbar is the main way a user would navigate the website. There are three main pages a user can access seen in the middle three icons of the navbar. The left icon closes it and the right icon sends the user back to the top of the page they are currently on.
DESIGN SYSTEM
The design system is mostly made up of reusable components in the website. As you can see I have not documented the logo, typography sizes, colours and, icons etc. which are all important. I have quite a bit to understand about how design systems work and I'm continuing to learn more about them in this and future projects.
OUTCOME
This was the first project I have completed outside of university, my own idea starting from a blank canvas to organise and create it into a working concept. I still have a lot to learn and probably missed quite a few important intricacies with web design.
I do believe I have achieved the goal I set out to do which was focusing on the UI and more visual design and do believe the aesthetic of the website is quite nice. I am lacking on the more logical or practical side being research and user testing, basically the UX.
Although I did do quite a bit of UX thinking and just considering how a user may use this and just tried to put myself in the users shoes. I don't necessarily have access to any users and so making do with what I have to the best of my ability.
PROTOTYPING
ALL RIGHTS RESERVED