Challenge: Create a Design System
Create a design system for a music player mobile app and save it as a reference file. Focus on assets, linked symbols and file specifications.

Check out the Adobe's XD Daily Creative Challenge for more information.

Mood Board
Introduction

For this challenge, I wanted to walk through my process of creating a design system. Design systems are not quick things; they cannot be completed within the few short hours like I had available to work on this challenge. They take time and iteration. So this will be a rough first draft of a design system. 

Mood Board
Unless there is a pre-existing style guide, often, when starting a new project, the first thing I do is look for inspiration. Design doesn't happen in a vacuum. You find inspiration and build upon what has come before. Just try not to copy something completely.  
I don't typically place it all the inspiration in one document, but it is a great habit to get into. Mood boards are useful for doing this. Think Pinterest, but not quite. Pinterest is the worst.
For this design, I wanted a darker interface with a pop of vibrant colours. Purple and teals are great for this. 

Colour Palettes
Along with a quick Google search, I also looked at https://color.adobe.com for my colour theme. I've been a big fan of the CC Libraries, so it's very easy to add the colour options. But I still tend to move into Illustrator to find complementary palettes and tints. For this design system, I went with the dark UI and vibrant purplish-pinks and teal. 

Font Choice
I went with a font called Muli for this design. Coming from a print background, I have to move away from using a variety of font weights. In order to bring load times down, it is important to simplify font choices. There's always going to be a struggle between aesthetics and function. 

Icons, Buttons and Controls
This last part of my design system, admittedly, needs more time. It was a challenge I only had a couple of hours to work on. But like I mentioned above, design systems are not static things. They develop and involve over time. 

Wrap-up
If you have feedback or comments, please let me know below or contact me directly. My email is design@tlpricefreelance.com. 
Photo by Leo Wieling on Unsplash

You may also like

Back to Top