5 ms·

Discovering Sketch

134 points by xm 13y ago

davidlumley 13y ago
Sketch is absolutely amazing. I moved from Illustrator to Sketch last year, as I was getting frustrated with cruft Adobe were adding, and things they weren't fixing. It took a little longer for me to get used to Sketch at around 3 months of casual use, but I find it much faster, simpler, and easier to use than Illustrator.
- rbritton 13y ago
  With Adobe now forcing a subscription to their Creative Cloud service for future updates, I'd expect programs like Sketch to become more and more attractive as well.
cshesse 13y ago
Sketch is on it's way to being what Illustrator should be. It's still a little buggy at times, for instance, you can't export things at high resolution and the workaround, resizing a group of objects, rarely works correctly.
- bradgessler 13y ago
  Yep, there are lots of bugs, but they release fixes for them and its always been getting better. I've completely ditched the entire Adobe Suite for Sketch and Pixelmator.
  - seivan 13y ago
    I went for Pixelmator instead of Sketch, but I'm with you with ditching Adobes suit. Not necessary these days for interface design. Pixelmator lacks the full layer styles, but it's slowly getting some of them. Though I can appreciate what Sketch is trying to do, I feel like Pixelmators performance and layout is better suited for me.
shmageggy 13y ago
This looks very much like Fireworks. The author mentioned that he won't discuss it since Adobe discontinued it, but the resemblance is uncanny. I never understood why Fireworks wasn't more widely used/praised; I found it to be absolutely perfect for designing web graphics.
- falk 13y ago
  I love Sketch, but I don't like Fireworks. I find Fireworks awkward and clunky.
  - gcb0 13y ago
    yeah, the UI is not sexy. But the feature set that is being boasted in the article is THE SAME from firewoks around 1999. It was the only place i could get some vector work and still be pixel perfect. Last used photoshop in 2006 and it wasn't even close. ...sadly gimp tries too hard to be a photoshop clone even copying the lame export dialog instead of save as...
    - gfodor 13y ago
      Sketch has much better support for layer and stroke styles than Fireworks did, particularly older versions of Fireworks. For example, you can apply multiple gradient layer styles to both the stroke and the fill of a rectangle in Sketch, with alpha. In Fireworks, you often had to make two or three rectangles to get the appropriate effect of a photorealistic button.
    - nileshtrivedi 13y ago
      How about Inkscape?
  - workbench 13y ago
    Seems like most designers dismiss Fireworks before even giving it a chance. Once you get over the initial bump it actually feels much nicer to work with than Photoshop. The only thing really listed in this article that Fireworks hasn't done for years is the retina capabilities. Fireworks blows sketch out of the water performance wise and also opens layered PSDs/copy and paste support for vectors from Illustrator. Adobe killing off Fireworks just proves how little they understand the needs of their customers.
HunterV 13y ago
Sketch is better than anything else on the market simply because it's actually made for user interface design. Everything else that's existed for years was made for image processing. Get Sketch. Seriously.
- TheBindingVoid 13y ago
  If with "everything" you mean Photohop, then you're right. For everyone else there was Fireworks which initially was a promising screen design tool.
markbao 13y ago
My design workflow has moved from Illustrator for design structure and Photoshop for high-fidelity design, to strictly Sketch from conception all the way to exporting assets, with the rare Photoshop for some assets (like to-the-pixel ones). It's totally changed my design process, and it's made me wonder why there wasn't a really good app that was built from the ground up for UI design before—and why we have been 'hacking' Illustrator and Photoshop to do UI design. Vector objects on a pixel grid, @2x exporting, non-destructive properties on items. Still buggy as hell, but despite having to restart it multiple times a day, it's still worth it.
danenania 13y ago
Sketch literally gave me the push I needed to go from a non-designing developer to a halfway decent designer. It's really that good. The major negative right now is performance. I used Sketch to design a full iOS app with 7 or 8 screens on a fast mbp and things were seriously crawling. I had to break up separate screens into separate sketch files and even then it was laggy. Sketch team, your product is amazing, but performance is a big issue. It should imho be your top priority.
- seivan 13y ago
  Same here.
- satyan 13y ago
  Agree with your initial point. It's quite easy and intuitive for us non-designers too. Been using it past couple of months and prototyping my apps here.
- gfodor 13y ago
  Agreed. Seriously picking up UI design in a post-Sketch world is basically the same as picking up web programming in a post-J2EE world. You dodged a bullet. (I am pretty proficient in Photoshop, but never had to design a photorealistic mobile UI in it. What a nightmare.)
