Discovering Sketch

https://medium.com/design-ux/25545f6cb161

by xm • 13 years ago

134 58 13 years 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• 13 years 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• 13 years 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• 13 years 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.

seivan2• 13 years 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• 13 years 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.

falk3• 13 years ago

I love Sketch, but I don't like Fireworks. I find Fireworks awkward and clunky.

gcb0• 13 years 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...

workbench5• 13 years 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.

coldtea• 13 years ago

Actually not much like Fireworks at all, either UI-wise or functionality wise.

It's like your basic vector editor -- most of the look and work the same.

Fireworks, besides the ugly Macromedia/Adobe GUI, was a hybrid Vector/Bitmap editor.

porker2• 13 years ago

I never understood why hybrid vector/bitmap editors didn't gain more acceptance: it seems a natural way to work. This one-or-the-other mentality may suit developers of the software, but it's not natural for users.

I like to be able to go back and edit my shapes, yet change the contents in ways that only a bitmap editor would be able to. Storing a history of the transformations I did and re-applying when I'd resized/changed the shape seemed sensible - as well as allowing me to go back in history and remove some.

As a self-taught designer, watching professional Photoshop users for the first time was mind-boggling: they make items and then throw them away and re-make them if they need a different size - or crop parts off, rather than masking. It's all destructive editing! I learned a lot about layers and could see the benefits of them, but still...

If I remember correctly Deneba Canvas supported the hybrid Vector/Bitmap approach, but never gained enough traction to be a viable product.

joelanman3• 13 years ago

I think the main thing it's missing from Fireworks is a symbol library - so useful for repeating elements such as buttons, icons

idealform01• 13 years ago

in fireworks it's called "Common Library" but it's really useful for that kind of stuff. It also has "styles" functionality that flow through to all of the pages for element styles.

HunterV• 13 years 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.

TheBindingVoid2• 13 years 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• 13 years 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• 13 years 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.

seivan2• 13 years ago

Same here.

satyan• 13 years 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.

gfodor2• 13 years 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.)

workbench5• 13 years ago

Try Fireworks, I've used it with 40 page documents with no real issues.

TheBindingVoid2• 13 years 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.

jongold2• 13 years ago

There are multiple pages :)

etherealG• 13 years ago

is there no form of bitmap editing at all?

jmdenis2• 13 years ago

Very basic so far, deleting pixels by double-clicking the bitmap image and use the marquee tool + backspace.

aaronmoodie2• 13 years ago

Sketch has multiple pages support, and symbols/reusable elements are to be included in v3

bostonvaulter2• 13 years ago

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

grishma• 13 years ago

+1 for windows/linux version/alternative

zenbit• 13 years ago

I have never used Sketch but judging from the article it seems that Inkscape is a comparable program.

kukkukb• 13 years ago

Inkscape?

workbench5• 13 years 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• 13 years 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/

clumsysmurf• 13 years 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• 13 years ago

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

aaronmoodie2• 13 years 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.

jongold2• 13 years 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• 13 years 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?

jmdenis2• 13 years ago

You are right, I should have said that in the article. I'll edit it.

workbench5• 13 years ago

How times change

xutopia• 13 years 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• 13 years 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/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• 13 years ago

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

checker659• 13 years 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• 13 years 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.

workbench5• 13 years ago

Does it need them… as a screen design tool?

_pmf_• 13 years 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.

Stranger2013• 13 years ago

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

anderspetersson• 13 years 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?

falk3• 13 years ago

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

falk3• 13 years 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

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.

joelanman3• 13 years 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

Discovering Sketch

Related Stories