Using Figma, I established the parameters in which I can create my icons. I used a 10px square grid with a 3 column grid with a 20px margin. I also marked the centre of my screen and sectioned the bottom of my screen into thirds. I worked out a safe margin for content to be placed within at the top to consider the current technologies of cameras and speakers residing at the top-centre of many phone screens.
I found this useful info-graphic created by @its.dezinx on instagram. He outlines a structure and right-sizing for creating nav-bars. I used this in the beginning stages of my nav-bar design and added extra margins for the icon and label to reside within.
I began by outlining were the graphics would sit in my designs, based on my wire frames. I also added some text, mainly headers, buttons and icon labels. Using the grid for this was extremely. helpful to create balanced interfaces.
When I began adding icons, the interfaces really started to come to life. I added the revised logo to the top-right corner also. A strong visual brand started to take shape here which I was happy with. I re assessed the design of the play interface, using a burger menu icon for an ‘up next’ feature and moved the ‘more’ icon to beside the title of the music track.