- workbench 13y ago
  Try Fireworks, I've used it with 40 page documents with no real issues.
TheBindingVoid 13y ago
Sketch looks promising. But I would expect a couple of more features from an efficient screen design tool: Reusable elements (FW symbols), multiple pages, something like Fireworks' "Master page", (basic) bitmap editing.
- jongold 13y ago
  There are multiple pages :)
- etherealG 13y ago
  is there no form of bitmap editing at all?
  - jmdenis 13y ago
    Very basic so far, deleting pixels by double-clicking the bitmap image and use the marquee tool + backspace.
- aaronmoodie 13y ago
  Sketch has multiple pages support, and symbols/reusable elements are to be included in v3
bostonvaulter2 13y ago
Is there any comparable program to use for windows or linux users?
- grishma 13y ago
  +1 for windows/linux version/alternative
- zenbit 13y ago
  I have never used Sketch but judging from the article it seems that Inkscape is a comparable program.
- kukkukb 13y ago
  Inkscape?
- workbench 13y ago
  Fireworks. Does everything on this list apart from the retina stuff (need to do it the same way you do in Photoshop)
- chestnut-tree 13y ago
  For Windows, take at look at Xara Photo and Graphic Designer. It's principally a vector Illustration program but includes some photo manipulation capabilities too (cropping images, adjusting brightness and contrast etc). The interface is far superior to Illustrator and it's extremely fast in performance. I have used this program for many years and recommend you give it a try to see if you like it. There is a free trial version of the software on the Xara website http://www.xara.com/uk/photo-graphic-designer/ http://www.xara.com/uk/photo-graphic-designer/
clumsysmurf 13y ago
I've been using Inkscape on my Mac for quite a while, but the team doesn't seem to be willing or able to support the platform well. The download page still has 0.48.2 which is pretty ancient; I'm not too optimistic 0.49 will see good mac support either. I like inkscape, and if I migrate to Windows / Linux I can continue to use my assets there. But this app looks very nice; I wonder if anyone can briefly mention the areas where one app is stronger than the other.
- Goondaba 13y ago
  Have you tried using the Fink installation? It seems to have a more recent build, 0.48.4-5.
aaronmoodie 13y ago
I've been using Sketch exclusively for the better part of a year, and it's not just a better tool for designing web and mobile UIs, it's a real pleasure to use. There are still quite a few bugs, but even with those, the Sketch workflow trumps Photoshop, Illustrator and Fireworks. Version 3 should also address most of these, and is supposed to include support for symbols as well.
jongold 13y ago
Nice post - Sketch is revolutionising UI design workflow. Really well thought out product — we've standardised on it for all our products at work, and I haven't even installed and Adobe products on my newest laptop, 8 months in. I'll admit that I was initially frustrated at the constant crashes etc, but there's a very responsive team, constant releases, and I haven't had a problem in months.
omegote 13y ago
It would have been great to point out at the beginning of the article that this sketch software is for Mac only. Serious web development is not only done in Mac, did you know?
- jmdenis 13y ago
  You are right, I should have said that in the article. I'll edit it.
- workbench 13y ago
  How times change
  - xutopia 13y ago
    I remember in 2001 a friend of mine brought his black Apple laptop at work because he wanted to work with it to do a web application in Java. Everyone laughed at him. Now if I see someone with a thick Dell or IBM laptop it's the exception.
uxwtf 13y ago
I discovered Sketch about a year ago, and I should say it keeps getting better comparing to Illustrator. There are still some operations I can't do in Sketch, but it is the fastest and the lightest app to design UI such as http://dribbble.com/shots/1111784-iOS-7-icons-redesign/attachments/140689 http://dribbble.com/shots/1111784-iOS-7-icons-redesign/attac.... It took me few hours to redesign a whole iOS7 icon set in Sketch. Last months I use Illustrator to convert files to SVG to work on them in Sketch. The sad thing is that it works on Mac only and is not adopted by the designer community yet.
danabramov 13y ago
A UI designer I know has been using Sketch for months now, and he's very happy about it.
checker659 13y ago
I still use DrawIt from BohemianCoding (the same company / people) and it's really good for smallish UI work. The CoreImage based text rendering sucks and it leaks memory like anything but it's a nice piece of software. I hope sketch has all of what they created in DrawIt and more. Good luck!
lysa 13y ago
I tried it a few weeks ago and after working for about 2 hours on something I realized that Sketch doesn't have any support for color management (switching color profiles etc.). This is a showstopper for me.
- workbench 13y ago
  Does it need them… as a screen design tool?
