Scott Woodcock
UX Designer
View posts

  • User-Centred Design

12th Apr 2017

6 min

logos of sketch vs adobe xd

As a designer, I am always trying to evolve with new trends and develop ways to improve the internal processes which allow us to complete projects for our clients. Finding and using the right tools to successfully complete projects is imperative when trying to optimise team workflows.

Here at PRWD, our team primarily works on the Adobe platform. Adobe’s Photoshop has historically been the standard tool in the industry when creating websites. However, since the 2010 arrival of Sketch, there has been a shift in the industry, and designers now have new expectations of how sites can be built, shared and presented. As a response to these expectations, Adobe also released their own application in 2016 called XD to improve design workflows.

Over the past two months, I have been evaluating two competitive design tools for our team to potentially use. With PRWD being a digitally focused agency, having the right tools is essential for continuous improvement. Here’s how I think each of the programs stacks up.

Sketch

Sketch was an invention built around necessity, it was born out of the need to replace the clutter associated with Photoshop and other Adobe products.

While Photoshop is adequate for designing websites, it was never originally built to do so. For years, the Adobe community has complained about how cluttered the programme had become with its photography retouching, 3D and video extensions.

Sketch has filled a void, as an application built solely for digital design (web and mobile). It’s lightweight and fast, with a simple but powerful toolset tailored to address design and wireframing needs (without the extraneous functionality found in Photoshop).

The Pros and Cons of Sketch

Pros of Sketch:

  • Vector-based program. This equates to smaller, easier to share files. Users can simultaneously work on multiple viewports, allowing for easily scalable designs, the quick production of highly complex layouts, and a reduction in mistakes or reworks (cutting down on hours spent on a project!)
  • Shared style libraries and reusable symbols. These make it easy to build and maintain a visual design system across a large site, ensuring consistency, reducing mistakes, and making it faster to iterate.
  • Tools that create highly accurate, pixel-perfect designs and also automate mundane design tasks. These tools mean that work can be right the first time, and there’s less back-and-forth with developers. Designers can be more efficient and focus on being creative.
  • More accurate renderings. Elements are rendered in a way that is more reflective of how it will look in an actual web browser.
  • Highly extensible platform. Sketch works with various third-party plugins that add major functionality.

Cons of Sketch:

  • Sketch is Mac only and currently not compatible with Windows (great for me but maybe not for everyone else).
  • Sketch has no real image editing tools so it does not replace Photoshop (or some other photo editor) for compositing or retouching photos (though many would argue this is a strength rather than a weakness).
  • No built-in prototyping functionality.
  • Third party plugins require ongoing support from their developers as new versions of Sketch are released.

Adobe Experience Design (XD)

The introduction of Sketch has caused a massive change in the industry. It has allowed designers to completely rethink their workflows and the design process in general.
Adobe Experience Designer (XD) is Adobe’s not-so-subtle way of trying to recreate the success of Sketch on its own platform. From its vector-based tools to the interface and basic functionality, XD will feel familiar to a Sketch user.

In my early assessment of the software, it almost seems that in the attempt to rectify the complexities of Photoshop’s interface, XD is almost too simple. To be fair, XD just recently transitioned from its “Preview” version to “Beta”. However, you can’t help but feel like something is missing.

Pros and Cons of Adobe XD

Pros of Adobe XD platform:

  • Vector-based program. Again, this equates to smaller, easier to share files. Like Sketch, users can simultaneously work on multiple viewports and produce highly complex layouts quickly. The positive side of this is that picking up XD does feel very fast and intuitive.
  • Repeat Grid feature. While this concept exists in Sketch (via various plugins), XD’s version makes it very easy to replicate similar content (like product tiles or image galleries) saving a lot of time (this is what we like!)
  • Built in prototyping. The real differentiator between XD and its rival is the integrated “Prototyping Workspace”. This enables users to create a basic prototype by linking screens together with interactions and animations. Since this is built directly into XD, users can seamlessly toggle between the workspaces to quickly iterate on their designs.

Cons of Adobe XD:

  • Doesn’t run on Windows 7, which 45% of computers use.
  • Like Sketch, XD has no real image editing tools so a programme like Photoshop is still needed.

Conclusion

Although XD is missing some of the core features over Sketch, I can see this becoming a very successful programme (once out of its ‘Beta’ phase). Having used the tool over the past two months I’ve had no issues with speed or usability. The programme feels a lot like other programmes in the Adobe suite. Shortcuts remain in the programme which is a feature lacking in Sketch, where I found selecting elements quickly an arduous task which quickly got me frustrated.

The kingpin that sways this decision for me is the prototyping element. To prototype with Sketch you need a 3rd party tool like InVison and although this is now compatible with the programme, there is still an additional cost involved. With XD having the prototyping element embedded within the software, this makes for simple and quick prototyping allowing our design team to work agile (and with most people having already purchased the Adobe suite it is no additional cost for XD).

XD needs time to establish and once fully developed it will create its own community like Sketch, with this along comes more developments and enhanced usability changes month on month.

However, there is something that both programmes need to address. Both XD and Sketch need to make the software compatible with Windows. This doesn’t affect me directly but I know a lot of designers who choose Windows (over Mac) and are unable to take advantage of the excellent product. Unlike Sketch however, there are clear plans to launch XD on the Windows platform in the coming months and this could help Adobe gain a major foothold in the interface design space.

  • Philip Harper

    XD has been available for Windows 10 since December 2016.

    • prwd_site

      Thanks for reading Philip! We’ll make an update to the article now.