web mockup
web mockup
Showing the beauty of the Montserrat Typeface
Showing the beauty of the Montserrat Typeface
Visual Design • Typography • Web Design
Visual Design • Typography • Web Design
Overview
Overview
Role
Role
Visual Designer.
Solo project.
Duration: 2 weeks.
Visual Designer.
Solo project.
Duration: 2 weeks.
About
About
I created a web mockup showcasing the Montserrat font for Typebrain. Typebrain is a client committed to help designers choose the correct font for their projects.
I created a web mockup showcasing the Montserrat font for Typebrain. Typebrain is a client committed to help designers choose the correct font for their projects.
Project Goal
Project Goal
Show designers how legible, modern, minimal and historically special this typeface is.
Show designers how legible, modern, minimal and historically special this typeface is.
Create the visual design for the Home, Features, History, and Use pages.
Create the visual design for the Home, Features, History, and Use pages.
Process
Process
I began this project by researching the history, features, and uses of the Montserrat font. I found it interesting that it was inspired by traditional posters and urban signage from the Montserrat neighborhood in Buenos Aires, Argentina. With this in mind, I started creating some early sketches:
I began this project by researching the history, features, and uses of the Montserrat font. I found it interesting that it was inspired by traditional posters and urban signage from the Montserrat neighborhood in Buenos Aires, Argentina. With this in mind, I started creating some early sketches:
Next, I analyzed what would work in a webpage format. Once I had a clearer vision, I started translating my ideas into Illustrator. The software allowed me to experiment with weights, grids, sizes, and content. This process led to the design of the Home page, which served as the foundation for developing the other pages:
Next, I analyzed what would work in a webpage format. Once I had a clearer vision, I started translating my ideas into Illustrator. The software allowed me to experiment with weights, grids, sizes, and content. This process led to the design of the Home page, which served as the foundation for developing the other pages:
Final Site
Final Site
After fixing some small alignment issues, I finally finished the mockups. In the future, I would like to turn this site into code and add some cool animations.
After fixing some small alignment issues, I finally finished the mockups. In the future, I would like to turn this site into code and add some cool animations.
© Rosa Moriya 2023
Made with Framer
© Rosa Moriya 2023
Made with Framer
© Rosa Moriya 2023
Made with Framer