Back

Making the Switch: Photoshop to XD, 18 Months In

19th Mar 2019

In this post our Senior Designer, Mark, talks about switching our UI Design tool from Photoshop to Experience Design (XD). Read on to learn more about the two programs, and the benefits of the switch.

Adobe Photoshop was always my go-to tool for UI Design, as it was generally for designers far and wide. It made sense. Back in the day, designers didn’t have to worry about ultra HD retina screens, or responsive design. Photoshop was the perfect fit; it was familiar, pixel-based and had an arsenal of tools just waiting to be utilised. It allowed me to appease my own borderline OCD; I could keep the multiple layers of specific sections together in nice little groups, like “nav-bar”, “hero” and “footer”. Everything was going swimmingly.

Then, things started to change. Responsive websites, mobile-first design and retina screens ushered in the dawn of a new era; the UI Design app landscape was about to change. Trendy little upstarts like Sketch, Affinity Designer and, later, Figma were offering UI design-focused tools, proclaiming to make the task of designing a website or app a more straightforward and uncluttered process. I looked on, observing from the safety of my Photoshop artboard as fellow designers jumped ship, singing the praises of Sketch and co as they went. Photoshop gritted its teeth and dug in, still - even to this day - it has a gaggle of ever-loyal users that have stuck by it. Adobe saw the shift happening, and began working on a new app of their own; Experience Design (or XD for short).

Around the time XD was announced, I had been threatening for a while to make the jump to Sketch. I’d heard the rumours about Adobe’s rival to the new kids on the block, so I decided to hang on for it’s release. I finally made the jump around 18 months ago, and within a few hours I was sold. The interface was clean and uncluttered. It was so much easier to create and position design elements and everything seemed so much quicker.

Since then, we’ve adopted XD across the whole team here at Calm, designing everything from wireframes right through to final designs for software, websites and apps. Below I’ve listed a few of the benefits of the switch from Photoshop to XD:

1. Efficiency

Using Photoshop for UI Design was always a hack; it did the trick in the absence of a viable alternative, but it started out life as a photo editing program and was adapted to suit various uses over the years. Because XD is built specifically for UI Design, the interface is much more intuitive, enabling us to work through designs and prototypes with relative ease. This allows us to spend less time fighting against the software and more time making considered design decisions, which in turn offers more value for money to our clients.

2. Happy Developers

XD has made exporting design assets a walk in the park, and our developers have made the switch from using Photoshop to XD fairly painlessly. It’s now much easier for them to understand the fundamentals of the designs they’re tasked with turning into working products. The Developer Specs feature - allowing developers to inspect the finer details of a design - has vastly improved designer-developer communication.

3. Prototypes

In the past, clients would be presented with static visuals of the individual pages / screens for their project. Now, with XD giving us the ability to turn our designs into clickable, interactive prototypes, we can communicate the flow of a site or app with our clients much more effectively, giving them a much better understanding of the user experience.

4. Device Preview

With worldwide internet usage via a mobile device now being so prevalent, it’s more important than ever for a website or app to provide a smooth, well-considered mobile experience for its users. With the Device Preview feature in XD, designers can preview their designs in-situ on mobile devices via a USB connection. The ability to view and interact with our designs in this way is a huge benefit, helping us create polished, compelling and thoughtful experiences.

5. Regular Updates

Adobe regularly releases updates for XD, adding new features and improvements to the software based on feedback from the designers that use it. Recent additions such as Auto-animate and the ability to prototype overlays have further enhanced the program which allows us as designers to continually push the envelope and offer better, more refined experiences for our clients and their businesses.

Overall, the experience of making the switch to XD has been a hugely positive one. Admittedly, Adobe’s approach to launching a basic product with the mindset of continuously developing and adding to it has meant that some fundamental features were missing. However, they are updating and adding new features with impressive regularity. Since making the move to using XD exclusively for our UI Design we’ve never looked back. The learning curve was a shallow one, allowing us to hit the ground running and with no disruption to client work. It has made us more efficient, allowed us to push boundaries further and helped us deliver improved products to our clients.