Our task for this week is to recreate one of the cityscapes, music UI from the given 3 screenshots, either in a sketch format or digitally through illustrator. I have selected cityscape No.1, as the background gradient and colours are similar to what I want to include in my personal music app, therefore it will help me experiment with this and teach me on how to do it appropriately.

I will begin to recreate this piece in Adobe Illustrator, as this will give me experience in creating an UI and help me later on in my own creation of the music app.

To get appropriate sizing I am going onto Figma and searching for an iphone frame to get a correct sizing of the UI.

The icon images that will be used in this re-creation will be used and downloaded from ‘Flaticon’, a website that provides free high quality icons that can be downloaded and used for free if it is non commercial.

First I began adding the text to the artboard, while sizing it to the appropriate size and selecting proper boldness of sections like Song name / artist name as they both have different thicknesses. I have selected Futura light and Futura medium to achieve this look, as it was the closest possible look to the original piece.

Finally I began adding shapes that are in the same colours and sizes, to make sure the objects are all in the places they are meant to be, I have used ‘guides’ to help with this process. There were no specific problems that I had to face, except from trying to keep the objects and visible text to be near identical in each rectangle and icons in the same size, although the guidelines helped me achieve the wanted result.

This is the final piece.