Greetings Dribbble Folks! 🙌

I'm thrilled to present my project crafted for the Figma Fundamentals course. Hope you'll find it engaging!

The Objective

Moon aimed to outshine its rivals by prioritizing design and offering a meticulously crafted user experience. This was no easy feat, considering the heightened competition in the NFT marketplace over time.

I agreed to help Moon with the following:

1. Lock a visual aesthetic

2. Scale the design on multiple screens

3. Build a UI library

4. Create a functional prototype

The Audience

Moon catered to a progressive tech-savvy audience who recognized the vast potential of digital art. Typically, these individuals are embedded in the tech industry, are proponents of the digital currency movement, possess crypto holdings, and have an artistic inclination. Their objectives range from crafting to purchasing and even selling NFTs.

The Solution

A visually captivating and intuitive design that sets the tone for Moon's application and its upcoming brand identity.

My approach to lock down Moon's final design and prototype was as follows:

1. Moodboard

Initially, I embarked on a visual exploration to derive inspiration for the application's design ethos. I curated two moodboards to encapsulate the design elements that resonated with my vision.

2. Visual Exploration

Two distinct design aesthetics were explored to assess diverse possibilities.

The representations of both visual trajectories can be seen in the subsequent screens 👇.

3. Scale the design

Having settled on the "Light & Stylish" visual theme for Moon's application, the next phase was to expand this design across various interfaces. Moon furnished the wireframes, guiding the extension of this breezy and elegant aesthetic to different screens.

Using the above wireframes I scaled the design I created on the splash screen and home page to the final design below.

Final Design

4. Documenting the UI Library

As I solidified the design, I cataloged the typography, color palette, grid structure, margins, components, and modules utilized, ensuring Moon can effortlessly expand upon the design in the future.

Here's the UI Library I employed:

Components

Modules

Finalise Design

Through this case study, I garnered insights into transforming a design concept into a functional prototype. It was fascinating to observe how minor tweaks could dramatically alter the essence of a design. The most demanding phase of my design journey was ensuring scalability and maintaining uniformity across various screens — this applied not only to the color palette but also to typography. This study provided a valuable experience in evolving from a mere idea to a polished design.