Creating industry leading websites means choosing industry leading design tools.
In the dark ages of web design, delivering an early prototype to a client meant presenting a wireframe or a series of image files and trying to explain how the design would function once it became a live site. Unfortunately, this process had several significant drawbacks. For one, these graphic files tended to be large and unwieldy, and made for clumsy handoffs to the dev team. But they also were a poor medium for mockups, because websites aren’t static. Users are meant to interact with them in specific ways, and pages are supposed to deliver a certain flow.
Walking a client through a design when they can’t see the functionality all too often leads to misunderstandings and confusion. It also places higher demands on everyone’s visualization skills, and even those of us who can easily envision how a website is supposed to work are likely to make some mistakes along the way. Finally, when the design team hands a website off to the development team to code, a static site is more likely to lead to miscommunications between team members.
We believe that professional work begins with professional tools. When a program comes out that is more in sync with our own process, the positive effects carry over into other facets of our work as well. Fortunately, the good folk at Adobe recognized these challenges and came up with a product designed to resolve them. Adobe XD lets designers create more sophisticated mockups with greater ease and consistency, and which incorporate interactive elements for a more unified and realistic design experience.
For this piece I interviewed our creative director, Ian Wilson, for insight into how Adobe XD has changed his design process. Read on to learn how Adobe XD has helped our team up their game.
1. Adobe XD is faster to load and faster to use.
Back when our designers were working in Photoshop, it would frequently become bogged down by the number of artboards they needed to keep open within the same document. If you’ve ever worked with a slow or buggy program, you can probably well understand the frustration that comes from an interrupted workflow.
In XD, our designers can work with dozens of large, fully designed artboards even though the document itself takes only a moment to load. As Ian puts it, “Being able to quickly jump between page designs to check my work helps me stay in a flow-state easier, and without it having to render all of the image data the way Photoshop does, it’s much less likely to crash on me in the middle of work.”
2. New features make our process more efficient.
Adobe XD has a robust feature set that gives the entire design process a smoother flow. These features include tools such as a style library, which can be applied globally within a design; content aware layouts, which make it easier to edit and design components; and repeatable grids, which make it easier to duplicate elements.
Features like these mean our designers spend less time making small adjustments, and can trust that the changes they make will be more consistent. As a result, they don’t just work faster, the work also contains fewer errors, and allows them to stay in a more focused frame of mind throughout.
3. Interactions and hover states let us more easily design for UI/UX, and give our clients a more accurate prototype.
We firmly believe that the best way to do right by our clients is to do right by their site visitors. That’s why we’ve always placed a high importance on user experience and user interface design. The problem is that it can be hard to know how to design a feature until you see it in action. The more we have to rely on our imagination (or the more we have to ask our clients to rely on theirs), the more likely it is that we’ll miss some critical detail, or fail to envision how a certain element could be designed better.
Adobe XD relieves that burden by allowing us to design interactive elements, including dropdown navigation, pop-ups, and mobile touch-based behaviors. It’s also possible to incorporate links within the document, making it easier to demonstrate a specific kind of user flow. We can even share a link to the design document with our clients so that they can view the designs in their web browsers, as if it were a real website. All this makes it easier for them to envision what the final product will be like, and to provide feedback based on that prototype without worrying about whether they’ve understood our designs correctly.
Websites aren’t static. Your website prototype shouldn’t be either.
4. Adobe XD provides a smoother hand-off to the dev team.
Once designs have been approved by the client, it’s time for the handoff to the dev team. While this may be straightforward in theory, in practice it can introduce a lot of confusion, especially if you’re working with a lot of different files that each have a lot of different elements.
Adobe XD makes the handoff process smoother in several ways. First, the interactive elements make it easier for the dev team to see how features are supposed to function without relying on a written description or extra design boards. Second, Adobe XD includes an export feature that lets developers easily download assets without the team needing to send files back and forth. Once more from our creative director, Ian:
“Without style libraries it’s easy to wind up with a lot of disparate elements that really ought to share the same attributes, but maybe you forgot to update them, or they were on an artboard you forgot to check and suddenly your design is full of one-off styles that drive developers insane. Beyond keeping your text and colors consistent, XD has tools in it to help even out the spacing of your layouts, create grid systems, and otherwise ensure that the visual rhythm of your design is even and uniform. The less time a developer has to spend guessing at your intent, the happier everyone will be.”
If you want the job done right, you should care how the job gets done.
After all this, you may be thinking: You’re not a designer or a developer, so why should all this matter to you?
Because when you hire a team to design and develop your website, the tools they use are important. Greater efficiency in our design process means we can deliver a higher quality product while keeping our cost competitive. A smoother transition to our dev team means fewer miscommunications and time lost correcting errors. And an interactive prototype means you can better understand how your website will function from a UX perspective before it’s even been built.
We don’t mind sharing details about our process if it will give our clients the reassurance that we’re using the best tools for the job. In fact, we love talking process, because we’re confident that the way we work works.
Not just for us, but for our clients, and for our clients’ clients.
If that’s the kind of team you want designing your website, contact us today.