This continues my series on my #twiliohackathon submission! Thanks for reading!
GitHub Repository (MIT Licensed)
Stackshare
Normally, I do all my UI/UX design and prototyping with Adobe XD, but given all the great things I've been reading about Figma, I thought I'd give it a whirl.
Basic Theme
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.
Colors
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
Type choice
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.
*TT Hoves type specimen by TypeType
Completed design system
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.
Components
Now that we have a basic theme down, it's time to start on a couple of the components.
Notifications
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.
Buttons
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.
Illustrations
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.
The full UI
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!
Top comments (7)
Looks great! TypeType is amazing. I use their typefaces for every single one of my projects 👌
Thanks! What's your favorite typeface from them?
TT Interphases is now my go-to as it is so versatile :) When I saw your article I was literally downloading TT Jenevers, so I'm excited to try it out (I swear dev.to has some tool to show you recommendations based on what you've recently searched... This has happened to me before).
Do you have any other recommendations from TypeType or other type foundries?
Nice!! I really like TT Interphases as well.
I'm a big fan of Neue Montreal from PangramPangram as a Helvetica/Neue Haas Grotesk alternative. PangramPangram has a lot of unique display typefaces that I really like.
Hehe Montreal looks great. I'm gonna bookmark PangramPangram and hopefully use their fonts in future projects. Thanks for sharing!
Great job! I recommend you to use Contraste to test the accessibility of your colors. I noticed that your "verified" notification box doesn't pass the test.
Oh interesting, I haven't seen this tool before. I've been using WebAIM's contrast checker to test accessibility.
And thank you for pointing that out! I'll double check the contrast. I think I may have been testing a 4.5 ratio rather than 7 for these so I'll review them.