Discovering Sketch(medium.com)
medium.com
Discovering Sketch
https://medium.com/design-ux/25545f6cb161
22 comments
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.
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.
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.
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.
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.
I notice this about Photoshop users myself but I also notice the more time you spend using it, the biggest efficiency gains you make to your workflow come from using vector shapes and non-destructive editing (various types of masks, adjustment layer, layers with blending options). There are a few things where destruction is required but often I stash an old copy of the layer unless I'm dead set on the new version, but this can be rare. You also learn as time goes on how annoying a PSD with rasterised elements that didn't need to be rasterised are!
You should always be able to do non-destructive editing even when pretending to work destructively, by keeping around the original sources (which you keep around anyway in most cases) and the graph of operations applied (which isn't much data). Or rather, the software should be able to do that. I'm surprised that there don't seem to be any applications doing that.
I love Sketch, but I don't like Fireworks. I find Fireworks awkward and clunky.
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...
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...
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.
How about Inkscape?
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.
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.
> Adobe killing off Fireworks just proves how little they understand the needs of their customers.
"Adobe" and "customers" go together in a sentence like "hacker" and "power outage"...
I am hopeful they will turn round the company, but it'll take a while.
"Adobe" and "customers" go together in a sentence like "hacker" and "power outage"...
I am hopeful they will turn round the company, but it'll take a while.
I've thought for a while that they are an enterprise company that thinks their customers are everyday consumers...
I think the main thing it's missing from Fireworks is a symbol library - so useful for repeating elements such as buttons, icons
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.
sorry my comment was badly worded - I meant it was missing in Sketch compared to Fireworks
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.
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.
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.
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.
Have you tried using the Fink installation? It seems to have a more recent build, 0.48.4-5.
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.
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.
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?
You are right, I should have said that in the article. I'll edit it.
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.
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.
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.
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.
I've completely ditched the entire Adobe Suite for Sketch and Pixelmator.
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.
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.
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.
Get Sketch. Seriously.
If with "everything" you mean Photohop, then you're right. For everyone else there was Fireworks which initially was a promising screen design tool.
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.
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.
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.)
(I am pretty proficient in Photoshop, but never had to design a photorealistic mobile UI in it. What a nightmare.)
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.
Same here.
Try Fireworks, I've used it with 40 page documents with no real issues.
Is there any comparable program to use for windows or linux users?
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/
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/
+1 for windows/linux version/alternative
I have never used Sketch but judging from the article it seems that Inkscape is a comparable program.
Inkscape?
Fireworks. Does everything on this list apart from the retina stuff (need to do it the same way you do in Photoshop)
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.
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.
Reusable elements (FW symbols), multiple pages, something like Fireworks' "Master page", (basic) bitmap editing.
Sketch has multiple pages support, and symbols/reusable elements are to be included in v3
There are multiple pages :)
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.
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.
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
⌘ + 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
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.
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.
[deleted]
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!
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.
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?
Is this implemented or on the roadmap?
I hope not. Sketch should stay lean and be easy to make plugins for. Also, typically auto generated HTML sucks.
A UI designer I know has been using Sketch for months now, and he's very happy about it.
Err... Not available for Windows -> FAIL. You should reflect this in subj to avoid peoples' frustration.