What’s next for Sketch in 2020?

December 6, 2019 • Sketch, What's

There’s no doubt that 2019 has been one of the biggest years in Sketch’s history — from announcing our first funding round, to launching the Sketch for Teams public beta it’s been an exciting 12 months. But we’re even more excited for what lies ahead. Before we show you a few sneak previews, though, we thought we’d reflect on this year’s highlights.

Back in March, we announced our first capital raise since Sketch began almost ten years ago. In our Series A round, we took $20 million in funding from Benchmark to help us grow and focus on areas where we knew we could make a bigger difference to the design process — like Collaboration.

Taking funding wasn’t just about raising capital, though. With a portfolio that includes the likes of Elastic, Twitter, Uber and Zendesk, Benchmark have become an incredible partner — helping us bring on COO Matt Langdon and scale up our operations across the whole company.

And of course, this wasn’t the only big announcement we made. It was also the perfect time to share that we’d passed one million paying customers — a huge milestone for us and one that inspires us to continue our mission to help designers do their best work, every day.

In July, we launched the Sketch for Teams public beta and the response has been amazing. We’ve had more than 5,000 teams sign up — and the feedback we’ve received has helped us shape the future of the product and make improvements.

Since the public beta launch, we’ve introduced Mentions and Projects, as well as better Cloud documents and Cloud Libraries support in the Mac app. And we’re not done yet. Sketch for Teams paves the way for greater collaboration across organizations, bringing the right people into the design process at the right time, and we can’t wait to share what’s next with you.

While Sketch for Teams might have been our headline launch for 2019, we’ve still been working hard across the whole platform. On the Mac app, we launched a whole host of new features and improvements. Here are some of the highlights:

Smart Distribute — Powerful controls that make it easier than ever to create and manage complex layouts.

Variable Fonts Support — And better support for OpenType features, for more control and flexibility over typography in your designs.

Components Panel — A new way to organize and use Symbols, text and layer styles.

Smart Layout — The first native solution for flexible components in a design tool.

In 2020, we’ll kick off the year with some important improvements to the Components Panel and Popover based on your feedback. Then we’ve got something big coming. More on that later.

Our Sketch Ambassadors continue to amaze us with their dedication, commitment and support to hosting fantastic events around the world that bring local design communities together. There are now over 100 Sketch Communities, spanning almost every continent and collectively, in 2019, they hosted 216 events across 35 countries. We couldn’t be more proud to support them.

If you haven’t already, head over to sketch.com/community to find your nearest local group or event. This year alone, new communities launched in Croatia, Pakistan and Japan, just to name a few. And if there’s no community nearby, why not apply to become an ambassador and start one? We’d love to have you on board.

As we’re already well underway with our big projects for 2020, with Sketch 61 we took the time to take a step back, address some bugs and ship a handful of small but significant improvements.

There’s no headline feature in this release, but there are plenty of small updates that should add up to a better all-round experience, including:

A performance boost, particularly when it comes to navigating large documents
More helpful error messages for Cloud document downloads (and some fixes so they show up less often)
The option to copy a Cloud link by right-clicking on a thumbnail in the Documents window
And plenty of smaller, but equally important bug fixes.

Sketch 61 is available right now. Head to sketch.com/updates to read the full release notes.

2019 has been an incredible year for us, but with 2020 just around the corner, it’s time to look ahead to what’s next. Over the past year we’ve said hello to 46 new team members in almost every department, and with so much new talent behind Sketch, we’re ready to ship some incredible updates.

With so many exciting plans for 2020, we decided to take just a handful of the things we’re most looking forward to and share them with you in this short film:

We’re very excited about our plans for the coming year, and we can’t wait to share more with you. In the meantime, from all of us at Sketch, we hope you have a happy and peaceful holiday season. We’ll see you in the new year.

What’s the 2020 Color of the Year? There are three so far

October 29, 2019 • Color, What's

