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