NFT 3D ART GALLERY

Crafting an immersive experience Virtual NFT Gallery

PROJECT BACKGROUND

The NFT 3D Art Gallery, designed and developed by myself, in collaboration with London Metropolitan University to support NFT's Art Exhibition Event, this is an innovative virtual space that allows users to explore my NFT artworks in an immersive 3D environment. Featured at Summershow Event at London Metropolitan University and accessible via web browsers, the gallery offers intuitive navigation using both mouse and touch-screen controls, ensuring a seamless and interactive user experience.

This project merges cutting-edge digital art with advanced web technologies. The gallery sets a new standard for virtual art exhibitions.

Role

UX/UI Designer and Digital Artist

Tools

Timeline

10 Weeks

Process

Research , Define, Ideate, Design-Development, Test

👋 3D NFT ART GALLERY

PROJECT OVERVIEW

The NFT 3D Art Gallery is an immersive digital platform that showcases NFT artworks within a virtual 3D environment.

Users can navigate the gallery using both mouse and touch-screen controls, providing an interactive and engaging experience.

PROBLEM

Traditional art galleries limit access to physical locations, restricting the audience and engagement opportunities for digital artists and their work.

SOLUTION

The NFT 3D Art Gallery provides an accessible, immersive online platform where users can explore and interact with NFT artworks via mouse and touch-screen navigation, breaking geographical barriers and enhancing user engagement.

GOALS

The goal was To create a seamless, interactive virtual gallery experience, to showcase digital art in an innovative 3D environment. Also to expand the reach and accessibility of NFT artworks to a global audience.

RESEARCH

KICKOFF

To gather insights into user preferences and expectations for the NFT 3D Art Gallery, I conducted user interviews through various outreach methods with 13 people aged betwwen 20-50 yaers old. These interviews helped identify key user needs, such as ease of navigation, visual appeal, and interactive features.

INSIGHT

Interview participants provided valuable insights, guiding the project direction. Key findings included: 55.1% of users prioritized realistic 3D visual environments, 24.4% wanted both mouse and touch-screen movement controls, and 20.5% emphasized the need for responsive design across different devices. These preferences shaped the development of the NFT 3D Art Gallery, ensuring it met user expectations for an engaging and accessible virtual experience.

DEFINE

USER PERSONA

During the design phase, I observed user frustrations and created a user persona and empathy map to address their needs. This helped identify key user characteristics, understanding their pain points ensured the NFT 3D Art Gallery met user expectations and enhanced their overall experience.

EMPATHY MAPPING

Creating the empathy map helped me in understanding user pain points, gain and desires, ensuring the design solutions were aligned with their expectations and enhancing overall user satisfaction with this 3D virtual gallery project.

IDEATION

SCENARIOS

As an art enthusiast I want to explore a variety of NFT artworks in a realistic 3D environment from home.

As a tech-savvy user, I want to navigate the gallery seamlessly using both mouse and touch-screen controls.

As a mobile user, I want the gallery to be responsive on my device, providing an optimal viewing experience whether on my phone or tablet.

USER FLOW

Users begin their journey on outlining the main steps a user takes to navigate and interact with the NFT 3D Art Gallery, incorporating different navigation options based on the device type.

INFORMATION ARCHITECTURE

This sitemap involves organising the 3D art gallery website to showcase NFT artworks in a single-page format. The main goal is to ensure users can effortlessly navigate and interact with the gallery using intuitive mouse controls within the 3D environment.

DESIGN

WIREFRAMES

The wireframes for the NFT 3D Art Gallery project outline the layout and functionality of the home page, gallery 3d environment navigation, artwork details, and interaction features. They focus on a clean, intuitive interface that supports both mouse and touch screen controls, ensuring seamless user experience across devices.

LOW-FIDELITY PROTOTYPE

In the initial phase of the NFT 3D Art Gallery project, low-fidelity prototypes were created to visualize the basic structure and interactions of the gallery. These early sketches and wireframes, depicted in the graphic on the right, helped identify usability issues and gather user feedback. This process focused on layout, navigation, and key features, allowing for quick iterations and refinements before moving on to more detailed designs and development stages.

DESIGN PROCESS

VISUAL DESIGN PROCESS

