Now that I’ve created my wireframes and have a good understanding of the layout of my app, it’s important to develop a style guide. This will make sure all colors, fonts, and icons are consistent across the app.
I originally started collecting my assets using Lingo. Then I made a more formal PDF as a shareable document for anyone doesn’t have access to my Lingo kit.
For my color palette I wanted a mainly neutral palette that didn’t distract from the content. The white background and black text offer nice contrast for legibility of copy. The gray is used to help emphasize hierarchy or text and icons. The gold and blue are my highlight colors. Gold, being the main highlight color, draws the eye to buttons. The blue, being the secondary highlight color, is used as a subtle indicator, eg. there is a new podcast episode available.
I chose to use Muli as my typeface. It’s a google font, and therefore easy to access and use. Also, it offers an excellent variety of weights. I use the Light and Bold weights to help emphasize hierarchy. I chose a sans serif font for legibility.
Conclusion:
Now that I have my style guide and UI elements in order, I can begin the visual design and create a prototype. This will allow me to begin user testing.