NFT Marketplace App
![NFT Marketplace App](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/65471d09bfc56f4a35b613d8_nft%20app%202000x1480%20cover2.jpg)
Overview
I enrolled in Dribbble's Intro to UI course to begin my journey on user interface design, its processes and Figma.
Brief:
To establish a new visual language for a fictitious client MOON, a new up and coming startup with the goal of revolutionizing the NFT marketplace, a space and platform for artists to sell their original digital art with cryptocurrencies.
Deliverables:
- Create 2 Moodboards
- Create 2 Visual Explorations
- Design 5 hi-fidelity UI screens
- Develop a UI Library
- Create a functional prototype
Target Audience:
The target audience are for future-forward people who embrace, collect and sell NFT's and digital art. They are tech-savvy and understand how to navigate the crypto world as well as for curious bystanders looking to explore this new space.
Disclaimer: All artwork was sourced through Pinterest and OpenSea and is not my own. They are used for the purposes of student work.
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f01be7db9aa282c5a8a6a_Moodboard%201.jpg)
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f01cac3bb2ee66523c52e_Moodboard%202.jpg)
Wireframes
The wireframes were provided for this project so I used this structure along with my own explorations to approach the overall design and flow.
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f01addfc592fb2323fff6_wireframes.jpg)
Visual Exploration
With the moodboards as reference, I began to experiment with different concepts and directions as well as explore and learn different Figma visual effects that I found inspirational such as glassmorphism, neon glow effects, noise, shapes, textures, blurs, transparencies, gradients and drop shadows.
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f02a1d33458e14a1c7d11_concept%2001.jpg)
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f02ad6eae8b8becad0886_concept%2002.jpg)
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f02b8b4817bf2974abb15_concept%2002%20refined.jpg)
UI Library & Design System
As I refined and polished the final direction upon review with my mentor and other students, I began to build a new UI library and design system from the different modules and components.
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f03747db9aa282c5c1123_type%20color%20system%20lores.jpg)
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f03825b5fc501c7c7b10a_components%20modules%20lores.jpg)
Final Design
I went with the minimal concept further refining the neutral gray tones to help accentuate and bring out the artist's digital art. A neon green glow button was chosen to create high contrast and to create a more futuristic sleek looking UI.
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f039b40eee6f7b649f958_wireframes%20final.jpg)
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654f0440fb2a945891d414d0_final%20design%20lores.jpg)
Prototype
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/65596e2bf4d3d4dd564e10da_prototype%20lores.jpg)
Summary
Learning about UI design took me into a deep rabbit hole with all its depth, psychology, and dynamic complexities and the plethora of resources I was taken to online. It feels like a never-ending infinite realm of possibilities and potentials! I feel like I have barely scratched the surface of user interface and my journey has just begun.
I look forward to evolving this ongoing project by further learning interactive prototyping, auto layout, building a scalable design system and all the glorious powers that be of Figma. This course was a great primer to get the juices flowing as I begin my next class in Product Design with Dribbble!
![](https://cdn.prod.website-files.com/6537714ff815caefef1b2392/654c795821a680b8b03617f6_01.jpg)