I created the header and chose to keep the tosses the same color as the last mock up so I made the header the two shades of blue, as well as the question below the rifle. Compared to the last mockup this one is more condensed and to the point of the website which is beneficial to the users. I feel this design overall as well defined hierarchy between color and size.
The footer in this mockup's height is a lot less than the previous one and is a lot better fit. The content inside includes
- instructions on navigating the site correctly
- an about the designer section explaining my background in color guard
- a more about color guard section where there is 2 links to websites with more information
- a share section where the four social medias of choice are flags
I also mocked up a secondary page as if the user selected double.
Above is a wide screenshot of it all and a close up of the ipsum. The only change is the content between the footer and header, the footer and header will always remain the same.
In photoshop I also created a gif or the rifle spinning using the timeline panel. (I am not sure if this video or link will work but I included them anyway)
The gif will be used as a hover state. When the user comes to the website and hovers over a toss, the rifle (through the gif) will spin the correct amount of times. I was not sure how to show this hover state so I explained it instead. The text could also turn the light blue if more signal is needed.
Other hover states are:
If a text link is selected it will turn the light blue for hover.
For the hover for the social media flags, I thought they could do an image can so it looks like they are flapping in the wind.
No comments:
Post a Comment