Case Study: Type Spec, UI Design.
For my first project in RedAcademy’s UI Design program, I had to create a well structured and designed landing page to showcase a typeface in just one week and a half.
Raleway was my given typeface, and I had to follow a small Brief with the project goals, the keywords, the target device and some content ideas, but besides this information, I also had to research about my typeface and user.
UI design is much more than just generating “nice” layouts; it involves research and understanding of the client and user’s needs to end up with functional design solutions.
During this project I followed this process:
My users were going to be graphic designers so I started to think about their reasons to look for a typeface and how they would like to see this type spec.
I’m a graphic designer myself, so I could feel empathy about what my user’s motivations and needs could be and I wrote down some of them.
Research and analysis
After thinking about my user, I researched about the Raleway typeface and made a mind map to organise the information visually, so I could have an overall idea of my typography and point out the most relevant information.
With this in mind, I defined the content of my landing page and its hierarchy.
With a better understanding of my user and research, I made a design inception that helped me to set the mood of my design and think about the art direction I wanted to follow.
I came up with a playful, friendly and eye-catching mood to showcase Raleway typeface features, not only to communicate its modern and casual personality but also to make the looking for a typeface task a more enjoyable experience for the user.
And to be more consistent with this idea I decided that the typeface’s features were going to be written in the first person, like if Raleway typeface was the one talking directly to the user.
With this in mind, I started working on some sketches and made notes of possible solutions before working right away on the computer.
During this part of the process, I came up with different ideas to show Raleway’s versatility by including typographical compositions, motion graphic, textures and illustration using keyboard faces.
By the end of the project I ended up with a final design that:
- Follows the art direction settled in my design inception diagram.
- Provides a colour code and has enough contrast for key interaction items.
- Gives the information to the user quickly, in a clear and friendly manner.
Link to final prototype:
Thanks for reading! :D