7 years ago from Alex Yakir, Designer & Developer
I was wondering what do you prefer for UI work.
I know some people combine between the two but I can't see the necessity - please choose your favourite and if you combine your workflow explain why.
Thanks!
Sketch or Adobe XD is the way to go for UI Design. Remember when you done designing there is a lot of process going on. Developers need your assets, measurements. Sketch and Adobe XD delivers you exactly that. These are not tools just for design they are also tools for the developers. Affinity is just a Illustration Tool like Illustrator. Photoshop is a tool to alter and modify bitmap images. Please start using applications for their purpose. You didn't want to cook a hole 5 star meal in the microwave oven right?
Valid point. Direct 3rd party support for services like Marvel, InVision, Zeplin, Principle, and Framer keep me working in Sketch for UI design.
Affinity Designer, Illustrator and Photoshop can all export assets for web and native apps, using many different methods — all three have slices, Photoshop also has Generator, and Illustrator also has a new Export for Screens feature.
I would rate Affinity Designer, Illustrator and Photoshop’s exporting abilities as better than Experience Design’s right now (that might change in the future).
Please start using applications for their purpose.
I agree, but at the same time, I find it impossible to create certain things in anything other than Photoshop. Highly detailed app icons are unpractical in anything else. Everyone here will likely have an opinion on that, but mine is that Photoshop’s masking and other abilities makes it unique and better for many things. If you’re just drawing coloured roundrects, there’s lots of tools that do it well.
Also, remember that if you’re going to create wide gamut UI images, that’s only possible in a handful of tools (which include Photoshop, Illustrator and Affinity Designer).
I don’t think you have to choose, and it’s likely a combination of many tools will be the best approach.
"other than Photoshop. Highly detailed app icons are unpractical in anything else." Affinity Designer's ability to zoom to an insane percent, as well as work in both vector and bitmap mode beats out Photoshop for those reasons alone.
Affinity's most recent update is targeted specifically for UI design.
Yeah like Photoshop updated with artboards. But it doesn't mean it is a good tool for UI Design, right?
I honestly haven't built any UI design in Affinity yet, so I'm really not sure if it's well suited for designers.
Your argument was for designers to use applications for their purpose, and it seems that Affinity Designer has made a pretty big update specifically for using the application for UI design (artboards, nested symbols, constraints, etc.).
Neither Sketch nor Affinity Designer were originally created for UI design. Both were originally created as competitors to Adobe Illustrator. People that design UI just sort of latched on to Sketch because of some of its features, but more importantly because of its plugin development community. Sketch would not be nearly as useful without all the awesome plugins that people have created for it. Adobe XD is not NEARLY ready for mainstream use. It lacks A LOT of stuff. I used it for about 6 hours one day and got so fed up with lack of features I rebuilt the entire project I was working on in Webflow.
Sorry, but Adobe Illustrator is the tool for actual UI design creation and element development. It's the only legacy vector package from Adobe. (Fireworks also, prior to its decease)
Affinity therefore, as far as I can see right now, is then of course intended for UI design and the same level of digital asset creation as Illustrator is.
Sketch, yeh, that is an artboard workflow tool that leads on to instant device testing and prototyping. It has like you say extended its library of functions to make UI design on it a primary task.
Adobe XD has the name and brand behind it, but still, like you say, a far leap to go.
To avoid making a fresh post about the same thing:
Photoshop is as it says on the tin, a "Photo" "Shop", somewhere you should only go to alter and adapt photographs and digital compositions. UI design requires design in vector format. I have no ill feelings, really, toward those who use Photoshop, but by doing so it's like you're unwilling to open your mind and increase your perspective. You're sticking with what you know, ever since you were a kid, Photoshop was a big name, and you doctored those family photos with sheer amazement.
BUT, Illustrator, by its very nature and fabric of creation is intended for the development of digital assets and pixel perfect elements which is the necessity for UI design. (Sketch, Affinity etc. now also)
I'm still sticking with Photoshop, but after having tried both Sketch and Affinity a few times, I'd say Affinity is the superior product - it's fast and powerful, it comes with far less bugs than Sketch has and does it all for a fraction of the cost. Not to mention it has far better support for existing file formats like PSD.
My vote is for Affinity Designer. I come from Photoshop/Illustrator like most anyone else. Before Affinity I used (and still use) Sketch. In terms of performance and migration from an Adobe product, I think Affinity wins hands down. Try zooming in over one million percent on any other of these apps...
If you dive deeper into Affinity it becomes a really be-all-end-all tool. The "persona" modes allow you to quickly switch from vector to pixel based editing and the export feature is the way "slicing" should have always been inside photoshop in my opinion. You can export to a tremendous amount of file types and even PSDs (with some limitations).
Artboards are quick and responsive. I don't get the infamous rainbow wheel in this program.
From a UI perspective, I think the pen and node tool and very innovative. They do what you expect every time without there being a clusterf*%# of different tools to have to make use of (ahem... Adobe Illustrator).
I'm so used to pressing "V" to get back to a move tool that really doesn't exist in Sketch. So then I'm left with the "Vector" tool which kills my workflow almost every time I open the program. It's the little things...
Final takeaways:
There's a lot more I could say but I think it boils down to just trying each. Whatever leaves you with the least amount of tooling frustrations is your winner.
I use Sketch for almost everything. I switch to Affinity Designer only when I need to typeset something using alternate letterforms. Oh, and when I need to export an SVG that isn’t 80% garbage.
EDIT: Oh, and multiple text styles in the same text box. Come on, Sketch.
is affinity's svg export better than sketch's? can you elaborate on the difference?
Affinity’s SVG exports contain far less cruft than Sketch’s. They still need running through SVGO to remove a few superfluous tags and minify, though.
Interesting! I would have guessed the opposite.
Here’s an example of the same shapes, exported by Designer and Sketch (though because it’s so simple the Sketch + SVGO export is actually smaller than the Designer + SVGO).
https://gist.github.com/danleech/724b6ed1575cbd0b21f8f563abb41b28
I have this weird idea that designers working on web app UIs should use something like WebFlow to design stuff so they can have a better grasp of what is actually possible to do with CSS.
It's nice that Sketch has all sorts of plugins that make it easier to hand off to developers, but the process still strikes me as awkward and a step too far from the final product.
Let's say you want to have a grid layout where the margins area percentage of viewport width, not an exact pixel or em/rem value, then you have to specify that by hand in documentation. It's not something that will come out in auto-documentation plugins or even the developer looking at the Sketch file themselves. Furthermore designs who have never played with CSS may not even realize they have the freedom to do stuff like that.
I think a lot of designers/developers look down on products like WebFlow because they assume they will significantly limit them or are just another shitty WYSIWYG theming system, but in reality I think they are a step in the right direction towards making designers familiar with web layouts and giving developers a design/prototype that is actually already using HTML/CSS.
Just can't agree with you more!
I've just started playing with webflow for prototyping. I'm looking for responsiveness and interaction. Hoping webflow can deliver. How has your experience been so far? I'm hoping I don't get frustrated or hit a wall with it and end up going to code because speed of creating is what I am looking for.
Hey sorry I missed your comment here, for some reason I don't always get emails when people reply to me on DN.
WebFlow can create the vast majority of layouts and interactions you come across on the web. If you are prototyping a super complex web app that goes far beyond hover/click interactions and two-state animations it might not have what you need, but I continue to be pleasantly surprised at the capability it has.
Regarding speed I think it's mostly a matter of familiarizing yourself with the UI. They aren't really doing anything completely outlandish with their setup, so it shouldn't be too hard to get up to speed.
Webflow is awesome, however in Affinity Designer you can specify elements to have percentage widths and heights with the Constraints panel. It's actually really cool. What really bugs me about all these tools is that none of them let you make tables. Do I really need to pull up Microsoft Excel to create a table that I can drop into my design (whether that be Sketch, Affinity, or Webflow)? InDesign really has that only decent table creation and styling ability of any design app. That is sad. I know tables are not used for layout, but they are still used to display data. Plus it is way harder to style div elements to be table-like for a quick mockup than it is to just make an html table. Kind of weird.
On the baseline, they should just have the actual knowledge and experience of CSS as a coding language. Haven gotten their hands dirty with it at some point so that they then know what's possible. Not necessarily a 'unicorn' designer, but it is a severe must to have awareness of the technologies you are working with and have an impact on.
I've bene using Sketch for the past 18 months or so. I'm not a heavy graphics designer, but I've been using it for icons, iOS mocks and a few other pretty light weight design tasks. But last week, I've switched over to Affinity Designer. The workflow is slightly different but the stability and performance is a lot better and it catches up to Sketch in a lot of other aspects after 1.5. The main turn off for me and Sketch right now are the bugs... Text bugs, rotation bugs and boolean math on shape bugs. Plus AD has 200 million % zoom.
Using Sketch. Tried both. Sketch is 1/10 the size and has features that Affinity just copied with 1.5. They still have more to copy before they can start to innovate. (pun intended..)
Sketch's UI is better, simpler and more powerful as well. The end result will be the same for both, but the time saver and leader in this space is definitely Sketch. Try them out and see for yourself.
A world where Affinity doesn't copy features
"Wow what a piece of shit, it doesn't even do X/Y or Z"
A world where Affinity does copy features
"and has features that Affinity just copied with 1.5. They still have more to copy before they can start to innovate"
Literally can't win with people like you.
Yes because in order to be successful you need to blatantly copy (until the product explodes).
I've used both and stuck with Affinity, as it's a lot like illustrator and I do a wide range of work all of which need. With that being said, we (my partner and myself) have created a lot of great UI's with it. We just did an onboarding process with 44 screens without fail.
From my understanding with Sketch, it a lot easier for repeat elements and on similar screens. Overall it doesn't seem that Sketch allows for more complexed elements, which is why people would be using both. I'd say try both and let yourself decide at the end its your preference. You, like most people, will be happy with Sketch but Affinity is a nice alternative if you want something more.
I'm curious—has anyone been using Affinity's constraints and nested symbols for creating reusable components? How is it?
I combine Affinity Designer and Sketch every day currently. Sketch, for me, is not sufficient enough to create most graphic assets. It's great for layout and plugins, but Affinity is more powerful and versatile overall by default. Affinity combines a lot of the best core features of Illustrator, Photoshop, and Sketch in one—in my opinion I would stick to Affinity only if I didn't need a Zeplin integration (we use it on my team) and certain other time-saving Github plugins. From a creative standpoint, it's a better beginning-to-end solution. I've been using Affinity alongside Sketch for over a year, and I'd argue Affinity is definitely more than just a good illustration tool. Sketch is still great for layout and UI-focus, but I actually prefer certain features (text styles, symbol usage, etc.) in Affinity more. And yes, it can be less buggy.
I've recently started using Figma and I'm loving it. Mainly it's like Sketch but the version control and being able to have multiple designers and also people being able to comment right there on the design tool are a big plus for my flow. Export system works just like Sketch and developers can open your work from their browsers without installing anything at all! I think there is a future in Figma and I'm planning on sticking by them for the time being.
I tried figma for a week but I hate the mouse lag on big projects, that's the only reason I went back to Sketch. It beats Sketch in layer selection, you can just hold the command key and drag cursor and it selects all the layers, thats so cool, I have to lock layers in Sketch in order for me to select couple layers if they are above another layer...
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now