During my dissection of the Apple Podcasts app, an unexpected thing happened. I fell in love with prototyping—despite floundering through a Photoshop workflow that wasted hours. If anyone knew how much time it had taken me to make those few PNGs, I would die of embarrassment.
Up until this point, I had been relying on Photoshop to create my assets (for non-techies, that’s the pieces of the app) and Marvel to stitch them together. For months, I had heard rumors that there was a better way, and I have found it.
THE MATERIALS
Adobe XD, which I learned how to use through Lynda.com tutorials.
Mockups of Hive Hero (formally known as Hiver) from a previous post
THE PROCESS
Thanks to the tutorial, the process for creating this wireframe was fairly simple. It killed my inner child to rely purely on greyscale and placeholder shapes, but I could clearly see the benefit to determining the functionality before I commit to hours spent sweating the design.
Essentially, the way Adobe XD works is as follows: you choose which device you’re designing for (which influences the dimensions of your mock screens), you place the elements (text and shapes), and then you use virtual shoelaces to connect the pieces that move. It’s immensely satisfying to piece the puzzle of your mock app together so that when you click one thing, the next thing appears.
WHAT I LEARNED
I LOVE the wireframing process. Even more than I thought I did. Often, the way we define ourselves is so limiting—for me, I have often told myself “I’m not a designer” and “I can’t code.” But the beauty of technology can be found in its potential to help us learn and grow beyond our natural limitations. No matter what shape my career takes, I must pursue a mentality grounded in growth mindset. Believing in ourselves is hard work, even as adults, but we must do it.