For as long as I’ve been a professional web designer, technology continues to change. But there is one thing that seemingly went unchanged: the process of designing custom websites. It went like this:

Talk to the client, gather your research, sketch some ideas, and spend a lot of time creating “pixel perfect” layouts in Adobe Photoshop (and sometimes Illustrator). 

These layouts aren’t dynamic, which means they require a lot of explanation as to how they will function. They were very unwieldy to use, and since the source files were stored on your own hard drives, you risked those files being corrupted or destroyed, losing hours of work. It was a pain point for both the client and the designer.

Luckily, over the last few years, the dominance of static design programs like Photoshop and Illustrator have started to be chipped away by prototyping programs. Software like Axure, Sketch, Figma, and InVision have all become widely used in the design industry. These programs are loved by many, but having nearly 20 years of Adobe, I found many of these programs to be poorly designed or difficult to use and learn. Luckily, in 2016 Adobe released an application named Adobe XD.

We explored the app here at Lform, since the benefits of prototyping programs weren’t lost on us. Luckily for us, XD has become a staple of our design process. But with all the options out there, what makes Adobe XD fit so well into our workflow?

There’s Something to Say About Being a Specialist

If there is one descriptor I can give to Adobe, it’s monolithic. Adobe is the big kid on the block, and they make very powerful programs. The massive size of Photoshop, Illustrator, and InDesign (the big 3) is something that can be very daunting to newer designers. Even with two decades of using Adobe programs, I’m still finding features I’ve never seen before.

However, Adobe XD is anything but big. Unlike Photoshop, XD specializes in creating prototypes for websites, mobile apps, and gaming interfaces. This allows users to easily learn and master XD. The program is so refined that I can spend about half a day teaching the essentials to even a non-designer and allow them to be confident in what they’re doing without being overwhelmed by feature creep. 

Show, Don’t Tell: Prototypes Feel Much More Natural

For years, the hardest part about selling your ideas to a client is to get them to envision what a static web mockup is meant to do: How a site search functions, how an animation will work, and what a button rollover looks like.  All the elements that make a website interactive can sometimes be difficult to illustrate or explain. Using third party examples never really resonates with clients, and creating animations to demonstrate can sometimes be too time consuming to make their use worth it.

In prototyping software like Adobe XD, if you rollover a button, it’s state can change. Click that button, and you’re taken to a new layout. Simple animations, showing how dropdown navigation works, and allowing the client to explore a layout has been an absolute game changer. Gone are the days when we would finish a website and, puzzled, the client says, “Oh, I wasn’t aware the website worked like that?”

Goodbye, “Website_FinalFinal_V2_Actuall-Final.png”

No one likes to manage design files. In big web design projects, it’s not uncommon to be juggling dozens or even hundreds of files. Not only is this annoying for a company like Lform, but it’s also cumbersome for our clients since they’d have to reference all the files to understand where the project is.

Luckily, a UI design program like Adobe XD eliminates this problem. When you’re done with a design, wireframe, or prototype, you can simply generate a link that allows the client access to the project. If that wasn’t good enough, XD has a streamlined comment system that allows the client to provide feedback directly into the prototype. While we have had a few clients who have asked for PDFs or separate image files in projects, the feedback we’ve gotten since website prototyping with Adobe XD has been massively popular.

An added benefit of this system is that XD allows our team to work on the same document in various locations and at different parts of the project. Design can make updates and work with clients on layout and content while our web developers can begin developing the final website much earlier in the process. This has made us a much more collaborative and nimble team.

Getting Animated About Design

On October 15, 2019, the Adobe XD team made one of their most important updates since XD originally launched: Auto-Animate.

Auto-Animate allows a designer to create and deploy simple animations to illustrate functionality. These animations can range from a simple loading animation to very complicated and impressive application functions. To say that the Adobe XD design community has done a lot with this feature is kind of an understatement.

While the tools in XD are ever-evolving and pretty rudimentary at the moment, it’s still very cool to be able to show simple animation functionality in our web design & web development projects.

Being Part of an Engaged Community

Adobe, itself, has a large community, considering their programs are the de facto standard in software for designers. They host one of the larger conferences on design & development in the world, have done a lot of work turning the site Behance from a portfolio site into a social network, and have quite the number of social media channels that are responsive and engage with their communities.

XD is really no different in this regard; however, there is something about the XD community that feels more exciting than other segments of their community. Their twitter feed is filled with interesting information, and the ability to submit bugs directly to XD’s team has been quite useful. Also, the Adobe XD blog has had some pretty interesting articles as of late.

On top of this, the ability for companies and individuals to create and share plugins for XD has been an excellent way of extending the current functionality of XD. Plugins that can pull in real or dummy data, in particular, allow us to play with realistic content instead of the classic “Lorem Ipsum” filler text.

Conclusion

We’re always looking for ways to improve, and our design and development team is constantly evaluating new technology, software, and methods. It’s no small statement to say that prototyping with Adobe XD has added a ton of value to us at Lform. While other tools like Sketch and Figma have very dedicated users and do much the same thing as XD, we highly recommend giving XD a solid shot. Whether you’re making mobile apps, creating complicated e-commerce websites, or working on improving a company’s internal design systems, Adobe XD is a powerful tool in your design toolbox.