Interface Final Submission

This is the final version of my interface. Over the weeks, I have made many changes to the original, and I have finished it to look like this. There were many design choices made here, some influenced by my personal tastes, some influenced by other similar products, and some made because of outside suggestions. 

     All of the versions so far have used the image of the girl as the background. I intend for this background to be something like the place to show off the artwork that would go on the album or single cover, but it could also just be one image that remains static over time. The original design possessed a different layout. The social media icons were justified left, and the logo was pushed closer to the middle, as well as there being more options up top. The original mostly used white for the color of all elements on the page. Following some suggestions, I moved the logo further left, added other colors to the elements and added new elements for support.

     All of the decisions I made were conscious choices, and they all had a reason. I pushed the logo further left, breaking the grid I originally set up, in order to give more weight to the left side, as the girl's head dominates the right side and pushes a lot of focus that way. I removed some links from the navbar in order to simplify it, have it take up less space, and become more readable, without multiple options for the same thing. I shifted the name of the single down a bit in order to make it more central and give it breathing room from the logo and navbar. I also moved the icons to the middle in order to put all of the elements in the middle so that the user does not have to look all over the page to find information. For color choices, everything is either white, brown, or a dark blue. These colors were used because they are found in the original color palette of the photograph, as well as brown being a complement to this type of dark blue. The colors are used in the navbar, where a brown color with an underline was added to the part of the website that the user is currently on for clarity. The brown is also part of an interaction with the user, spoken about below, as well as the frame for the blue background of the central element. The blue was used to provide a backup to the name of the single, and after a few suggestions, I settled on making it transparent, as well as spanning the width of the page.

The interaction being portrayed here is what happens when a user mouses over one of the social media icons. A blue background appears behind the icon, as well as a brown underline. This captures the attention of the user, as well as showing them that the icon is clickable. This is one of the interactions on the page. Interactions not portrayed here include the font on the navbar turning brown to indicate that the links are clickable, as well the transparent element behind the name of the single turning opaque to signify that that part of the page is clickable.