OUGD504: Brief 4: SONY music / ONLY studio Brief
Mobile Homepage
The wireframes gave a good straight forward direction when starting to develop my mobile site. I used the wireframe guidelines as well as taking inspiration from the desktop site to ensure consistency across the break point. I started by using the same pantone colour palette identified in my earlier development, placing the logo in the centre will maximise its legibility and will open be the first thing seen by the user as the webpage loads down. Keeping the navigation menu from the desktop site keeps the navigation clean and minimal which will work especially well on a mobile platforms as opposed to a small compact menu bar.
A new feature for the mobile site is a fixed direct download link in the header, The iTunes logo will be identifiable to the audience and will outsource them to the iTunes site to pre-order the album. This features removes the need for the pop-up as seen on the desktop site and development concluded this would be unnecessary and overly complicated within the mobile platform, instead the user has the availably to preorder at any opportunity with the download button fixed in the header.
The wireframes gave a good straight forward direction when starting to develop my mobile site. I used the wireframe guidelines as well as taking inspiration from the desktop site to ensure consistency across the break point. I started by using the same pantone colour palette identified in my earlier development, placing the logo in the centre will maximise its legibility and will open be the first thing seen by the user as the webpage loads down. Keeping the navigation menu from the desktop site keeps the navigation clean and minimal which will work especially well on a mobile platforms as opposed to a small compact menu bar.
A new feature for the mobile site is a fixed direct download link in the header, The iTunes logo will be identifiable to the audience and will outsource them to the iTunes site to pre-order the album. This features removes the need for the pop-up as seen on the desktop site and development concluded this would be unnecessary and overly complicated within the mobile platform, instead the user has the availably to preorder at any opportunity with the download button fixed in the header.
Potentially the biggest transition from the desktop to mobile site is the layout of the content within the homepage, The desktop site boast a large 4 column grid that previewed thumbnails of the content that was sourced from a live feed of the custom hashtags directly from instragram to act as a centralised home of activity for the campaign. Due the size restrictions of mobile it would not be feasible to replicate this 4 column grid on the mobile platform as it would impair the minimalist aesthetic of the site and make the content illegible due to size restrictions. I took inspiration from the instragram app which uses a one column grid to highlight the content and make it easily accessible to the user on a mobile device. Using a familiar interface will appeal to the target audience making the site more accessible and providing the user with the best experience. Creating significant links between the site and instragram will ensure a smooth transition and usable interface for the user. due to their existing knowledge and engagement of the app resulting in creating a simple grid to work from based on the templates provided by ONLY.
The desktop site fades out the image to reveal social media icons in a rollover which allow the user to like and share content to other social media platforms increasing the buzz around the campaign. Due to the restrictions of mobile it would not be most effective to simulate this rollover which allowed me to develop the social media buttons below the image for the mobile platform. The standard buttons will be simply a like button and a plus button, when pressed this will then expand into a longer list of social media links to share the content, I felt these were not essential to have shown all the time and ensures the minimal aesthetic to remain consistent across the desktop and mobile website. I have started to consider refined small details such as a simple transition fro the plus to expand which will rotate to form an x to close the expanded view, demonstrating a high level of detail into the design of my mobile site.
To add context to the design I mocked it up onto an iPhone to view the proportions in context, I felt I had designed the homepage with suitable sizing of the components, the buttons and menus looked like they would be easily accessible with a finger touch and the images sat nicely within the frame not looking oversized or too small to see. This extended homepage simulates how the user would scroll through the content and demonstrates the email-sign up and small print footer. This mobile homepage works effectively creating continuity between the desktop and mobile site, the refined components work well together and fit nicely into the iPhone dimensions that will allow them to be usable and present the user with a positive and engaging user experience.
No comments:
Post a Comment