Mock-Up Website

mockup-behance

Typography is important in the graphic design world but it is also very important in web design. The typography that you use communicates with users all over the world. For this project we created a mock website. This project was good practice because, often when I design I focus on the visual elements. Such as photography and design, and I forget how important the typography is. Before I started the process of the design I researched and looked at different examples of websites with good hierarchy.

Research

screen-shot-2016-10-06-at-9-42-09-pm

While researching I focused on different examples of how hierarchy can be established in a website. In class we specifically talked about taking 2 steps to establish the hierarchy. Whether that’s changing the size, font, boldness, or color, 2 steps is all you need to make a difference.

First Draft

screen-shot-2016-10-06-at-9-40-44-pm

With the first draft my goal was to set the foundation, which included organization of the text and paragraphs. I was constantly asking myself the question what am I trying to communicate to the audience, and how can I convey the message of the website.

Second Draft and Refinements

screen-shot-2016-10-06-at-9-41-12-pmHeaders

screen-shot-2016-10-06-at-9-41-31-pm

This is the second draft that was created based on the feedback I received from members in my group and the teacher. Their feedback help me to understand what my typography was communicating to an audience.

Final

finaldraft

mockup-behance

 

Even with my final web mock-up,  I made more refinements and continued my process of designing in order to have the best product. This was a enlightening project because it taught me the importance of typography in of the process of creating a design.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s