Designing for the web in Photoshop is a very tedious process. Unless you’re extremely organized, it can become a downright nightmare for your development team. About six months ago, I broke it off with Photoshop to check out Adobe’s new all-in-one UX tool, and I must say—I’m in love.
Zero Learning Curve
The thought of learning a new program can be daunting. As any former design student knows, the most difficult part of school was not learning the concepts, but mastering the Adobe Suite. Rest assured that Adobe was not reinventing the wheel here; the functionality feels very familiar to their other programs.
Gone are the days of hundred-layer .psd files for each individual website page.Xd takes a more holistic approach by allowing designers to view the site as a whole with the use of individual artboards. Not only does this help maintain consistency throughout the site, but it also helps perfectionists, like myself, keep an eye on the “big picture” and not get lost in the details.
While Xd has most of the standard features as Adobe’s other design software, it also has some unique features that I’m pretty excited about. Their new repeat grid allows you to select any group of items and replicate them with a simple click and drag. This is especially helpful when mocking up elements like image galleries or blog listings. Another exciting feature, for developers especially, is the pixel perfect measuring that allows you to see an object’s distance in relation to the artboard and objects around it.
In the past, prototyping a site was a fairly time-intensive process that required slicing and saving out the individual pieces and uploading them to a site like Invision. Any required changes had to be made in the Photoshop file, then re-sliced, saved, and uploaded again. With Xd the prototyping functionality is built-in, allowing you to seamlessly jump back and forth between design and prototyping mode. Any changes made in the design automatically update in the prototype, making revisions super easy.
Sharing and Exporting
Once you complete your prototype, you can generate a link to share online with your team or with a client. Anyone with an Adobe ID can log in and comment directly on your prototype, allowing for easy team collaboration.
When it’s time to pass off your design to the development team, elements can be exported with a single click in a variety of file types. This eliminates the hassle of slicing each individual piece, making your developer very happy.
Does your website need a refresh? Reach out to DaviesMoore to learn how to boost your website’s impact and drive user engagement.