High-Fidelity Prototype
Project Brief
This project built off the low-fidelity wireframes. Colors, text systems, images, and specific information was added to create the resulting high-fidelity wireframes. The aesthetic came from mood boards that reflected the environments in which I saw this app being used. Once the wireframes were complete, the entire app was prototyped using Invision.
Mood Board
For my mood board, I researched different images that reflected how I saw my app being used, including the people and environments. This resulted in my color scheme and tone of my high-fidelity wireframes.
Design Systems
Design systems are heavily relied on in user-interface design. The first system I created were my color styles. I used four colors and two tints and two shades for each color. I also included a neutral color scheme with a cool starting black point. For my text styles, I used one font, SF Display Pro. Within the font family, I used the medium and light weights, while incorporating the heavy weight for one aspect. If there were different alignments or colors, I made a style for that as well. Lastly, symbols played a large role in the design process. Areas I had to cover included: calls to action/buttons, icons, modals, bottom nav bars, snackbars, sliders, music players, and text fields.
Final Product
The low-fidelity wireframes and my design systems came together to make my final high-fidelity wireframes. I had to consider my color use throughout the app especially as I was using a larger color scheme. I believe I was able to create a cohesive end product that followed a consistent pattern and overall communicates the youthful, party-like tone of my value proposition.
Unique Flow
Key Screens