This work is the result of a Dribble UI Design course in 2022. Thanks for the great instruction from Daniele Buffa and excellent mentorship and feedback from Stefano De Rosa throughout the course. I learned a lot about UI Design process and many new tips and tricks for Figma along the way.

The Brief

The client for this project is Moon, an up-and-coming startup with the goal of revolutionizing the NFT marketplace business with a design-first approach and a deeply curated experience for their users. The objective was to establish a visual language for the NFT marketplace app, create a visual aesthetic, and scale the design - all based on the wireframes and the flow provided by the client.

Throughout the process, I explored aesthetic approaches, explored and iterated on the app design, and then scaled it and documented the visual language in a design library with re-usable components in Figma.

The challenge for this work was creating a design for an audience which is tech-savvy and values good design - they possess a strong sense for visual and art, and Moon wanted to provide them with a beautiful app experience which also presents the digital artwork as the central focus.

Moodboard & Visual Exploration

In a competitive review, I observed that other NFT marketplaces were often applying a futuristic, sleek, and dark UI design look and feel.

My goal was to differentiate Moon from the rest, so I explored a contemporary art gallery vibe - a place where you can discover and explore high quality artistic work, while also providing an organic, approachable, and comfortable feel. These visuals include rounded edges on elements, as well as a light background color and dark type.

Color & Type Styles

A light and simple color palette was selected in order to allow the digital artwork be the central focus for users. Vollkorn was used for headers and Nunito was used for body copy and CTAs.

Scaling the visual language

Once a design exploration was selected and cleaned up, the type and visual styles were applied to a design library in Figma and applied to other components and screens.

Each variation of art cards aimed to bring the brand identify to life while maintaining a consistent visual language, with each card displaying the art in a framed round edge to give it a welcoming look and feel, while also promoting an element of curiosity.

Each card was also given a lightly elevated feel with a drop shadow with deep blur and low opacity, which gave each piece of artwork a bit more interaction affordance and creates a contemporary feel when interacting with the app.

A bit more color and texture was added to the overall layout by applying a monochromatic color scheme to the tertiary button.

UI Pattern Library

While scaling the design, a pattern library was also developed. Each component and module was created using consistent styles and patterns, and then applied to each screen for a streamlined design system in Figma.

Figma Link: Moon Design Library & Components

Final Design

Introducing Moon, the new NFT marketplace with a UI design that provides users a place to explore and discover new and innovative NFTs.

This app was not created for a real app or marketplace and was made as part of a UI Design course. All the artwork used in the designs was borrowed from real marketplaces. I do not own any of the art that is sampled.

Lessons Learned

Overall this project gave me room to explore and improve my UI design craft as well as improve my skillset with Figma. Some take-aways and notes from this project.

UI design

• It's helpful to work in clearly defined phases to give yourself a structure

  • inspiration

  • exploration

  • lock and scale

  • finalize and document

• Take time to explore as much as possible. Iterate, walk away, iterate more…

• Steal (borrow) ideas from your inspirations

• Check yourself throughout the process. It’s helpful to take pause and make sure the alignment, spacing, consistency are all good.

• Get feedback early (earlier than you think) to get input and ideas for improvement, this course correction can save a ton of work later on.

• Save energy to finish the race - the final steps for cleaning up and creating a consistent visual language are hugely important for delivering a quality design. This is time-consuming and takes work.

• I improved my chops by adding texture and elevation to designs using masking, gradients, borders, and drop shadows

• Spotify wasn’t built in a day. The process takes time - plan accordingly.

Figma

• Autolayout - If applied too early it can mess with spacing when creating components or layouts down the road. Consider the overall context when using Autolayout.

• Although I'd been using some already, I picked up some new keyboard shortcuts speed things up. Just need to put in a little effort to make them a habit.

• Mobile preview using the figma app is awesome to be able to see how the design might look within context of the device. I used this a lot to review my work.