Workdrop — UI Design and Prototyping
Tags: webdev, ux, twiliohackathon
Published: 2020-04-13 00:23:55

*This continues my series on my #twiliohackathon submission! Thanks for reading!*

[GitHub Repository](https://github.com/Sergix/workdrop) (MIT Licensed)
[Stackshare](https://stackshare.io/Sergix/workdrop)

<hr />

Normally, I do all my UI/UX design and prototyping with [Adobe XD](https://www.adobe.com/products/xd.html), but given all the great things I've been reading about [Figma](https://www.figma.com/), 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](https://colordesigner.io) to put this together):

![Colors](https://dev-to-uploads.s3.amazonaws.com/i/yt1uilmll5jlnhbmlidu.png)

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](https://typetype.org/fonts/tt-hoves/), which sadly isn't free but it's well worth the cost.

![Type spec](https://dev-to-uploads.s3.amazonaws.com/i/bn32dogk0t68k0u4kr4b.png)

**[TT Hoves type specimen by TypeType](https://typetype.org/files/typetype/fonts/hoves/tt_hoves_specimen.pdf)*

### Completed design system

![Design system](https://dev-to-uploads.s3.amazonaws.com/i/eu2r30psufghp5idw8il.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/he3209lrri8dce5cudol.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/i/kxkptd0whd9rnb0vc9rx.png)

### Illustrations

To make the interface pop, I added some illustrations from [isometric.online](https://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!