Sketch vs. Adobe XD: A Designer’s Take
As consultants, we’re always trying to shift with emerging trends and develop new and improved processes to complete projects with and for our clients. Finding and using the right tools to execute successful projects is imperative when trying to optimize team work flows. This includes consistently evaluating the tools your team currently uses, and examining what other options may be out there.
Here at LYONSCG, our experience design 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 a program called Sketch, there has been a shift in the industry, and designers now have new expectations of how eCommerce 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.
Our team has incorporated Sketch into our workflow and have been researching Abode’s new offering. Here’s how we think each of the programs stack up.
Sketch
As the saying goes, necessity is the mother of invention. Sketch 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, one of the main complaints has been how bloated the program has become with its various toolsets—not only photography retouching and print, but also 3D, video, etc.
Sketch has filled a void as an application built solely for the purpose of screen 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.
Sketch has changed the paradigm of interface design by incorporating the following features:
- ● 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.
However, Sketch has some drawbacks too:
- ● Sketch is Mac only and currently not compatible with Windows
- ● 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
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. With this shift, the migration from Photoshop to Sketch has done nothing but accelerate in the last 2-3 years. A much-cited 2015 survey of designers revealed that Photoshop is quickly losing its position as the dominant tool for web designers.
Enter Adobe Experience Designer (XD). This 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. Beyond its similarly austere interface and toolset, how does Adobe’s new offering hold up to Sketch?
In our 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. The positive side of this is that picking up XD does feels very fast and intuitive.
Adobe has added some nice touches to XD, namely it’s “Repeat Grid” feature. While this concept exists in Sketch (natively and 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 when creating comps.
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 work spaces to quickly iterate on their designs.
Conclusion
So, is XD enough to compete with Sketch? It’s probably too early to tell. In its current iteration, Adobe XD pales in comparison to Sketch. It’s missing some of the core features that have made Sketch a leader in the design space. XD also lacks in the extensibility department. Sketch has a huge head start with its enthusiastic community of developers that continue to extend its functionality with innovative plugins. While XD does have an edge with its prototyping features, there are soon to be released Sketch plugins that promise to erase that advantage completely.
But while Sketch continues to significantly improve and evolve at a pace that keeps it firmly ahead of Adobe XD, there are two key areas Adobe can exploit:
- ● Windows. Like Sketch, Adobe XD is currently available on Macs only. Unlike Sketch however, there are clear plans to launch XD on the Windows platform in the coming months. This could help Adobe gain a major foothold in the interface design space.
- ● Photoshop. It’s very easy to get started with Sketch and quickly build up a library of design files and assets. However, there are a lot companies with vast amounts of legacy PSD files, some of whom may be reluctant to leave those behind for making the switch to Sketch. Currently, XD cannot open Photoshop files. If Adobe can figure out a way for users to transition their old files, it may help sway the fence sitters enough to stay in the Adobe camp.
At LYONSCG, we will continue to analyze both programs in order to capitalize on the best features of each, and deliver the best possible work for our projects. In the end, it’s nice to see a little competition in the space, which can only result in better products for designers as Sketch and XD duke it out to win over users.
Co-authored by LYONSCG’s Justin DeLara, Associate Creative Director, and Miranda Dillon, Graphic Designer.
