Final Mobile Wireframe - Studio Brief 04 - OUGD504

The mobile wireframe was considerably simpler to produce in comparison to the desktop version. The content is already there, it just needs to be converted for use on touch devices to make it 'finger friendly' which aims to have buttons at a consistent size of 57px.

To save space on the screen, unobtrusive slide out navigation links were introduced into the header. This enables the user to jump to parts of the site without having to scroll all of the way down the page. After a link is selected the nav links will automatically slide back in through the use of CCS3 transitions.

All in all, it is a carbon copy of the desktop site, just slightly condensed down.

Wireframe Grid - Studio Brief 04 - OUGD504

Desktop

The grid used for desktop was standard 12 column. This gives the most versatility and is easy to abide by as you can see by the attached image. The versatility of having so many columns gives more possibilities than other, less detailed grids.

Mobile

The process of completing the mobile site was much simpler once the desktop site was finished. The content can be 'compressed' down into a single/dual column to be able to fit down the narrow screen. By using the iPhone 5S setting within illustrator, it was possible to create multiple artboards and have each one display the correct amount of content.

Final Desktop Wireframe - Studio Brief 04 - OUGD504

Throughout developing the wireframes on pen and paper, there was a clear consistency through all of the desktop and mobile sites, all had similar layouts and swayed more towards keeping the UX as streamlined as possible.

By maintaining all of the content on one infinitely scrolling page and using a static navigation bar, it is very easy for the user to nav through the website and find the information they need eliminating the need scroll to the top of the page in order to select another page on the site.

Reasoning for this is obvious, the more important content, e.g. the new album would be at the top of the page and would be the first thing the person sees, further down the page you would be able to have subsections such as tour dates, previous releases, social media and other relevant information.

The user is greeted with the album art, the date of release and a nav bar, this bar would be static on the page. So as they scroll the nav bar would stay at the top of the screen for easy access.

As the user scrolls, they are then able to pre-purchase the album and a promotion for an imminent remix album informs the fan. With an added iTunes link for convenience, the user would be directed (in a new tab) to the purchase page.
Below all of this is the social links, as it is important for MK, shown in their current website.

After scrolling down from this the user is the greeted by a mix which is periodically updated to the most recent.

Another important aspect of the site is tour dates. When there is a new album there is a new imminent tour.
Listeners will be informed where in the UK the band will be playing and at what date. This map and list would of course be interactive. The user could click on any of the shapes representing towns/cities and be directed to an external ticket site.

Just like the most recent album release further above. The previous releases are illustrated at this point for the user to purchase whilst the newest album is still to be released.

The final page features a contact form which would lead to the management. With the direct contact details on the footer along with copyright information.
Again, the social buttons are introduced as this is also a form of contact with the band.



Overall, the site does not put aesthetics over function. Every feature that is needed for the user to access is on one single, simply laid out page, and this makes user experience extremely streamlined and easy to use. 

Adaptive Vs. Responsive Web Design - Studio Brief 04 - OUGD504

With web design, there are two main techniques that are used in the development process. One being Adaptive web design, and the other being Responsive web design.

Throughout tis post I will outline the basic differences between the two and how I am going to utilise one or the other and why.

Adaptive:

• Requires knowledge of HTML5 and CSS/CSS3
• Page size determines the width of the site and how much is displayed
• Provides instant mobile/tablet viewing by condensing the content from the full desktop site

Responsive:

• Requires separate designs for desktop/tablet/mobile to fit the screen size
• Overall width is restricted to around 960px
• No coding skill required

With the above outlined, and when taking the brief into consideration, it is obvious that responsive is the way to go when wanting to give a functioning 'prototype', or in other words, an advanced wireframe that can be viewed by any browser or computer.