Pretty much in line with my feelings. The author starts on bugs for good reason, but finally using an app that is custom tailored to UI design outweighs any of the quirks.
While the Adobe team is working on features that Sketch already has, the Sketch community is working on an amazing plug-ins to combine real live data and integrate code into Sketch.
Thanks a lot Philip! :)
While the Adobe team is working on features that Sketch already has...
It’s also worth noting that while the Adobe team tries to bring Photoshop up to parity with some of the UI features Sketch has, they’ve begun to lose the stability high ground — at least, I’ve found Photoshop CC2015 to be slower and buggier than ever before, worse than Sketch 3 in my opinion, with it halting every 30 seconds and beach-balling.
Always thought Photoshop a weird app to do UI. I greatly prefer Illustrator. Sketch is doing some really nice things and I use both Illustrator and Sketch, but Sketch has not swayed me completely. It's hard to break 20 years of workflows. Also, I'm old.
At some point the author says:
Today we look at a design as elements with a state to each element. Design tools should see it like this and make the app let us design a set of elements with different states, that can be later brought into our pages design.
well, let me introduce you to the best design tool no-one ever heard of:
It will change your life. I'm even willing to teach you for free, I don't make any money out of it, just want it to be successful.
I share the sentiment. And: It’s the same situation like with Fireworks back in the days. Clearly the way superior tool for screen design, but so bug-ridden that I never really could move my team to use it – sometimes, when I insisted, really only with a lot of gnashing teeth. And most of the time they went back to PS. Understandably. I developed like a sixth (and seventh) sense for how to circle around the bugs, but because I really really wanted to – and I sucked up every new shit Adobe introduced with their half-arsed never really tested to the core updates (I don’t blame the team, they really tried – the culprit was likely more the disconnect between corporate management/marketing and the dev guys trying to get all in on a tight budget and schedule, I guess – I don’t have any insights). But try to explain that to a junior designer. Anyway, if you knew your way it still made the design-stage so much more agile (I’m looking at you, states – the one feature that is so sorely missing from Sketch for me) and intuitive that I was willing to put up with the pitfalls – until they killed it. In that respect: Sketch is already so much more stable than Fireworks ever was – and way ahead of Photoshop, with it’s core concept anyway and it’s features, too. Add the active (sometimes a bit too religious, but well, nice when you’ve got something you think’s worth fighting for) community and small, but focussed development team and it’s the clear winner to me.
So Bohemian, I know you read most of this: if you’re not already working on it, I’d appreciate if you grab an old Fireworks Copy and have a look at the way States (and Pages) worked – it was bug-ridden (mainly the pages; states where quite solid), but a really helpful and cool feature. But well, no pressure, you do what you do. Just saying (and wishing).
How did you use states in FW? Do you think there is a way to use symbols in place of states?
Whenever I have multiple states for buttons, radios, or even entire sections of a screen, I just create a symbol for each state. Granted, they are going to be global states, not exclusive to each 'page', but naming them properly helps with that. Also, it means your states can be used across multiple places in your project.
States in FW where initially meant for button states (I believe). But there was no limit to the amount of states you could have in a document. And, this is the important kicker: every state had it’s own layer-set. And – kicker 2 – you could assign some layers to appear in every state (think elements on a masterpage in inDesign). So granted, this was a hack, but with some experience and planning (and I’m sure many others did this, too) I was able to treat states not like tiny variations of one button-like element, but like major, sometimes even page-like flows through a webpage/app (before pages came, and even then further on, because pages were often unpredictably buggy). The important aspect #1: because FW kept – different than Illustrator and Photoshop – seperated layergroups, you were easily able to keep your states tidy (not like this horrible afterthought of layer-comps in PS which makes you always screw up with an unintended move or the mess illustrators layerpalette gets when you start to duplicate pages; it still works fairly well, though – I used to do a lot of webdesign in Illustrator, but well, to Jim Renaulds point, I’m old too). Important aspect #2: because of FWs behaviour – different to Illustrator and Sketch – of not having artboards side by side but only one page (which could have different dimensions btw) you where literally only showing (or hiding) one state at the time of your design, which totally got you nearer to the experience your visitors/users were gonna having later on, which greatly helped informed UX/UI-design (at least for me). Add to that that I additionally set dedicated keypresses to switch through the states (specifically pageUp, pageDown to go through states and later shift + pageUp/pageDown to go through pages) and you had a very very good – prototype-similar – representation of your user-flow and -experience (it helped that FW unlike Illustrator and Sketch kept the zoomlevel and position on screen of the page fixed at every page/state-change no matter what). Yeah, so basically (TL;DR): because of FW’s one single page nature with easily switchable multiple states/pages-features you could do prototype-near userflows. I kind of hope Bjango thing is going in that direction.
Edit: I’m sorry, I got washed away with my description of my workflow back then and didn’t answer your question: No, symbols are fantastic, but for the use-case I describe they are of no help.
I never got to use FW, but your comment is a living part of software history. Thank you.
I wish there was a place to share stories like this — so many good software gets lost in the sands of time, and for not knowing our history, we are doomed to repeat the same mistakes of the past.
I kind of hope Bjango thing is going in that direction.
Thanks. We’re definitely giving very careful consideration to state-based design, and how software design should be (it’s an absolute mess right now).
Good to hear. I figured that with your statement about not having artboards. I was honestly intrigued. I’m looking forward to your solution.
I still use Fireworks - even thought it's buggy. I find state to be really important for tracking iterations and testing out different interactions. I still love Fireworks but it's being abandoned so it's time to move on.
I want to make the switch to a OSX and Sketch. Any advice?
Jump in. Sketch is very good at a lot of interface-design-stuff. Worth alone for me: the multiple ways you’re able to export stuff without hassle and unnecessary clicks. When you used that you just realize how archaic the adobe workflows are.
Another great article Sagi! As a Sketch user I totally agree that at this point for UI design Sketch does a better job even with all its flaws, but the days when i can stop paying for the Adobe suite too still seem very far away.
But seeing how so much has changed and how Sketch in such a short time pushed Adobe to build so many new features i can only guess what another year will bring.
Waiting to hear your 2 year review ;)
Indesign is IMO Adobe’s most impressive app. It’s built so well for layout purposes that it would be super hard to bring on it any competition.
If Adobe were to somehow retrofit InDesign to stick to the pixel grid and export assets as well as Sketch does they would have a killer web design app. I used to do all my website designs in InDesign before I got Sketch. Because I'm both designer and developer and I was able to take my designs and code them up fairly quickly and faithfully. Photoshop has never made sense to me for website layout. Adobe is sitting on something great and they don't even know it.
Well, actually they had. It’s name was FireWorks and it sadly never got the love it deserved (from users and from Adobe – egg, hen problem, kind of)
A very well-balanced view on this topic. I agree with what you've written.
An interesting player in the game, one much more connected to code than Sketch, is Paintcode.
Charlie what do you use Paintcode for? All your UI designs?
Nothing, yet; I use Sketch but am waiting for a small project to dive into Paintcode.
Sorry to not be able to share more first-hand experience!
In general, I'm intrigued by the parametric control Paintcode provides. Their videos are definitely worth checking out to get a sense of how they think about things.
I agree with most of it, but using most plug-ins for Sketch is a horrible experience, so I wouldn't say that's it's strong point. Too inconsistent and quirky.
The initial cap-A has some issues in Firefox... http://cl.ly/image/3h031V471e3G
Great, balanced article though.
Wonderful article. Exactly how I feel about it. Wish they'd fix all the crazy glitches with combining shapes.
Anyway, a few major bug fixes by the sketch team and another year or so of the community developing more plugins will make this product a real force to compete with Adobe
I forced myself to use Sketch for some small gigs to test it out and can't really see any substantial benefits of using it.
It may be sensible for newbies that are starting out because it is much easier than PS or AI.
But. Let be honest for a second. It is the biggest fad in the industry ever. It can't even stand next to Illustrator in terms of capability and more complicated path control. Period.
Sketch doesn't compete with Photoshop - it can't. It's cool as long as trendy websites or apps could be done with few rectangle shapes and type tool.
In the end I'm really happy that it exist - it questions Adobe status quo and I really hope it force it to change rape-like pricing.
Ever try Sketch's plugins? The community is active and best of all they are free.
Could you give some examples?
Export 5x to Android with their folders named correctly. I'm doing Android export in PS now and it's so painful. https://github.com/geertwille/sketch-export-assets
Sketch Measure lets me Red Line at lightning speed. https://github.com/utom/sketch-measure
i'm android-virgin so have no competency in this area but i bet there is a plugin for ps similar to that one. in terms of sketch measure i'm pretty sure there is no substantial benefit over ps - let me explain. visual representation of measures may artificially looks like a really great deal for developers but in reality it is not - when you are coding you will switch between your coding app and sketch or jpg and you will do same when using photoshop which have the same functionality except you need to use 'cmd' and 'mouse over' element you wont to inspect. those are a milliseconds of process time saved when you use a single screen [so you need to switch between], or maybe o few seconds overtime when you are working with 2 screens. doesn't looks like a really good deal to me.
Well despite the hyperbole, I think Sketch is going to be around for quite some time. It may never replace photoshop and illustrator, but it will have its niche.
I for one enjoy using it. I find photoshop to have a complicated workflow and the common tools are not intuitive to me at all (e.g. shortcuts are complete nonsense, layer interaction on the artboard is unintuitive, color selection is a pain, etc.)
I have noticed that most proponents of programs like Photoshop are mostly defending it due to having years of experience contorting their natural behavior to use it. Now that they are used to it, they would rather not change.
Personally, I find Sketch far easier to use and I get things done faster. It still needs a lot of work, but I enjoy it.
That's completely true. I've spend near a decade in PS, countless amount of hours honing my workflows and way I work in it right now is pure magic [heavy use of shortcuts etc].
Last few years I've been exploring Illustrator and it amazed me every time how powerful software it is [it is much harder to master than PS], and Sketch right now is nothing like that.
Simplicity of Sketch is it's advantage in times when websites can be 'designed' by developers but in a long run it is rather constraining. We as a designers forget nowadays why are we in this industry in the first place - to create, instead we are thinking about processes or some plugins that enable you to export things faster.