A month with Sketch 3
Notes and experience.
A bit more than a month ago was my first day hopping on the hype train that is Sketch 3. I was determined to give it a try and delivered a few thoughts on it. Now that I used it extensively, on various complex projects during this period, I feel like I can give a better opinion on it, something a bit more helpful.
Side note, I’m not trying to beat you over the head with another Sketch praising article. As we saw, some can feel like we’re force feeding people the notion that Sketch is the best and only way to go.
Even if it was in fact the best tool out there, which it isn’t, the best way to work is in the way you’re the most comfortable with. That being said, we’re in a time pressured, tool dependent field and anything that can make our sometimes annoying process a bit easier is welcomed. In my opinion it is worth trying.
I’ll try to be short and point out the most important features for me.
I’m also going to try to be constructive and mark a few points that could use some improvement.
Finally, the relevance of a tool is highly dependent on its use-case, that’s how you’ll define if it’s the right one for you or not, so let’s explain mine.
My standpoint
To understand my feedback, you need to understand the use-case it’s based on, i.e my daily work. As a visual designer, what I do on a daily basis is creating concept mockups followed by high fidelity mocks. I then create the specs on the final version and last but definitely not least, I export the required assets.
I constantly work on a wide range of platforms simultaneously. I design for Windows desktop, Mac OSX, Chrome OS, Android and iOS both phone and tablets. Basically wherever Chrome is deployed. It represents 2 size ratios (touch and non-touch) spread among 6 different DPIs. As much as we’re trying to unify the Chrome visual assets to be cross-platforms, that’s a lot.
My primary concern when it comes to visual design right after making stuff look good is “how am I going to manage the assets creation and organization”. So let’s cut this in two sections, “Creating beautiful pixels” and “exporting beautiful pixels”.
Creating beautiful pixels
I’ve been a photoshop user for the entire length of my short career, something like 8 years or so, starting with Photoshop 7.0. Along with Illustrator, these two tools were the only ones I was using, simply because I learned on them (and because they are quite good).
Talking about Photoshop in particular, it is a incredibly powerful tool that became the jack of all trades when it comes to visual design. Which makes its strength and weakness. Everything is possible, but the legacy of an UI and paradigms not initially designed for interface designers made for some complex usability and a quite steep learning curve for beginners.
I gave Fireworks a try but its bugs and the fairly recent drop of support from Adobe doesn’t make it a viable solution. Which was sad considering that it was supposed to be the tools for interface and web designers. Some features like page management were desperately lacking from photoshop and the Layers comps feature never did it for me.
That’s where Sketch really shines , being able to manage several of artboards like Illustrator is exactly what both UX and UI designers need when it comes to laying out the structure of an app or website. For my use case, it is perfect.
Sketch is like a blend of Illustrator for the vector based model, photoshop for the effect and Fireworks for its UX ready features packaged in a keynote styled interface.
The simplicity of its interface was unsettling for me at first but I got used to it pretty fast. Once you are over the Keynote feel of it, missing the cosy darkness of Photoshop CC, you can start drawing things on your artboards.
Designing independently from DPI
I think designing with vector shapes is something we got used to over the years in Photoshop, not talking about Illustrator since it always was vector only. Like the latter, Sketch is vector based and this is all for the best. The number of DPI a designer is going to have to deal with in the future will only increase and only working using vectors is a necessity if you want to keep a bit a sanity when working on large projects involving a lot of exports.
What it basically means is that something created once will be directly exportable in any given DPIs without the need for the designer to manually scale graphics for each DPIs. Design in @1x, set the export to all the DPIs you need and you’re good to go.
The “bad” things about this.
You do not necessarily control the outcome after automatic multiplication. Designing directly in higher DPIs allows you to have more subtle effects and allows various little tweaks that you won’t be able to do by designing only in 1x (a 1px separator line in @2x for example, make for a super sharp UI).
So if your app relies on subtle but important details, I’d recommend designing in @2x and scaling it down, it may be more dangerous but the outcome will benefit from it.
This is not really a sketch issue though, more a process issue. You may be inclined(at least I know I was)to get lazy and forget about various DPIs, especially the decimal ones, letting Sketch do the work. The exports end up looking ok, but not as good as they could be.
Making shiny things
One thing I was afraid to lose when switching was the ability to create complex graphics with a lot of various effects on it. I’m a sucker for over the top UI elements.
Simple glyphs and all flat design is fine but I like to have options when it comes to purely visual polish. To try it out for myself, and because images say more that words, here’s two freebies I created: The Sketch icons and the Colorful switcher. You can download the sources directly from the links.
As you can see, it is possible to create complex graphics. Sketch handles the effects and blending modes that you grew accustomed to use in PS.
The learning curves as clearly been made for designers who grew using Photoshop so it took me a day or two to get use to the few variants.
Designing in sketch is like using a simplified version of illustrator with the layer management of Photoshop.
Layer effects
A must have. One extremely beneficial thing that differs from Photohop is the effect stacking. You can stack as many effects as you’d like on a single layer as you can see below for the inner shadows:
Drawing vectors
It works great and the big anchors make for easy modifications.
Being able to round to the pixel grid/half pixel or not at all on the fly is a very welcome feature.
The way the pathfinding is displayed is also a great step in the direction of Illustrator for the way it handles vectors. It is extremely useful.
During my month of use, I was able to to create almost everything I needed as fast as Photoshop if not faster when it comes to vector. On the other hands, the way it handles bitmaps and bitmaps edition can’t compete at all with Photoshop. Matter of fact it is almost nonexistent in Sketch, by design. Having Photoshop or Gimp handy will be necessary for this part of the process.
Things that could improve:
- No bevel and emboss effects.
- The masking feature is less powerful than Photoshop’s, especially with complex graphics.
- Gaussian blur generation is touch and go. Sometimes it works, sometimes it just disappears completely. It also doesn’t play nice with masking, simply ignoring it.
- Smart measurement (alt key) doesn’t seem to work within interlaced groups, which can be really frustrating when trying to measure stuff quickly.
- Bitmap modification tool is almost nonexistent. Being simply able to drag the selection on a bitmap when editing would fix it for me. Do not expect Sketch to replace another program for this.
- Vector anchors sometimes refuse to align to the grid. It requires to manually set the anchors. This happens even for simple shape scaling.
- No color swatch management. The automatic color swatch is good but being able to manage and import color swatches would be a welcomes addition
- Vector pathfinding may encounter a few bugs.
Exporting beautiful pixels
Asset export is Sketch 3's strong suit. It is night and day compared to Photoshop when it comes to the convenience of it. Making an whole artboard exportable in any dpi is as easy as a click.
This feature is extremely neat and perfectly in sync with our current design problematics.
Two things about automated asset generation:
First it will multiply the number of pixel by the multiplier, which means that creating a 1 physical pixel separator on a @2x device won’t be done automatically. You’ll have to do it yourself of course.
Secondly, unless you account for every single DPI from the beginning, decimal multipliers is something you’ll need to pay attention to and modify manually for the outcome to be what you want. Avoiding half pixels is impossible with a 1.5 multiplier and you may want to manually redraw them.
This is an “issue” for every vector based application though, not only Sketch, multiply 1px by 1.5 will always create half pixels or misalignment. Human redrawing will always be needed there.
So instead of the export panel, you’ll have to use separate slices.
Thankfully, the slice tool is here to help you. Just like the Photoshop one, it will allow you to cut exactly what you need. being a part of a visual or a different asset altogether.
As you can see above, the great things about how Sketch handles the slices is that it’s considered as a layer elements itself. You can also hide/show slices and graphics independently when you need it. It also means that you can drag and select slices, which is a feature that lacks in Photoshop in my opinion.
Things that could improve:
- Diving in groups is touch and go. It can be hard to impossible to quick select a slice buried inside a group.
- Slices heavy (around 100) Sketch files tend to crash on export. The solution seems to be spreading assets between several Sketch files.
- Hard to reproduce but when you move graphic and slices at the same time, it seems to automatically align the vector anchors to the nearest pixel, which creates unbalance for decimal multiplier assets.
Customization
Sketch allows you to create templates that you can re-use on various project. It comes with the iOS app icons and UI design template create by Teehan+Lax, a Mac app icons template and a web design template Very convenient. Hopefully Android templates will also arrive soon as a built-in feature, the demand is not there yet I guess. I’ll see if I can create a few ones myself if I have the time.
Like Photoshop it is possible to customize your Sketch to fit your needs by creating Plugins. I haven’t explored this part of the app myself too much yet but I did notices some useful plugins already out there, check out this site if interested.
Conclusion
Sketch fits the bill for my use case, the little annoyances and bugs are nothing compared to the benefits that it has in my day to day work. My process speed increased and the CPU load went down. It’s something we do not always think about but a Sketch file with the same amount of slices and visuals as a Photoshop one will run way faster (I’m using a 15" retina Macbook pro). On the other hand, large bitmaps slow down Sketch drastically where Photoshop delivers steady performances.
Speaking of bitmaps, the current state of it’s bitmap editing and the limitations in masking made me come back a few times to Photoshop as a secondary tool. It’s power is unrivaled for complex graphics in my opinion.
I’d recommend Sketch to any UX designers. It’s artboard and page management combined with template creation and symbols makes it the perfect quick mock tool. For visual designer, I’d say that you’ll be able to achieve almost anything you want to do. It is definitely not for Illustrators and purely Graphic designers, this is a niche tool for UI designers, and it excels at just that.
Resources
Between this article and the first one, I came across other good links for Sketch resources, articles and tips here is a quick list:
The Sketch 3 site, it can be useful.
Hey designer! Sketch app list
SketchTips.info
Big list of Sketch plugins on Github
Google+ and Facebook Sketch communities
LearnSketch, future tutorial videos by Jean-Marc Denis
My own freebies page if you want to grab the freebies showed here.
PS: I’ll try to come up with a Sketch tutorial, do not hesitate to let me know if that’s something that would interest you. Also if you want to discuss anything or if you think I forgot something really important, get in touch.