Twenty years ago, the Pantone Color Institute began a tradition that’s become ubiquitous across the paint industry: The Color of the Year. Equal parts trend forecasting and marketing craze, the Color of the Year program elevates a single color to demigod status. The company’s first selection, in 1999, was Cerulean. “Lifestyle movements suggest that consumers will be seeking inner peace and spiritual fulfillment in the new millennium,” the company announced.

Over the past two decades, many other color and paint companies have followed Pantone’s lead, naming a Color of the Year they feel encapsulates not only where the world is, but where it’s going. “We view the Pantone Color of the Year as an educational program that is intended to highlight the relationship between what is taking place in our global culture and how it manifests itself in color,” says Laurie Pressman, VP of the Pantone Color Institute.”With color and context so intertwined, there really are reasons why a color family or individual color comes into prominence when it does, and for the most part the popularity of a color is symbolic of the age we are living in.”

Announcing a color of the year also helps these brands speak directly to consumers, whether they’re people buying paint at Home Depot or designers looking for trend forecasting as they develop new products. The latter is more important than you might imagine, in the $24 billion paint market. In a New York Times piece on color’s significance in culture, Bruce Falconer offers a glimpse at the influence of Pantone’s research. “Color forecasters like Shah and his team at Pantone have tremendous influence over the visible elements of the global economy—the parts of it that are designed, manufactured, and purchased—though their profession itself is all but invisible,” he writes.

Most companies begin researching a couple years in advance, visiting trade shows to see what’s happening in retail and following the lifestyle trends of trusted influencers on social media. But they also depend on intuition and experience to make their forecasts. Pressman says the Pantone team stays “on the lookout for the color we see as ascending, and seems to be building in importance across all areas of design—the one color that is really pushing through, and the single shade we think can communicate the color message that best reflects what is taking place in our culture at this moment in time.” Ideas can emerge from expected places, like fashion and design, but also sources more far afield. “Areas we look to can include the entertainment industry and films in production, traveling art collections and new artists, fashion, all areas of design, popular travel destinations, as well as new lifestyles, play styles, and socio-economic conditions. Influences may also stem from new technologies, materials, textures, and effects that impact color, relevant social media platforms and even upcoming sporting events that capture worldwide attention.”

While Pantone won’t announce its hotly anticipated hue until later this year, paint companies like Behr, Benjamin Moore, and Sherwin Williams have already released their picks for the new decade, along with what they believe those colors reflect about the year ahead. And, perhaps unsurprisingly, they’re all different.

Behr’s selection, a soft and grassy shade of green called “Back to Nature,” is the company’s third official color of the year and was chosen for its association with the great outdoors. Emphasizing the preciousness—and precariousness—of the natural world, it taps into growing concerns about plastic and other sustainability issues, the rise of biophilic design, and the booming indoor plant industry. “It goes back to lifestyle and how we’re living, there’s kind of a social movement to get out there and engage with nature,” Erika Woelfel, Behr VP of Color and Creative Services, says. “We know that people are very aware that getting outside is really important.”

All kinds of green are trending at the moment, especially in the world of home decor. “There’s a huge trend of people bringing plants into their home, which cleans the air and has all these health benefits; that’s why we’re seeing jungle greens and desert greens,” Woelfel explains. ” ‘Back to Nature’ is a sweet spot: it’s not too dark and not too light, it’s fashion-forward in these sense that it’s not too dated, [and it can] create a sanctuary in your home. It really has that indoor, outdoor appeal.”

Benjamin Moore’s 2020 selection, a soft, rosy pink called “First Light,” was selected, in part, because the company’s forecasters kept seeing it pop up in their travels.

“One of our team members saw it during Dutch Design Week,” says Andrea Magno, Benjamin Moore’s director of Color Marketing & Development. “There was a sophistication, it wasn’t overly sweet but the soft, blush color has been around for a number of years and we’ve been tracking it.”

In this sense, paint companies become curators; they seek out popular design aesthetics and distill them for consumers. Annual colors of the year not only provide inspiration for interiors, but also help guide homeowners toward living amongst a fresh palette of colors that may not be in their immediate field of view.

