Before I work on the final designs of the music app, A style guide is needed. this will include typography, colour scheme, brand and icons. Essentially a graphics manual. I might include some advertisements to make the app feel more legit, but obviously we only have to produce a music app so that could be a nice touch if I have the time.

Here is a style guide for the music app, I decided to keep it simple focusing on the Identity, typography, Iconography and colour.

Front Page.png

I decided to make an introduction/brand identity page. Saying what scatter is and why I called it that, I then showed the word mark and app icon. I tried writing it as a brand guidelines but there may be some slip-ups here and there

Brand.png

For the typography I chose the fonts Nico Moji for more decorative assets and the logo. And I wanted a nice legible font which had a little funk a little character to it so I chose Anybody. I feel it works well throughout the app and I used to it in paragraphs for the style guide here and I think it works wells in terms of identity and Legibility.

Typography.png

I decided to go through Font weights and say what they’re meant to be used for, I only covered the anybody font as Nico Moji only has one weight, I tried to adhere to the font weights when designing the app.

Font Weights.png

Here are the icons for the app, this was probably the trickiest page to get sorted due to much feedback and issues, here’s the 40x40 size guideline in effect, I think the icons work well and can be easily understood, I also feel they are cohesive of each other.

Iconography.png

For the colour scheme I went with a neon vibe, since the style was based on a grunge Swiss design which uses bright colours and experimental designs, the blue white and lime are the main colours of the app with the black and orange being alternate colours. I think they’re cool and work well within the app, I do sometimes feel the blue is too much so I try and use the 70/20/10 rule when designing the app, so 70% White, 20% Blue and 10% Lime with the alternate colours there for standing out.

Colour Scheme.png

I then decided to make a cheat sheet of colour contrast, I do this for nearly all projects but I thought with this one I’d include it as well as my banking project as it just makes sense for a style/brand guideline. Here you will see what works what doesn’t work and what you can pair for AAA/AA Standards

Colour Contrast.png

Overall I’m happy with the design style I’ve taken, I feel a lot of music apps are dark and lack colour sometimes and I’m happy mine is bright, I also am happy with the typefaces I feel they work well together and I feel they’re very underrated in usage.

Back Cover.png

Final Screens & Prototype - Music App