loading...
Cover image for Workdrop — UI Design and Prototyping

Workdrop — UI Design and Prototyping

sergix profile image Peyton McGinnis Updated on ・3 min read

workdrop (6 Part Series)

1) Workdrop — A file request app for teachers 2) Workdrop — Initialization and Configuration 3 ... 4 3) Workdrop — UI Design and Prototyping 4) Workdrop — Setting Up Serverless 5) Workdrop — The Frontend 6) Workdrop — #Twiliohackathon Entry

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):

Colors

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.

Type spec

*TT Hoves type specimen by TypeType

Completed design system

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.

Notifications

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.

Buttons

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!

Thank you for reading! God bless!

workdrop (6 Part Series)

1) Workdrop — A file request app for teachers 2) Workdrop — Initialization and Configuration 3 ... 4 3) Workdrop — UI Design and Prototyping 4) Workdrop — Setting Up Serverless 5) Workdrop — The Frontend 6) Workdrop — #Twiliohackathon Entry

Posted on by:

sergix profile

Peyton McGinnis

@sergix

A pseudonormal programmer.

Discussion

markdown guide
 

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.