“[First Light] is one of those colors that can live in a lot of different rooms, you can see how it becomes this really beautiful backdrop. It can almost serve as a neutral and give a warm glow to the room,” Magno says. “We thought it was really indicative of fresh thinking. We’re on the dawn of a new decade and we thought: ‘How do we want to embody that?’” While this rosy shade is certainly fresh, it’s not so dissimilar from the ubiquitous whisper of Millennial Pink, a color that has been exhausted to the point of polite mockery. Perhaps First Light’s slightly softer tone will situate it more as a delicate accent color, rather than its dominant and highly branded millennial cousin.

Meanwhile, Sherwin Williams’s 2020 Color of the Year conjures no feelings of a verdant meadow or a fresh morning. The company’s pick, “Naval,” is a rich and brooding navy shade—and is a refreshing departure from the more cheery colors that have dominated the past couple years.

“We knew navy was going to be a big color, [because] we could see black and white and monochromatic was a big trend,” says Sue Wadden, director of color marketing at Sherwin-Williams. “Our 2020 forecast is about taking wellness into the next decade, and [navy] was a great design trend. A really calming, timeless hue that’s always going to look good.”

Naval is Sherwin Williams’s tenth color of the year, and was selected in February during the company’s annual forecast meeting. “We have 12 team members and we all get together and hash this out,” Wadden says. “It’s like a three-day process, and by the end of it one color usually rises to the top.”

While companies are concerned with being on trend, they also need to make selections that are distinct from the colors they celebrated the year prior, which may help explain why these companies don’t often land on similar colors. Ultimately, it comes down to the instincts of each particular team of palette creators. In the case of Wadden and her team at Sherwin-Williams, a deep, bold hue felt right.

These teams of designers and marketers are tasked not only with responding to culture, but attempting to participate in it, too.

Take “Living Coral,” Pantone’s 2019 pick. The company wanted to select a color reflecting critical global trends, and chose a hue that was meant to carry symbolic meaning. “Just as coral reefs provide sustenance and shelter to sea life, vibrant yet mellow Living Coral embraces us with warmth and nourishment to provide comfort and buoyancy in our continually shifting environment,” Pressman says. Some felt the color didn’t place enough emphasis on the environmental issue of coral bleaching, even offering alternatives like a grey “Dead Coral” or all-white “Bleached Coral.”

Color touches nearly every object and industry; far from superficial, it plays an essential role in shaping the world and how we see it. But the public’s interest in color forecasting may also reflect confusion about an ambiguous future, whether in terms of climate change or polarizing politics. A single color that serves to explain the coming year seems like a balm for the confusion.

“There’s been this neutral mania, so it’s exciting to see things ripening . . . I think people are excited to bring color back [into the home], I like the arc we’re on,” Wadden says. “We’re here to inspire, we know what color can do and how it affects mood . . . that’s my goal moving into 2020, is to get people excited about color.”

Dear Ueno: What’s your design process like?

October 10, 2019 • Design, What's

Dear Ueno is an advice column for people who for some weird reason think we know what we’re doing. Read more about all this, or check out our old advice.

From Jan Raven de Klerk, a freelance designer from the Netherlands:

What is your design process like? Is it pretty similar for every project?

Sasha Lubomirsky, Executive Creative Director at Ueno SF, is here to answer:

Hey Jan,

Ah yes, process. It’s important to have one — and just as important to be comfortable throwing it out. Process gives us trusted and time-tested ways to do good work, but in reality every project is so different that being wedded to a specific process doesn’t make sense.

So I’ll share our process, but just know this: sometimes we have all of these pieces, sometimes we just have some. Sometimes it’s as linear as it looks, other times it’s a zigzag or a mishmash of several at once. Sometimes we make up something completely new.

Either way, these are the six core components that we most commonly lean on throughout. What we do — and how — quite simply depends on the needs of that particular project.

Immersion is where we and the client have a mind meld. We take in everything there is to know about the product, project, and people we’re working with. We share how we work, and our points of view. We get to know each other on a human level.

In general, our approach to working with clients is very much a partnership. We don’t have a “big reveal” after squirreling away for weeks, but instead keep in touch often, checking in and collaborating. This all starts with the immersion phase, and in particular, the initial kick-off we have together.

