Pieter Omvlee - Sketch

Hello everybody. I've just been sitting there in the back for over an hour getting nervous, so I need a drink. My mouth is... No, I can. I think I can manage with it. No, no, it's alright. It's alright. I hope, yeah. Ah, that's better. Okay. Hello, again. So, when I was asked to speak here, I wasn't quite sure what to talk about first. I have like a hundred subjects in my mind that I could all talk about, but I wasn't quite sure which one to pick or if I could really make a coherent story. Out of them. And after a while, I had myself talk together for approximately half an hour, which was just an unfocused rant on various design-related topics. I was going to talk about, I don't know, the importance of taste as a designer and how you should not always be following trends. Or another thing, I had something about designers versus designers. Versus the world and how I, being like half a designer, half a developer, maybe have a slightly different perspective from all of this. But, in the end, I was like, okay, I have been asked here because I work on Sketch, so I should probably talk about that instead. So, yeah. Also, I was not going to talk too much about the future. because I have a really hard time making sense of it. The things we've seen from the Microsoft HoloLens, they sound absolutely awful to me. And we do get people asking us, so when is Sketch going to do something with VR? And it's like, oh, I don't even know what that question means, really. Right? And also, we have so many more mundane things that we still want to do with Sketch that starting to think now about VR is a little hard for me. Also, whenever I think of someone predicting what the future of technology is going to be, I'm always reminded of David Ching, who is, you probably saw him, he's AOL's digital prophet, the guy with the big haircut. And it's like, no, that's definitely not me. So, instead we're going back a bit into the past, talking about Sketch and how I came to be here. This is the icon of my very first application, DrawIt, which is a horrible name, but it was supposed to be a very simple drawing application, but I started writing it while I was still at the University. Didn't really know what I was doing, and I just basically kept adding features to it until the thing fell down under its own weight. Yeah, but I did get help from various designers there. It's in the application icon, the toolbar icons and things like that, because I had always wanted to make an application that really behaved well. I had always admired companies like Panic and Omnigroup, and like those long-established independent, small independent companies on the Mac, it really paid a lot of attention to design. So I had hired a few designers over the years, and one of the things that they all seemed to have in common, I was like, well, they all worked in Photoshop, they only used that small part of Photoshop, you know, layer styles, vector layers, and basically ignored everything else. And so I was thinking, there is probably something there, and the last designer that helped me out with that, we did actually try to build DrawIt into sort of a design retool, but it was too much burdened with crap that it never really got anywhere. The next application I started working on was Photoshop, the font case, which was an idea by the last designer, which was sort of the first application I bought with the designer full-time on board, thinking about all the things, about how the, not, how do I say, a designer not thinking just about, like how do I make these icons look nice, but also what should the application do, what should it not do, and how should the interface not be a coherent whole. And it was a really fun building experience. I was, back then, was still at the university, and we sort of had set ourselves the hope of winning an Apple Design Award with this, which meant, so Apple has their worldwide developer conference every year in June, and as part of the design, as part of that, they hand out awards to outstanding applications, and there was also a category for students. So I thought, hey, let's try that. So I submitted the application after it was done, and I didn't hear for a while, but then Apple contacted me, like, hey, are you sure you're a student, and all that, yeah, yeah, sure. Here's proof. And then they, afterwards, sorry, thinking back, they sent me a few more obvious hints that I was actually in the running to win, but back then I didn't, yeah, I didn't do anything. I didn't actually have a ticket to the conference itself, because, yeah, everything is quite expensive. The ticket itself is like $1,600, and you have to fly to San Francisco and all those things. So I said, well, since I don't know yet if I will win, I'm not doing anything. And then the Friday before the conference started, on Monday, I got the phone call from Apple. It's like, hey, you should really be here. And can you come? It's no. I don't even have a passport. I was like, or I, back then, I was like, okay, how do I do that with a visa? And everything last minute. Who knows? So, yeah, sorry. We did win with the phone case, but I wasn't there to actually pick up the award. The one who did pick up the award for me was the designer who helped me with the app. But he was no longer working with me, because shortly after we released a phone case, he got a job at Apple, his big dream job. And, yeah, so afterwards, I was left with an application that did stuff with phones, and I didn't really care all that much about phones, to be honest. I mean, up to a way, but I don't know, I don't have any real needs for phones myself. So, yeah, what next? So I started working on version two, and then went dead on it. basically everybody asked, can we have version one back? Because, yeah, this is not quite what we want. So there was, once again, a big lesson that you should really build tools that you understand or that you have use for yourself, otherwise you have no idea what kind of problems you are solving. And it was, looking back, very clear, that the next version of PhoneCasetta had solved completely the wrong issue. So, yeah, with that also there were other issues. Apple removed some of the APIs that we were using, didn't really provide a way of doing things, so everything got a bit shaky, the App Store sandboxing, horror. But fortunately, I had meanwhile started a new application, Sketch. This is the first icon of Sketch, which was meant to sort of represent a vector representation of the original icon that you saw at the beginning. However, I think it looks more like a hand grenade, but... So the idea was, so I had the droid. As I said, it was basically falling down under its own weight because I had just piled feature after feature into a big mess. So I was going to remove all of that and just be left with the simplest things. And I was back then thinking of keeping both droid and Sketch because, you know, Adobe has Photoshop and Illustrator, and me, on my own, I would have droid and Sketch. Why not? That didn't quite work out because both of these applications did turn out to be quite big, so there was no way I was going to work on them both on my own. Anyway, but... So one thing I wanted to show was the original promotional video I made for it, which I did all in Keynote, with using Magic Move animations and trying to... Yeah. This morning, though, I did see the promotional video that Elon Musk showed of going to Mars, and then afterwards I added this to my slides and was like... It's not quite the same kind of cool, but still, I like it. And we have received proof that we have sound, so... Let's see, does it start playing? No, it does. Okay. Should be a fairly short thing. No sound? Is that fine? Ah, I did that. That's something. No, it's fine. ALEX MU produto Okay, the sound did not quite sound right, but anyway, you have an idea of what I tried to do with this first version. I did spend ages trying to time the transition of the slides with the music. I should probably have used another app, but hey. You also saw quite a few tools slide by that no longer exist in Sketch. Because when I started working on version 2, I teamed up with a designer, Emmanuel Sa. And he had helped me on some of the icons with version 1. He had helped me on the font case. And he was, again, one of those designers. Who did everything in Photoshop, but didn't really like it. And so the idea was that if we could make an app that he could use for his work. And that was basically designing apps and icons. Then maybe there would be other people who would be able to use it as well. We had no idea that the market for it would be this big. So we thought, well, just a small indie shop. Us two, hey, cool. He was living in Portugal. Back then I was living in London. And, well, since we had no idea what this new app would come into. Because, as you saw, I had worked on other apps in the past. Which didn't really go anywhere. He just stayed where he was. I stayed in London. And everything. We just started working remotely. And came to hiring our first people to help us out. Extra engineers, designers, support. All of those. It was just natural to grow the company as a remote company. But that happened as much by accident as by design. So the idea was, I take that first version of Sketch. And we add things on top to make it really good for his kind. Basically, that meant removing many features that I had added. Which didn't really make any sense. And we just added tons of, how do you say, polish. Like one of the things you maybe saw come by in the video was symbols. Version 1 of Sketch had symbols. In version 2 we removed them. Because we thought, we're not quite happy with the way they worked in version 1. And we'll come up with a better way later. More about that. That later. But, so this was our teaser. And the original UI for version 2. After nine months of development. We were, it was short days before the next Apple Design Awards. Which, once again, we hope to win. And it was a nice way of setting ourselves an artificial. Deadline. Because with an app like this. You can always keep on fixing things. Adding features. So, we thought, like, okay. We need to sort of be done by May. Because the Apple's conference is in June. So, that's probably about when it should be done. However, Apple never announces these things far in advance. And we thought, so we didn't really know when the submission. Deadline was going to be. It was somewhere late April, I think. That Apple unexpectedly sent out an email earlier. Like, hey, the worldwide developer conference will be like on the 9th of June. And the submission deadline for the Design Awards is next week. Shit. We hadn't actually released the app yet. We were still in private beta. We didn't even have a website yet. Either. So, over the weekend, we rushed something together. And we made it. And we won. Which was really nice. But now what? Because we had released an application probably a bit too soon. And it was built on this first version of Sketch. Which was originally based off the code of Droid. Which I just told you was a bit of a flaky thing. So. Yeah. The code was not in the best of shape. And, yeah. We knew we had a lot of work to do. And, like, as an engineer, my real instinct was to go, hey, we should start all over again. And rewrite the thing so that this time we will get everything right. However, we did. Fortunately, we did not do that. Because I also knew that. Many of those grand rewrites, they always end up in tears. So, we did try to evolve Sketch one step at a time. It never even occurred to us to get the funding to try and grow an engineering team faster so that we could. No. It's like, okay, it's me. I'll have to manage somehow. So, Emmanuel started doing support. We hired other people for support when he couldn't keep up with it. Because, of course, him on support meant that no design was being done. Which was not ideal. But, yeah. We did get more and more requests for big features. Like, people wanted SVG importing, PDF importing. And there was. And then those are the kind of features, you know. Like, okay, that will take me alone like months to get anywhere decent. And I can't spend months on that and ignore everything else about the app. So, it's really time to start hiring more people. So, the first developer we found was actually based in the outer Hebrides. Which is the nice thing about having a remote company. You can hire the people you want. You don't need to have them move. Either to London or Amsterdam. Where it was then. But, yeah. You also get some funny people. It's like one of the first people we hired for support. He probably had hoped, like, hey, I will grow into the role of the designer at the company. Because I don't really want to do emails. And he was a bit flaky with things. Like, we found it. He had just deleted many emails. Just to keep the unread count low. So that we wouldn't start asking questions. And, yeah. Then he, I will. So, yeah. As I said, no big rewrite. We slowly added features on top. Tried to make the app stable. It's like one of the... One of the issues we had. Like, was the first app I wrote was basically meant to get a few... Maybe getting to get up to a hundred elements on screen. Like shapes and text. And all of that. And it was fine. And then you started people having hundreds of artboards on the page. With thousands and thousands of layers. And then the application was not fine. So, how do you reach architects and an app like that to better work with those kind of things? So, there are many. Many interesting stories to tell there. But it's more of an engineering thing than a design thing. So, I'll skip on that. However, slowly growing team means that I've started less and less development. I'm slowly becoming more of a manager. Which is fun. And you need to start thinking about the marketing and sales. And all of those kind of things. And as a developer, it's really... Really... Really tempting to block all of that out of your mind. And just focus on the small little coding problem at hand. Because that is so much more understandable. But yeah. I probably stayed the... I probably was doing too much development for too long. And maybe still. But at heart, I am... I am probably... Probably both an engineer and a developer. And I need to get some development done. So, I did get an email from Ali a few years ago. And he's like, hey, it would be nice if you could have some kind of scripting support in Sketch. Like, okay, what does that mean exactly? So, I found a little library which you could just dump into. Your app. And you would need to expose a few APIs. And then, basically, your app was scriptable. And with a few years after that, nothing really happened. But, like, a year or two ago, people started writing tools on top of Sketch. And all the integration that you now see with... Framer and Principle and InVision, Flinto. All of those, they are still using that little library that I threw in there probably four years ago. Just to explain a small bit about how all of this stuff works. Basically, that library exposes all of your methods and classes in your app... To... A... JavaScript bridge. So, as long as people know what to call and, like, where objects live in the hierarchy, they can basically do anything. They can add extra panels to your application. They can start drawing their own things in the canvas. They can extract the entire hierarchy of your document and, for example, import that into Framer. Which is really nice. Because we didn't have to write a big API and then have other people find that they wanted to do something that was not quite supported in our thing. No. Here, they could do anything. Problem is that we change the application all the time. So, with every update, we end up accidentally breaking one or two plugins. And then we have to do something that is out of there that we're relying on some assumption that is no longer true. But, all in all, I think one of the big things that has made Sketch the success that it is today is this very open ecosystem that we have. One other thing that really helped us was when Adobe announced... How long will it have been? Three years ago? Or... That they were no longer going to update Fireworks. And we thought, hey, this is our moment. So, we started... We wrote a blog post. We did a fire sale. We said, hey guys, if anyone is looking for an alternative to Fireworks, we're here. And it worked. Like, there was our biggest sales week up to that point. Because Adobe's answer back then, hey, just go use Photoshop, instead wasn't quite doing it for many people. And then, while later, I think, they went to subscriptions only. And there were, again, many people who didn't like that. And they were like, hey guys, we are not asking... You're welcome. Anyway, let's not leave this on the screen for too long. And we are back with Sketch. And we're now approaching like two years into the development of Sketch 3. And it's time to start... Sorry. We are two years into version 2. And it's time to start thinking about version 3. I don't know. Because we had... We got into version 2.0. 2.6, 2.7, I think. And then, by that time, people start asking like, hey, if I buy it now, will I get version 3 for free? How does it work? So, we said, okay. It's time. And also, you know, you can't just keep developing an application for free indefinitely without having people pay again. So, yeah. What should be the big headlining feature for Sketch 3? Of course, symbols. Which we already had. In version 1. Took out in 2. And would now reintroduce into version 3. We also did a redesign of the inspector. And we added... We changed the way you would export things in Sketch. The last one was a bit of a last minute thing. But it worked out really well. Symbols, though, were a bit of a mixed bag. When we shipped them, people were really happy that we finally had some way in which they could read them. And they were happy that we could reuse elements in their designs. But... Yeah. The way symbols worked in version 3 was that a symbol would basically just be a normal group which synced... Which, whenever you made changes into that group, it would sort of sync those changes over to any other instance of that same symbol. Which was really big. And it was really nice in that you could edit all your stuff in place. But the syncing thing was really fragile. And we found shortly after we shipped, like, oh. We can't do all the things that we had planned to do on top of that. Like, for example, nested symbols were basically impossible to do in this system. Because as you start ordering symbols inside other symbols... Each symbol might have its own overrides. You basically have no idea anymore what is going on and how you can sync those changes to other symbols. So we were a bit stuck with that. But not only that. We had some problems with undo. For example, performance was still a struggle. And we had started to grow the team. Then we were up to eight people. We had taken on three developers at once. Which we had to bring up to speed with the code base. Which was really difficult. And it felt like for a while we couldn't get anything done in Sketch itself. Which is why I still think that even if, for example, we would have taken on an investment... And I would have suddenly received a large bag of money. With which to hire developers. I probably wouldn't have done it. Because, as I said, we had hired three people. There was quite a big stress on us. For like six months to a year. If you start hiring people too fast, you spend all your time trying to bring them up to speed. And not getting any work done. And we had a lot of work. We had a lot of work to do. And we were eager not to let the application stall. And have someone else pass us by. Like, for example, Adobe. When they announced XD last September, October. Back then they called it Comet. And we were like, okay, what do we do now? What is this threat? Is it really big? Or are we fine? And what are we going to do with future updates? It's like we probably got ourselves a little bit too worried. Because, yeah, well... Because what Adobe announced looked really fast. Really... Just in general looked really nice. But yeah, anyone can make a nice demo. Like we know all the problems that Sketch has internally. And from Adobe we only see the nice promotional image. So, of course, we look bad in comparison. But yeah, what are we going to do? Because we were coming up onto two years of the development again with Sketch 3. And it's starting to go... It was time to start thinking about version 4. So what are we going to do in version 4? We can't do too much because it would just take ages. We should probably be redoing our symbols. Because that didn't really work. But if we put that into version 4 and then we want to put some other feature that I won't name into version 5. We're thinking three years ahead now. This is not really the way to do it. Like we want to build these features and we want to release them as soon as we can. And not have to wait for version 4 and then version 5. Because the problem is also when you put a really cool feature into version 4.3, for example. Then your version 5 has to be really awesome. Because otherwise, like, yep, I got this stuff for free in 4.3. Why should I pay for this? And so you start thinking about, okay, this feature goes in 4. This feature goes in 5. This feature goes in 6. And if you have two years between each of these, like, oh, my God. Especially if you've just heard that Adobe is getting back into the scene with a new app. You're thinking, no, no, this is not going to work. We just need to release these features as soon as possible. So that's what we decided. There will be no version 4. Which hopefully those here using Sketch know by now. And so we had released for Sketch 3.6. And the version after that will be 37. Like that we can just keep on releasing updates. When you buy Sketch, you get free updates for a year. And we can just start releasing updates again as we wanted to. Not having to delay anything. So we got back to symbols. And basically the symbols we shipped in, like, six months ago. They're basically the same versions. Basically the same symbols as what I shipped in version 1. Only back then symbols were pages. And now symbols are artboards. Yeah. So what we did in version 3 at first wasn't quite the right thing. But, you know, you learn. So anyway, I found with Sketch that this applies to many things. Like what I did in version 1. Back then was the simplest solution I could come up with to get symbols working. Turns out what we did in version 3 was probably too complex. Both for the users and for us. And so what turns out to be a simple solution for engineering is, I find, often is also the right solution for both. And the users. And just like the right way to solve the issue. I was going to talk a little bit about our Mac App Store migration. But we are short on time. So I'm not going to do that. And just going to talk a little bit about the future. So now that we have, for example, these new symbols, we did just add the ability to make them nesting and resizing. What is coming next is that you can swap nested symbols to make things easier. And like that we can slowly build on top of the features that we have. But it's starting to get to that point now where you think like, okay, this is a nice feature. But should it be in Sketch? Like, for example, in the beginning we got many requests for support for more advanced support for proof hinting. Basically people wanted to use Sketch as index. InDesign. And we decided like, no, we're not doing that. We don't want to throw everything in Sketch and have Sketch become the new kind of Photoshop where people tell each other, like, just use these two features there and ignore the rest. But yeah, what does that mean exactly? Because Sketch is also used by the developers who slice up the assets themselves. Designers are now coding. Prototyping is becoming an integral part of the design flow. Like, should that be part of Sketch? And if so, like, to what degree? All kinds of questions to which I'm not going to give the answers now because I am definitely out of time. Yeah. Also, just because I don't want to give anyone else any ideas. So that is me. Thank you. And if you have... And if you do have any questions, I guess we'll have to do them afterwards.