Hello everyone 👋🏾! My name is Charisse and this work is the culmination of Dribbble’s UI Design course taken in 2023. Throughout the course, I received feedback from my peers, my mentor Natalia Veretenyk and my friends and family. Over the 4 weeks, I was able to gain a better understanding of UI Design and learn the in and outs of the design process using Figma. Though I have used Figma in the past learning additional tips and tricks has assisted me in creating in a more efficient and timely manner.

The Brief

The client for this project is Moon, an up-and-coming startup whose goal is to revolutionize the NFT marketplace. The client specified that they wanted to take a design-first approach and include a deeply curated experience for their users.

The Objective: Establish a visual language for the NFT marketplace app, create a visual aesthetic, and have a design that is scalable using wireframes provided by the client.

The Process: Throughout the process, I explored two distinct visually aesthetic approaches, iterated on the app design, and included different views not included in the wireframe to give a more rounded approach to the app. In addition to this, I was able to scale and documented the visual language in a UI design library with reusable components and modules in Figma.

Moodboards

Moodboard 1: I was inspired by colorful images and overlays with the blur effect. Additionally, I was inspired by the typography used which seemed more geared toward a futuristic style. This style seemed more similar to what other popular NFT marketplaces used.

Moodboard 2: This moodboard was inspired by more bright and light colors in combination with more modern typography. This was a different approach from other NFT marketplaces that I'd come across during my research.

Visual Exploration

In reviewing the competition for NFT digital marketplaces, I observed others' NFT marketplaces often had a futuristic, dark, and sleek UI aesthetic.

My goal was to assist in differentiating Moon from other marketplaces while still keeping the sleek and futuristic feel. In addition to this, I found that the first concept (with a bit of iterating and tweaking) won out. Prior to receiving feedback, I explored more of a modern and editorial approach while also making the image more of the focal point. Inspired by newsworthy apps and a few modern takes on NFT marketplaces. In addition to this, I found myself gravitating towards more rounded and blurred overlay effects that gave way to a more elevated futuristic look.

Locking & Scaling the Design

Once the design exploration was complete, the type and visual styles were added to the design and were also created as components and modules. These components and modules can also be viewed below in the UI Library.

Each wireframe had the applied style, however, I also attempted to style a bit beyond the wireframe. For example, for the Profile screen though they provided the icon for a list view the client did not provide a wireframe for that. So I envisioned and iterated on that idea. Additionally, I reimagined what the Search screen could function and look like, aesthetically speaking. This process also assisted me in locking down the color scheme and made me think more deeply about usability.

UI Library

As mentioned previously, during the process of scaling the design I was also able to develop a UI library. Creating the UI library allows for the process of scaling and designing the various screens whether new or iterating on current ones more efficient process.

For headings, I used Audiowide to give a more futuristic look and included Karla as the body and CTA button copy for more legibility. I included both dark and light colors with a gradient as a background to push a bit more on the futuristic look that I found during my moodboarding and visual exploration.

WARNING: This app was not created for a real app or marketplace, but was made as part of Dribbble's UI Design course final project. All artwork used in the designs was borrowed from real marketplaces and artists. I do not own any of the art that is sampled.

Final Thoughts

Overall this project gave me room to explore and improve my UI design craft as well as improve my skillset with Figma. As a web designer I often work with preset templates and components/modules but never truly understood the way they're designed and implemented when creating certain website design templates and apps. This course gave me a better grasp of design, usability, and accessibility.

View my prototype 😊

Below I've listed some major takeaways and notes that have allowed me to improve my design skills.

UI design

• Working in clear and defined phases gives you and other designers working with you a strong structure and foundation. Beginning with:

  • inspiration/ideation

  • visual exploration

  • locking and scaling

    • Iterating

  • finalizing the design

  • Documenting

• Iterating as much as possible is key. It allows you to continue to think more deeply about the design, the client's goals, and the usability.

• Borrow ideas from your inspiration(s)

• Take breaks and come back to the design/task. Taking space allows you to have a clearer head and a better mindset for the design process and work.

• Get feedback! This is important.

  • For me, I've mostly gotten feedback from family, friends, and design colleagues.

• Know that the process takes time and it's better to not compare with others but to take pride in your own design and reflect on the process as a whole.