Food Delivery Service App: From Invision to Adobe XD
There is sort of this monstrous battle between Sketch/Invision, Adobe XD and a few other up and coming players. For a while it’s been the Sketch/Invision train leading from afar, however Adobe has ever so slowly been catching up with their own product.
I have been super excited about this because it brings the possibility of Sketch and Invision like powers to a more universal and integrated platform. On top of this, despite being proficient in using a Mac, I prefer using my own windows based PC instead of my Mac (maybe a bit of an unpopular opinion).
Since Adobe XD has come into it’s own and it works with my preferred workflow, I figured it would be time to try and switch some of my Invision prototypes over to XD. These are some of the thing I learned in the process of using Adobe XD for the first Time.
Art Boards are a Good Place to Start
Adobe XD has an excellent selection of pre-made art boards. I was able to take my models from my Invision and place them into art boards for an iPhone 7. I worked really well although you lose some object functionality if you don’t use Adobe Files.
Make your buttons (or already have them made)
One of the cool things with XD is the ability for you to import Adobe native files and use components from those in the prototype phase. In my case I no longer have the base files of this particular prototype. If you are in this same position know that you can still make invisible overlays to act as buttons and it works for basic prototype presentation. You simply make a component in the shape of what you need and make it transparent.
Link those buttons to pages and actions
Adobe XD provides a good simple way of linking pages that is consistent with other prototyping software. The small arrows can be dragged from button to page or actions that are desired. Each button then has it’s own trigger, animation and destination as well as modifiers that go with them. Links and their buttons can be copied across artboards and maintain their page links which works well for me.
Demoing prototypes
Standard and quick desktop demoing works really well with Adobe XD. You just click the play button up in the right hand corner. If you download the Adobe XD app you can get prototypes right on your phone and get a better idea of what they may look as well as show a client.
Conclusion
Adobe has a few other features that make it an excellent and viable option for prototyping. It’s especially viable for those that want to remain within the Adobe ecosystem. For me, even at a glance I was able to figure things out super quick. I love it and look forward to learning more about it.
Brian Nelson is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to a project that involved researching and building a hypothetical app in the DGM 2240 Course and representative of the skills learned.
