Communications, Adobe XD, and getting it rights

Graphic design is the way we communicate with customers and developers. If we don't understand what the customer is looking for, and what the project requires, then we won't be able to deliver the amazing application that customer wants. And this kind of communication can be surprisingly tricky—many customers don't know the technical terms we use to describe projects, and might not even know what their options are.

We've found a solution that uses the Adobe XD software tool to facilitate communication. Adobe XD is a design tool much like Photoshop or Illustrator, but its capabilities are more specific to the UI/UX web design work that we do here. Our process relies on using XD to build quick-and-easy mockups of completed projects, allowing early drafts to accurately showcase all of the key features the final version will include. This fidelity makes it much easier to work with both customers and developers, and ensure that every project lives up to the client's expectations.

In this article, we'll walk through the most useful features that Adobe XD offers to you as a designer.

The first thing you'll want to do is choose what size artboard you want to work with. Adobe XD offers three different sizes for web-based design plus mobile options for iOS and Android. Artboards are part of the program's built-in UI Kits, which are platform-specific bundles of settings, options, and tools that make our jobs much easier.

Once you're set up, you can start exploring the program's features. There are four major ways that XD helps any design process get off the ground:

Shortcuts

Adobe XD is full of time-saving shortcuts. For instance, you can create a complex page layout using simple geometric shapes as placeholders for finished graphics. Later on, you'll be able to drag-and-drop photographs to each shape and have it automatically cropped and positioned, saving you the work of editing each photo separately.

Consistency

Any successful piece of UI/UX design is grounded in a specific set of colors, typefaces, and visual themes. Adobe XD lets you save and edit all of your assets for quick and easy reuse, including fonts, color palettes, and icons.

Plug-ins

It's simple and straightforward to integrate projects in XD with other applications, allowing you to easily add fake text or link your ongoing work with editing or processing capabilities offered by other software.

Prototyping and Animation

This is XD's most important and powerful function for UI/UX design. Its prototyping options let you showcase the animations and flows that users will experience when they interact with your finished product. The process is not without flaws—sometimes you'll need to repeat a screen more than once in sequence in order to accurately showcase part of the flow you've envisioned—but it is by far the best option available.

Taken together, these features let you define all of the key elements of the interface you are working on. They offer a best-in-class system for translating customer requirements into concrete visual elements that designers can use during the implementation process. (Check in next week for more details on implementation!) In the meantime, we strongly recommend that you explore some of what Adobe XD has to offer —we suspect you'll find that it saves you time, effort, and endless headaches over communication.

HAPPY DESIGNING!

®CBQA Solutions

Back to home