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.
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.
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.
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.
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.
If you have feedback or comments, please let me know below or contact me directly. My email is firstname.lastname@example.org.