Dabbling in Design
Last year, I started a new job with a design agency here in San Francisco. I would be implementing UIs for our clients, with all of the wonderful UI and UX designs being completed by my immensely talented co-workers. I’ve always been interested in finding ways that I, as a developer, can collaborate better with the designers I am so fortunate to work with.
To aid that effort, I’ve picked up a copy of Sketch and signed up for Daily UI, which, as you can probably figure out from the name, is a daily UI prompt. What follows will be some musings on my learning a bit more about the tooling and theory of interaction and interface design.
#001 — Sign Up
The first emailed arrived in my inbox, and almost-certainly-intentionally, the prompt was to design a Sign Up page/modal/form/etc. I’ve had chatbots and conversational UIs on my mind recently, so that’s instantly the direction I decided I wanted to go. I opened up Sketch, created a new file, and created my first artboard.
I sat looking at the blank white screen in front of my eyes, and was reminded of a line from my favorite Broadway Composer / Lyricist.
White, a blank page or canvas. The challenge: bring order to the whole, through design, composition, tension, balance, light and harmony. — Stephen Sondheim
I decided I wanted to have a chat-bubble type conversation in the UI. The application would prompt the user for some information, and walk him through the sign up process. There needed to be some type of persona that the application would assume.
I chose to go non-traditional from a color perspective, since messaging interfaces are chock-full of grayscale, blues and greens. I chose a beautiful purple as the primary color.
From the several articles I’ve read on conversational UIs, I know that the tone and general attitude of the text is very important to keeping users engaged. I wanted my bot to be playful, concise, and helpful. So, say hello to Alfred, this fictional application’s mustachioed guide.
Sketch is at its heart a vector graphics application, not terribly unlike Adobe Illustrator. The real differentiator I think is that Sketch is really, really easy to use. The UI is simple, you’re not digging in menus to get to the tool you want. I am not very proficient with the pen tool in any application, but I made a pretty passable mustache for a Sketch-neophyte. It was extremely simple to make multiple artboards and symbols to help me quickly build out this chat UI I saw in my head.
About 30 minutes later, I had the basic flow built out. There was another tool I had heard talked about at work, that I already had downloaded, called Principle. Principle is an interaction design tool, which helps you put together higher fidelity prototypes of user interactions.
Principle works very well with Sketch, in fact, the two apps have very similar UIs. I was able to easily import my Sketch file. After watching two tutorial videos for Principle, this is what I was able to come up with.
A pretty simple demo, but hey, I’m proud of it. I was able to use a couple of different applications that the awesome designers I work with use daily, and create something that doesn’t look like total shit (I think).