The visual design process for the NFT 3D Art Gallery involved selecting a cohesive color palette and designing custom iconography. Tools such as Cinema 4D and Blender were used for 3D modeling and texture mapping of the gallery environment. Development was carried out using Three.js for 3D rendering, integrated with HTML, CSS, and JavaScript within Dreamweaver. This combination ensured a visually appealing, interactive, and responsive user experience.

UI INSPIRATION

The UI inspiration for this project draws from the aesthetic of wood floors and open-roof exhibition architecture. This design style is complemented by strategic lighting, creating a warm and inviting atmosphere that highlights the art. The combination of these elements ensures a sophisticated and immersive gallery experience.

STYLE GUIDE

I established a style guide that aligns with the aesthetic of wood floors and open-roof exhibition spaces. The color palette reflects warm, natural tones, while the iconography maintains a clean and modern feel. This cohesive style guide ensures that every element of the gallery contributes to a seamless and visually appealing user experience.

COLOUR PALETTE

Principal Colours

Peach

#FFCEA8

Dark Grey

#262626

Ivory

#F7F0DE

Brown

#45413F

TYPOGRAPHY & ICONOGRAPHY

Font Family | Mona Sans Bold

SKETCHES

Crafting The Gallery in Cinema 4D:

The rationale behind choosing 3D design implementation in Cinema 4D for this project, despite its challenging nature, lies in its unparalleled ability to enhance visual realism.

Texture Mapping in Blender:

The rationale behind choosing 3D design implementation in Cinema 4D for this project, despite its challenging nature, lies in its unparalleled ability to enhance visual realism.

Coding in Dreamweaver:

Coding the page in Dreamweaver involved using HTML, CSS, and JavaScript, integrating Three.js for 3D model display. This included developing a welcome page, start button, adding graphics and user manual with icons, and coding for mouse navigation controls.

Editing The Music in Audition:

HIGH FIDELITY PROTOTYPE

Creating the high fidelity prototype for our 3D art gallery was a meticulous process of translating concept into interactive reality. I meticulously designed each detail of the virtual environment to ensure a seamless and immersive experience for users exploring NFT artworks. Integrating advanced functionalities like mouse-controlled camera navigation within the 3D scene allowed me to simulate a realistic gallery visit online. This stage marked a critical milestone where my vision transformed into a tangible digital space, ready for user testing and refinement.

TEST

USER TESTING

User testing proved invaluable in refining our 3D art gallery experience. Observing how users interacted with the prototype provided deep insights into navigation patterns, usability concerns, and overall engagement levels. I meticulously analysed user feedback to fine-tune interaction design elements, ensuring intuitive exploration of artworks and optimising performance across various devices. This iterative process not only validated our design decisions but also highlighted areas for improvement, guiding us towards a more user-centric final product.

A Demonstration of The 3D Art Gallery Experience

This recorded video shows the user's virtual visit to the NFT 3D Art Gallery that showcases artworks in an interactive, 3D environment.

REFLECTION

TAKEAWAYS & NEXT STEPS

Reflecting on my journey, developing the 3D art gallery prototype illuminated key lessons and next steps. The iterative design process reinforced the importance of user-centered design principles and responsive performance in virtual environments. Moving forward, I plan to enhance accessibility features and expand interactive elements to further enrich the user experience. Collaborating closely with other artists and incorporating ongoing user feedback will continue to drive my efforts as I strive to deliver a captivating and accessible virtual gallery experience.

PROJECT BACKGROUND

Role

Tools

Timeline

Process

PROJECT OVERVIEW

PROBLEM

SOLUTION

GOALS

RESEARCH

KICKOFF

INSIGHT

DEFINE

USER PERSONA

EMPATHY MAPPING

IDEATION

SCENARIOS

USER FLOW

INFORMATION ARCHITECTURE

DESIGN

WIREFRAMES

LOW-FIDELITY PROTOTYPE

DESIGN PROCESS

VISUAL DESIGN PROCESS

UI INSPIRATION

STYLE GUIDE

Crafting The Gallery in Cinema 4D:

Texture Mapping in Blender:

Coding in Dreamweaver:

Editing The Music in Audition:

HIGH FIDELITY PROTOTYPE

TEST

USER TESTING

A Demonstration of The 3D Art Gallery Experience

REFLECTION

TAKEAWAYS & NEXT STEPS

Other Projects

SAMSUNG DESKTOP APP

AR ART GALLERY