Our team is always looking for the best design software for our website projects. Adobe XD has risen to the challenge with extensive capabilities and tools our team loves.
Over the years, our team has explored numerous options in our quest to find the best design program to use for our web projects. Between Photoshop, IIlustrator, InDesign, Axure, Sketch, Invision — you name it, we've probably tried it! As technology has evolved, so have design programs, and we're always looking for the best tools to keep our design process efficient and seamless. Enter Adobe XD.
When Adobe XD was still in beta testing, we explored what it had to offer, but at the time didn't feel like it was strong enough to make the big switch yet. In a past post comparing Sketch vs. InDesign, our team remained in a balancing act between Sketch, InDesign and Invision for designing and sharing prototypes. Well, time has passed and Adobe XD has evolved into the type of program we had hoped it would!
It's quickly become our one stop shop for designing and prototyping our web solutions. When it came to choosing the right UX tool for our projects, we found that Adobe XD checks a lot of our boxes. Here's a quick overview of what won us over:
- The prototype and share features are convenient and easy to use, allowing us to keep everything in one living document. The prototyping capabilities provide everything we need to demonstrate functionality and interactive elements to clients to ensure everyone is on the same page. The sharing capabilities include easy commenting for feedback and optimized presentations for client review. It also provides the ability to record interaction previews, real-time views of prototypes on mobile devices, prep for user testing and so much more!
- Hand-off to the development team has completely evolved into a fast and painless process. The time we used to spend meticulously prepping layout guides, style guides and web-ready assets for the dev team has been cut in half! Adobe XD packages all of your web-ready assets (automatically exporting them at multiple sizes for retina display) and pulls all of your character styles, color palettes, etc. into one seamless presentation that you can share with your dev team. It has drastically cut back prep time for our team!
- There are many different plugins available to help customize your tool kit if there's functionality you're looking to add in. Some of our favorites we've been exploring:
- Anima provides the ability to add even more functionality to prototypes for enhanced client demonstrations like more screen breakpoints; external links; animations on scroll; embedded videos and gifs; real text input fields and forms; and so much more. You can also preview prototypes in the browser and publish to a custom domain or export it as HTML.
- Icons 4 Design offers 5,000+ free vector icons and symbols (this includes dozens of popular icon collections like Font Awesome that we recently used in the NKU Steely Library website redesign.)
- Stark – Provides web accessibility features such as a color contrast checker, colorblind simulator and more.
- Vizzy Charts – Generates data visualizations, creating fully editable charts and graphs.
- You can add unique states to each component, making it really convenient to manage hover states, active states, focus states, etc. all in one place.
- You can import creative cloud libraries to share styles and assets with the whole design team which helps build consistency and brand accuracy.
All of these useful features have made for a fairly painless transition to using XD in our day to day work flow. There are still a few nit-picky things that we'd love to see incorporated in the future. For example, the text formatting options still aren't quite as sophisticated as some other Adobe programs, like InDesign. Additionally, there isn't a global spell check option. Spell check is only visible within individual selected text boxes, which can be cumbersome on large projects, so we're just in the habit of checking as we go. We also tend to miss the ability to show rulers and pull custom guides onto artboards, but Adobe XD does provide a bootstrap grid with auto guides and specifications as you work, so ultimately it gets the job done.
At the end of the day, the pros far out-weight the cons when comparing XD to the plethora of programs we've used in the past. It provides so many helpful features that have really enhanced our work process so far. We will happily continue using XD as our go-to program on web projects!
We could use Adobe XD when designing your new website – let's talk about what your organization needs in a site!