I, Robot: How Mark Jardine of Tapbots designs award-winning apps with Sketch
“Even though I’m using Sketch every day, it still brings me joy. It continues to feel powerful and special which makes doing my work even more enjoyable.”
What makes a truly great app experience? For Mark Jardine, UI Designer at Tapbots, it’s as much about user interactions as it is about the design itself. Mark is the designer behind Tweetbot, Calcbot and Pastebot (amongst other things), and we sat down with him recently to talk about his experiences in the design space, his thoughts on recent trends, and why Sketch is his go-to tool.
Can you tell us a little about how you started designing apps, and when you started using Sketch?
Let me start a little bit earlier in the timeline. Up until my first few years of college, I was clueless about design. I loved to draw and my dream was to become a character designer or illustrator. After a few illustration/art classes in college, I felt that my skills weren’t up to par. I also started to get really into computers so I was interested in a field that blended art with computers. That led me to two potential professions — 3D animation/modeling, and graphic design. I really wanted to pursue the first, but in the end decided that going into design was far more financially practical.
Design school was focused heavily on identity and print and packaging design. Macs were commonplace, but I was a poor student using a PC my parents bought me as a gift when I went off to university. There was no remotely inspiring design app on Windows (at least at the time), but the web was full of inspirational UI design. That’s where I found my passion. I went through the motions in school and learned things here and there, but I was mostly excited about building websites outside of class. After a few years, I ended up getting a job as an entry level web designer and dropped out of school. It was a tough choice, but I’ve always followed my passion and it felt like the right choice for me.
With the money I earned from my new job, I bought my first Mac — an MDD PPC G4 — and I was blown away by the beauty of Aqua. Then there were all the amazing apps. Not only were they well-designed, they had delightful experiences and were very intuitive. Truth be told, I never felt value in paying for software until I bought my first Mac. Companies like Panic, Delicious Monster, Mac Rabbit, and Icon Factory became a huge inspiration for me. There was also the fantastic theming community like Macthemes and guys like Max Rudberg making inspirational replacement UI themes for OS X. I worked primarily as a web designer, but I would dabble in icon design and theming for fun. I dreamed of being able to design software someday, but never really had a clear path to pursue it.
When the iPhone App Store was first introduced, I had my first opportunity to design apps. The first one was through Oakley, the company I worked for at the time. And then Paul Haddad and I made Weightbot together. Being able to design my first app was a dream come true.
My first Sketch document seems to be from 2012 — around when we started working on Tweetbot for Mac. The workflow was just so much better than Photoshop.
In the early days Sketch wasn’t around. Everything was done in Photoshop, and honestly layer management and dealing with raster-based workflows was a chore. Exporting assets was a nightmare. My first Sketch document seems to be from 2012 — around when we started working on Tweetbot for Mac. I remember it being a little buggy back then [laughs], but the workflow was just so much better than Photoshop. I pretty much switched over to Sketch for every new project we started until I didn’t have to deal with Photoshop anymore.
When you start designing (or redesigning) a product, what are your main goals, and what’s your approach?
Whenever we start a completely new product, I start off brainstorming and writing down all of my thoughts. What are the fundamental problems I want to solve? What kind of core features would make this app better than the competition and solve problems that others don’t? Then I’ll brainstorm at a high level any interesting UX and UI ideas that would make this type of app an enjoyable experience. This is one aspect that has always differentiated our apps from the rest. Once I feel like I have something that sounds great on paper, I’ll open up Sketch and start mocking up rough concepts and iterating over and over until I’m ready to pass assets over to the development side.
You’ve recently launched Tweetbot 6. What did you want to achieve from a design standpoint, and how did you improve on what was already an excellent iOS Twitter app?
Since we’ve been refining the experience for many years, our focus for the version 6 launch was to tighten up some of the loose ends and make use of Twitter’s V2 API as much as we can. We are currently calling it “Early Access” because we still have a lot of nice improvements to make all around.
With Tweetbot 6, we plan to introduce a lot more optional icons which will let me get more creative and push boundaries. I’m excited about that.
Launching a subscription version of the app was the only way for the two of us to sustain continuous development over the long term. So our goal for version 6 was to launch a good core foundation that can be improved upon over time. So with the launch of v6, I can’t say I’ve accomplished what I want to achieve from a design standpoint just yet. It’s a work in progress and I’m excited about all the new things that are coming.
How does Sketch help you achieve these goals and come up with a finished product that you’re happy with?
Sketch has been constantly improving with each version since I started using it in 2012. It’s been a joy to see it grow and become such a great design tool. I love that I don’t have to fight with the tool to make it work the way I need it to. Most inefficiencies are a result of my laziness and not using the latest Sketch has to offer. Once in a while I’ll think, “There has to be a better way to do this”. Then I’ll go look up how other people are solving the problem and there’s usually a feature or trick I wasn’t aware of. Even though I’m using Sketch every day, it still brings me joy. It continues to feel powerful and special which makes doing my work even more enjoyable.
Looking back, how much do you think the design landscape changed in the last few years? And how has UI design evolved since you started?
It’s changed a lot, but I’ve sort of gone with the flow. To be honest I’ve got the best work/life balance these days. I don’t stress over things going on in the design industry, follow trends, or bother to get into heated discussions on opinionated topics. We only build apps for the Apple ecosystem so I focus on that. [The Apple design team] sets the UI guidelines after each WWDC and I try to follow and break them where I can. I feel like I work much better when there are baseline constraints set and I can focus on my creativity within those boundaries.
Even though I use Sketch every day, it still brings me joy. It continues to feel powerful and special which makes doing my work even more enjoyable.
The whole transition from Skeuomorphism to the original flat design felt like a step backwards in the early days, but I feel like in hindsight it was for the best. There are so many device sizes to design for these days and simple is just better. But I do think Apple is doing a great job bringing back parts of what we loved about skeuomorphism and I definitely prefer a lot of today’s direction over the golden ages of the past.
A big part of your apps’ branding is their icons. They’ve always been really unique and instantly recognizable. What are the challenges involved with developing these icons?
I’ve always worked better under stricter design constraints. Sticking with the whole robot theme backed us into a corner in a way, but it has also made things easier. It’s a given that each icon needs the pill-like eyes and then I design around that. The most challenging icon to date was probably Pastebot. It’s also probably my favorite. Tweetbot has probably gone through the most changes over time. With Tweetbot 6, we plan to introduce a lot more optional icons which will let me get more creative and push boundaries. I’m excited about that.
What’s kept you coming back to Sketch over the years?
Being native, and having all the qualities of a good Mac app for starters. But everything just works how you’d expect. I definitely don’t use all the features, but I’m glad they are there when there’s a situation that I can be more efficient in. The one feature I’ve been using a lot and really enjoy is the Tidy feature of multiple selected objects. It’s such a great idea and saves so much time. Each update gets faster, more stable, and brings cool new features so I’m always excited to check out the latest major release.
Each Sketch update gets faster, more stable, and brings cool new features so I’m always excited to check out the latest major release.
What advice would you give to young developers that are thinking about getting into app development and design?
This is a tough one. The market is so saturated these days that it’s really hard to get noticed. I think these days you either need to have a really compelling fresh idea, or a really interesting take on an old idea. Our apps have fallen in that latter category. But focus on the user experience and the details — an app can look amazing in a screenshot, but if it doesn’t feel good to use, how it looks doesn’t really matter. How the app feels (by which I mean UX and interaction design) is probably top of my list. I probably put more focus on how our apps feel to use than the design itself. I’d consider myself a pretty average designer. I think my strength is in seeing the whole picture and being able to do a bunch of things well enough to provide a nice package as a whole.
Have you developed an awesome product in Sketch? Used Sketch to create an artistic masterpiece? Share it with us and we might feature you in our next #MadeWithSketch post.