Overview

This project was a part of a UI design course offered by Dribbble's Introduction to UI Design. All the students were presented with a brief to develop a UI design system for a fictitious client, Moon, a startup company in the NFT marketplace. The target audience is people embracing and following the world of NFT and digital art who also have a strong sense of visual aesthetics. The process for this project included doing research and developing moodboards for visual inspiration. Explore multiple visual directions based on moodboards focusing on distinctive design styles, imagery, color, typography and offering the overall vision for the look and feel of the UI design. Lock the final visual aesthetics and scale it to multiple screens based on the wireframes. Develop design system that includes typography, color palettes, and components to quickly and efficiently apply to multiple screens to create visuals that are consistent and cohesive. The entire project was designed & developed in Figma and FigJam.

Brief

Below is the detail brief provided by the client.

Process

1. Moodboard

2. Wireframes

3. Visual exploration

4. Final Visual

5. Design System

Moodboard

Developing moodboard is a great way to start the initial design process to get your creative juices flowing and get an idea and sense what type of visuals to explore for inspirations. I have researched and explored various sites, such as Behance, Dribbble and Pinterest, for visual inspirations that focus on the visual aesthetics of NFT and Crypto world. Below is the collection of various design styles and trends that I feel could be a great starting point to create a dynamic design layout for more visual exploration. I have compiled two different visual moodboards—one with a dark theme, edgy and sleek style and the other with a lighter color palettes with clean and minimalistic look.

Wireframes

Since this project is focused on the UI design & visual aesthetics, the wireframes are provided by the client included in the brief.

Visual Exploration

I wanted to experiment and explore different visual aesthetics by developing two distinct visual styles each with its own unique look and feel. One visual style represents the dark theme, edgy and sleek design style, whereas the other one has lighter color palettes with clean and minimalistic look. I decided to use the same imagery and started working with different colors palettes, gradients, design elements (shapes) and typography to create layouts that capture the essence of the NFT and Crypto design trends in a visually appealing, dynamic and engaging way. While developing the design layouts, I applied the UI fundamentals to ensure the design captures the importance of visual hierarchy, composition, colors, contrast and spacing to produce a well-balanced and structured visual layouts. Below are some initial visual explorations for the splash screen and home page.

Final Visual

I decided to go with the dark theme because of the edgy and sleek visual aesthetics that I strongly felt captures the essence of the look and feel of the NFT and Crypto design trends. I have applied the same color palettes, typography and imagery styles to rest of the screens based on the wireframes to ensure there is a consistent and cohesive visual throughout each screen.

Design System | UI Library

Design system is quick and efficient way to populate multiple screens with cohesive typographic and color elements and reusable components. I have developed a design system that included components created for navigation bar menu, CTA buttons, different image cards and styles for typography and color palettes. Below is the preview of my design system and UI library.

Prototype

I have created a prototype by experimenting with different animation styles to make the user journey interactive, simple, and seamless to navigate through multiple screens. Below is a preview screenshot of the prototype. To view the full interactive prototype click here.

Final Thoughts

In this course, I have learned a lot about Figma and its functionality. I have also gained a valuable lesson in the importance of knowing and applying the UI design fundamentals—visual hierarchy, composition, color, contrast, and typography to produce a well-crafted design that is visually appealing, dynamic and engaging. Learned how to develop moodboards for visual inspiration and ideate different concepts to a scalable design. Sharing initial design concepts with my mentor and peers allowed me to receive feedback and implement them which really helped me produce a well-crafted and polished design. Thank you and muchas gracias to Daniel DePaola for his mentorship and Daniele Buffa for teaching me how to use Figma to create a beautiful work of visual art! Cheers!