Studio Brief 4 - Mock Ups

After creating the wire frames for the digital campaign, I mocked up the designs within Photoshop to see how they would look visually.

When creating the responsive site it was incredibly important to make the transition look effortless and to look as if the site suited the mobile screen and for it not to look forced. Overall, the design suits well within the mobile spectrum. The user journey flows well enough for the user to understand all that is require of them. And best of all it fits within the screen, so no scrolling, which would be annoying for the user to have to part take in where it isn't necessary.

Landing page

This would be the navigation page. Similar style to the 'What's this? and the submitting window, to keep with the consistency aspect. At the bottom is a reminder to pre-order the album. The pre-order feature has been designed at a similar style to make it look like it belongs and not an annoying advertisement.

This is how the mobile would look once the user starts to type their message out. It was extremely important for the input bar and submit button to be visible when the keyboard feature pops up as if not the design could look undesirable and lazy from the designer and developer.

How the input bar would expand if the message was longer than the width of the bar.

Submitting page, similar to that of the desktop version.

This would be the landing page for the desktop site. I've Incorporated the image of a melting Jesus as the featured image to represent the album title and also the messages that run through the songs. The reason for the melting aspect of Jesus was to communicate the depression part of the album. The un-melted section is the part of you that still believes in your self but as depression or mental health takes over then your self believe starts to melt and distort into something unrecognisable.

The input bar as been stretched outside of the image to communicate the cross that Jesus is pinned to and also so the type of the 'G' & 'D' isn't lost within the image. Submit button is centred to allow for the user to easily find it in it's natural position. I also implemented a 'What's this?' link, this feature helps the user if they don't know what the website is about or to help the visually impaired. It's also positioned in an obvious location and is easily noticeable as your eyes would follow the bar from left to right.

The pre-order section is in the bottom left,  once clicked these logos will externally take you to the pre-order page. However, maybe these could be a bit more noticeable as it's a very important aspect to encourage pre-orders. Bottom right is the count down number. This could also be a bit bigger but i didn't want any other feature to interrupted the sombre aesthetic.

This is what the 'What's that?' message will look like. A grey box to capture the users attention while still being aesthetically pleasing to the rest of the design. The box can be manually close but will also be on an animated timer to make it effortless for the user and not for it to become a burden to keep closing everything.

This would be the submitting stage of the website. Dimmed background to allow the box to be center of attention without the site behind it interfering. Simply enough, a thank you message with the message you have entered and with a chance to share that message on social media to increase social present. Underneath the social media icons is a little message just making sure the user know what the message will be used for and when to come back to see all the messages once the album has dropped.