NFT Marketplace App
Hi there! 👋🏻
I'm excited to share my latest creation - a sleek and user-friendly UI design for a mobile application. It's been a fun challenge to practice my newfound passion for design, and I would love to hear your thoughts about the result. Thanks for taking the time to check out my work!
🚀 Mission
I took the challenge of defining the visual language of a new NFT marketplace iOS app called Planet, which aims to revolutionize the NFT marketplace with a design-first approach. The app's target audience would be tech-savvy people interested in the world of NFT and digital art. My objective was to create a high-fidelity UI design for the app, build a UI library, and create a functional Figma prototype representing the user flow.
💡Ideation
As the first step of the design process, I collected ideas and created two mood boards with different ideas. The mood boards visually explored the design's different directions, ranging from bold, dynamic and colourful to minimalistic, soft and pastel. During this step, I considered different colour palettes, typography options, and visual effects to see which one better expresses Planet's brand and target audience. After reviewing current NFT marketplace apps, I selected the soft and pastel concept, as it would stand out from the dark-theme-dominated apps on the market.
🎨 Style
After deciding on a concept, I experimented with various ideas until settling on a visual language with a contemporary, minimalistic style with a futuristic twist. I aimed to produce a design that resonates with tech-savvy and artistic users who value innovative and cutting-edge design.
I used a wireframe with five screens as a starting point. The wireframe starts with a splash screen introducing the app and the brand. Following that, the home screen displays the newest and highlighted NFTs and trending artists, while the search screen lets users look for NFTs using artists or keywords. Next, users can view their NFTs on the profile screen, and the NFT picture screen offers a view of the artwork, along with details about the creator and the background of the NFT. I made minor modifications to the screens to reflect the brand's main messages.
I used the Syncopate font, which creates clean and modern typography. With clean lines and sans-serif letters, this typeface is simple and eye-catching. Furthermore, this typeface is easy to read on small displays.
Pastels influenced the colour scheme. The primary colours are yellow and pink, with warm black and white accents. These colours are powerful and vibrant yet remain warm and soothing pastels.
With clean lines and a sense of space that allows the art to speak for itself, the aesthetic elements are modest and place the focus on the NFT images. Smooth, rounded corners, a soft glow effect, and a glass overlay effect convey modern feelings while guiding the user's attention through the screen. In addition, the app's background is filled with a soft colour gradient with a mild noise effect. The tech-savvy digital art-loving audience will not overlook such little details.
I wanted to build a simple yet easily identifiable logo that expresses a futuristic, otherworldly aesthetic for the branding. I began by writing the app's name, Planet, in the Syncopate font. Then I surrounded the "P" with a circle representing a planet orbiting a star. I also made a shorter form that only used the modified "P" letter. As a result, even in small sizes or when seen briefly on a phone screen, the icon-only version of the logo is easily recognisable. As a finishing touch, I applied a light effect to the logo to give it a futuristic appearance.
📱 UI Design
Putting everything together to create the UI design - each screen was designed with Planet's target audience in mind, creating a curated experience that was visually appealing and easy to navigate. The result is a clean structure with astounding elements.
Good colour contrast ensures readability and highlights the call-to-action elements on the screen.
At the heart of this UI design lies animation. Animation enhances user experience and makes the users feel more engaged and connected to the interface. So I created an animated grid for the images of the splash and search screens. The photos run in and out of the screen, which creates a beautiful and dynamic effect, creating a sense of delight and surprise to keep users interested and coming back for more.
🎥 Prototype
To bring the design to life, I created a functional Figma prototype demonstrating the app's functionality and user flow to browse and purchase NFTs seamlessly. The prototype shows the app's basic functionalities:
switching between the different screens,
scrolling through NFTs
viewing an NFT,
following/unfollowing artists,
liking NFTs, and
changing the grid view on the profile screen.
🏆 Summary
I enjoyed completing this exercise; it was a great learning opportunity. First, through research, I gained insights into the world of the NFT marketplace and understood the needs and preferences of the target audience. Then I established the visual language of the app, which centred around the brand Planet. The visual language included designing a sleek and futuristic logo and selecting typography, colours, and components that reflected the app's innovative and art-oriented focus. I then created a high-fidelity design, using the established visual language to craft each screen, from the splash screen to the NFT image screen. At the same time, I built a UI library containing all the elements of the design. Finally, I created a fully functional Figma prototype to display the design and test the user interactions with the app.
----------------------------------------------------------------------------------------------------👉🏻 Let's connect! 👈🏻
If you enjoyed my work, I'd love to connect with you and share more of my projects. You can find me on social media or check out my other projects on my website.
