I was set the task of creating a GIF and banner for a brand of my choice.
The first step for this was to establish the brand that I want to work with. I decided to make the banner and GIF for Spotify, this is because its a brand that I am familiar with using and wanted to make something for them.
The first thing I needed to do was research into Spotify’s branding. I curated a mood board of inspirational branding from Spotify which is displayed below.
(All images sourced from Google Images)
Next I researched into Spotify’s logo design and advertising. This is presented below.
(All images sourced from Google Images)
The common colour themes and colour palette was shown clearly to me from looking at these two mood boards. Their use of block of colours was a very key convention of their advertisements and logo design. Duo tones is also something that Spotify seem to like using. The consistency of their font in their logo and in the typography of their banners is something that I want to reciprocate within my banner. The use of shapes such as the white, wavy and confetti looking shape and the triangle shapes consistently used in the first banner in the first mood board displayed is something that I feel is simple yet quite effective and I feel like it doesn’t take away from the minimalistic style that Spotify use in their adverts.
Exploring further into Spotify
I decided to open the Spotify app and explore it more myself. The screenshots below display the most inspirational things that stood out to me when analysing the app.
I was looking to see if I could find any common conventions or themes that I had previously noticed. I noticed the use of duo tones being used again which I decided was something that I would have to incorporate into my work to reach the aesthetics and key conversation tons of Spotify’s branding. Another thing that I noticed was the use of celebrities in thumbnails as shown in the last screenshot. I saw this and wanted to use it as inspiration for my banner and GIF. The red and blue duotones was something that really stood out to me and was something that I wanted to experiment with and integrate into my banner. I chose to use Justin Bieber’s (JB) new album ‘Justice’ as the starting point for my advertisement. I liked the image of JB in the left thumbnail of the last screenshot and decided that this is the image I wanted to use, I simply sourced this image form Google Images and I was ready to start designing.
Establishing an Intention
Before starting to design I needed to establish what I want to communicate to my audience through my banner and GIF. I want to use Spotify’s advertising conventions and themes that I discovered through my extensive research to promote JB’s new album ‘Justice’ in a way that will entice and draw in the young audience that JB has.
I explored into fonts and the typography that Spotify tend to use in their banners as I wanted to use typography saying ‘Justin Bieber’ next to the image of JB. I decided to look into the font that Spotify use in their typography, however, It only took me one Google search to find that they use their own modified version of the font ‘Gotham’ which is called Spotify Circular Font’ as shown below.
I looked more into ways of accessing this font but found that I would have to pay and have licensing from Spotify to use it. This led to me exploring through different fonts in Photoshop to fins the most similar font. The most similar one that I could find was the font ‘Helvetica’ which was a nice font but just didn’t fit the circular and rounded shaped font that I was looking for and didn’t fit Spotify’s aesthetic, Helvetica was too square. This is displayed below.
After this I had to find a more viable font to use, this is when I came across Apple’s font ‘Graphik’ which is shown below.
As soon as I typed this title out I knew that this font was the perfect one as it look extremely similar to Spotify’s circular font and really font the aesthetic of Spotify’s branding and typography. I decided to use this font in my final banner and GIF.
I made two rough mock-ups of how I wanted my final banner and GIF to look. I decided to experiment with two different colour schemes, one being the red and blue duo tones as discovered from my research, the other being a single colour light blue tone. I decided to use two triangular shapes as this is a convention that Spotify tend to use throughout their advertising. Using Photoshop, I used the Lasso and quick selection tool to cut out the image of JB from the original image sourced from Google. I simply placed this image in and used the gradient map tool as a layer over JB to gain the effect of a duo tone/gradient background. I sourced his album cover from Google images by simply searching ‘Justice album cover’ and agin used the lasso tool to cut out the cover that I needed. I then sourced the Spotify play button and progress bar from Google images and very roughly placed this under the album cover. looking back, one thing I would like to add in my final design is the white wavy shapes and the Spotify logo.
These two mock ups are displayed below.
I made sure before developing anything further to file my work to make sure that I stay organised and so that everything I need and use is at an easy access, as shown below.
I decided to use Photoshop to complete my final banner as I was most familiar with Photoshop and it had tools that I could use to reach my intention of communication that isn’t available on Illustrator. Below, shown, is my final designed banner.
I ensured that my final banner met the stated brief requirements, and so I designed this in Photoshop, 1800 x 1200 px and optimised as ‘RGB, JPG’ for web.
Displayed below is my final completed GIF.
The two blue triangles as you can see at the bottom and top of my gif move in an up and down motion. The background changes halfway through from blue and red duo tones to green and yellow to match the background of the album cover. I made this gif using the frame animation timeline in Photoshop, this used 12 different duplicated layers as a frame by frame concept to create the animation effect. This is saved to web as a .html and a .gif document.
Overall, I am highly satisfied with the outcome of both my GIF and my banner, If I were to do this again, the only thing that I would do differently would be to make the GIF slower than it is as it can be quite alarming with how fast it is at the moment. That isn’t a big deal though, so I am very satisfied with how I have successfully met the brief and completed this work to the standards of my intention.