Adobe XD Icon on Screen

Skip Photoshop, It’s Time to Start Using Adobe Xd

We do our fair share of concepting for websites and apps so when Adobe announced their Xd product we jumped in. Traditionally we’ve used Photoshop to create mock-ups and this has worked well for many years and started to work even better with the addition of artboards. Enter Adobe Xd, a tool exclusively for laying out apps and web pages with the ability to create live demos. We’re aware there are some other very effective tools out there like Sketch, but our firm is heavier on executing design vs. web development and we prefer the tighter integration with Photoshop and Illustrator.

The first release of Xd was good but not quite ready for our workflow. To be fair, any time we integrate brand new software into a workflow there is a learning curve trying to figure out how everything should fit in.  With the latest release, we fully integrated Xd and started our projects from scratch in it. I want to emphasize started our project in it. Fully committing to Xd is key to experiencing why it’s better than Photoshop for app/website interface design.  There are some things that need work but overall Xd was faster, more efficient, and our clients are pleased with the ability to tryout a design before they commit to it.

Here’s why it’s time to start using Xd:

  1. It Does Most of What You Really Need (for interface design)
    To be clear, when we say skip Photoshop we’re talking specifically about interface design. Photoshop is still intended to be more powerful and robust for any kind of photo manipulation or design elements that aren’t part of HTML 5. For interface design specifically, Xd has everything you need to create clean but robust web and app interfaces plus it’s based on standards so the effects you create with shapes, transparency, and shadows will all translate to the web well.
  2. Live Demos Look Great (especially on device)
    Demoing through Xd is impressive – especially if you connect your iOS device to your computer.  Apps display full screen as though they’re actually running.
  3. Adobe Xd is Loaded with Presets
    Xd is loaded to the gills with artboards at the exact size (or starting size) for iOS, Android, Microsoft, and the Web. Plus it includes UI kits for Apple iOS, Google Android, and Microsoft Windows.  The UI kits save a ton of time recreating or hunting for examples of these interface elements.

    Screenshot of Adobe XD Features
    Adobe Xd iOS User Interface toolkit and preset pallet.
  4. It’s Faster
    And not just from the standpoint of the actual app runs faster and is more responsive than Photoshop but the process of creating your app or site flow is much more streamlined and sleek. Xd puts a well thought-out set of the tools right at your finger tips.Adding, duplicating, and navigating pages is efficient. Converting graphics and groups to symbols is one keystroke. And adding links to make your demo run takes a few minutes and adjusting them later takes seconds.

What Still Needs Work:

  1. Web Animation and Behavior
    No, we’re not talking about animated GIFs. We’re talking about drop down menus, scrolling banners, etc.  These features are pretty pervasive throughout the web and it would be nice to be able to prototype them without having to fake it with static screens.
  2. Site Maps and Functionality Notes
    One omission right now in Adobe Xd is a logical way to output your sitemap and add notes on how things behave.  Since the app doesn’t have animation yet we found we had the need to add notes to explain clients and developers how we envision something functioning. As it stands now we you have to either take screenshot of the Xd document or export JPGs and create a separate site map file. Thumbs down.

    Blank map image.
    Example of Adobe Xd’s site map feature. Oh wait, that’s right, there isn’t one.
  3. Link Demos Function and Look Terrible
    I can’t emphasize this point enough. It’s a complete contrast to demoing your site on your iOS device or direct out of Xd. Demoing your site via Adobe’s “Share Online” tool is a tragedy. One of the most frustrating things being the potential this has.Right now, when you use the “share online” feature, your entire site or app loads as a graphic inside an Adobe container with an annoying header and footer. It’s ironic that a tool created to “experience design” could provide such a BAD user experience through it’s “Share Online” feature.

    image of share online link
    Seriously? How can I “Experience Design” with all of the extra things Adobe has added to my page.
  4. More Advanced Linking
    Currently you have to drag each separate page or button to it’s desired destination.  Often, we found ourselves doing this multiple times for the same object on several pages. It would be super nice to be able to have a button always take you to the same place or have a little bit of programmed logic like “back” or “home”.

    Image highlighting all the links in an XD concept
    Zoinks! With the ability to add just a bit of logic all this wouldn’t be necessary.

If you’re an Adobe CC subscriber and a you have a few extra minutes to manage the learning curve we’d highly recommend giving XD a try.