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. 

OUGD504 - Brief 4 - Wireframe Development

OUGD504: Brief 4: SONY music / ONLY studio Brief

Wireframe Development

Having identified a key design direction that will appeal to the target audience and reflect the bands sound I started to develop these wireframes in more depth to create a clean plan of how the different components of the website will come together within the page.  I used a specialist wireframe programming software called balsamiq, this was pre loaded with a range of essential tools to help me create these wireframes quickly and effectively in a short amount of time so that they could be easily changed / updated / scrapped without having invested a large amount of time in the design at this stage of development. 

Pop-up: 
Inspiration for the pop up was taken from the Chvrches website as their use of the pop up instantly directed attention to the album and actively encouraged album sales. I feel this pop up feature will instantly direct fans to pre-order the album increasing preorder quantities which was a direct ambition within the brief.  I have kept the aesthetic for this minimal with the large album cover present to stand out to the user, a large close button to easily remove the pop up, a text section and most importantly a pre order button that will link the user to the iTunes store to pre-order the album before its release. 

Homepage:
This was the first wireframe designed as all further extensions of the digital platform would develop from this central homepage. The use of a logo will distinguish it from the bands primary website and create an identity fans can become excited about. The navigation button has been designed instead of a bar to keep the homepage minimal and clean without the clutter of other sub pages affecting the overall aesthetic. The bulk of the homepage will feature thumbnails direct from a live feed from instagram depicting the custom hashtag images that underpin the main digital campaign. 

Extended Homepage: 
The extended homepage simulates how the user would scroll through the homepage consisting of the extended live feed thumbnails with the use of rollovers to link the image to other social media with the use of specific buttons that appear when the mouse is placed over an image. Other features to enhance the user experience include a back to the top arrow that will return the user automatically to the top of the page, this came from personal experience with extended scrolling websites that enhance the overall user experience. 

Navigation: 
To avoid complication the navigation page has been kept simplistically minimal with page links centrally placed within the frame and a large close button alined with the navigation button of the previous screen to allow a consistent flow between the pages. This simplicity will ensure a more engaging user experience that will reflects back to the original aesthetic of clean minimal styling to represent the bands ethos. 

Sub-page: 
Designing the sub-pages to reflect the aesthetic of the homepage yet still be functional and suitable for its content was initially challenging. Creating continuity across the pages with a united header kept features familiar and consistent for the user. Using the main bulk of the available frame for content was the most suitable way to position these components to ensure legibility and ensure they are accessible. The content coplied of headings, text and a range of image, video and audio can bee placed within this grid allowing the individual needs of the sub-page to be available. 

The overall aesthetic for the desktop digital platform is clean and minimal, the interface is uncluttered and creates an open and engaging interface for the user. There has been insight into the user experience of the desktop site and this has directly informed the design decisions, including a minimal navigation bar and a jump to the top arrow. The clean aesthetic is modern and will appeal to the target audience as it is engaging and usable with clear design detailing to appeal to new digital technologies and features to directly engage the target audience such as live feeding image directly from instagram. 

OUGD504 - Brief 4 - Wireframe Generation

OUGD504: Brief 4: SONY music / ONLY studio Brief

Wireframe Generation  

An integral part of the challenge within the brief was to understand the design process from a digital designers perspective, having undertaken no digital briefs as yet this was something I was unfamiliar with and wanted to further understand to adopt into the development of this brief to ensure a successful resolution. The talk with Only and Parallax studio really helped me with this, they talked a lot about their personal design processes and the role of the designer and the developer within this. A key framework to ensure a cohesive handover between the designer and developer was the use of wireframes. These low fidelity mock ups show direct the develop to the positioning of the individual components that make up the website and will aid them in their stage of the development to ensure the designers vision is upheld. These wireframes are also very useful from a designers perspective as it allows them to present and articulate a range of different concepts that can be quickly created and modified without having a lot of detailed work gone into them which makes them an ideal idea generation tool. 

I started by creating a range of very low fidelity wireframes to explore the composition of different elements within the frame. These wireframes highlighted key components that I could later develop into more sophisticated and visual concepts. Having gathered informal feedback from students I chose a initial concept to follow and refine further. With this I then started to apply still very basic visuals to the wireframe such as text, a sample of a navigation bar and content to give a more visual interpretation of how this layout might work still on a very basic and disposable level. 

Explored the design further identifying a clean minimal aesthetic to represent the bands calm and refined sound, the use of soft pastel colours would further reinforce this and would appeal to the target audience. With this concept looking promising I can now refine these wireframes further rendering them digitally for further accuracy. With this theme placed I can then start to explore how this aesthetic would translate across the different pages of the website for example the navigation and sub pages of the site to create continuity between the flow of the pages and ensure a better overall experience for the user.