How Tools Have Shaped the Role of the Designer
A few weeks ago I had the opportunity to deliver a talk at Shift in Split, Croatia.
Shift is a developer conference, so initially I thought it would be entertaining to talk about what it’s like to work with an engineer, from a designers perspective. The working title of the talk was Things Engineers Hate About Working With (Me) a Designer.
I was going to share the mistakes I’ve made and what I’ve learned from them along the way. It was to be a manifesto of what not to do when working with an engineer.
However, feedback included phrases like, “it’s a bit tongue & cheek” and the best talks are ones that are “raw, honest and vulnerable.”
You don’t write code, but you’ve been successful in spite of it. The lines are blurring between design & engineering. Why not talk about how tools have helped bridge that gap?
There was something more interesting to talk about. I realized that I didn’t write code because I didn’t need to. For years I’d been spoiled, and to some extent enabled, by a handful of incredibly talented engineers. The realization didn’t sit well with me.
I scrapped everything and went back to the drawing board.
Tools were my first introduction to a hobby 🖍 that turned into a passion 💘 that has become an obsession 😍
They have been steadily influencing and shaping me as a designer from the first time I sat in front of a computer in elementary school. I would not realize how much they’d impact my life until much much later.
Tools have had a massive influence on me and my work, but had they on others?
Data Collection: The Survey
To answer this question, I put together a survey and sent it to a handful of designers and asked them to help me spread the word.
Tools like Twitter or Facebook — yes, they’re tools — allowed me to reach a community of designers that extended well beyond my personal network with far more efficiency than traditional methods like direct mail, the telephone, or even email.
Tools have become a pervasive fixture in our lives. We tend to forget what life was like prior to their existence. For fun, I started to add up the tools I used to create the talk. The list kept growing. At the time I delivered the talk the list had ballooned to include 44 tools.
Survey Participants: An Overview
In total, 107 participants across 4 continents contributed 6,601 words to the study.
Of those surveyed seventy-four percent have been designing for more than eight years. They have borne witness to this massive shift in tools, and it was evident in their responses.
The top 3 skills possessed by designers were Interaction Design (84%), Product Design (79%) and Visual Design (74%). Interestingly, one out of four respondents possess Motion Design (25%) skills.
Web & mobile design consume the lion’s share of our time and attention, but twenty-six percent of those surveyed still work in print.
Sixty-six percent of those surveyed work for an in-house design team. Participation came from a variety of in-house design teams including those at Facebook, Twitter, Google, Airbnb, Pinterest, Instagram, Dropbox, Apple and Uber.
More than half of the design managers surveyed are still in the trenches doing the work. I can’t express how valuable this is when trying to recruit and hire talent.
Design & Our Tools: A Look Back
We had been left to play with the hand we were dealt.
Photoshop is an amazing tool, but it was not designed for web or mobile design. It is image editing software designed by engineers Thomas & John Knoll in 1987. Three words. Image. Editing. Software.
The same goes for Illustrator. It’s an incredible tool, but it was not designed for web or mobile design either.
The Death of Flash.
In April of 2010, Steve Jobs used more than 1,600 words to explain why Apple was killing the support of Flash on iOS. It marked the end of an era, but also opened the door for designers and developers to fill the void it left behind.
The Birth of Sketch.
While designers around the world mourned the death of Flash, a small team based in The Hague was preparing to launch the first tool of its kind.
Founded in 2008 by an engineer (Pieter Omvlee) and a designer (Emanuel Sá) Sketch released to the public in September of 2010. Sketch, unlike the tools before them, set out to build something that would meet the growing needs of a designer.
Scope has grown enormously. Many years ago, you could make a fancy design and call it a day — after you had exported some assets, perhaps.
–Pieter Omvlee, Founder Bohemian Coding
Expectations have changed.
For many years we designed primarily static experiences with an extremely limited set of tools. Print, web, and even mobile browsing experiences were flat, static, and linear.
We operated in a world where designs often made their way to a printer 🖨, not a developer 👩 💻
Today we’re designing and building highly interactive experiences with a range of tools; tools that allow us to work seamlessly across a variety of platforms & device types.
The process has changed, too.
The days of designing, building and shipping in a vacuum are gone. Today, teams rapidly design, prototype, test, and iterate before shipping to customers. They use a mixture of qualitative & quantitative research to help inform design decisions.
The adoption of prototyping and user testing has produced radically better outcomes for teams and stakeholders. A number of participants echoed this sentiment.
Interactive prototypes allowed me to express micro-interactions and workflows in a way that made sense to stakeholders, which improved my ability to communicate design tremendously.
Additionally, it allowed me to bring user research into the core of my practice.
Teams are learning earlier in the process what does and does not work, saving time ⏰, money 💸 & resources 👨👩👧👦
The Next Generation of Tools
Just a decade ago, competition among the tools for digital designers was muted, at best. Today new applications and utilities debut seemingly every other week.
–Khoi Vinh, Subtraction
Today’s tools offer more specialized solutions than their predecessors. They have created efficiencies in our workflows, arming us with better and more effective means to communicate our ideas.
Sketch, selected by eighty-two percent of respondents, was far and away the winner in this study. Sketch also landed on top in Khoi Vinh’s 2015 study “The Tools Designers Are Using Today” when he asked designers which tool they primary use for interface design.
In just twelve months the landscape has shifted significantly. Newcomers like Figma and Adobe XD have grabbed a portion of the market share while Fireworks, which was deprecated in 2013, is officially dead.
In 1980 Steve Jobs gave a talk in which he famously referenced a 1973 Scientific American study by S.S. Wilson, where he discusses our ability as humans to create efficiency through tool building.
Today’s tools feel a bit more like a 🤖 driving 🚗 than a 👨 on a 🚲.
This hyper-efficiency is amplified by the development of plugins and extensions. They can augment software applications like Sketch, drastically cutting design time while still providing a deep level of customization.
Craft (25%) and Zeplin (23%) have impressive adoption rates considering they launched in early 2016 and late 2015 respectively.
Below are a few favorites that have permeated my workflow.
1. Content Generation
For years I moved Morgan from one comp to the next. Sometimes placing her in a circle, other times in a square. A painstaking process that consumed far too much time and begged to be automated.
Enter Craft from Invision. It’s a plugin that allows you to auto-populate avatars, names, cities, currency, text from actual websites, and much much more.
Lorem Ipsum isn’t going away, but it’s incredibly liberating to have a tool that can automatically generate a variety of content types.
2. Style & Asset Production
Historically, the development and maintenance of a style guide was extremely time-consuming. Every change, big or small, required an update to the document.
Today you can quickly export styles, assets, and code with a single click. Every change is updated and reflected in real-time.
I’d like to a meet a designer who doesn’t cringe when they hear the phrase, “where are the redlines?” uttered aloud. Redlines might be the dirtiest word in the design vernacular; a necessary but tedious evil that designers deliver to engineers.
The team from Zeplin recognized that the handoff between design and engineering was broken, and they set out to fix it. With Zeplin you can annotate, export styles, and assets, however, my favorite feature is their measurement tool which supports both relative and exact measurements. It’s an elegant and thoughtful addition.
3. Inline Calculations
While technically not a plugin, inline calculations are game changing; an incredibly simple feature that, once discovered, is thoroughly delightful. Details like this help create differentiation in a crowded and competitive marketplace.
I designed and plotted every graph and chart by hand and saved countless hours making these calculations inside Sketch. I can finally put my trusty TI-82 👋 out to pasture.
Fortunately, these and other efficiencies have left us with more time to focus on prototyping.
Participants said they discovered a slew of new plugins as a result of taking the survey. If you’ve come across any new ones worth noting, please add a comment 😊
Prototyping: A Closer Look
Until recently, prototyping and the tools that supported their development were not particularly prevalent. Sure we had HTML/CSS, Keynote and you could wire up an Omnigraffle file to meet your needs, but it was very time-consuming.
If I know building a prototype is going to take a really long time, I’ll be more hesitant to do it.
The easier and faster it is to prototype, the more I’ll do it.
A trend has emerged, and it’s glorious.
The ubiquity and accessibility of prototyping tools has contributed to this shifting mindset.
But what’s the inherent value of a prototype? What percentage of time and resources should be allocated to prototyping? When should I prototype?
Value is derived in many ways, but the following benefits have consistently presented when prototyping is included as a part of the design process.
1. Design solutions are truly holistic
Prototypes require that designers think through edge cases or micro-interactions (e.g., animations, transitions, etc.) that don’t necessarily present themselves when developing static mockups.
Is it a sheet, a view, a modal? How does it feel when I tap on it?
Good prototypes tell a story. They have the ability to communicate on your behalf.
2. Communication is clearer
Prototypes, unlike static mockups, do not leave room for interpretation. Prototypes create a universal language that can be instantly understood by everyone in your organization; a language that enables team members, especially those that aren’t designers, to provide better and more actionable feedback.
3. Clarity is achieved faster
A prototype is worth a thousand meetings -Paul Stamatiou
Prototypes allow teams to determine what does and does not work much earlier in the process. That insight translates into significant savings, especially over time. This is a win-win for everyone, especially your customers.
Newer tools like InVision (69%), Framer (25%) and Flinto & Principle (22%) had impressive adoption rates. InVision’s relatively mild learning curve, along with their first mover advantage contributed to their dominance in this category.
The exclusion of Marvel App as a form option was an oversight.
The percentage of time spent prototyping is growing. Of those surveyed, forty-eight percent spend between eleven and fifty percent of their time creating prototypes.
Twenty-one percent of participants surveyed have a dedicated resource allocated to designing and building prototypes. Further validation that we should be incorporating prototyping into the design process.
Eighty-three percent of those surveyed said they could write code. Of those designers, forty-six percent leverage their ability to code when prototyping.
Ninety-three percent of those surveyed said it helped inform a decision. By now this should come as no surprise, but it’s reassuring to see such an overwhelming response.
Prototypes help build consensus. They help stakeholders, internal or external, better understand your vision. They tell a story that static screens can’t. Prototypes are powerful.
A Shift and a Convergence
Tools have made us better storytellers, better communicators. We still need to articulate our design thinking, but tools can help illustrate an idea when our tongue gets tied.
Tools have made me think more thoughtfully of the construction of pages, screens, objects & interactions.
It’s also allowed me to communicate my ideas in a way I couldn’t before.
For the eighteen percent of respondents that said tools did not shape them, my guess is that they have been or are being shaped by them, but aren’t wholly aware of the role they play.
After reading a draft of this post my friend Doug commented that, “tools shape designers and how they work as much as designers push and shape tools — it’s not one way or the other.” Great insight, Doug.
We’re seeing change that goes well beyond the desired skill set of a designer. Perception of the value designers bring to the table has also changed. This is most evident in the venture world. The Designer In Residence, a role which is still being defined, speaks to our newly appraised value. Designers are occupying C-Level and board positions, too.
While the line between designers and engineers has blurred, our crafts remain decisively unique. Although the ability to code may be considered a bonus, that ability is not at the top of that list when I stack rank the value we can provide an organization.
Instead, I’d advocate that designers invest in developing a deeper understanding of business strategy, growth marketing, and operations.
That said, I hate not being able to build my ideas myself, and that I need to rely on someone else to bring them to market. It is a personal choice we must all make.
Not open for debate is our need to be able to communicate effectively with our partners, especially engineers. But that can come in many forms; from communicating the easing of an animation to demonstrating an idea with an interactive prototype.
The survey responses are a clear indication of this trend. We’re collaborating as never before, building world-class tools and applications like Sketch, InVision, Quip, Framer, Flinto, Zeplin, and Medium.
Do not wait; the time will never be ‘just right.’ Start where you stand, and work with whatever tools you may have at your command, and better tools will be found as you go along.
— George Herbert
For those who want to flip through the deck, I uploaded a PDF without presenter notes 🚫📝 and another one with presenter notes 👍🏼📝
A special thank you to Ivan, Matea & Tomaž for the introduction and helping make this opportunity happen.
To Jill, Justin & Shane, thank you for the ruthless feedback and encouragement. The end result was better because of you.
To everyone that took the survey or helped me spread the word, thank you. The 100+ responses and over 6,600+ words helped shape and elevate the talk to a special place.
To Aaron, Danny, Doug, Greg, Joana, Mike, and Sashka, thank you for taking the time to send me feedback.
Oooh, and I would be 😍 if you could 💚 the post.