Tuesday, December 20, 2016

Adobe XD or Sketch: Which Will Result in the Best UX?

There has been a long history of comparing Sketch to Photoshop (and sometimes Illustrator) for a while now.

Why? Because, for a long time, Photoshop was Sketch's only direct competitor – despite the fact that Photoshop is primarily used to edit photos. Adobe sought to improve Photoshop for user interface designers ⏤ they added Artboards, a better export workflow, Smart Guides and so on.

Of course, the main issue with those new features was that they made Photoshop even more bloated than it already was. It was like tacking on an ice skating rink to an ocean liner.

With Sketch continually gaining momentum, and the fact that other new design apps started to pop up (Affinity Designer, Figma, etc), Adobe needed to build a fast, ultra-clean app dedicated to user interface designers. Photoshop also needed to be about photosagain.

Enter Adobe Experience Design CC, also known as Adobe XD – their fresh attempt at a pure UI Design tool.

Let' s take a look at which app is more suitable for you.

Platform Wars

Sketch is only available for MacOS users– so let's establish that right now. Designers have scrutinized this decision, but it is what it is. Adobe XD is available for Windows and MacOS.

Adobe’s Drastic Interface Overhaul

No doubt the first thing you’ll notice about Adobe XD is the beautifully minimal interface (when compared to Photoshop). Since Adobe XD focuses on user interface design, you’ll find image-editing tools virtually non-existent, so the apps' interface is much less overwhelming in comparison to other Adobe apps. This isn't the place to retouch your photos or remove backgrounds.

For those Adobe fans that didn't want to switch to Sketch (or couldn't because they use Windows), but otherwise acknowledged that Photoshop wasn't the right tool for UI design, then I promise you, this is the tool you' ve been waiting for.

But what if you' re MacOS user who has the choice of both tools? Well, in that respect, you' ll find that Sketch and XD are very neck-and-neck – their UI layouts are almost identical.

Similarities in the UI of Sketch and Adobe XD

Invisible UI’s — Smart Guides and Keyboard Shortcuts

What I love most about Sketch also exists in Adobe XD — invisible interfaces. By invisible I mean there are ways to accomplish certain tasks without having to interact (i.e. click) with an interface, either because the actions are automatic or because there’s an ultra-minimal keyboard shortcut for it.

Need 50% opacity on a layer? Just hit " 5" on the keyboard. Need to align a layer with a 20px margin? No worries, the Smart Guides that automatically appear will let you know how close you are. Smart Guides can be activated with the option key (⌥) too!

Smart Guides, a comparison

Reusable Components (Symbols)

Both applications sound equally impressive so far, but the realbattle begins when it comes to the bigger features.

Let' s take a look at Symbols first.

Symbols are reusable design elements/components. Essentially, you maintain a " master" symbol and all instances of that symbol in the main document (in your design) mirror the master symbol.

Inserting symbols is very, very easy!

[caption id="attachment_145891" align="aligncenter" width="1000"]Symbols in Sketch Symbols in Sketch[/caption]

Symbols in Adobe XD

But what happens when you need one instance of a component to look different from another instance? What if one navigation instance needs to show a hover state in one of the screens?

No worries, Sketch allows you to nestsymbols inside other symbols. You would basically design the different states for your icons as a separate symbol and choose which state to use in the bigger, larger symbol (in this case, the menu navigation).

Adobe hasn't implemented nested symbols in XD yet (at the time of writing), but it' s highly likely that they will in the future. In this respect, Sketch is winning the race because they' ve been around longer, however XD is advancing rapidly.

By the way, the stunning UI kit used in these screenshots is called Dishy (created by Serge Vasil) and you can find it here.

Repeatable Components (Repeat Grids)

Repeat Grids is an iconic feature in Adobe XD ⏤ something that no other UI design application currently offers. It allows you to repeat components horizontally and vertically while inserting unique content in each tile. You can even multi-drag assets (image and text files) from your desktop to have that content inserted and distributed automatically.

[caption id="attachment_145893" align="aligncenter" width="1000"]Repeat Grids Repeat Grids[/caption]

So far, Sketch hasn't implemented a feature like this, although because Sketch allows the dev community to build extensions you can install the Craft Plugin which will allow you to accomplish the same thing.

Personally, I love the fact that this feature in native in Adobe XD!

Continue reading %Adobe XD or Sketch: Which Will Result in the Best UX?%


by Daniel Schwarz via SitePoint

No comments:

Post a Comment