This continues my series on my #twiliohackathon submission! Thanks for reading!
Starting out, I created a new project in Figma and created an iPhone 8 size layer. (mobile first!)
As you can see in the post cover image, I already have a logo designed, but I haven't fully decided on a theme yet.
I've decided to go with a mostly monochromatic color scheme so that the actions really pop out with bright neons, such as mint and red for success and error, respectively.
I'm not that great with colors, but here's a base pallette I hope will work well (I used ColorDesigner to put this together):
Obviously, I can change the colors as needed, but I'll stick with it for now.
The full color pallette:
- Background — #FAFAFA
- Foreground — #121212
- Error — #F23034
- Note/Info — #732DD9
- Success — #4FED77
- Warning — #FFD10F
- Interaction — #1C3FFD
I absolutely love type design, and my go-to typeset for web projects is TT Hoves, which sadly isn't free but it's well worth the cost.
After finishing the main theme, I created local styles in Figma for both the colors and the type and then exported it as a library for use in my other Figma files.
Now that we have a basic theme down, it's time to start on a couple of the components.
I played around a bit with some icons and colors, and got to a place where I liked the notification design. I'm trying to keep the design mostly flat, but I'll end up adding some box shadows later on. I also adjusted some of the text colors to be accessible with a minimum contrast of 7.0.
The top button is the primary action button. Each page will only have one primary action, as to make clear the suggested action the user should take. The bottom button is the secondary action button, which is an alternative but likely action the user could perform.
To make the interface pop, I added some illustrations from isometric.online, which provides free, open-sourced (MIT) isometric illustrations. I customized the colors in them to conform to the design system.
As of now, I have completed the entirety of the UI, but I will not be showing it off until the hackathon is completed. Check back later to see it in action!