The interactive version is at the end
Summary
In my multi-platform class, I was introduced to Adobe XD and how to build a functional, well-designed dashboard. The design criteria were to create a dashboard that served a purpose that someone could easily understand. The final designs were to be created in Adobe Illustrator and then brought over into Adobe XD to create interactive aspects.
Goals
My goal for this project was to learn anything and everything I could about Adobe XD. I wanted to step out of my comfort zone and see my Adobe Illustrations come to life. I have always been fascinated by animation and making my designs move around was exciting in this project.
Preliminary Work
The first step in this project was researching other dashboards and seeing what aspects I wanted to include in mine. My favorite dashboards included dark modes and multiple colors. I also loved the layout of these dashboards because it was easy to see how everything fit together and had a great hierarchy. The dashboard I chose to take all my inspiration from was the one with the little 3D element. I chose this one because it welcomes the viewers in with the fun 3D element but still follows the structure of a well-organized dashboard.
Low-fi wireframe
After finishing the research, I had to create a lo-fi wireframe. A lo-fi wireframe is drawing boxes and creating spaces for future information to live in. I had already created a list of what information I wanted on my dashboard and so my lo-fi wireframe was to determine where I wanted it to stay on the dashboard. After my lo-fi wireframe was approved, I placed the image into Adobe Illustrator to act as a template. I used the shapes and pen tool to create a vector version of my image and did not include colors.
Purpose of Dashboard
The purpose of this dashboard is for my best friend to have all the information she could ever need for a successful year of keeping her fish. She has had fish for many years and loves telling me about every part of the process. Unfortunately, a few months ago, an incident occurred and some of her fish died. She was devastated and mad at herself for not being able to do anything. I felt awful that I could not comfort her and the look of defeat on her face. With this dashboard, I am trying to make that incident never happen again.
Design System + Med-fi Wireframe
For the med-fi wireframe, I included a cohesive color scheme and added more details into the boxes aka widgets. I chose these colors because I wanted the viewers to feel they were in the water and “swimming” through the different widgets. The pop of orange and red was chosen not only for hierarchy purposes but to keep the fish idea throughout the dashboard. I was thinking about the famous movie Finding Nemo and how everyone associates an orange fish with Nemo. The red color was to continue the complimentary color scheme with the blue and orange.
UI styles and Iconography
Had two color ideas but chose the orange due to the nice contrast and hierarchy
The UI style elements for this dashboard were outlines on all widgets and had a lighter or darker color than the background. The color difference created a movement for the eyes and easy readability. The iconography I chose was all fish-themed. The notification alert is a bobber, the search icon is a fishing net and the sliding bar on the fish tips is an orange fish.
Dashboard Construction
With my dashboard reaching the final steps I came up with different interactive states and finalized the designs for my assets. To create the assets, I focused on how I would want to interact with the dashboard and the most creative way of showing it. I created a new Adobe Illustrator file to separate and lay out the interactive actions I wanted to include. Having the new file allowed for a well-organized plan and an easy transition into Adobe XD as well.
Widgets + Assets
These were the rough showings of my ideas for how I wanted some assets to move.
The widgets work with the design system by only focusing on fish and how to better care for them. I included some memorable pieces in this dashboard so my best friend can go back through all the fish she has had over the years. The rounded corners remove the appearance of fish cages and create a soft atmosphere for the dashboard.
First to last design for the widgets and assets
Multiple states of the widgets
Read top down and this was my first idea for how I wanted the bobber to move.
This was my second idea for the bobber movement and this was the one I chose.
Finalized assets and their movement on one page.
Every widget would be interactive on my dashboard even the notification bobber would move. The fish album and find new fish would be interactive by a swiping motion. I wanted the fish to look like they were swimming through the widget. The light bulb can click on and off to remind my best friend or viewer if the fish tank is on or off. Graphing the PH is interactive by hovering over the cursor and watching the bars fill up. The time to feed can be tapped and the viewer can watch the food fill up or go down with each click. Search where your fish comes from requires searching for your fish and then tapping until it pops up at the bottom where your fish is from. Once the bobber notification was tapped it would drop down and come back up with a new number. For the widgets live from the tank, and fish tips I ran out of time creating those interactive pieces in XD. The live from tank would be a live video of fish swimming around and you would be able to click to zoom in on the tank. The fish tips would slide up and down by dragging on the fish slider. With the fish tips a bubble effect would appear from the bottom every time the slider was used.
Arrangement
Original on the left and final on the right.
The arrangement from the original to the final hardly changed. I had to switch the positions of the fish album and find the new fish because my professor pointed out it reads better having the fish album first. I wanted all elements to be evenly spaced and if something was going to be larger, something else had to be large too. Having the structure and proper hierarchy is important to me because if I were going to look at the dashboard every day, I would want it to be organized.
Knowledge gained
The knowledge I gained from this project was completely different from what I normally do in my other graphic design classes. I learned how important trial and error is not only with Adobe XD but every design project. Having this experience in Adobe XD showed me once again how broad graphic design is and how I must be comfortable constantly learning new things. With this project, I could tell I wanted to not only overcome challenges but learn from them too.
Interactive Version
