How Sketch Revolutionized My UI Design Process
The American Institute of Graphic Arts (AIGA) is the largest community of design advocates in the country and hosts an event called Cocktails with Creatives in upstate New York for any seasoned or aspiring designers to attend. In July, the topic was on an interface design application called Sketch, one of the main tools in the quiver of applications I use here at Exago. Shauna Keating, a designer at Moonfarmer and advocate for the Hudson Valley tech community, invited me to give a short Sketch demo at the event, and I agreed.
That session of Cocktails with Creatives was being hosted at IBM Poughkeepsie, a campus so large that I ended up getting lost in a slew of abandoned buildings and parking lots, not knowing if a living soul even worked there. After finding some other event-goers who were just as confused as I was, we finally found the correct building a couple miles away in a much livelier area filled with gardens, groups of jogging (frolicking?) developers, and beautifully modern buildings that didn’t have trees and vines growing through them.
The event was held in a room designed to be a collaboration powerhouse. It was an open environment with no cubicles, individual desks that could be raised or lowered if you felt like being one of the few awkward types who stands while working, a full kitchen, floor-to-ceiling windows that overlooked the Hudson River, lounge chairs with blinders on the sides for private conversations, whiteboards on every wall for the recording of eureka moments on the way to the bathroom, and a glass-walled cafe/presentation room in the center of the entire office. In the cafe, people snacked on hoagies and free cheese cubes while being plied with stickers, buttons, and other swag emblazoned with Sketch’s orange diamond logo.
I sat with a few people who did web and app interface design work for IBM, one of whom was to give the first presentation of the night. It was at that point that Shauna, the moderator, informed me that I would follow with the second and final presentation, which sent me into a quiet panic. I had a short demo prepared, but I hadn’t realized I would be responsible for fifty percent of the night’s content! I’d come expecting to speak a little and learn a lot, not the other way around.
I watched anxiously as the first presenter took the stage, plugging her laptop into the projector. In her talk, she walked through a step-by-step tutorial on designing a gorgeous summer-themed interface for a phone app login screen. As her presentation went on, it slowly dawned on me that I was one of the most experienced Sketch designers in the room. Her work was sharp, but it was simple compared to what I did on a daily basis at Exago. I use Sketch to its fullest extent professionally, so I grew more confident in my ability to pass on that knowledge to the other designers.
Soon it was my turn. I took a quick survey of the room and learned that half of the audience members were new to the field of interface and experience design and were there for advice they could use to jumpstart their careers. The other half just wanted to learn more about how wonderful Sketch is! I relaxed and slipped into a talk on how I started designing for Exago, a thriving business intelligence software company, and worked to develop the processes that would boost my productivity in that role and eventually grow it into a fully-equipped design team.
I was given the opportunity to improve the look of Exago BI’s interface (for the sake of our end-users and the sales department), which allowed me to relieve the burden of design from our developers. I started small, by simply using the application the way an end-user would and figuring out what could be improved. My first priority was to give the application a sleek, minimalist look, as the UI style was overdue for a refresh.
I began using Sketch after the first UI redesign release, slowly discovering how helpful it would be in developing the processes and workflows I would need in order to succeed over the next several years. It simply isn’t enough to draw pictures of an interface, pass it off to developers, and call it a day because the number of pictures increases over time, and they eventually become impossible to manage. An in-house designer is also responsible for breathing life into new features, and as time goes on, revamping the old ones. These mockups need to be linked somehow so that the elements within them can be used over and over again. If there’s a style change, it’d be nice to change an element only once and have it reflected on every mockup instantly. These pictures should also be so detailed that a developer can look at them and instantly glean the information she needs: the color value and size of buttons, the length of inputs, the margin/distance between objects, how icons are supposed to function, etc.
Sketch has become my all-time favorite design application. Before realizing its potential, I used the application for icon design and otherwise made do by painstakingly drawing individual pictures for each instance of every design element. Then I discovered Sketch’s Symbols feature, which allows me to draw an element just once and use it repeatedly. I can build mockups so much more quickly than I could before because if I redesign a symbol, all mockups containing that symbol update instantly!
Exago now has a complete library containing every UI element, known in design theory as the “Single Source of Truth,” and it’s improving every day. The design of every input type, button, text field, icon, etc. is clearly defined and lives in one place, ensuring that future designs look consistent. If I want to update or build a new skin/theme for Exago BI, all I have to do is update the library of Symbols where before it would have meant redrawing hundreds of pictures from scratch.
But how can Exago’s developers view my mockups and get a feel for what the front-end is supposed to look like? For this, I added a web application called InVision to my toolbox. It’s a private online repository for all of my Sketch designs that everyone in the company can view. When I upload my pictures to InVision, I can use them to build an interactive mockup of the product, to show developers how elements are supposed to behave with one another. The developers can insert notes wherever they like, so I can have a targeted discussion with an individual that other devs can read later. They can also “inspect” each picture to access pixel-perfect measurements, colors, and downloadable assets. No more endless meetings! I can simply upload my designs, and the developers have everything they need.
At Cocktails and Creatives, I was supposed to be on stage for 5-10 minutes tops. I was up there for what must have been an hour, until I was eventually kicked off in good fun — we all needed to go home for the evening! I’m very driven in what I do, and I wanted the new designers in the room to see that. There’s a chance they may join a startup and need to build these processes from scratch just as I did, and it was my pleasure to share some of the tricks I’ve learned. It was also great to interact with IBM’s dedicated design team, as this was my first time meeting with other professionals in the design space. I look forward to showing off what the design team cooks up in the future!