_pmf_ 13y ago
Usable smart guides as a feature have been in the shitty freeware vector tools I used 7 years ago. I don't quite understand why the author is wetting his pants because of them, but maybe the Apple ecosystem has been so far behind that this is somehow new and cool.
- HNLogInShit 13y ago
  There's no competent vector-art software for the Mac, and sadly Sketch doesn't change that. Test one: Is there a proper selection mode? No. There's no way to set this application to select only objects that are entirely contained inside the selection rectangle, and that makes it essentially unusable. This pretty much kills it for even relatively simple drawings. It's as if nobody tests this stuff. Look at this: http://www.flickr.com/photos/forensicpics/1800773495/in/set-72157600304785497 http://www.flickr.com/photos/forensicpics/1800773495/in/set-...
Stranger2013 13y ago
Err... Not available for Windows -> FAIL. You should reflect this in subj to avoid peoples' frustration.
anderspetersson 13y ago
Seems to me that this app could implement HTML exporting better than Photoshop does, since it can export CSS already. Is this implemented or on the roadmap?
- falk 13y ago
  I hope not. Sketch should stay lean and be easy to make plugins for. Also, typically auto generated HTML sucks.
deleted 13y ago
[deleted]
falk 13y ago
Sometimes things don't vertically center properly when I use the "Align Vertically" button. I haven't seen anyone else complain about this, so am I doing something wrong? Here's an example: http://imgur.com/kgbMwJ2 http://imgur.com/kgbMwJ2 Ninja edit: After looking at the screenshot I posted above again, it looks like the entire textbox is being vertically centered (the blue outline is centered), but not the text inside of it. Why does it a function this way and can I change it so that it vertically centers the text? Thanks.
joelanman 13y ago
I love Sketch, it's a great Fireworks replacement. A few tips: ⌘ + cursor right or down: nudge width/height in preferences you can set it to zoom into selection, which I prefer when elements are grouped, hold ⌘ to select elements in the group directly right click a layer and select mask - this will mask any layers above it. If it's in a group it will only affect the elements in the group

134 points by xm 13y ago

Sketch is absolutely amazing. I moved from Illustrator to Sketch last year, as I was getting frustrated with cruft Adobe were adding, and things they weren't fixing. It took a little longer for me to get used to Sketch at around 3 months of casual use, but I find it much faster, simpler, and easier to use than Illustrator.

rbritton 13y ago
With Adobe now forcing a subscription to their Creative Cloud service for future updates, I'd expect programs like Sketch to become more and more attractive as well.

cshesse 13y ago

Sketch is on it's way to being what Illustrator should be. It's still a little buggy at times, for instance, you can't export things at high resolution and the workaround, resizing a group of objects, rarely works correctly.

bradgessler 13y ago
Yep, there are lots of bugs, but they release fixes for them and its always been getting better. I've completely ditched the entire Adobe Suite for Sketch and Pixelmator.
- seivan 13y ago
  I went for Pixelmator instead of Sketch, but I'm with you with ditching Adobes suit. Not necessary these days for interface design. Pixelmator lacks the full layer styles, but it's slowly getting some of them. Though I can appreciate what Sketch is trying to do, I feel like Pixelmators performance and layout is better suited for me.

shmageggy 13y ago

This looks very much like Fireworks. The author mentioned that he won't discuss it since Adobe discontinued it, but the resemblance is uncanny. I never understood why Fireworks wasn't more widely used/praised; I found it to be absolutely perfect for designing web graphics.

falk 13y ago
I love Sketch, but I don't like Fireworks. I find Fireworks awkward and clunky.
- gcb0 13y ago
  yeah, the UI is not sexy. But the feature set that is being boasted in the article is THE SAME from firewoks around 1999. It was the only place i could get some vector work and still be pixel perfect. Last used photoshop in 2006 and it wasn't even close. ...sadly gimp tries too hard to be a photoshop clone even copying the lame export dialog instead of save as...
  - gfodor 13y ago
    Sketch has much better support for layer and stroke styles than Fireworks did, particularly older versions of Fireworks. For example, you can apply multiple gradient layer styles to both the stroke and the fill of a rectangle in Sketch, with alpha. In Fireworks, you often had to make two or three rectangles to get the appropriate effect of a photorealistic button.
  - nileshtrivedi 13y ago
    How about Inkscape?