Two examples of what we might do in the immersion process:

Hopes and fears

We almost always do a post-it exercise where we put all our fears and hopes (in that order — end on a high note, people) around the project up on a board.

This serves several purposes. Firstly, when all the things that might cause concern are on the table — let’s say baggage from previous projects, or competing priorities — it’s much easier to make a plan on how to avoid them. Secondly, we align on what everyone is dreaming of and excited about. And thirdly, and more subtly, it sets a precedent for being raw and open about uncomfortable, vulnerable things.

Collaborative creative brief

During the immersion, as we’re taking everything in, we’re often documenting it in something we call a collaborative creative brief. This includes answers to such questions as: what are this project’s goals? Who are the target users? How does this impact the business? Who are the key stakeholders? You’d be surprised how much lack of alignment there is here until you spell it out, project it on a big screen, and read verbatim.

This all keeps us on the same page. It keeps us focused. And it’s a living document — if and when things change, we have to all agree on that change and update the brief.

After immersion, we’ll often transition into strategy. Strategy manifests in a lot of different ways depending what’s needed for the project, but put simply it’s a strong, articulated point of view on why the project exists. It’s the foundation we create that everything is built on, before pen or pixels hit the page.

A couple of examples of deliverables that often come out during this part of a project:

A unifying strategy presentation

In a way, a unifying strategy presentation is an evolution of the collaborative design brief I mentioned above. The difference is that the unifying strategy presentation is actionable — it fuels the creative process, and is the beginning of the creative journey. It answers fundamental questions like: what is our POV, who are our target users, what are key insights?

It also elaborates on secondary but equally important questions like: what is the positioning of this service in the competitive landscape? How is this culturally relevant? What are our plans for overcoming obstacles, including the ones outlined in “hopes and fears” (see above).

This is a source of truth we return to again and again, both as a guiding light for ourselves, but also as a useful document clients can use with other partners such as investors or new teammates.

Foundational research report

In this early stage, there’s often a need for foundational research to help us understand the humans we’re designing for.

For instance, we recently had a client come to us with a new target market they were interested in pursuing. They didn’t know exactly what product to make for them. Step one to that? Understanding who exactly those people are, of course. Only then can we begin to come up with concepts that make sense for them. So before we ever got to designing the concepts, we did persona research and outlined the different types of users, and what their keys needs were in the client’s domain. After that, the concepts came easily, and we knew they grounded in real users’ needs instead of blind guesses.

Speaking of concepts, now that the foundation is set: it’s sketching time. The more ideas the better, the more outlandish the better. Let’s get weird: this is the time to not have constraints, and to dream big. (Constraints are critical, but they come later.)

Eventually, as we work closely with the client, a couple of concepts emerge as the ones we take forward to explore.

Some common deliverables:

User story vignettes (product)

In product-oriented projects, our stacks full of sketches start to coalesce into some big ideas. We take those ideas, give them a clear name, design some key screens, and write a brief user story associated with it.

Often two or three of the strongest concepts will then graduate to what we call user story vignettes — prototypes close enough to the real thing to give us a strong sense of the concept’s core potential. In these prototypes, built in InVision, Principle, or Framer, we only pay attention to the most important flows, since our goal here is the core potential, not the edge cases.

Moodboards (brand)

For brand projects, our concepts usually manifest in a massive artboard of ideas. Its purpose is to visually explore and set the mood of the forthcoming web site, product UI, out-of-home campaign, business card, tote bag, or whatever it may be, showing a collection of UI elements: general typography, text link styles, form fields, button states as well as photography and color palette. It’s fairly informal and allows for experimentation.

The goal is to lead to a visual vocabulary that enforces the upcoming brand exploration. It’s full of sketches and nascent ideas, and is critical on aligning on aesthetics and visual styles.

After the concepts are fleshed out comes a critical moment: putting them to the test. What this looks like depends on the specific type of design effort.

