First things first…
UX and UI are two design aspects that are brand new to me.
Developing a functional, intuitive, and an aesthetically pleasing interface is no small feat. It requires good clear copy and demands an array of design considerations including interface flow, color theory, typography, grid-blocking, and page hierarchy.
In order to build my app interface with clarity…
I took the opportunity to better understand how I should approach my workflow in order to communicate the intention of my app clearly to my main user. I did so by joining a brainstorming session with my professor, Chris Shanks over a Zoom call where I suggested that we utilize Mural, a visual collaboration tool. Starting with my original app wireframe concept, we discussed the intention of the app, who my user is and how best I can deliver a plethora of content.
Slowly but surely…
The iterative process of concept to creation manifests! I sketched out my users needs & wants, the intentions or purpose of the app, and some general mock interfaces. From there I began to chip away at how many different pages I would need and used these sketches as a reference map.
Then came Adobe XD, a user experience design tool
Actualizing ideas that only exist in idea-land demands time. With that in mind, I put in the time to teach myself how to utilize Adobe XD in order to build an interface that functions as an interactive prototype. One tutorial that I found particularly helpful was how to use stacks and scroll groups. I utilized it’s functionality to make my pages more dynamic and less crowded. Check it out!
the heavy lifting is overcoming the blank canvas
Starting with a blank canvas can be intimidating. What helps me is to create a series of page designs and make each one different. From there I am able to better decipher what I like, what is possible, and how to troubleshoot. Once the bulk of the interface design is generally established, building out the pages comes naturally.
use it for what its for: prototyping.
Abode XD takes the classic stop-motion route when it comes to animation, this can get extremely granular fast! In order to expedite my process I forged the “opening” pages (see first three artboards *) that were to act as an animation. I instead used Adobe After Effects instead to create a simple motion graphic that felt and looked better than what XD can produce. For now, my motion graphic will act as a placeholder and will allow me to discover the ins & outs of inputting videos into Adobe XD using plugins!
Check out my progress
As I continue to develop my app, I frequently preview how it functions. By using myself as a prototype test user, I am able to better understand what my project needs to function intuitively and further refine my design elements.
Even though this is my first time using XD and taking a stab at UX & UI, I am excited about my progress. My goal is to keep my interface open, clean, and engaging.
Up next, integrating the installation-based interface!
Motion Graphic Demo
Learn more about this project here.