- workbench 13y ago
  Seems like most designers dismiss Fireworks before even giving it a chance. Once you get over the initial bump it actually feels much nicer to work with than Photoshop. The only thing really listed in this article that Fireworks hasn't done for years is the retina capabilities. Fireworks blows sketch out of the water performance wise and also opens layered PSDs/copy and paste support for vectors from Illustrator. Adobe killing off Fireworks just proves how little they understand the needs of their customers.

HunterV 13y ago

Sketch is better than anything else on the market simply because it's actually made for user interface design. Everything else that's existed for years was made for image processing. Get Sketch. Seriously.

TheBindingVoid 13y ago
If with "everything" you mean Photohop, then you're right. For everyone else there was Fireworks which initially was a promising screen design tool.

markbao 13y ago

My design workflow has moved from Illustrator for design structure and Photoshop for high-fidelity design, to strictly Sketch from conception all the way to exporting assets, with the rare Photoshop for some assets (like to-the-pixel ones). It's totally changed my design process, and it's made me wonder why there wasn't a really good app that was built from the ground up for UI design before—and why we have been 'hacking' Illustrator and Photoshop to do UI design. Vector objects on a pixel grid, @2x exporting, non-destructive properties on items. Still buggy as hell, but despite having to restart it multiple times a day, it's still worth it.

danenania 13y ago

Sketch literally gave me the push I needed to go from a non-designing developer to a halfway decent designer. It's really that good. The major negative right now is performance. I used Sketch to design a full iOS app with 7 or 8 screens on a fast mbp and things were seriously crawling. I had to break up separate screens into separate sketch files and even then it was laggy. Sketch team, your product is amazing, but performance is a big issue. It should imho be your top priority.

seivan 13y ago
Same here.
satyan 13y ago
Agree with your initial point. It's quite easy and intuitive for us non-designers too. Been using it past couple of months and prototyping my apps here.
gfodor 13y ago
Agreed. Seriously picking up UI design in a post-Sketch world is basically the same as picking up web programming in a post-J2EE world. You dodged a bullet. (I am pretty proficient in Photoshop, but never had to design a photorealistic mobile UI in it. What a nightmare.)
workbench 13y ago
Try Fireworks, I've used it with 40 page documents with no real issues.

TheBindingVoid 13y ago

Sketch looks promising. But I would expect a couple of more features from an efficient screen design tool: Reusable elements (FW symbols), multiple pages, something like Fireworks' "Master page", (basic) bitmap editing.

jongold 13y ago
There are multiple pages :)
etherealG 13y ago
is there no form of bitmap editing at all?
- jmdenis 13y ago
  Very basic so far, deleting pixels by double-clicking the bitmap image and use the marquee tool + backspace.
aaronmoodie 13y ago
Sketch has multiple pages support, and symbols/reusable elements are to be included in v3

bostonvaulter2 13y ago

Is there any comparable program to use for windows or linux users?

grishma 13y ago
+1 for windows/linux version/alternative
zenbit 13y ago
I have never used Sketch but judging from the article it seems that Inkscape is a comparable program.
kukkukb 13y ago
Inkscape?
workbench 13y ago
Fireworks. Does everything on this list apart from the retina stuff (need to do it the same way you do in Photoshop)
chestnut-tree 13y ago
For Windows, take at look at Xara Photo and Graphic Designer. It's principally a vector Illustration program but includes some photo manipulation capabilities too (cropping images, adjusting brightness and contrast etc). The interface is far superior to Illustrator and it's extremely fast in performance. I have used this program for many years and recommend you give it a try to see if you like it. There is a free trial version of the software on the Xara website http://www.xara.com/uk/photo-graphic-designer/ http://www.xara.com/uk/photo-graphic-designer/

clumsysmurf 13y ago

I've been using Inkscape on my Mac for quite a while, but the team doesn't seem to be willing or able to support the platform well. The download page still has 0.48.2 which is pretty ancient; I'm not too optimistic 0.49 will see good mac support either. I like inkscape, and if I migrate to Windows / Linux I can continue to use my assets there. But this app looks very nice; I wonder if anyone can briefly mention the areas where one app is stronger than the other.

Goondaba 13y ago
Have you tried using the Fink installation? It seems to have a more recent build, 0.48.4-5.

