Prototyping with Adobe XD and Angular Material

Prototyping with Adobe XD and Angular Material

This is one of a series of posts detailing the process of building an application with Angular, Visual Studio, ASP.NET Core, and Azure. See the complete list of posts here.

This is a summary of decisions made and lessons learned while creating this prototype:

  • Adobe XD is free during the beta period and provides both wireframing and prototyping capabilities
  • Adobe XD comes with a set of Material Design Assets with which to build prototypes
  • Prototyping helps developers understand design considerations before potentially coding themselves into a corner
  • The Material Design assets provided by Adobe XD must be modified in some cases to match what Angular Material provides
  • Prototyping is a great way to start understanding Material Design for those who have never used it

Why Adobe XD?

When designing an application from scratch, it's tempting for developers to dive right into code. However, this often leads to dead ends and rework. Going through the process of wireframing and prototyping helps to understand design problems before investing in their development.

Wireframing is laying out the screens and UI elements. Prototyping is organizing the transitions or flows between these screens and states. Drawing on paper is a low-barrier method to wireframe and prototype. I have done this but I tend to miss the ability to copy and paste repeated UI. There are many software tools that do only wireframing OR prototyping but a much smaller selection accomplish both tasks. One of these applications is Adobe's relatively new Experience Design (XD) product.

There are several reasons I chose to use Adobe XD for this exercise. First, it's made by Adobe which is synonymous with 'professional design tools' and I can assume there is a large base of users from which to find examples, training, and support. Second, Adobe XD is currently free during the beta period. Adobe's Creative Cloud, while exceedingly capable, is arguably expensive at around $50 per month with an annual commitment. Not doing a lot of design work, it becomes difficult to justify this expense. When it's free, however, why not try it? Finally, Adobe XD comes out of the box with Material Design elements (and others) that I leveraged to make my prototype.

To get started, Adobe XD has a built-in tutorial. This was enough to orient me to the major features. However, you can read more about Adobe XD here.

Why Angular Material?

Why choose Angular Material? To start, I wanted to use an existing design language. My main skill is development and so I wanted to leverage existing design work to get my application off the ground as quickly as possible. Material design is a design language based off a set of patterns and principles. Frameworks have adapted these patterns to existing technologies. Angular Material, for instance, has adapted Material Design for Angular.

Angular Material is a set of Angular components built to fit the Material Design language. In addition, Angular Material represents some of the best thinking on how to implement UI component libraries for Angular-based applications. By using this library, I expect to better understand best practices for creating my own re-usable UI components.

Finally, I think Material Design looks good. I find applications built with Material Design to be useable and feel playful. However, I don't know much about it. I don't use many Google applications regularly. By creating a prototype, I can research how these UI components are combined to create an application.

Take the playful aesthetics and combine this with pre-built components, design principles, and prototyping support, and the choice to use Angular Material and Adobe XD makes sense.

Wireframing

Adobe XD offers sets of Material Design, iOS, and Windows assets called UI Kits. When selecting a UI Kit from the menu, Adobe XD opens a new window with a project containing all the assets. From there, you can copy and paste the assets you want to use in your own project.

To start, I copied a view of the Safari browser from the iOS UI Kit. This helps ground the fact that this application will be running in a browser. Next, I opened the Material UI Kit. These assets are designed to mimic native Android apps. To adapt the assets to Angular Material, I opened the Angular Material web site side-by-side with the Angular Material UI KIt. I adapted the existing assets to match what was available in Angular Material. For instance, I combined a text input and menu to recreate the Angular Material select component.

This is what the Material UI Kit gives you out of the box:

Adobe XD Material UI Kit Input

Adobe XD Material UI Kit Menu

This is my own composite to roughly match the Angular Material select:

Angular Material select component

The first screen, referred to as an artboard, takes the most time to create. From there, you can duplicate screens and modify them to wireframe the rest of the application more quickly.

Duplicate artboards worfklow

I didn't spend a lot of time on the initial design, enough to get acquainted with the tool and create the first set of interactions. You can see the current state of the prototype here. Also, visit the Adobe XD documentation to learn more about the program's features.

This is the full set of initial artboards.

Initial application artboards

Prototyping

After the artboards are created, Adobe XD makes it easy to prototype interactions by linking artboards together with transitions.

Adobe XD transitions

Simply select the element that triggers the transition and link it to the target artboard representing the new state.

Adobe XD link transitions

Once all the artboards are linked, you can 'play' the prototype. When in this mode, the artboards are not editable. The user clicks the onscreen elements and Adobe XD displays the linked artboard with the selected transition. This allows the user to get a feel for how the application behaves.

Adobe XD Transition Animation

I almost skipped creating a prototype because I already had an idea of how the screens would flow together. However, the process to create the prototype took very little time and it was somewhat gratifying to see the prototype 'working' even if in a rudimentary state.

Especially if designing this application for other users than myself, the prototype would allow me to perform usability testing. The testing would provide valuable design feedback to incorporate before investing in development effort.

Takeaways

Not being very familiar with Material Design, I had a chance to research how the Angular Material components fit together in an application. Furthermore, I became better acquainted with the various components that Angular Material offers.

I found Adobe XD to be a very capable tool and will consider using it for other application ideas going forward. It was easy to get started and I could become more efficient using the tool with more experience.

I look forward to seeing how Adobe XD evolves overtime and using it more in the future. Have you given it a try? Leave a comment below sharing your experience.