UI design with Adobe XD prototyping tool
What we like and what we are hoping for…
by Brett Mazoch, published in A Designer’s Thoughts
Last month (in October 2017) a long-awaited event in UI design world happened — Adobe XD 1.0 finally arrived! It is supposed to be the all-in-one UX/UI solution for designing websites, mobiles apps and more and as a UI designer I was obviously curious to explore this tool even before that release. In our Epro design team we have been testing and using the previous Beta version for about 3 months and, to be honest, we got excited and frustrated at the same time. In following lines I’ve summarised my excitements and frustrations coming after using this promising design tool.
Switching from Beta to 1.0 was not as a big step as we thought it will be in terms of new functionalities, but we are hoping for a brighter tomorrow. We decided to continue using Adobe XD and see what new releases will bring on the table. Currently, we use this tool to create interactive prototypes for our medical web-based information system.
In September, I was also lucky to hear and meet a designer from the XD team during a web conference in Prague. His name is Andre Jay Meissner and he was talking about design approaches in the development of Adobe XD. You can watch Andre’s talk Assumptions Prohibited in my article about Usability and UX Insights from WebExpo to Design Better Products — it was really entertaining!
How we design
To put my notes from using Adobe XD into the context, I need to shortly describe our design process, which can be summarised in these iterative steps:
- Prepare a feature/functionality brief.
- Research, sketch and discuss ideas.
- Prepare low/high-fidelity mockups and interactive prototype.
- Do design review, test and get feedback.
- Create and communicate specifications for developers.
- Test implemented designs.
The important thing to mention — every time we do design reviews of prepared wireframes and mockups with product stakeholders, we print the designs on A3 paper. It has proven to be very beneficial for us. Why? Because we can gather ideas and notes from the stakeholders more easily and they give us a better feedback on presented design solutions.
I should also mention, that our main UI design tool is Adobe Illustrator. We used to work with Sketch, which I personally think is a great tool for UI designers. However, we recently decided to stick with Adobe. Mainly because cooperation with marketing designers who are using just Adobe products and because of our hope in Adobe XD.
The truth is, we currently still miss some functionalities and features in Adobe XD. So we basically design mockups and workflow diagrams in Illustrator and copy/paste them into XD to create its interactive versions... Yes, we know. It is not ideal. And that is why we are waiting for more improvements.
What we miss in Adobe XD
Let me share with you what we currently miss in Adobe XD to fully support our design process. There might be other designers who probably experience similar frustrations. Are you one of them? Then please don’t hesitate to write about your experience in the comments.
(Don’t worry Adobe XD, I will mention the things we like at the end.)
01 / Artboards functionalities more supportive to a preparation of flow diagrams and printable deliverables
As I’ve mentioned, we print our designs for design reviews with stakeholders. We usually prepare two types of deliverables:
- design mockups with a frame of the particular device around it (for a better demonstration of a physical look),
- annotated flow diagrams with arrows and numerical labels (for reviews and specifications of desired user flows).
Because of that, it could be useful to be able to define prototype screens by viewport areas within artboards rather than just by the whole artboard. It would allow us to have mockups with device frames and annotated flow diagrams on just one artboard which can be easily printed.
The temporary solution we use is preparing printable deliverables in Illustrator first and creating interactive prototypes in Adobe XD afterward by copy/pasting designs. If we want to create printable flow diagrams, we need to use Illustrator again to draw arrow links with labels.
02 / Advanced tools for keeping UI style guide artifacts easily organised and synchronised
The mark of well-cared user interfaces is a UI style guide. I was writing about it in more detail in my article A Must for All Complex User-facing Digital Products — UI Style Guide.
Adobe XD currently supports basic functionalities for creating a colour palette, text styles, and symbols. We think it can be taken further to provide more advanced options for creating UI style guides. There are also some little functionalities which we would find useful. In my mind are for example editing symbols in place, a better distinction of currently used colour or text style of a selected element, animations as symbols and even more.
Lastly, having complex UI designs saved in different sources, it is often hard to keep all UI style guide assets synchronised. In that case, a mechanism for global synchronization would save us time. Possibility to export our UI style guide to a custom PDF/HTML template would also be very helpful.
03 / Support for creation of comprehensive design specifications
As UI/UX designers, our responsibility is to clearly communicate our designs and outputs to developers who are going to implement them. Because of that, the crucial role plays design specifications.
In our design team, we often create design outputs specifically prepared for developers which include annotations, measurements, exact CSS parameters and additional comments. But the creation of these specifications from scratch can be time-consuming.
So we wish for a functionality that could create design specifications in an easy and quick way. A good example can be a tool Zeplin. Ideally, it would be very useful to manually define only what we want to show to developers from generated specification notes. The thing is that sometimes we don’t need to describe every pixel of the design, but rather to guide developers to focus just on a particular part or the most important measurements.
04 / Options for creating complex animations and previewing them
Micro animations and animated transitions are part of well-crafted user interfaces. Obviously, you need to be able to design them, too. Adobe XD offers just very basic transitions between screens. That is enough if we are in the low-fidelity stage, but considering we want to use XD also for detailed hi-fidelity designs, we would like to be able to define more complex animations of UI elements.
A nice feature would be to see a preview of micro animations and of the transitions we are thinking to use (in the current XD version, there is just a textual description). Also, timed transitions, cycled animations (like loading spinners) or fixed elements (think about fixed top navigations) would be useful improvements.
Finally, we designers need to communicate parameters and a feeling of designed animations to developers… A support for exporting animations in the form of specifications for developers would also help us greatly.
05 / Functionalities for designing typography and graphics which are normally available in Illustrator
Illustrator is an amazing tool for vector graphics and we got used to its “little” functionalities which support our design work. Adobe XD is, unfortunately, missing them. I am talking about:
- advanced text editing (adding glyphs, complex type settings etc.),
- rulers and guides,
- searching for elements by name,
- automatic calculation of values when putting for example +25 to size or position fields,
- and more…
Thinking about it more, actually a combination of functionalities from Illustrator and prototyping/collaborative features of Adobe XD would possibly be the best solution.
Final thoughts
Adobe XD has the ambition to be a widely used design tool. I can clearly see why. It can bring great benefits when the currently offered XD features become more advanced and even more tuned by feedback from designers. There are also things I already like and really enjoy on Adobe XD:
- I love how simple it is to switch between design and prototyping mode and I really enjoy how easy and quick it is to create connections between designs in order to prepare live interactive prototype.
- Its use and performance are very smooth in comparison with Illustrator or Photoshop (talking about text editing, moving elements, undos, …).
- Moving and pasting elements works very well. It keeps the position, it keeps the size of repetitive gaps, it helps to keep all designs pixel perfect and well-aligned.
- Adobe XD comes also with apps for tablets/phones. Thanks to them you can easily synchronise and preview your designs on these devices. That is very useful if your team tests designs regularly on different physical devices.
So personally, I am looking forward to new improvements. Let’s see what the guys from Adobe XD team are planning to release next. I will update this article by the time when some of the mentioned features and functionalities will be added to the Adobe XD tool.
I believe, the next year can be very exciting in this area!
If you want to participate in making the Adobe XD better, I recommend to visit these links:
Thank you for reading!
Worth reading? 💚
If you enjoyed the article, please clap below to help others find it.
Do you have any question or just an idea for sharing? Feel free to leave a comment below or share it on Twitter.
For more stories see ► A Designer’s Thoughts.
The article was written by Břetislav “Brett” Mazoch while working as a designer in England. He moved there from the Czech Republic to follow his traveller’s dreams and work passion — UI/UX Design and Front-end Development.
