UI Design: Planet NFT Marketplace
Overview: Welcome to Planet!
Project Background
I created this project as part of Dribbble’s four-week UI course in the Fall of 2022. My “client” for the project was Planet, a fictional startup with the goal of revolutionizing the digital art world with a new NFT Marketplace app. In my role as UI designer, I was provided with a design brief and with wireframes, and from there the visual design was up to me.
The Challenge
The users of this app are people who are embracing the world of NFTs and digital art - people with a strong sense of visual aesthetics. These users are looking for beauty and aesthetics not only in the art they buy and create, but also in the app experience itself. My challenge therefore was to appeal to this audience by creating a visual language that was beautiful, inviting, and fresh. I had three weeks to research, create a visual aesthetic, scale my design, and build a working prototype. At the end of these three weeks I would need to deliver a set of high-fidelity mockups, a UI library with information on type, color, layout and components, and a working high-fidelity prototype.
The Solution
The Planet app I designed is meant to feel familiar enough to fit within the general landscape of NFT marketplace designs, but with a fresh and unique style that doesn’t look copied and pasted. I created a visual aesthetic that feels somewhat futuristic and cosmic, but with a soft edge meant to feel inviting to users. The style is airy and dreamy, relying heavily on soft gradients, blurs, and transparency, to let users feel like the can joyfully breeze through this vast world of digital art.
The Process, Stage One: Research!
A Brief Competitive Analysis
I began my research by taking a very quick look at what existing NFT marketplaces actually look like. There wasn’t much to distinguish these designs from each other - they were mainly white screens with black text, and long scrolls of rectangular cards for artwork. Most of the visual style came from the NFT art, not the app or website design itself. My takeaways from this research were that:
I’m working with something of a blank slate. Users will not have much of an expectation of how a “standard” NFT marketplace needs to be styled.
There’s a large opening in the app market for an NFT marketplace that brings its own aesthetics to give users an enjoyable experience.
If I create a beautiful and unique look, it will stand out against the rest in a budding arena.
Existing real NFT marketplaces
Building Moodboards
I next looked to other design platforms to begin my own exploration. I searched Dribbble, Pinterest and Behance to gather images that inspired me and sparked new ideas. There were two different directions that I wanted to experiment with, so I organized my collection of images to create two moodboards:
Moodboard 1
The first direction I was interested in exploring was bold, edgy and exciting, with lots of neon colors, contrast, and hard edges. I leaned towards reference images that used neon green, often with a bright red accent. I wanted this style to show energy and movement.
Moodboard 2
I created my second moodboard in a very different direction - I opted to explore designs with soft edges, gradients and transparent elements. I was drawn particularly to images with a range of blues, purples and pinks in their color schemes. I wanted to try working with an airy, atmospheric look that would feel light and breathy.
Stage 2: Beginning the Design
Wireframes
Wireframes of five main screens had been provided for me, and I planned to stick close to the structure provided. Because the splash screen of these wireframes was the most blank canvas, I would start my visual exploration there, and eventually apply a style to the full set of wireframes.
Visual Explorations
With my two moodboards as inspiration, I created color palates and selected a handful of typefaces to begin experimenting with. Working with the splash screen, I ideated extensively with different layouts of elements, treatments of images, background colors, and on and on and on. I used Figma as my playground and ran wild! I generated tons of variations of each idea, working my way closer and closer to a look that I felt I’d want to stick with.
Action shot! Ideating in Figma.
To explore my first direction, “bold and edgy,” I worked mainly with dark backgrounds behind scattered NFT images, and used an eye-catching neon green for my call-to-action and my text. I found that with this bright color and high contrast look, the more I simplified and de-cluttered the design in general, the more successful it was. In my earliest versions I experimented with shapes and textures in the background, neon green glows, gradients, drop shadows, busy clusters of NFT images, etc etc etc etc... but by the end of my experimentation, I had stripped away most of this noise in favor of a much more streamlined look that wouldn’t overwhelm.
Direction 1 ideation
The final result... Concept 01: Bold & Edgy
Experimentation with my second design direction, “soft, sheer and cosmic,” proved much more challenging for me! I knew that I wanted to use a lot of transparency, which meant I needed to layer transparent elements to show off their glassy look without letting the layers feel muddled. I began my experimentation by putting my headline text on a transparent card, with images of NFTs floating by behind it. No matter how I laid it out, this felt like I was crowding the text and losing the feeling of airiness that I wanted. I had a breakthrough moment when a design mentor suggested that the transparency could be a part of the NFT image as opposed to the headline text. This allowed me to give my headline text the breathing room it needed, and let my spacey background feel more open. The challenge then became a technical one of tweaking the look of the NFT image cards - they needed to be transparent enough to float on top of each other but opaque enough for the image at the center to be visible. It took many rounds of adjusting but I think I eventually arrived at a good balance!
Direction 2 ideation
And the result... Concept 02: Soft, Sheer & Cosmic
Having developed these two very different concepts, I faced the difficult task of choosing which one I would use for the Planet NFT app. I was torn! I polled a handful of friends and classmates, and was struck most by a classmate’s suggestion that if the second direction had been a bigger challenge for me, why not keep at it? I couldn’t help but agree - I was more excited about sticking with the direction that would challenge me to push myself further.
Stage 3: Scaling the Design
Scaling the design to multiple screens in Figma
Having chosen a direction, I began applying this style to the rest of my wireframes. I had focused my visual ideation on a splash screen with a dark background, but I wanted the rest of the screens to be in light mode. To unify the look, I gave my light background some subtle grainy purple areas, which I tweaked many times to make sure that the text on top of them would still be readable. I carried the blue-purple gradient from my splash page CTA through the rest of the screens, adjusting it slightly to look good against a light background, and changing the CTA text to have a higher contrast ratio for readability. Contrast and accessibility was also a major factor in designing cards with text that would lay on top of NFT images on my home screen and NFT detail screen. I wanted to continue using semi-transparent elements wherever possible, but I was careful to keep a balance for readability.
UI Library
While working through the process of applying my visual style to each screen, I also began building a UI library. Again, keeping readability and accessibility in mind, I kept my typography as legible as possible. With so many gradients and blurs and transparent overlays, I knew that I needed to keep my type simple. I stuck with my original choice of Poppins for all of my text elements. I also kept my color palette as limited as I could, and went through several rounds of edits to my blue-purple gradient until I arrived at a single look that I was happy with on every internal screen.
To make my design scalable, I began creating components that I could re-use throughout the different screens. I made components for elements like my navigation bar and CTA button that would be used in many places, as well as modules of more complex elements like NFT cards and grids of artworks. Although the scope of this project only included five main screens, these components would make it possible to continue scaling the design to more screens in the future.
Stage 4: Prototyping and Finalizing
When I was happy with the look of my screens, I set out to bring them to life with a working prototype. I built the main interactions of this user flow focusing on simple, clean movements that would match the smooth feel of the visual design.
With a fairly simple flow of only five main screens, I wanted to focus on small details that would make the whole thing feel real. I built microinteractions to give a user immediate feedback, like seeing a button pressed down, or seeing the "like" heart animate when clicked.
Writing about this work in a step-by-step case study can make it seem like a linear process, but of course it’s anything but linear. Seeing how each screen looked as part of a prototype meant noticing areas that weren’t working together visually, or elements that were becoming muddled when they moved. So while I worked on the prototype, I continually cycled back through my process to make more edits and keep improving the overall style. For example, I realized that the icons and text in my nav bar weren’t readable enough over a moving background. I raised the opacity of the inactive icons, added a fill color to accent the active icons, increased the size of the text labels, and slightly upped the opacity of the background color - all edits that made the prototype more legible, and that I think improved the look of the design as well.
You can watch a recording of my working prototype below, or you can click here to try it yourself on Figma!
High-fidelity prototype of the Planet NFT Marketplace App
Conclusions and Takeaways
Having come to the end of this project, I’m happy with the shape that my design has taken, and I’m glad that I decided to challenge myself and push my technical skills. Throughout the design process I tried to keep in mind the why of what I was doing - what a particular look would communicate to the user. I wanted to create a visual experience that would feel spacious and light, and show a user the vast open world of digital art that they could explore. I think that the visual language I created gave the design the airy, inviting look that I was aiming for.
With more time to work on this project, I’d love to continue adding to the prototype to bring it to life even more. I’d be very interested to build out a user flow to place a bid on an artwork, and I’d love to experiment with an animation to demonstrate the search function.
Thanks for taking a look at my work! I’d love to know what you think - feel free to leave questions, comments and any other feedback.
Acknowledgements: many thanks to the the artists who made their images available on Pexels.com:
