My explorations in the realm of web prototyping tools lead me to a new product called Adobe XD. Still in its beta stages, Adobe XD is built from two workspaces — a Design space, where one can build comps on art boards (similar to a very lightweight Illustrator) and a Prototyping space, which allows you to build prototypes of your app or site by connecting your artboards with links and animated transitions. Now, already this appealed to me — in Photoshop or Illustrator, I had only been able to create static screens, and not really had a way to show how one could move through a site. By being able to quickly build an interactive prototype, I could much more clearly demonstrate my design concepts.
My favorite feature in Adobe XD is the Repeat Grid tool. To build a repeating grid system on my artboard, all I have to do is create one row or column of images/text, highlight the group, and click the Repeat Grid tool. Once the grid is created, all I have to do is pull down on the anchors to create more rows or columns of my grid. I can easily adjust the spacing between my grid items by clicking and dragging highlighted spaces between the items. Also, I can easily add images or text just by clicking and dragging them into the grid. This tool greatly speeds up my workflow, and is a unique feature that I can’t replicate in Photoshop or Illustrator.
Another useful set of tools included in Adobe XD are the several export and share options available. I have the options of:
• saving the art board as JPGs or PDFs
• recording an animation of a click-through of the prototype
• saving and uploading an interactive version of the prototype on the Adobe Creative Cloud, which can then be shared via a link
By being able to save and send animated or interactive versions of my prototypes, I can very easily share my concepts with my fellow team members or with a client.
One feature I feel that Adobe XD is lacking is the ability to create layer transitions. Adobe XD only allows you to build transitions between screens, so if I wanted to show, for example, a dropdown menu, I would have to build two separate screens. Not only is this clunky, it also doesn’t allow me to show what the dropdown menu looks like in motion. Also, I would prefer the option to show other on-screen animations or transitions, such as buttons moving or changing colors when you click them. Small details like these are key to giving websites and mobile apps their unique personalities, so I would like to be able to integrate them into my prototypes. If Adobe’s development team comes across this blog post, I hope they will consider adding these features to their final product!
Overall, I found Adobe XD to be a very easy-to-use product with several useful features, and I will definitely consider using it as part of my design process for future web design products. Perhaps leaving the dark lair was a worthwhile and educational experience after all!
