Studio Brief 4 - Wireframes

After the initial sketching stage, and refining my concept of how I will be promoting the album release I  moved onto the wire frames. Developing what the site might look like on desktop and then translating that onto mobile. 

Landing Page - This will be the initial landing page that the user will first see. As soon as they arrive they would see the featured image dominating most of the page. In the middle of the image will be the input bar where the user can input their positive messages either side of the 'G' & 'D' as apart of the album title 'Dear G-d'. I've extending the input bar to let the user know it's there and for it not to come across as a Google search bar. At the top would be the logo to the left and navigation to the right, I didn't want to change the layout to much with the logo and navigation as the user is used to these aspects in that certain position, therefore making it easier for the user to find the most important things as soon as they land on the page.

At the bottom would host the social media logo, again a natural position for the social media logos. Lastly the text on the right could even communicate information about the concept of the campaign or a action button to the pre-order the album.

Submission screen - This is the pop-up feature that will appear when you submit a message into the input bar. The submission screen will be coded with a fade in and fade out motion, therefore making the transition effortless for the user without them annoyingly going out their way and clicking off it manually. The content inside of the screen will essentially start of with the title "Thank you for submitting" giving a clear indication that their submission worked. Underneath will be the message the user entered, so they can reread what they entered and then share that message with the social media links below. By sharing their message it builds a social media trend where the band becomes a talking point that extends further then their fan base.

Help feature - For some people it may be hard to understand exactly whats going on with the concept. If it isn't clear then below the 'submit' button will be a '?' button, which once clicked will bring up a box explaining the concept in a brief paragraph that should hopefully make it clear enough for the user to understand. This feature will allow the user to not be stranded and wondering what to do, therefore allow the site to be used by a lot more people outside of the target audience.

Expandable input bar - If the user wants to type a longer message then the input field can handle then the input bar will expand according to the size of the message, making it easier for the user to see what they wrote and to not feel like they are limited to how much they can write.

After the wire frames were completed for the desktop site, I then went about creating wire frames for the mobile site. It's important for the transition to look effortless when viewing on desktop and responsive site, consistency through both is essential to allow the user to easily understand where about they are in the site and for an overall easier user journey.

Navigation page - Navigation page would be a newer feature that isn't represented on the desktop site. Once the navigation icon is pressed then this is what the user sees. It will be a different from the home page as i didn't want to overpower the user by sitting the navigation on top of the landing page. So by separating the navigation window the user can easily understand and ingest the information more effectively due to the navigation page being stripped back and simplistic. The navigation page will essentially have your basic links to other parts of the website below that will push the pre-order action button for the album. Using the simplistic design to make the pre-order button stand out. 

Input with keyboard - The positioning of the input bar and submit button is essential. Once the user touches the input bar the keyboard will pop up, so making sure the bar and button isn't obstructed by the keyboard is important while not compromising the design aesthetic of the layout.

Similar layout to the expandable input bar, i have translated it into the responsive site. The user can expand the box by touching and dragging the box from the bottom right corner. However, essentially the box wouldn't be expanded until the user does so, due to space and the interference of the keyboard.

Same layout and design aesthetic as the navigation page. The submitting page has the exact same content as the submission page from the desktop site, keeping the consistency and functionality at the heart of the design.

Landing page - This is how the landing page will respond for the mobile site, It's the same look and feel as the desktop site but most aspect are centre aligned. The navigation button has been added to save space and not overpowering the site. I had to increase the width of the input bar so it was thick enough for the users finger to easily touch it without accidentally touching something else.

Help message in clear view to help the user if he/she doesn't understand whats going on.