XD – Simplified prototyping with Adobe’s DNA
XD is Adobe’s tool used by UX/UI designers to create new web and mobile apps. After lengthy testing of the Beta version, this tool (which used to be the Adobe Experience Design Tool) recently graduated to version 1.0. Michel Karam shares his first impressions of XD.
Towards the end of the 1990s, as the Internet was emerging, designers who created websites began to use Adobe Photoshop to develop interfaces that could be reproduced with HTML code (and later cascading style sheets).
Photoshop, which was originally a program used for image retouching and photo effects, began to evolve into a web page layout application. In 2015, the addition of the “Artboards” feature, among others, marked an effort to provide Photoshop with design tools for mobile interfaces. However, all these capabilities came with some drawbacks: the application became more cumbersome and too resource-hungry to really be smooth and easy to use for interface design.
Finally, in Fall 2017, Adobe officially released XD (Experience Design), its user interface prototyping software. This tool, which has been in Beta mode for quite some time and is part of the “Creative Cloud” (CC) suite, enters a competitive marketplace, going head-to head with competitors that already have a firm foothold in the user interface design realm.
InVision, Proto.io and Sketch (available on Macs only), to name a few, are all familiar to professionals. Add to these Balsamiq, which even with its style of hand-drawn sketches, is in the league of competing programs that XD will be taking on
Here at Spiria, I’ve used XD during its Beta phase for in-house projects as well as client projects. From where I sit, this new addition to the Adobe line-up is of such a calibre that sooner or later, it will keep a large number of subscribers to the CC suite away from the competition. Here’s why:
If you’ve paid for a subscription to Adobe’s Creative Cloud software suite, you’ll note that XD is included in the ready-to-install-and-use software programs, for no additional cost. This is obviously much better than having to buy external applications for user interface prototyping, especially when one keeps in mind that the vast majority of designers already use the CC suite.
What’s more, XD outshines the competition because it shares the Adobe family’s DNA. Its interface, the way it works and even the shortcuts will be very familiar to those who’ve used Photoshop or Illustrator, the oldest and best-known members of the extended Adobe family. Since XD is an integral part of the Adobe ecosystem, it shares visual elements with its relatives in the CC suite in a way that’s natural and intuitive. This could definitely lead to shorter production times compared to migrating projects from an Adobe program to an external prototyping tool, or vice versa.
With XD, those who are familiar with Photoshop will also feel the difference in its performance. This application is surprisingly light, and also minimalist, focusing on the essentials. It enables you to create Wireframe interfaces as well as graphically-finalized interfaces. Whether you’re using its basic design features or importing components that simulate Android, Apple or Windows native interfaces, this tool is remarkable due to its simplicity and ease of use.
You design your interfaces in one mode (Design) and connect them in another mode (Prototype). The latter mode will be familiar to those who’ve used other prototyping programs; it consists of presenting and simulating navigation between screens in order to evaluate ease of use. This simulation can then be shared, via an external link, with your team or with the client.
For now, you aren’t able to work collaboratively on shared mock-ups with XD, like adding comments and suggestions using notes or visual cues. However, on the webpage of published prototypes, a message and comments system does allow for discussion on the details of each screen. For each message that’s added, Adobe Creative Cloud will push notifications that will also be sent by email.
Obviously, XD allows interfaces in several different image formats to be exported. It also offers the possibility to export components for the web, Android, iOS and Windows. These components can easily be created with the “Assets” feature.
In its current form, XD doesn’t automatically generate HTML/CSS code. However, in the sharing menu, another feature (again, in Beta mode) allows you to publish and share interfaces with their measurements and specifications. This mode helps programmers and/or integrators to preview the mock-ups with their essential measurements, something that will come in handy for them during development. You can also directly preview your screens in a window that simulates the size and format of the designated platform, as well as launch them on the actual physical platform that you’ll be using (like a phone or tablet) using the Creative Cloud service.
Without a doubt, Adobe is vying to capture a sizeable chunk of the market for prototyping tools. It’s also not the first time that this company has used this type of a strategy successfully; in the professional printing layout milieu, Adobe InDesign was able to capture quite a large part of the market that behemoth QuarkXpress had held since the end of the 1980s. One might also guess that the company seeks to unburden Photoshop, with its heavy and complicated machinery, from the mission that was thrust upon its shoulders in previous years, namely the design and layout of interactive interfaces. By launching XD, I think that Adobe hopes to also avoid interfaces that were created in Photoshop from being exported and put in a navigation context with tools from its competitors.
To sum up, while you may scratch your head at the name Adobe chose for its prototyping tool, I think they did very well with XD. This light, intuitive and efficient software will likely grow to encompass additional features. Even with its current simplicity and minimalism, XD is already beefy enough to make a name for itself as a useful tool for UI design, especially for those already using the CC suite.
Adobe launched XD to keep many designers who subscribe to the CC suite far away from the jaws of its competitors. XD is an attractive offer that will likely mean the end of many subscriptions to other prototyping tools.
To learn more about XD and stay up to date on its latest updates and developments, visit:
