OUGD504 - Brief 4 - Mobile Wireframe Development

OUGD504: Brief 4: SONY music / ONLY studio Brief

Mobile Wireframe Development

With the developed desktop website approved by students and tutors I felt confident in beginning the development of the mobile site which is an essential requirement of the brief and current web design practise. This would give me the opportunity to develop my understand of web design and how components are transformed across the break points to create a consistent web platform across a range of devices that offer the most intuitive user experience based on the characteristics of that device. 

Homepage: 

Keeping the homepage consistent across the breakpoint from digital to mobile was probably the most important aspect of translating the site onto a mobile platform as it needed to remain consistent and identifiable for the user across the platforms to assure them they are on the same website. I kept the header fairly consistent in terms of elements however centrally alined the campaign logo instead to flush left as used on the desktop site as this it more be more legible centred on a mobile device. This allowed me to incorporate a direct download link to be fixed into the header directing the user to the iTunes pre-order at any time using the website, this has replaced the popup of the desktop site as I felt this would be impractical and confusing when translated across the break point. 

Instead of the 4 column grid as used on the module site, I took inspiration from the Instagram app that uses a scrolling feed of one image to maximise legibility of the content. I felt a familiar interface would engage the target audience and allow the user the most effective experience that draws on familiar grids. Below the image are social media buttons that replace the rollover on web to simplify the sharing options making it easy to access on mobile for the user. 

Navigation: 

Due to the minimal nature of the desktop navigation page this was easily translated onto a mobile device, the only real change was the loss of white space surrounding the type and the addition of a further iTunes downlink link that is further encouraging the user to pre-order the album over multiple opportunities without being too invasive or attacking them from all angles which I feel works well placing the opportunity on each page in quite a simple fashion that adds a sense of choice for user. 

Sub-page: 

The standard fixed mobile header remains consistent to the homepage and still reflects the desktop site, the translation of the blog remains fairly similar to the original desktop design creating a clear hierarchy of page title, blog title, content that is fictional on a mobile device and will appeal to the user. 

Extended Homepage: 

Similar to the homepage this wireframe demonstrates how the user would scroll through the site and includes the footer, which is a refined version of the desktop footer with the site map, contact details FAQ and link to the desktop site. The newsletter sign up is also included with the footer to allow the user to sign up and receive updates that will keep them coming back to the site i.e. when new content is available e.g. merchandise or blogposts (Users will be automatically signed up with any purchase or pre order.)

I have found the main difference between designing for web and mobile is that mobile must be far more refined due to the smaller frame to place the content this results the the use of less white space to fill the pages. As the mobile device uses fingers to interact with the content the clickable components need to be larger that those on the desktop where typically a mouse or trackpad is used that is far more accurate and smaller, this results in a simplified translation of the desktop site onto mobile to ensure it is functional and gives the user the best user experience across devices.