Making the switch
Comments and ideas about Sketch, its place in design, usage and future.
On november 24th, tuto.com, a french tutorial website interviewed three designers: Jean-marc Denis, Philippe Hong and myself to talk about Sketch and design in general. The questions were spot on and the answers from my peers very interesting so I decided to translate it for my english readers.
This serves as a pretty good follow up to my previous Sketch article, “A month with Sketch 3.0". A good introduction if you do not know what we are talking about here.
Before we start, let’s get to know our interviewees.
Jean -Marc Denis - @jm_denis
Jean-Marc was a designer for Sparrow and more recently Inbox/Gmail at Google. Long time Sketch evangelist, he now proposes his Master class to learn Sketch in video on Sketchdesign.io.
Philippe Hong - @philippehong
Self-taught designer and developer, Philippe takes great care of the UI and UX in all his projects. He is also artistic director en creates visual identities. He won several awards for his work such as a CSS Design Award, Dope Award and Best Mobile Application for “Bemyapp special Dailymotion”, among others…
And myself… well I’m not going to put an intro or a picture there, I feel already weird enough translating my own words… so let’s get to it.
Why did you choose to use Sketch over Creative Cloud ?
SG: I’m still using Creative cloud for a few things but Sketch simply allows more flexibility in my daily work, which is creating interfaces and manage a huge amount of asset. As Photoshop became too generalist, Sketch fits our very specific needs as UI designers.
P.H: I chose to switch to Sketch because the program is adapted to our needs, moreover, it is performant. Using it is fluid and without lag, which is key.
J-M.D: I never used the Creative Suite tools to a 100%. Moreover, its price is very steep. It never had competition on its market, which is why everybody used Photoshop, Illustration or Fireworks. Of course, every tool has its qualities and flows. Additionally, there is a lot of resources out there to learn Photoshop; that’s one of the reasons that makes it the “default” tool for every designer I worked with.
Photoshop is not conceived initially to handle interface design. Bitmap retouching features and it’s heavy engine makes it a tool that a lot of people hate while still using it everyday. Illustrator is a solid alternative but at the price of a steep learning curve. Regarding Fireworks, it was supposed to fill the need for UI design but was discontinued by Adobe.
Sketch shacked up the status quo and our habits and a lot of designer were eagerly waiting for a solid alternative to the Creative Suite. The beginnings weren’t fabulous but it was refreshing thanks to it’s native Mac interface and its incredible ease of use when it comes to manipulating elements
Sketch adoption by designer can also be explained by the enthusiasm of the designers around features such as smart guides, “alt” key do display the measures, vectorial mode, exports and dynamic modification of elements. It’s price point, initially $30 (now $99), was extremely attractive for designers who, like me, were freelance.
What are its strength ? Its flaws ?
J-M.D: Sketch has a lot of strengths that appeal to designers but the software is still young and its team, as reactive and receptive as they are, have a lot of work in front of them.
For me, one of the greatest strength of the program is its speed. It’s entirely vectorial and uses MAC OS native language. Thanks to that it gets features for free such as versioning, automatic save and a font rendering engine more accurate than any other software. Every operations are non-destructive so all combination and transformation of vectorial shapes are dynamique and reversible.
Sketch mirror is also a very strong feature that allows the designer to visualize his design on the device in real time. It helps a lot to iterate rapidly.
The team works very fast and really listens to their users. For example, they were extremely reactive regarding the addition of symbols in the program. It came in version 3.
Although convenient and efficient, Sketch could be improved in a few ways.
The pixel Grid snapping is a good example of a very frustrating bug. It also tends to crash when the pages are too heavy. In this specific case, I recommend keeping a reasonable number of artboards. This bug is not as bad as it sounds as the automatic save works perfectly. Globally, I think the team assesses the issues in a very timely and effective manner.
S.G: Sketch is light, simple and fast. It is entirely vectorial and benefit from an incredibly well done asset generation feature.
The inconveniences you may encounter in Sketch come from a few little annoying bugs in features such as the pixel snapping.
Some users may argue that Sketch is missing some specific tools like bitmap modification. In this case, it is important to understand that Sketch is a niche product and that its creators are making a great job keeping it on the right track.
It may be easier to add additional requested feature to please the users but the risk is that the software ends up bloated and harder to use. An issue very prominent in Adobe products in my opinion.
P.H: Sketch indeed has a lot of things going for it. It’s native, so extremely fluid; vectorial, so zooming is extremely precise; it offers an “artboard” system which allows to have an overall view of the project and also to split them in pages (very useful to gather an entire project in one file); A Sketch file rarely goes over 100Mo where Photoshop’s easily get in the 1Go. There is a lot more to it that I speak about more in depth in my introductory tutorial to Sketch.
Regarding the flaws: The software is still young so there is still some bugs, but it’s getting better; there is also a few tricky use cases such as symbols behavior when it comes to resizing for example. I’ll give it the time to mature.
Are you the only one using Sketch; is it an individual choice or a collective effort within Google ?
S.G: I’m far from being the only one using it and more and more teams are integrating it in their workflow. Changing people’s habit in a big company such as Google can be a long process because all our old documents are using Adobe products and Sketch still have to mature and to prove itself in the long run.
It’s also not the best for every type of designer you may encounter within google (illustrator, branding, etc…). I’d say a fairly big part of our UI and UX people made the switch.
J-M.D: I used Sketch before joining Google and I always was an “evangelist” of it. Upon joining the company, I spoke about it a lot and proposed to train designers through a few workshop. A lot liked it and made the switch.
When I started in the Inbox/Gmail team, I was the only one using it but I rallied a few other designers. We’re now 10 to use it. Sketch became a full fledge production tool. Inbox iOS and Android as well as the new Gmail for Android were made 100% using Sketch.
A lot of other designers from other team are using it which is why you can see public files released by Google for Material design (MD sticker sheet).
How does Sketch ranks compared to its competitors; more specifically Photoshop and Illustrator?
S.G: Like I said earlier, Sketch is a niche tool, and that’s its strength. The dev team is extremely close to its community and that’s where Adobe falls short, in my opinion. They have the speed and the flexibility a small team is allowed to have and that a major player such as Adobe can’t have anymore.
If Sketch maintains its direction and continues to listen to its user as good and it did so far, it will become (if not already) a major tool for it’s targeted audience, way ahead of its competition.
P.H: I totally agree. Sketch is serving a niche market, unlike Photoshop who seems to want to do everything. It gives a refreshing perspective on what we knew for a long time, i.e: Photoshop, Photoshop, Photoshop…
Other competitor are entering the market such as Affinity Designer, which I eagerly awaits and will introduce in a future tutorial…
J-M.D: The Creative Suite catches up a bit in its latest versions but it remains quite bloated because of its old code. However, we need to understand that it’s not a tool created for interface design to begin with.
Illustrator is also used heavily. I understand why, it’s a very solid software, although it’s print legacy doesn’t work well with pure digital designers.
Regarding other software, I met with Marc Edwards and really awaits the release of its Skala project. I have a lot of respect for him and imagine that his attention of detail and expertise will greatly benefit the software.
How could Sketch evolve in its future versions? How would you like it to evolve?
S.G: For me, Sketch must stay simple and evolve in osmosis with its niche market. One of the great danger for Sketch would be to diversify too much. I think its currently really good at what its doing and once the few bugs are corrected, it will approach perfection when it comes to UI design.
What I secretly wish is that this very talented team produce a “Sketch of motion design” which would function in parallel to the original application. it would be, for me, the perfect “Sketch Creative Suite”. But I do not think it will come anytime soon, the team must be quite busy with one software to maintain already.
P.H: I’m just hoping they correct the few bugs and I also know that they are working on enhancing a few feature to make them even easier to use. I think they are right because a good software is one that is easy to use.
J-M.D: I’d very much like that it evolves in a collaborative way. I’d love to be able to easily export symbols library to share the icons with my team to certain that we have the same. Let’s be crazy, why not a Github-like feature to always have these libraries handy and updatable for everybody. Same goes for color palettes and other effects.
To go even further, why not a Sketch store to be able to share with my team and sell to the world my icon libraries? I promise this idea is free☺. It is actually something that is currently successfully developed by some 3D software such as unity.
What difference does the software make in your creation and production logic?
P.H: It bring a cohesive experience in the creation process in my opinion. The fact that we’re able to have predefined styles and that we have access of the entire project in a single file is really efficient. It prevents us to look for our files everywhere, and that’s pretty cool!
J-M.D: I think it’s more based on a personal feeling than a technical novelty. Opening Sketch is more like opening the Windows Notepad app where Photoshop is more like opening Words. When the software opens, the vision of the blank page is really interesting, it helps to focus on creation and iteration. Sketch interface is light enough that the toolbars are not in your way. As a result, you spend more time working on your design than looking for the tool you need.
S.G: Very few difference in the logic but it brings a flexibility and a rapidity never seen before. The ease with which Sketch handles asset production and scaling is night and day compared to Photoshop.
Does the quality of the CSS generated by Sketch meet the expectation of the developers you work with ?
S.G: I do not use this feature at Google.
J-M.D: I rarely used this feature for my product because I do not work directly with web developers. The rare times I used it, the code was acceptable. I imagine that since then, the team improved it.
P.H: I had the occasion to try the CSS code generated by Sketch, it is not bad but not advanced enough, in my opinion. This will probably be improved.
How does Responsive impact the way you approach your job ? Said differently: Mobile first or not ?
P.H: Responsive design became for me a must-do considering the number of connection via mobile nowadays. I’m not a big supporter of mobile first. A lot of people are talking about it but I do not think you should apply it everywhere and all the time. User needs have a lot of influence on the chosen method. Mobile first yes, but not every time.
S.G: “User first” is what comes to mind before “Mobile First”. Mobile first comes as a strong response to the way our industry is evolving, i.e, in favor of mobility. The method makes sense as long as we do not use it willy-nilly.
Being aware of the habits, needs and behavior of your users and taking adapted decisions based on these is the most important.
Mobile first is something to be considered from the beginning of a project and relevant for most cases but it needs to be applied coherently with the product direction without altering the user experience on the other platform/format it is deployed.
J-M.D: Mobile First! It’s an obvious and notorious!
Every study shows it, mobile is eating the desktop market share since smartphones arrived. The products I conceive begin with mobile implementation but evolve quickly for every screen sizes, may it be tablet or desktop. The idea is simple, if you design a mobile experience, you’ll start with the most constrained environment. Evolving to larger screens is then easy and will allow you to use the extra space to enhance the user experience. Note that it is a Material design strength and it’s this way that we conceive our products (see video below).
Do you use Sketch Mirror in your workflow ?
S.G: Yes.
J-M.D: Yes, it’s an essential part of my workflow. Being able to visualize your design in real-time let you spend more time on iterations. You’re more concentrated and engaged in the creation process.
P.H: Yes absolutely, and it saves me quite some time. we automatically see if the sizes are correct. A pretty good tool.
What’s your opinion on Flat Design ? What are, for you, the next trends to come; can we imagine/fear the come back of Skeuomorphism after we reach the ultimate graphical simplification (like a design/trend cycle)?
P.H: For me, Flat Design has reached its peak. A lot of new designs tend to come back to a little bit of Skeuomorphism; I’m thinking of Twitter for example with its buttons that are not a simple flat color. I noticed on my own projects that flat buttons struggle to stand out so I changed them. But I do not think we’ll see a come back of full-blown Skeuomorphism for a long time.
J-M.D: I really like this St Exupery quote that sums up quite a bit my perspective on design:
“It seems that perfection is reached not when there is nothing to add but nothing to be removed”.
Smartphones connected humans via touch. Skeuomorphism was a necessary evolution to support this change and make it more natural. We know buttons, textures and how people interact with them. Now that users are familiarized with these metaphors, it is easier to remove visual effects to focus on what matters, the content.
Material Design is an interesting step where flat elements are raised. We are re-introducing this physicality and it will allow us to reconnect interface and content.
This leads me to think that the future of interfaces will be in 3 dimensions. Adding a physical environment will be beneficial to enhance the mental connection with our screens. We can imagine configuring light sources, camera angles and adding material interactivity to the UI. Apple started to introduce this with iOS7. When you lean over your phone, the wallpaper moved based on the gyroscopic axis.
Virtual reality is a giant step and people who tried the Oculus know what I’m talking about. Knowing how to implement an interface in a 3D field of view is something that nobody successfully solved yet. Walking down the street with contact lenses projecting an “Iron Man” like UI is not something that would be a viable solution for our everyday lives.
S.G: “Flat Design” is a term in response to “Skeuomorphism”. Like every diametrically opposed reactions, these terms tend to generalize what Flat design and Skeuomorphism really are by separating them in two separate “grab bags”, dismissing overlapping subtilities.
I think the concept of what we call today “Flat design” is based on a flawed interpretation of what Skeuomorphism really is. The first is a vague term in response to the misunderstood, latter one. Simply put, if it’s not mimicking wood and leather stitching, then it’s flat.
“Flat” represents something dimensionless. Therefore, a large part of what is titled as “flat” today, isn’t. A lot of designers use real life metaphors in their designs such as light source positioning generating color gradients and shadows as well as blur, mimicking either a lack of focus or a “behind the glass” effect, etc…
What’s interesting is what’s in the middle, the “clever” design based on educated decisions that works regardless of trendy words.
I think design is cyclical, like a lot of things. It evolves following strong reactions opposing the established trend.
What is interesting is to find your own place. Knowing how to weight the good and the bad.
By positioning yourself in the middle, watching, analyzing, taking the good and avoiding the bad, design “evolves” instead of being “revolutionized”. An admittedly less sexy idea but considerably more constructive.
Is Sketch an answer to these technical (Responsive Design) and esthetic evolutions (Flat Design) ?
S.G: Sketch is the perfect example of a product that answers a need at the perfect time. It grew and evolved at the same time as UX and UI were getting more important in our industry. In a way, it symbolizes what we’re all trying to do in our job: proposing an elegant and efficient solution, answering an immediate need.
J-M.D: Yes, a 100% for responsive and flat design and everything 2d that ends up on a screen. It isn’t, however, an answer for everything 3d.
P.H: Sketch is an answer, but not the only one…
Is Sketch able to handle more graphically complex projects?
P.H: For web projects, you can do a pretty good usage of Sketch. But it is limited to UI design and you may need more for more complex type of projects.
S.G: Sketch and its clean style may seem too simple to tackle more complicated graphical tasks but do not underestimate it, once you master it, there is a lot you can achieve.
Sketch is strong in its specific area. Diversifying too much could hurt it. Photoshop stays the master of bitmap edition and Illustrator stays unmatched for complex vectorial projects and illustrations.
Sketch is awesome at UX and UI design and can handle a lot. Beyond that, the answer is probably somewhere else.
To conclude, I think that what is important for the future of Sketch (and others) is to maximize interoperability between all software as much as possible (with common file system such as .svg and direct import from the design software like Framer.js is doing). It’s a hard goal, especially when software are competing.
Wanting a software that does everything could end up in something that excels in nothing.
J-M.D: Yes, without hesitating! Concretely, almost the entire design of Inbox and Gmail Android have been made in Sketch. I’ll let you imagine the number of iterations and screens we had to work on. We shared our Sketch files and I created a quite complex sticker sheet that I shared with my team (interaction designer, prototypers, engineers and product managers) so too can express their ideas with more concrete designs.
This concludes the interview. If you know french, you can check the original version of this article on the tuto.com blog.
To learn more on our interviewees:
Philippe Hong: His portfolio and his tuto.com profile (in french)
Jean-Marc Denis: His portfolio and his Sketchdesign.io project.
To learn more on Sketch on tuto.com (in french): Sketch complete training.
