My first UI baby

“You know how to use Sketch?”

“No.”

“Cool, well, learn because you’re going to design the user interface for our plugin site.”

“!!!!!”

I don’t know if you know this, but the internet is a magical place with all the information in the world. When you’re in charge of doing something you’ve never done before in a program you’ve never used before, the internet’s got your back. Plugins.viastudio.com will be a new site where you can purchase a plugin that allows you to map data from Gravity Forms back to your salesforce account. And I am the person who was tasked with creating the user interface (UI) for it!

Now, I was super honored and excited to do this project. However, I didn’t know what a UI kit was or how to operate Sketch. So, off I went to submerge myself in the internet’s overwhelming amount of information. Fortunately, sites like Udemy exist. They have a great course that teaches you to use Sketch to build interfaces. I was able to pick up on how to navigate Sketch pretty quickly thanks to this class and how super intuitive it is to use- as it should be.

For those who don’t know: a UI kit contains all of the visual elements of a website in one place so the dev team can reference it and build the site accordingly. Elements such as button styles, patterns, colors, typography, navigation styles, imagery, etc. are stored here so everyone can get a clear idea of what the site should look and feel like. This is the good stuff.

Natalie, our senior front-end developer gave me all of the wireframing (the skeleton) for the website and a list of all the elements I needed to create. I had total freedom with how I wanted to design the interface, which is simultaneously rad and overwhelming. Onto brainstorming!

Thought & Action Process:

• I want it to be interesting and engaging enough that people are excited about getting this awesome plugin.

• But remember: it’s a plugin site, so I must consider who will be visiting the site and purchasing it. So, I don’t want it to be too playful or gaudy. It needs to be to-the-point.

• Colors – minimal yet bold, reminiscent of VIA’s colors with a focus on blue. Blue makes one think of authority, relaxation, and cool as in temperature, as in metal, as in technology. The pop of yellow draws the eye to CTAs and adds a little kiki to the bouba. It also makes one feel happy, which they will feel once this plugin is in their life.

• Type is sans serif – easy to read quickly, no-nonsense, modern, and doesn’t take itself too seriously – Everything has a personality.

•Design a little icon or pattern that represented connection and linking of things.

After a lot of research and pulling inspiration from people who are well-versed in UI, I designed my very first UI kit. I’m not sure if it was entirely necessary, but I laid out the design of each page of the website, as well as the mobile version. I mean, why not do the full shebang? Especially if you have a little bit of Type-A in you. And although it was rather time-consuming (being a newbie doesn’t help), it was kind-of a breeze using Sketch to create all of it. Which I’m forever grateful for.

I’ve seen what the development team has created so far, and they’ve done an amazing job making it look exactly as I envisioned. They’ve also added some really cool animation in places that make it so much more engaging. It’s like my first webchild being birthed before my eyes. I’m proud to say I am now a webmother, and I hope to continue to grow into the webmother I always dreamt I’d be.