Adobe XD: The Power of Thinking Inside the Box
Published: January 12, 2017
Author: Anjali Gajera
At 3Q Digital, we’re always pushing the innovation envelope; we believe this is an essential component of success in an industry that changes so frequently. This post is part of our inaugural Innovation Week, where we showcase all manner of innovations that have improved results for our clients and teammates.
Design is about creativity; it mixes imagination with psychology to create something memorable and impactful. Some might say design is about thinking outside the box. However, today we are going to talk about thinking inside the box. No, we aren’t talking about stifling your creativity, but rather how to be a smarter designer for the web. We all want to be smarter, right?
In design there will always be constraints. Whether they are your canvas, your banner size, your dev capacity, or your audience’s pre-existing expectations on how the design should look or function, constraints are unavoidable. A designer is a problem-solver: balancing form with function, speed with intricacy, and the cutting-edge with the tried and true. Constraints aren’t always bad. The right type of constraints help us focus and do our jobs more effectively. This is what I mean by thinking inside the box.
One of my favorite tools for staying inside the box is Adobe Experience Design, or XD. When designing for the web, I find that it is especially important to be constrained, and XD does just that. It is truly the Goldilocks tool for web design: not too much, not too little, just the right amount.
For me, there are quite a few major benefits to working in XD:
Stay constrained: XD is great for designing within parameters, which makes going responsive much easier. Adobe also put a lot of thought into limiting XD’s feature set and capabilities to just what you need, removing all unnecessary magic wands. You aren’t overwhelmed by a ton of icons and tools; you have just what you need.
Ease of use: Did I mention it’s easy to use? Unlike in Photoshop, it’s much simpler to edit a specific item. In Photoshop, you have to select layers. In XD, you can just click on the object and edit away.
Design faster: XD allows you to design a full-fledged responsive website, and it offers built-in shortcuts like drag & drop and page linking so you can go from idea to prototype really quickly. To make it even easier, XD provides plug & play templates, like iPhone patterns, so that you don’t need to start from scratch.
See prototypes in action: XD allows you to test and share a preview of your prototype so that everyone can interact with your design. Your team or client can actually play around with the UX and see how you intend the navigation and interactions to work in the real world.
Your developer will love you: With XD, you can rest easy knowing your design can actually be implemented from a development standpoint. For example, you can export an icon from XD, your developer can select icons, and then they can export those icons in the format they need. This eliminates the need to provide separate asset folder for development.
Overall, XD simply makes you a better designer. It allows you to leverage constraints to your advantage, making the box your design space.
It really does sound like the miracle design tool, right? Don’t abandon Photoshop just yet! It’s important to point out that while Adobe XD is really great for web design, it is not a one-size-fits-all solution. XD is great for specific use cases including web and app design and prototyping, responsive design, and app store optimization (ASO).
However, Adobe XD is not the right tool for creative like banners, templates, or emails, nor is it meant to be. Adobe took a narrow approach with XD and created a tool that really shines for designing for the web. It is that in-the-box mentality that makes XD truly unique. In the words of Phil Dunphy from Modern Family, “Think inside the box. That’s right, I said inside. Because while everyone is chasing each other outside, what is the box? Empty.”
If you haven’t tried it already, give XD a go and let us know what you think. Get the conversation going; we’d love to hear your opinions on your favorite tools in the comments section below.
If you have any questions, don’t hesitate to contact us!