How I Conquered my Design Fear and Became an Adobe XD Pro
I’ve never been much of an artist. I remember getting my sister, who was 9 at the time, to draw the hard part of my assignment for my Gr.9 art class. In my professional career, the extent to which I’ve had to do any drawing has mostly been crude white board diagrams of software infrastructure, or extremely low fidelity UI mockups when needing to get a point across. When I started out as a front-end developer, I had mockups created for me by a designer and I would implement them without needing to pay much thought as to how they were created. I had very minimal exposure to the tools used, I just knew that Sketch was raved about. So when I started working on my own product, I was kind of scared about the whole design aspect of things. Now I’m an Adobe XD (Experience Design) Pro. Just kidding, but I will share why I find Adobe XD pretty awesome below.
Taking the Leap to Becoming a ‘Designer’
I needed to come to terms with having to design. I found some articles that reassured me that all you have to do is take the leap and start drawing. It told me that the designs probably won’t be good at first, but I’d get better. I’d be able to iterate and improve them. This made sense to me as I’ve been involved in many agile software teams where we implement very basic functionality, then make it better. Additionally, when writing code to solve a problem for the first time, it probably won’t be the cleanest nor most efficient way of doing it. You get it working then go back to it to improve it. I felt a sense of relief in making parallels to a world I was comfortable in.
Then, I started sketching. I ended up making several iterations of the same thing. Just like what I read, as I did this, it got better. I was able to take what worked and improve on it, ditch what didn’t and it came together into a good design — if I do say so myself.
Becoming an Adobe XD Pro
Disclaimer: I’m not a pro, but I did get pretty proficient with Adobe XD. You may be wondering: Why didn’t you use Sketch? My lovely partner has an Adobe Creative Cloud account (Thanks Danielle Cadhit 😘) so I figured I’d use what we have instead of ponying up the $99.
Similarly to starting sketching what I had in my head onto paper, I once again dove right in when it came to bringing those low-fi mockups to the digital world. I watched a few tutorial videos, and since I knew what I had to design, it was actually quite enjoyable. There’s no secret I can give you — you just have to do it.
3 🔑(Key) Adobe XD Features
- Repeated Grid
UIs have a lot of repeating elements. Think about a menu bar, search results, and tiles of images for example. Adobe XD makes this really easy to mock. You select the ‘repeat grid’ option and it allows you to drag both vertically and horizontally to repeat the element. You can also adjust the space in between elements very quickly, and modifying one element also modifies the rest. As a silly example, you can see the repeated Cost Canvas logos above. - Symbols
The logo you see above was made into what Adobe XD calls a symbol. Symbols are UI elements that are used throughout your app. Some examples of symbols I have are the site header and the Cost Canvas logo. These symbols are made up of multiple components, and making it into a symbol allows you to very easily re-use them throughout the mockup. The best part is that if you make changes to the symbol, it’s updated in every place you used it. - Prototyping
When I worked on a team that used Sketch, we had to use a secondary app to do prototyping. With Adobe XD, prototyping is built in. It allows you to link an element from one art-board to any other art-board, simulating clicks and transitions. I thought it was very intuitive and quite powerful. My partner thought I had already implemented a part of the app — nope, sorry to burst your bubble! My only gripe with this is that, as far as I know, you can only view the prototype within your Adobe XD instance. I would love if it was viewable on the web so I can get feedback from people from any device. Please let me know if I’m wrong. I’m considering switching over to Invision for this.
With these tools I feel extremely comfortable in producing high quality mockups and it actually feels weird writing this since a few months ago I was terrified of doing design work. For any developer who was in my position: just take the plunge! You will surprise yourself.
Follow Us
I’m not quite ready to share any designs (soon though!) as things are rapidly changing with us being in the current Founder Institute Toronto Cohort, but if you’d like updates on our progress: visit our website to sign up (or use the form below) and follow our Instagram and Twitter. My partner and I are also starting to post a lot more on Twitter!
