Designing an app with Adobe XD

I used to be a big fan of the design software Fireworks formerly from Macromedia, and later Adobe after Macromedia got aquired. Fireworks was my go to tool for graphic and web design mainly due to the ease of use. (I can’t seem to use the gradient tool properly on Photoshop or Illustrator, whereas it is very easy in Fireworks).

Anyways, Adobe discontinued development and support of Fireworks after a while. I would guess most of its users would have migrated to other Adobe products. It was in June of 2020 that I discovered Adobe XD a vector based UX design tool.

In this post I will take a look at the joy of designning with Adobe XD and a project that I used it on recently.

I am pretty sure XD was created with inputs from some members of the original Fireworks team. It is very easy to use and the User Interface is very simple when compared to other Adobe tools like Photoshop, Illustrator etc. This is what Fireworks may have evolved into if it was still maintained.

Adobe XD is very good for quick prototyping, creating design systems, adding interactivity and sharing the designs with users, designers or developers. The best thing about XD is that it is Vector based and most of the operations are non destructive. It can even export assets as SVG.

Example - C19 App

Since it was difficult to keep track of the C19 pandemic counts for places of interest on a daily basis, I thought of creating a Web API to aggregate such information from any publicly available source and consume it from an Android or Web App. Of Course this is only for educational and informational purposes, to use this learning in a future implementation.

Web API

My first step was to see if it was feasible to build a Web API to aggregate the information from a public source. After doing some research I was able to find sources for global and states in India. With two night’s work, I was could whip up a working NodeJS Express Web API and deploy it to Heroku.

Whipping up REST endpoints on NodeJS with Express is very easy and satisfying.

Caching Requests

Since I am using Free APIs, which are rate limited, the plan was always to cache the responses for a period of time so that the source API’s are never abused. Surprisingly it was very easy to implement a cache middleware to the Express app. [This learning will also be useful in the future].

App Design with Adobe XD

Once it was undestood that the Web API part could run as envisioned, I turned to Adobe XD to prototype some wireframes on how a mobile app may look like based on the data that was returned by the Web API.

After trying out a few different variations, I decided to go with a particular layout and went on to add some colors (very difficult to get rid of the teal color in my apps at this time).

Android App

Saying that Designing and Developing the Android app was the hardest part is an understatement. It seems to be very hard and time consuming to start an Android app from scratch!

If the major work for the Web API was done with 2 nights, this part took almost 2 weeks of hours late into the night (Since this is a hobby project, I would have my normal work and household chores during the daytime).

Configuring a new Android App with androidx, material libraries, and setting up the themes took a long tme so that I had to create a starter template in case I encounter this situation again. Must remember to keep this project updated though.

It was also a time saver to use the libAeApps library project which provided some ready made utilities, assets and boiler plate code. Wonder who maintains that project, seems useful. More projects could use it or contribute to improve it.

Anyway I digress. The Jetpack libraries have changed since the last time I had used it in Message Counter redesign. More time was spent on research and finally it turned out well.

App Release

And finally the app was ready, and unfortunately Google Play team did not want it on the Play Store. Hence I have it on my phone, and signed builds would be available under the releases page on the GitHub page of the project.