aaronmoodie 13y ago

I've been using Sketch exclusively for the better part of a year, and it's not just a better tool for designing web and mobile UIs, it's a real pleasure to use. There are still quite a few bugs, but even with those, the Sketch workflow trumps Photoshop, Illustrator and Fireworks. Version 3 should also address most of these, and is supposed to include support for symbols as well.

jongold 13y ago

Nice post - Sketch is revolutionising UI design workflow. Really well thought out product — we've standardised on it for all our products at work, and I haven't even installed and Adobe products on my newest laptop, 8 months in. I'll admit that I was initially frustrated at the constant crashes etc, but there's a very responsive team, constant releases, and I haven't had a problem in months.

omegote 13y ago

It would have been great to point out at the beginning of the article that this sketch software is for Mac only. Serious web development is not only done in Mac, did you know?

jmdenis 13y ago
You are right, I should have said that in the article. I'll edit it.
workbench 13y ago
How times change
- xutopia 13y ago
  I remember in 2001 a friend of mine brought his black Apple laptop at work because he wanted to work with it to do a web application in Java. Everyone laughed at him. Now if I see someone with a thick Dell or IBM laptop it's the exception.

uxwtf 13y ago

I discovered Sketch about a year ago, and I should say it keeps getting better comparing to Illustrator. There are still some operations I can't do in Sketch, but it is the fastest and the lightest app to design UI such as http://dribbble.com/shots/1111784-iOS-7-icons-redesign/attachments/140689 http://dribbble.com/shots/1111784-iOS-7-icons-redesign/attac.... It took me few hours to redesign a whole iOS7 icon set in Sketch. Last months I use Illustrator to convert files to SVG to work on them in Sketch. The sad thing is that it works on Mac only and is not adopted by the designer community yet.

danabramov 13y ago

A UI designer I know has been using Sketch for months now, and he's very happy about it.

checker659 13y ago

I still use DrawIt from BohemianCoding (the same company / people) and it's really good for smallish UI work. The CoreImage based text rendering sucks and it leaks memory like anything but it's a nice piece of software. I hope sketch has all of what they created in DrawIt and more. Good luck!

lysa 13y ago

I tried it a few weeks ago and after working for about 2 hours on something I realized that Sketch doesn't have any support for color management (switching color profiles etc.). This is a showstopper for me.

workbench 13y ago
Does it need them… as a screen design tool?

_pmf_ 13y ago

Usable smart guides as a feature have been in the shitty freeware vector tools I used 7 years ago. I don't quite understand why the author is wetting his pants because of them, but maybe the Apple ecosystem has been so far behind that this is somehow new and cool.

HNLogInShit 13y ago
There's no competent vector-art software for the Mac, and sadly Sketch doesn't change that. Test one: Is there a proper selection mode? No. There's no way to set this application to select only objects that are entirely contained inside the selection rectangle, and that makes it essentially unusable. This pretty much kills it for even relatively simple drawings. It's as if nobody tests this stuff. Look at this: http://www.flickr.com/photos/forensicpics/1800773495/in/set-72157600304785497 http://www.flickr.com/photos/forensicpics/1800773495/in/set-...

Stranger2013 13y ago

Err... Not available for Windows -> FAIL. You should reflect this in subj to avoid peoples' frustration.

anderspetersson 13y ago

Seems to me that this app could implement HTML exporting better than Photoshop does, since it can export CSS already. Is this implemented or on the roadmap?

falk 13y ago
I hope not. Sketch should stay lean and be easy to make plugins for. Also, typically auto generated HTML sucks.

deleted 13y ago

[deleted]

falk 13y ago

Sometimes things don't vertically center properly when I use the "Align Vertically" button. I haven't seen anyone else complain about this, so am I doing something wrong? Here's an example: http://imgur.com/kgbMwJ2 http://imgur.com/kgbMwJ2 Ninja edit: After looking at the screenshot I posted above again, it looks like the entire textbox is being vertically centered (the blue outline is centered), but not the text inside of it. Why does it a function this way and can I change it so that it vertically centers the text? Thanks.

joelanman 13y ago

I love Sketch, it's a great Fireworks replacement. A few tips: ⌘ + cursor right or down: nudge width/height in preferences you can set it to zoom into selection, which I prefer when elements are grouped, hold ⌘ to select elements in the group directly right click a layer and select mask - this will mask any layers above it. If it's in a group it will only affect the elements in the group