For product design, this often means putting concept prototypes in front of real people. For brand, it means stress testing the concept in a bunch of different contexts. At this point, after some testing, we usually align on one big general direction, the most promising one.

Two things we commonly do during this stage:

Usability studies (product)

Often we’ll do usability studies with our prototypes, formal or informal. Ideally, the people we recruit for testing will share traits with the target user we defined in the earlier research phase. The studies can take place at many different stages or be ongoing — one big push in an early concept part, as well as several iterations as the concept is fleshed out further.

Future-proofing (brand)

We go through various thought experiments, imagining different scenarios for the brand. The business landscape will inevitably change for our clients, and they and their brand may one day find themselves in situations they haven’t even conceived of yet.

As a result, we test our design ideas by applying them to tangible real-world examples that are relevant to their business today — but also give them a vision of the future. Stoke their imagination of what the brand could be if nurtured properly. A brand should allow for the business to evolve and grow, and it’s important to think through that earlier rather than later.

Even if you have great concept, you still have some awfully important work to do: put the big idea into an understandable system, and get all the details right. For instance, how is the system organized? What is the detail of every page? How does it vary if the user is new vs. returning? And so on.

Example deliverables from this stage:

Information architecture (product and marketing)

Information architecture is how all the puzzle pieces of an app or a site fit together. A clear and transparent organizing principle makes your product easier for your audience to use, and easier for you to scale as needs evolve.

Users flows (product)

In the concept phase, you may already have explored some of the hero flows, i.e. the primary, most common paths that users take within your app. But there are still a lot of other flows to consider, whether it’s secondary flows, or experiences that vary by user type. This is the time to go deep on the details and get all those flows down. Given the number and complexity of screens, this is often a nontrivial amount of time.

Exactly one bell, and exactly one whistle.

Lastly, we finalize the assets. This means delivering the documentation of the system that was created, and outlining all the meaningful components of the design so that any future designs will be relatively straightforward to create.

Some critical components at this juncture:

A well-annotated design system

The design system is the toolkit the team uses going forward. The complexity of the system varies by project, but often includes guidelines around everything from common components, colors, type, to error message styling. These reusable bits make sure that the current implementation is solid, and that there’s an easy starting point for any future endeavor, both in terms of design and development.

Uenoversity

At Ueno, we like to teach a team how to fish. So beyond the design guidelines, we always include an in-person handoff with the client team, helping answer any questions and set the team up for success going forward.

If something more tailored and in-depth is required, we offer a master class called Uenoversity, where we provide deeper tools and guidance with a full-day workshop that consists of a complete brand overview, hands-on tactical training, a design sprint and follow-up “homework” to review. The goal is to answer all questions and stress-test the brand using real-world examples.

Lastly, in all components, we always think about bringing the chocolate, one of our core values. How can we go above and beyond? How can we give that extra bit of delight both for the client, but just as importantly, our target users? This is the part that we sprinkle in, throughout the process, no matter if we follow the above to a T, or more commonly, have some completely new process that is exactly what that specific project needs.

I hope that answers your question!

Best,

— Sasha

PS. Thanks to Aaron Poe and David Navarro for working together on the above.

Sasha Lubomirsky is Executive Creative Director at Ueno SF. Follow her on Twitter. Or don’t! Do what you want! It’s your life!

What’s New in React v16.9

August 11, 2019 • React, What's

I was starting to get a bit worried. The last few minor point releases of React had come out months apart and we were already into Q3 without a new release. My fears have been quelled though as React v16.9 is finally here with a few new features, bug fixes and deprecations!

The deprecations

I’m a “start with the bad news” type of guy, so let’s start by talking about the deprecations that were included in React v16.9 which will help us better prepare for v17 (and other future versions) down the road.

No more javascript: URLs

URLs that begin with javascript: have long been considered dangerous because of the potential of malicious data making it into your application:

const userProfile = {
  // Whoops, forgot to ensure this use input was /actually/ a URL
  websiteUrl: 'javascript: alert("Remember little bobby tables?")';
}

<a href={userProfile.websiteUrl}>My Website</a>

Obviously it wouldn’t be good if your users could inject JavaScript right into your running application.

