The to do list
This week's design challenge I created a list prototype. The prototype features a drag function to remove items from the list. I stumbled onto a limitation of Adobe XD that I will go into shortly. I kept the design fairly simple to focus on the list itself. Let’s take a look.
I first created a quick logo. I initially started with basic shapes, and ended landing on a text based logo with a check mark in the O to tie it into the function of the app. I liked the neon color I chose, but didn’t know the best way to separate it from the background. I tried a drop shadow, and then changed the background color. Neither of them felt right. Encapsulating the logo in a dark pill shape made the logo stand out on it’s own and allowed me to stick with a lighter background for the list.
The list was created with a component that contains 3 different states. The original state, a completed or checked state, and a deleted state. I initially wanted the prototype to have the ability to have the list swiped either left or right depending on if you completed the task, or wanted to get rid of the task. I laid out the prototype with both options in mind, but quickly found out XD only allows one of the same interaction per component. This means I would have to build two prototypes to show each interaction fully. Bummer. I did read that this feature has been requested for future updates. Cross your fingers!
Thinking about it while writing this, I wonder if you put two components next to each other, and have them swipe in opposite directions, you could achieve the desired effect of being able to choose which way to swipe? That might not be the best way to design to pass it along to engineers, but it might be fun to try. It might be an ok work around if you need to show functionality quickly. Just be prepared to have another asset ready for the final version.
I really enjoy exploring how XD works. I tried a few different auto animate features when dragging the list off the screen. The color changes as the check mark fades into view. Another test checked off on my to do list. On to the next one!