Aquarium Advisor — UI, UX, and Brand Design
About this Project
In this university web design assignment, I was tasked with designing and prototyping a phone app. The app I created is named Aquarium Advisor, an app intended to educate the general population on aquarium care, guide users toward building a healthy and sustainable aquarium based on what supplies they own, and allow users to easily keep track of their aquariums.
Programs Used
Adobe XD, Photoshop, Illustrator
Design Development - Brainstorm & Workflow
Developing an app was going to be a far more complicated task for me than any of my previous work, so I took on a thorough approach to developing my ideas. I began with brainstorming any ideas that may be important or useful to include, and from there I created a workflow that would show how all of my topics and ideas would connect and work together in the final app design. While the app’s design would inevitably evolve over time, this workflow demonstrated the app’s most basic functions.
Design Development - Wireframe
I developed wireframes based off of the workflow I created. While assembling the wireframe, some screens and interactions changed from the workflow, and other functions were added. This wireframe was created in Adobe XD so that when completed, it could be easily developed into the final product.
Design Development - Style Guide
After wireframing my whole app design, I took the time to develop a style guide. Creating a color palette and typographic system sped up the process of fletching out the app’s wireframes into a completed project. Dictating the rules of other elements of the app such as imagery and button styles early on also helped create a cohesive final product.
Design Development - App Icon
Another critical part of creating an app with its own, unique identity was designing both an application icon and a logo. I began with sketches of the most iconic aquarium fish, a goldfish. From there I came up with other elements, such as a hand to symbolize human interaction with fish as well as the fishbowl shape that the arm creates to reinforce that the topic of the app is aquariums.
Design Development - Icon & Logo
From my initial icon sketches, I created a finished app icon and logo in Illustrator. The colors used in this branding also came directly from the app’s style guide. While the app icon remained similar to my initial sketches, the Aquarium Advisor logo did not. Since the name of the app is included in the logo, I removed repetitive elements such as the fishbowl hand in order to prevent cluttering the logo with unnecessary design elements.