As mentioned, this is simply a deprecation in v16.9 and will only log a warning. You could go out of your way to circumvent this entirely by using dangerouslySetInnerHTML but you’d still be asking for trouble.

In a future major version (not necessarily v17) this will be converted from a warning to an error. I’d say it’s best to just stop using it all together so you can save the trouble in the future.

No more “factory” components

A feature I can file in the “TIL” category, is that React had support for a “factory” component.

For those unfamiliar, the factory pattern is when you have a creator class handles creating new classes for you rather than instantiating them directly. This is great in scenarios where you are dynamically generating class names and such.

In React, this means you can have a component that returns an object with it’s own render method. It also has a pretty nasty syntax that looks an awful lot like a function component:

function GatorFactoryComponent() {
  return {
    render() {
      return <div />;
    }
  };
}

As mentioned, this was news to me, and evidently not that widely used of a feature as the React Team mentioned that this is rarely used and probably won’t affect the majority of modern code bases.

If you do attempt to use it, you will receive a warning. There’s also a work around, but you’re better off converting it to a function of class component instead of trying to stay set in your ways.

Unsafe lifecycle methods renamed

The React Team gave us a head’s up over a year ago that the lifecycle methods that were considered unsafe would be renamed in a future 16.x release and the old names removed completely from the 17.x series.

The methods in question are as follows:

componentWillMount renamed to UNSAFE_componentWillMount
componentWillReceiveProps renamed to UNSAFE_componentWillReceiveProps
componentWillUpdate renamed to UNSAFE_componentWillUpdate

Never fear though, the old names will still work in React v16.9 but will throw a helpful warning to urge you to refactor your code or move to the new UNSAFE_ naming.

The purpose of the UNSAFE_ naming convention is to make it easier for us developers to identify potentially problematic code when doing reviews and such.

To ease migration efforts, there is a “codemod” script that can update your entire project to the new UNSAFE_ naming convention:

$ npx react-codemod rename-unsafe-lifecycles

The features

While not necessarily a let down of a release, this particular React release is a bit light on new features. One man’s opinion though 🙂

Measuring performance with

You may remember back in React v16.5 when the React Profiler was added to the React DevTools. This is great for a lot of smaller applications, but for a larger application, you probably want a more programmatic way to gather metrics.

The solution to this comes in the way of the component which you can be used to wrap components to help gain insight to the rendering “cost” of your application.

The new component requires an id property as well as an onRender property which will fire every time a component within the tree updates and triggers a re-render:

import React, { Profiler } from 'react';

render(
  <Profiler id="alligator-app" onRender={onRender}>
    <AlligatorApp>
      <Switch>
        <Route {...props} />
        <Route {...props} />
        <Route {...props} />
      </Switch>
    </AlligatorApp>
  </Profiler>
);

The onRender callback will receive information about which component re-rendered, how long it took, and other valuable information. You can read more about the profiler here.

Also, the profiler is automatically disabled in production, so there’s no additional logic to implement to make sure you don’t accidentally deploy with the profiler turned on. (C’mon, we’ve all done it 😉

Asynchronous `ReactTestUtils.act()`

React v16.8 introduced the act() utility to help with testing your application as if it were being run in a web browser.

While extremely useful, the act() utility was synchronous with no easy way to get it work in a more asynchronous fashion. This may have resulted in some sporadic warnings in your logs which couldn’t be easily fixed. Quite the bummer.

Fortunately, the React Team has improved the act() utility in React v16.9 so it can function asynchronously!

The Rest

A release of React is never complete without some notable bug fixes:

Fix for a memory leak caused by deleted subtrees being retained.
Better handling of infinite loops caused by setState inside of useEffect.
Fix for a crash in when findDOMNode() is called.

Ready to start using React v16.9?

React v16.9 is ready for your hacking pleasure, all you need to do is install it via your favorite package manager:

# Via npm
$ npm install --save react@^16.9.0 react-dom@^16.9.0

# Via Yarn
$ yarn add react@^16.9.0 react-dom@^16.9.0