Wireframing with Adobe XD

[Edit: You couldn't dream this up - this product has now been discontinued... well, partially - clear as mud as usual by Adobe! It's like Air all over again...]

Learning to love Adobe again…

1. The split up

That sub-title sounds dramatic. 

It’s because I have emotional baggage with Adobe. As an ex (Air developer), I am aggrieved with the way they handled their hand-off of Adobe Air to Harman. Years of silence on Air’s future left developers hanging… many jumped ship. It has contributed to the demise of ActionScript 3 - a beautiful programming language in my view.

I also feel aggrieved at the cost of subscription for their products. As a developer that’s £600 from my profit each year vs. £600 every four years (as it used to be). The profiteers got hold and Adobe lost their connection with their customers. So, in a nutshell, I’m anti-Adobe. And have done my best to not use their products since our split-up!

Sorry, I had to get that off my chest. But wait… the post title says leaping to Adobe XD. OK, strong words above, but I am swooed (a mixture of swayed and wooed) by the Adobe XD experience.

Find out why below…

2. Watching profit disappear

My existing workflow included Adobe Illustrator to build wireframes. I have done a lot of illustration in it and it’s a tool that I am very comfortable with.

But having now, as a dev, used it in ernest with clients. I can see it has many drawbacks. And on a recent project, saw the project’s profit sucked away during a period of heavy wire-framing.

The main drain on profit was:

• Sharing and editing assets across the different screens, e.g. home, landing, blog post etc.
• Managing versions
• Sharing the wireframes
• Explaining how navigation would flow
• Gleaning feedback in an organised way
• Re-working the wireframes post-feedback
• Migrating from low-fidelity to high-fidelity mock-ups

When I analysed the profit from the project after launch. I double underlined the need to find a better solution.

But not Adobe thanks… I still felt bitter…

3. The candidates

So I began my voyage in the Wireframe Seas… it was quite pleasant.  I looked at several browser-based solutions. Thinking that they would provide easy ways to share outputs and glean feedback. Which they do.

I experimented with the following solutions. This isn’t a review of them by the way.

• Marvel (cloud)
• Canva (cloud)
• Figma (cloud)
• Sticking with Illustrator on an old license
• Adobe XD

Yes, note that Adobe XD was last to review.

I found the cloud based products lacked the responsiveness that the software provided. As someone who has done design work and illustration. I missed the feel of a product that gave an ‘exact’ response to mouse clicks and drags. This was, I expect, a browser issue. The software provided greater control.

I also wanted to have a comprehensive selection of pre-built assets without having to pay. At least, so I could experiment. E.g. navs, heros, carousels, calls to action, cards etc.

4. The winner - Adobe XD - the benefits

Adobe XD came out on top for me. Even with my Adobe emotional baggage, I couldn’t ignore the boost to efficiency that it will give.

The benefits, from my perspective are:

• Drawing tools feel precise
• It’s quick… because it’s installed on my hard-drive
• I can work offline, e.g. on the train
• Large range of free pre-built assets. I can download, preview, shortlist and then drag and drop
• Sharing assets across art boards with ease
• Duplicating and modifying items with ease, for example, a list of cards
• Adding links and previewing so that it behaves like a website
• Sharing the wireframes
• Customer feedback - commenting with ease
• All options free for one project
• The ability to switch to high fidelity if/when needed

The subscription fee, in comparison, is not too bad. It falls outside of the CS options that have such a high monthly subscription price.

5. The future workflow

I can see a new way of working. For my next bespoke web project, I’ll be using Adobe XD. I will offer a morning or day-long session of wire framing (depending on project size). Where I can demo different layouts and then build the wireframes right in front of the customer. We could also offer this via a Google Hangout for customers in other parts of the UK.

The session will have the goal of creating and finalising the wireframes in one go.

I can also see this going hand-in-hand with Webflow for projects that need a quick deployment. But more about that in another post.