Symbols and consistent color mgmt are the two things Sketch is desperately lacking.
While I would love for Sketch to get Master Pages and Smart Objects soon, I don't see how it's any different from using layers and groups in Illustrator or Photoshop. My workflow is just like yours — I create locked background groups on all my art boards, in order to keep headers and etcetera consistent.
Despite missing certain features, using Sketch has sped up my workflow 10x. I can't imagine going back to Photoshop for web/app design. (although I still prefer Adobe for more traditional graphic design)
+1 Agreed on the 10x gain. For the simple things, Sketch is much more efficient. And by saving time in the visual design, I can spend more time building an interactive prototype.
+1 on this as well. I recently went back to photoshop for an app design as the client requested. I found it much slower to make changes across the entire app. I halved most of the time spent making changes in Sketch.
However, I do find layer and groups can start to get a little complicated when you are creating lots of icons within a page.
I think this has to do with the way you design.
The reason why re-usable elements don't need to be in design apps is because it takes 2 secs to copy and paste an element while in code, it's an ordeal since your whole project is a large set of files. In design, it's limited to one file.
Some designers work with one large file and for those designers, I can see your point. But unless you work in a collaborative environment, I don't personally see the need. I like to keep my designs simple – I typically have 10-15 files since it's easier to preview. If I want my header to be re-usable, I'll just put it in a Group and hide/show when convenient. Or, I'll just create another Artboard with that header active.
That being said, I would still love to see this feature for those cases. I just don't think it's absolutely necessary.
2 seconds to copy and paste
Yes, per instance, per change. So if the same element is present on 60 pages, at 2 seconds per page, that's 2 minutes wasted… for every single change. Add in overhead for any you forget along the way… Why just accept that?
Keeping pages together in a single file is another reason I work with Illustrator. The benefits of having an entire project in one file are enormous. I can't imagine designing even a moderately complex piece of software if every page or state had to be its own file…
Easier to preview? To change the preview from one page to the next in Illustrator, I hide one layer and show another. If I had different files I'd have to go from Illustrator to Finder, look up the file, open it, wait for it to open… that's hardly an improvement. And as I point out in the article, it rules out any reusable elements between pages, which makes changes a huge headache.
Now, I grant you, having a 100 page app design in a single Photoshop file would take up huge amounts of space and tax system memory, etc… but my largest Illustrator design file is 118 layers and still only 131MB.
I forced myself to use Sketch over Photoshop for a recent project and I have to agree that the lack of Smart Objects is the app's biggest flaw right now.
I have to think that symbols are coming to Sketch soon, I've seen a few of these articles in the past little while.
I've been bugging them since launch, and they always say it's in the works…
This is true when a designer is expected to deliver dozens of mock ups, all using common parts... This workflow is good for big agencies ("final client approval" syndrom) or when you work with traditional development house (ie. PSD2HTML).
When working in a team of developers, with everyone rushing to get a prototype ready, Sketch makes so much more sense. It's faster, like guerrilla fast.
Need to change the header or footer after getting half of the work done? No problem, just get my changes done on the latest .sketch file or do the changes myself in a later build.
You're absolutely right that it matters most in large "complete" design files and big projects. I do a lot of those through our agency, so it certainly matters to me.
And I agree with the speed thing… if you're comparing Sketch vs Photoshop. But for those of us already using Illustrator, speed gains are not so clear cut. I already got the huge gains from a vector-based workflow years ago when I switched to Ai. Asset export is a big win for Sketch, but most everything else is pretty evenly matched. And for me, even small projects benefit from reusable elements, so that factors in.
Sketch is probably still faster than Illustrator overall, but less powerful as well, and the delta is much less than with Photoshop.
Unless you can make changes once and see them everywhere they appear, you’re wasting time.
I completely agree with that.
Layers / Layer Groups: in Photoshop and Illustrator these can be used as de-facto Master Pages, thanks to the ability to toggle layers on and off.
I wonder why this is cited as an example of reuse in Photoshop and Illustrator, but ignored for Sketch? Sketch has layers and groups.
In many regards it is far better for web and mobile design than either Photoshop or Illustrator—from text rendering to responsive breakpoints; from the speed of the interface to the price of the app and more.
Photoshop CC introduced system font rendering as an option. Set it to “Mac” for things to match the system (If you’re on a Mac).
I currently design in Adobe Illustrator. A big reason for that is having both Layers and Symbols built in.
Do you export any bitmaps from Illustrator? I find it sub-par for that task.
What do you like about Symbols? I honestly find Symbols to be a terrible implementation of a way to reuse components and propagate changes. I think there’s far better ways to do it.
I agree with Symbols, I really hate when my designs become so complicated. I remember using Omnigraffle for those features and it really quickly became a huge mess. You're wire framing something and adding a ton of structure to it, but really you should be doing that in code instead, on a final product.
Sketch has layers and groups
The way it's implemented doesn't lend itself to layers-as-pages as well. For instance, you can't create a new layer, lock layers beneath, and then add content to the new layer… each piece of added content becomes its own layer, and you then have to round everything up and group it to simulate a "page". God help you if you then want to change or add things to the "page" ;)
Do you export any bitmaps from Illustrator?
If I ever export little black circles I'll use Photoshop. For real-world graphics, I've never had a client or fellow designer point to my exported bitmaps and go: "hey, those are sub-par!"
What do you like about Symbols?
I don't use them often. I make symbols for things like sidebars that appear on multiple pages but in different locations. I've also used it when I need to place the same icon dozens of times across the app, if the icon might ever need to be tweaked. For such uses Symbols work great… I wonder what problems you've had with them?
The way it's implemented doesn't lend itself to layers-as-pages as well.
I've never had a client or fellow designer point to my exported bitmaps and go: "hey, those are sub-par!"
I definitely understand that AI’s bitmap exporting deficiencies may not be immediately apparent. If you don’t mind, can you point me in the direction of something you’ve built using bitmaps exported from AI? I hope you don’t see that request as rude.
For the record, I really like AI. I just don’t like the way it renders bitmaps.
For such uses Symbols work great… I wonder what problems you've had with them?
They feel a bit isolated, contained within one document. They also allow flexibility in a way that makes sense for illustration, but maybe not for software design (which is what I’d want to use them for).
Don’t get me wrong — they can be good (I probably shouldn’t have said they’re terrible), and I wish they existed in Photoshop, but I don’t think symbols are the best solution. (Yes, I realise Smart Objects exist in Photoshop and are similar, but they have their own set of issues, like rendering at the initial creation size, then bitmap scaling to the final placed Smart Object size, even if the contents is entire vector.)
If the main gist of your article is that design tools aren’t as good as they could be for software design, then I completely agree (and am trying to do something about it).
Certainly not rude! It's useful to see real-world examples. Here are a couple sites: http://ponga.comhttp://www.everloop.comhttp://telluridefilmfestival.orghttp://burnblue.com/https://viblio.com/ (just the landing, not the internal pages)
And here's a sampling of some actual iOS assets: https://dl.dropboxusercontent.com/u/347394/example_ai_assets.zip
FWIW I copy+paste assets from Ai into PS and then save-for-web. A bit convoluted, but surprisingly quick once you get the keyboard shortcuts hardwired in your brain. And it works very well for outputting normal+retina assets (paste @1x as vector object, then double image size and save-for-web again).
Now, I'm not arguing that some of the smaller icons mightn't have looked better if generated in Photoshop. What I am saying though is that in the real world, I'm willing to accept something shy of perfect in order to keep all the other benefits of designing in Ai. I like to think my standard of quality is still so high that no client or user will ever have reason to complain, but you can judge for yourself. And of course I respect those who refuse to settle, I'm just not a perfectionist myself.
Symbols: if I used multiple documents for one design, I could see myself getting annoyed, I suppose. One more benefit to keeping it all in one Ai file ;)
And they're certainly not for everything. I use Layers for static site chrome and only use Symbols for smaller chunks that need to exist in different places on different pages.
Here are a couple sites … And here's a sampling of some actual iOS assets
Yeah, I can definitely see typical Illustrator rendering issues in some of those — antialiasing issues, non-dithered gradients etc (using Smart Objects in Photoshop, pasted from Illustrator doesn’t solve it, unfortunately). That kind of thing drives me crazy, but I definitely get where you’re coming from in terms of clients noticing.
I really hope you don’t mind me interrogating your artwork like this (it’s a reflection on how AI does things, and not at all a criticism of your work): http://i.imgur.com/ZG3T9cX.png
FWIW I copy+paste assets from Ai into PS and then save-for-web. A bit convoluted, but surprisingly quick once you get the keyboard shortcuts hardwired in your brain.
It seems like you have a quick workflow for building and editing. Currently I’m doing things the hard way for building and editing, but have an automated exporting workflow. I guess we’re both saving some time, but optimising different parts. It’s a shame no tool gets the entire workflow right.
It's killer you took the time to do that… and yeah, those are the kinds of things where I can certainly see them during export, but I look at the assets in place in the app and make the call whether to fix them or not. With all your examples, the imperfections are extremely difficult to pick out in context and thus in my estimation not worth extra work.
I do occasionally tweak and re-export assets… if the pixel ghosting is visible in the final app, for example… and the gradient dithering thing is sometimes pretty noticeable. But I consider it an "iterative approach to assets", if you will, going back afterward and fixing any noticeable defects.
Completely agree that we need a tool that gets the whole thing right, and this post was intended to add to the conversation around what that ideal app should include.
This is like writing an article about why you don't drive an electric car... yet.
My first CD player had no seek feature, you could only skip forward and back. While it was certainly a step back in usability from the tapes I was used to, it was simply a fact of being an early adopter.
Sketch is very much a work in progress, and they're improving it quite rapidly, and adding features.
I agree that reusable elements are key to efficient design workflows.. but I'm pretty sure they're focusing on the core functionality of the app before adding features. Like you said, Sketch is a tool purpose-built for UI design, and I think the lack of smart objects is mostly due to their focus being on the core of the app.
What I was getting at with the article: support for reusable elements IS core functionality for a UI design app.
Is it? I don't use it, and I create a helluva lots of UIs.
Just because you can design without it doesn't mean it isn't core functionality. I could design a perfectly usable app without any layers or pages at all, with one file for every state… but that doesn't mean layers aren't part of the core functionality of a design app.
I guess it's what you see as core functionality. I'm guessing a lot don't.
i would call it a feature, not the core functionality.. things like drawing engine etc. i guess i'm assuming they were initially focusing more on the nitty gritty stuff we might not see.
either way it does seem like they're listening to the community as they progress in the early stages of this app's life. i think that's the important thing, and what will really make it an effective tool in a ui designer's arsenal =]
I agree with the sentiment of this article. I love Sketch but have recently started using Photoshop with Pixel Dropr it's been a really nice workflow.
Somethin' weird with your link, here's the right one: http://pixeldropr.com/
Fixed the link. Thanks for the catch.