Designers have never had so many options when it comes to website design. Before Adobe XD, there were other programs that dominated the market. The most notable of them is Sketch, which is a robust tool that came to the rescue and answered our needs in digital design. After some years well spent with Sketch, our agency decided to switch to XD in 2015 for most of our web design projects. Here are some of the top reasons to use Adobe XD:
Intuitive interface
Many moons ago, our creative agency in Boston used to rely on Adobe Photoshop and Illustrator to design websites. The trouble is that—despite the robust quality of these two programs—neither tool is created for the sole purpose of web design.
Adobe XD has improved significantly since its beta phase. It has an open, flexible and intuitive interface that allows our designers to focus solely on creating elegant web layouts in the easiest and quickest way possible. This is one of the selling points that inspired our decision to switch from Sketch to XD.
Adobe
It is an Adobe product, which makes learning time and ramp up much easier since we are accustomed to other Adobe programs. For example, familiarity with the same shortcuts is a big help because in Sketch they are different. Since XD is an Adobe product, it is nice that some of the shortcuts get carried over to XD, making it more convenient and efficient to work with and to get really comfortable with the program.
In addition, it is much easier to set up a custom grid to work within XD. The program allows you to have full control over adjusting and customizing your grid, including the margin space, gutter, and columns. We find this to be more intuitive than in Sketch.
Great for sharing and prototyping
The “Share for Development” feature is a huge deal. Once the design phase is done, our designers can simply export a link that contains all the details developers need to know, have and download in order to build the web pages.
Being able to share design specs makes handover to developers easier—color, font, spacing, dimension information, and access to download assets—all in one neat little link.
—Casey McGee | Art Director, Opus
There is a lot more to designing websites besides the “design” part. No matter how gorgeous-looking the images are or how sleek the icons look, it is also important to see how the interactions and transitions work. With the Auto-animate feature, prototyping in XD has reached another level. Not only does it allow designers to create more complex demonstrations of the web, but it also gives the clients an idea of how their product will function. Sketch requires an additional program, often Invision, to create interactive mockups. With XD, this happens all in one application.
Important key features
Similar to Illustrator, XD allows you to leave and preview the design outside of the artboard, which is not possible in Sketch. This is one of the struggles our designers often encounter and find frustrating to having to constantly watch out for.
When designing web pages that have repetitive elements, the “Repeat Grid” feature comes to our rescue wonderfully. This feature makes it less time-consuming and tedious to copy and paste similar elements. The “Repeat Grid” also allows us designers to adjust the spacing between elements, change things globally, as well as ungroup and group everything easily.
The symbol feature in XD is also another time-saver. Imagine how mad it must be to re-create and update little changes for a repeated item (icons, header, footer, colors, etc.) across the whole site, page by page manually. With the symbol option, we can turn all of those global items into symbols that will automatically update the changes to all of their replicates across the whole website. Symbols exist in Sketch but we find them easier to work within XD.
The last important feature we enjoy is the XD mobile app and “live view” that lets you view and edit your phone and iPad layouts live. While you move elements in the program, you can see the changes live on your phone. This leads to a higher quality user experience because you design while seeing the changes on the actual device. This saves a lot of time and effort by reducing back and forth during the process.
Our wish list for XD
Nothing is perfect. With its many great attributes, there are also things that we feel can be improved upon in XD and additional things that we hope to see in the future versions. Here is the short wishlist of what we think will make XD even more awesome:
1. Better type manipulation
We are hoping future versions will include more comprehensive editing features when it comes to the typography in XD. That includes the ability to be able to switch between lower to uppercase, better spacing selections as well as paragraph and character styles.
2. Ruler, please!
Rulers would be helpful to add guides manually when needed. It is also odd that rulers appear in almost every other Adobe programs but not XD?
3. More support for motion-based media
We are talking about video files and even, GIFs. It would be a neat idea to be able to play short videos and GIF files during the prototyping process. While still images are the traditional medium for visual communication, more and more websites are utilizing animation and video footage to better enhance the visual message.
4. Can we please have bullets and numbers
Some simple things are still not natively available, like bullets or numbers for text and some other basic styles. It may seem small, but it would be a helpful tool to have for designs as well as wireframes.
These are our suggestions to make Adobe XD an even more delightful tool for website design. Do you agree? Let us know your thoughts and perhaps your own wish list.
