Post 04: Adaptation for Web

When converting my iPhone design layout to a desktop version, I started by using a black bar at the top of the page to act as my navigational menu instead of completely copying what I did for my phone screen layout. This is because as the desktop will have a bigger screen and therefore I’ll need to increase the size of my existing aspects to make everything proportional again so I decided on the navigational page being at the top so it leaves more room while still being easy to spot for the user. Once I had everything lined up, I moved on to adding the same picture that is on the phone version of my app to keep some familiarity between them so they don’t look completely different and to keep a smooth transition between them. I then started to experimentally adjust all of the aspects within the page to see what would look the best in the new sized frame of the desktop. Once I found a decent size, I played with their layout on the page until I felt like I had an even balance of the two despite them both being drastically different sizes and started to refine their layout by making sure the text and photos where lined up correctly and had even amounts of space between each of them to give the entire thing a polished look. I noticed that the set list was looking bare at the bottom so I created a see more button by placing a small rectangle, smoothing out the corners to give it a less harsh and more inviting look and adding a soft purple gradient to give the whole page a pop of colour that blended well with the ‘up next’ text on the set list tab making it look less out of place.