Before there is design, there is structure.

A Site map can teach you a lot about your website, and help you to determine the best user flow to follow.

Starting off with a solid structure behind my design put me in the position to identify my priorities, and gave me a solid point of reference for the rest of the design.

Following a brand guide

A Site map can teach you a lot about your website, and help you to determine the best user flow to follow.

Starting off with a solid structure behind my design put me in the position to identify my priorities, and gave me a solid point of reference for the rest of the design.

How do you take your website from a site map to a beautiful finished product? A wireframe! Once I mapped out the website and identified which user flow was the most important, I was able to structure the content into a clear visual map of the website. Sketching is my favorite part of the process, as it allows me to solve many of the problems early.

Wireframes

Navigation

It is important that the user has a clear way to navigate through your website.
Sometimes, it is best to rely on the tried-and-true methods of navigation.

For this website, I chose to do a drop down menu. I communicated to the viewer which tab they had opened by circling the text, adding to the level of clarity in the design.

Final Screens

Using wireframes as a guide, I am able to create a cohesive website that best serves the user. In this case, someone could easily use this website to sign up for their next adventure!