For our first project of this module we have to create a music app using illustrations. The app must contain three screens including the dashboard, playlist and track screen.


Music Apps

On of the most famous music streaming app that there is has to be Spotify. It widely known around the world, with over 456 million active users, which has definitely set a standard as one of the best music apps, who has consistently applied new features, making Spotify app very convenient and easy to use. Spotify spreads their apps across a variety of devices and is able to be adaptive well to all. The only disadvantage that most would say about Spotify is that there is some limitations within the base free plan, which can result in much annoyance.

In terms of the design of the app, which is shown in the image below, we can see three screens including the dashboard, lyrics, and a shared playlist. In the dashboard, a lot of information is displayed which has been neatly arranged into grids or carousel sliders, which makes it very easy to understand and very quick to access playlist, artists, or podcasts that are suggested to you. Everything is clearly labelled, including the sections and also the main icons at the very bottom of the screen. The lyrics of a track is an addition that Spotify added a few years ago. The lyrics are very easy to follow as length of the text line is very short and words are highlighted as they are sung. On the screen of a shared playlist consists of a singular list of the songs with simple information like the name and the artist. In this screen there is also a few additional icons such as like, add people, option, and play. These icons are not labelled as the ones at the bottom of the screen, however, they are very easy to understand.

Spotify’s design is consistent and coherent, in which they are often improving and adding new features. Due to their attentiveness to their users suggestions that they are able to keep the lead in being the best and most used music streaming app.

MacBook Air - 1.png

Spotify’s biggest competitor is undoubtably Apple Music. With 88 million users it is the second most used music streaming app after Spotify. Although it is only less than a quarter of Spotify’s users, this could be as a cause that it is limited for only iPhone users, while Spotify is available to everyone. In the images below I show four screens of Apple Music, including the track, dashboard, lyrics, and artist profile respectively. On the dashboard on Apple Music, which is shown on the second screen, we can see that the given options are considerable larger in a carousel layout, which I think gives you less options from which you can see in the initial page. The rest of the page offers very similar options to Spotify. In the lyrics screen we can see how the design is more different, most notably in the two bars at the bottom third of the screen. On of these bars tracks the music, and the other is for the volume. There is also a difference in icons especially at the very bottom including the discord, airdrop, and queue; two of them being sharing options. On the last screen, it follows a very similar layout to Spotify’s playlist. It shows a simple list with information about the song and artist.

Screenshot 2023-02-03 163458.png

I’ve chosen to look into these two apps because they are the most used music streaming apps right now, and I think that I could learn best about what people look for in a music app from these two apps. Spotify and Apple Music share similar layouts overall, but the branding that they have both establishes is very different. I personally think that that should likely be how I should focus my own design, while also considering how to make it different.


Master Apprentice

MacBook Air - 3.png

The master apprentice exercise is a method where we learn about the art and the process by copying exactly how the original piece was created. In the images above there is the selection of icons that we were suggested we re-create. I picked to start with doing four icons from each, and I tried to recreate them in illustrator as close as I could. Using illustrator was actually more challenging than I thought it would be as I have not used illustrator for a very long time and it took me quite some time to get used to the functions again. However, I think that the icons that I made have came out very similar to the original, except that I completely changed the colours, but apart from that, I think that the shapes are very similar. The images below show my recreation of the icons I made.

M-A Icons-01.png

M-A Icons-02.png

M-A Icons-03.png

Despite my best attempt to recreate the icons by eye, I still think that they are likely not exactly the same as the artist’s did their icons, so I wanted to compare them to see how I did and how I could have improved it.

Looking at the images below, we can see that I placed my icons above the original iconsa nd reduced the opacity slightly to see the original icons. The first four icons are increadibly close to the original icons, including the width and sizes. However, on the second set of icons, it is arguably the worse set that I had done. On all of the four icons of this set the shapes are way off and neither the sizing nor the spacing was recreated accurately. This was a bit surprising as I thought that they matched better when looking at them separately. On the last set, the result is not so bad. The lamp was the most complicated shape to make and the angle has not been correctly guessed, but overall the rest of the icons are considerably better than in the second set.

MacBook Air - 4.png