{"id":8231,"date":"2018-01-31T18:00:39","date_gmt":"2018-01-31T17:00:39","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/?p=8231"},"modified":"2020-01-25T19:30:07","modified_gmt":"2020-01-25T18:30:07","slug":"adobe-xd-ux-workflow","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/adobe-xd-ux-workflow\/","title":{"rendered":"Adobe XD \u2013\u00a0the perfect UX Workflow?"},"content":{"rendered":"

In October 2017 Adobe released the first beta of XD, its \u201call-in-one UX\/UI solution\u201d<\/a>. As a graphic designer, I\u2019ve used Photoshop and Illustrator in my workflow for years and wonder how XD measures up as an UX tool so far.<\/p>\n

Quick historical excursion about the possible impact of the new tool\u2019s release: in print, Adobe has practically eliminated competition starting in the 2000s with InDesign 2.0, setting the standard with Photoshop and Illustrator integration and smooth output of print data.\u00a0 This raises the question if XD can already cover the different processes in the UX cosmos and if it has the potential to push aside tools like Sketch<\/a> as thoroughly as InDesign pushed aside QuarkXPress.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Although XD is still in beta, the application already comes with some features that leave a great first impression and feel good. The clean interface shows only few tools. They have a context menu to the right, similarly to the layout of Sketch, the main competitor. Using the onboarding tutorial, the program quickly becomes accessible. Adobe itself offers some advanced tutorials that explain more features using practical examples. The minimalist interface makes finding the important tools easy. For working with vectors and text, however, the tools lack some of the detail features known from, for example, Photoshop or Illustrator.<\/p>\n

Designing Screens and Prototypes<\/h3>\n

\"\"XD distinguishes design mode and prototype mode. It offers a taskbar with the most important tools and a context menu offering the matching extended options. The taskbar lets users switch globally between layers and elements. Layers and groups can be named and locked. Good foundations for building a clean screen!<\/p>\n

Vectors<\/h5>\n

The design mode layout tools are selection, various vector tools (rectangle, square, ellipsis, line and the path tool), text, artboards, and zoom. The vector tools\u2019 capabilities are pretty limited and work similar to other Adobe applications. One handy feature: the pathfinder is embedded in the context menu. Working with vectors, however, I was missing the direct selection tool, especially when removing single anchors. This would also make repeatedly clicking into nested groups unnecessary.<\/p>\n

Text<\/h5>\n

Some features seem like Adobe was not sure about their proper detail level. For example, creating texts offers the option to use a continuous text field instead of the standard text field \u2013 a feature needed for serious text layout. At the same time basic text formats like \u201cAll caps\u201d are missing. The continuous text field can\u2019t be trimmed to the last line. This becomes a problem in specification because design engineers can\u2019t get the correct distances in these areas.<\/p>\n

Artboards<\/h5>\n

Adding and editing artboards is very simple. An artboard can be directly created with the artboard tool. XD recognizes previous artboards and anchors of existing elements and lets you use them as guidance. There is also a choice of artboard templates. A document can have artboards of different sizes. The scrollable area of an artboard can be quickly set with the artboard tool. The same rules apply to graphic or text items. Similar to the \u201cintelligent rulers\u201d of Illustrator or InDesign, objects and artboards can be positioned and created pixel-precisely.<\/p>\n

Images<\/h5>\n

XD embeds image data into the document, which is probably the better option for prototype display and file transfer. Still, the option to also embed PSD files and have them updated in real-time like in Illustrator or InDesign would have been charming. It would avoid the repeated creation and import of image data.<\/p>\n

Features<\/h3>\n

Repeat Grid<\/h5>\n

Repeating elements in a grid quickly and easily? Yes, this feature is really well implemented. Repeat distances are simple to adjust. Color and label discrepancies are quickly corrected. Filling image boxes is cleverly implemented by dragging and dropping multiple images at once. Just drag the images into the repeat grid, drop them and they\u2019re placed in the boxes.<\/p>\n

\"\"<\/a><\/p>\n

Styles and Symbols<\/h5>\n

Another awesome feature is XD\u2019s use of symbols and formats. Selected objects on the artboard can be defined as symbols or formats with one click. XD also recognizes elements like color and font inside groups and lists them in the template palette. These elements can be simply and globally adjusted and are updated in all relevant locations in the document. Working with color, it is a pity that swatches can\u2019t be named.<\/p>\n

\"\"Live Preview<\/h5>\n

The live device preview is one more nice feature. Using a USB connection and with the XD app installed, the prototype can be judged on a target device in actual size and in use. You can test your design in place. Fonts, colors, proportions and interactions can be assessed realistically. Changes to the screen on the desktop computer are mirrored live in the device. When prototypes are saved in the cloud folder, they get synched and are available without USB connection. A small catch is the display of fonts when the prototype is opened from the cloud in the XD device app \u2013 some fonts may not be displayed for licensing reasons.<\/p>\n

\"\"Dimensions and Comments, Statechart<\/h5>\n

\u201cPublish design specifications\u201d or \u201crelease prototype\u201d both publish a version of the design in the cloud. By opening the version in a browser, you get a statechart view and dimensions. The latest changes to a design can be communicated super-easy, and the design engineer is happy that she does not have to rely on outdated manual specifications. The implementation of font, color and dimension details as context menus is genius.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Adobe has included a search I don\u2019t completely understand into the browser view: it is limited to artboard names. Searchable contents and labels would be an useful addition.<\/p>\n

By commenting on a published prototype, remarks can be exchanged quickly. It would be nice to freely place comments to directly reference areas of the screen like on an Acrobat document.<\/p>\n

So far, XD exports graphics and screens as SVG, PDF, JPG and PNG. A way to export statecharts and dimensions outside the cloud would be nice, too.<\/p>\n

Is XD a Tool for Interaction Designers?<\/h3>\n

Adobe emphasizes how quickly wireframes, wireflows and prototypes can be built with XD. And XD really offers quick access regardless of existing knowledge of other graphic design tools. Presentable results are achieved rapidly. To create wireframes efficiently, many UI kits<\/a> are available for free. Artboard masters would be another good option – especially for larger projects with many screens it would be more efficient to not have to copy the same objects to every artboard.<\/p>\n

\"\"<\/a><\/p>\n

Free choice of UI kits for wireframe creation sounds good at first but I remain a bit skeptic. Visually, a wireframe should be based on a quick sketch. The styled UI kit elements suggest a visual direction to designers and clients that might not be wanted or suited for the project.<\/p>\n

Comments and the statechart view support a smooth workflow. XD is stingy on animation, with only a handful of transitions. Morph effects or control states (mouse over, pressed, etc.) are not possible in XD yet.<\/p>\n

A bit clouded<\/h3>\n

At first it appears logical that Adobe handles all synching and connections in the cloud \u2013 but it prevents any use of the tool for client projects with strict nondisclosure agreements. Many key features like design specifications, statechart view, comments, and live device preview via cloud are not usable without a connection. All these features depend on the cloud. Adobe also limits live device preview via cloud to logged-in users. This seems simply too restrictive to me. It remains to be seen if Adobe stays the course or opens up the services for use without storing the files on Adobe\u2019s cloud server.<\/p>\n

XD feels just right!<\/h3>\n

XD is fun, has good performance and gets awesome results quickly. Layouting is easy. Despite some limited functionality, it has the details that create flow when designing \u2013 placing objects by entering pixel coordinates or pixel-perfect copy and paste in place. However, Illustrator is still necessary for advanced creation and editing of graphics. I would always prefer Illustrator to XD for icon design. It simply offers better detailed vector editing. XD has very good SVG import and clipboard pasting from Illustrator \u2013 except text which usually gets garbled.<\/p>\n

The direct switch to prototype mode makes the connection of visual design and interaction accessible. The actual size preview allows both interaction design and visual design to be assessed well and fast. XD is ideal for showing prototypes. Live device preview makes a design come alive and helps with presentations to customers. By capturing the prototypes, video of the right interactions can be quickly created.<\/p>\n

All things considered XD is a good tool for graphic designers and interaction designers. I am enthusiastic about design specifications as a decisive factor. From a graphic designer\u2019s point of view a few features make the application effective. You simply want to work with it. Being able to not only design static screens but build a prototype without breaking the workflow distinguishes XD from similar applications. For avid users of Adobe CC, combining XD with other applications like Photoshop and Illustrator is nice. XD\u2019s availability in both Windows and macOS is a strong advantage for the workflow and exchange in companies.<\/p>\n

It will be a while until the tool has really established itself. Currently it lacks some features and functions a mature UX tool needs. XD is in beta and sometimes seems like Adobe was at odds with itself how richly some functionalities should be integrated. Still it is clear that the developer will put a lot of effort into steadily improving and updating XD. Adobe\u2019s integration of user requests into development gives those users hope for useful future additions.<\/p>\n","protected":false},"author":55,"featured_media":0,"template":"","tags":[528,4,637,34,139,401,651,652],"class_list":["post-8231","blog","type-blog","status-publish","hentry","tag-adobe-2","tag-interaction-design","tag-ui-design-en-2","tag-user-interface-tools","tag-ux","tag-ux-design-en","tag-ux-wissen-en-2","tag-xd-en-2"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/8231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/55"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/8231\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=8231"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=8231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}