Adapting Your Design for Web Deployment

For the app design to become suitable for a tablet, the size of the fonts ,icons and images were adjusted so all the information was still readable and still looked visually appealing.

For the web design, the space was a lot bigger than the other products. To adjust the homepage to the size of the screen, the icons of each era are spaced out and increased in size. To keep consistency across all platforms, the colours and content layout is kept the same so users don’t get confused on where to go.

For the page layout of the eras, instead of users going down the page for information, the songs and album information are put next to each other to keep the site looking aesthetically pleasing to the viewer.

The navigation panel used for the app and tablet was too small for the website and using that navigation bar on the site would be hard for users to click on, this would create a negative user experience as they would get frustrated with clicking the wrong era. To fix this, the icons from the homepage are used instead of the small circles and are put on both sides of the site to utilize space.

The gallery was kept on a separate page as adding images to the same eras page will be visually overwhelming to the viewer and may make it hard for the user to decide what they want to look at first.

The size of the images in the gallery was increased and kept as a carousel as it means that users still have aspects of the site that they can interact with and gives them the feeling that they are in control of what is happening with the site, instead of everything automatically moving for them.