Notes on Adobe XD: an intuitive and highly efficient UI design app
As of writing Adobe XD is a free application provided with Creative Cloud subscriptions. For years designers had relied on PhotoShop in order to provide realistic representations of a web page, in situ. We always craved for a dedicated UI design app similar to traditional print layout software QuarkXpress or InDesign. Fireworks came close though is now discontinued and was still primarily geared towards image processing.
I probably use Adobe Illustrator more often to create graphics as this provides the flexibility of smooth vector resolution with SVG export capabilities – the graphics in my design mock-ups are then exported for use on the finished production site. Now I can also copy/paste these graphics straight into my Adobe XD layouts with ease – and even manipulate the colour.
XD is beautifully designed software and makes lighter work of simple tasks such as reusable page elements and symbols. I can focus almost entirely on creativity and design choices rather than spending a lot time navigating complicated layers and folders as is often the case with PhotoShop mock-ups. Adobe have of course over the years tried to incorporate more UI design features into PhotoShop – the clue to it’s power of image comping has always been in the “Photo” part of it’s name.
There are of course many third party cloud based apps for wire framing and UI presentations including Axure (to name one of many). Adobe XD also has similar cloud based sharing capabilities, useful for previewing your designs for clients in a browser across an internet connection. I can build designs for any device or screen size and export everything to PDF or JPEG for client revision and approval.
So there are many other wire framing or UI design options available and they are all excellent choices. But as a lifelong graphics professional I am kind of embedded into the Adobe ecosystem. Which means Adobe XD is a natural migration for me to make as it integrates perfectly with Illustrator (graphics) and PhotoShop (images).