一米粒 Gallery
Artist Gallery Website
In Short
This website was created for an independent multimedia artist (@_grainofrice on Instagram). I handled the entire process, from design to development. As my first personal project involving a real client, it came with the added responsibility of delivering a satisfying final product.
Throughout the project, I collaborated closely with the artist to develop a design that truly reflected her artistic vision. It also served as a valuable learning experience, allowing me to deepen my understanding of HTML and CSS, with minimal use of JavaScript.
Product:
Product:
Web Design
Web Design
Year:
Year:
2025
2025
Role:
Role:
UX/UI Designer, End-to-end developer
UX/UI Designer, End-to-end developer
Skills:
Skills:
Design, Coding, Client Communication, Time management, HTML/CSS, JavaScript
Design, Coding, Client Communication, Time management, HTML/CSS, JavaScript
Collaborators:
Collaborators:
@_grainofrice
@_grainofrice
Key screens
The
Problem
Multimedia artists often struggle to present their work online in a way that captures the depth, range, and personality of their practice. Generic portfolio templates can be restrictive, visually inconsistent, or unable to showcase different mediums cohesively. My client needed a custom digital space that not only reflected their artistic identity but also made it easy for visitors to explore diverse works—video, installations, photography, sound, and more—without feeling overwhelmed or lost in the navigation.
Solution
Overview
To address this, I designed and developed a fully custom artist gallery website tailored to the client’s creative style and multi-disciplinary body of work. The goal was to create a visually immersive yet user-friendly experience that allowed the art to take center stage. Through a bespoke layout system, intuitive navigation, and thoughtful interaction design, the site supports multiple content types while maintaining a cohesive and accessible user journey.
The
Research
To prepare for this project, I first explored HTML and CSS tutorials online, building on my previous experience with Framer to better understand how websites are structured. I then researched the client’s artistic style to identify key visual elements before our first meeting. During the call, we discussed her content needs, aesthetic preferences, and the desire for a minimalist design with subtle personal touches, such as a custom eye-shaped cursor. I asked her to create a Pinterest mood board to guide the visual direction, while I started sketching layout ideas and mapping out the site’s structure.
Key
Insights
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
The
Challenge
How might we create a minimalistic website that reflects the artist’s visual style and personality?
The
Ideation Process
During the ideation phase, I developed initial layout sketches based on the client’s request for a minimalistic design with subtle references to her Chinese heritage and artistic style. While some ideas included complex animations I didn’t yet know how to code, I chose not to limit my creativity and trusted I could learn the technical side later. After receiving her curated mood board, I refined my sketches to match her eerie, grotesque aesthetic, introducing elements like hair and a rabbit-mask logo inspired by her zodiac sign. In our second meeting, she provided valuable feedback, asking for a simple, grid-based layout with minimal text and suggesting changes that shifted the site’s purpose from a portfolio to an artist gallery. I responded by reworking my designs accordingly, embracing the change as an opportunity to simplify and focus on functionality while still expressing her unique identity.
The
Low Fidelity Prototype
In the wireframing phase, I translated my sketches into a functional low-fidelity layout that aligned with both my vision and the client’s preferences. The design was intentionally minimal, with subtle personal touches on the landing page. After presenting the wireframe, the client provided detailed feedback on typography, background tones, and the integration of cultural elements like Chinese characters and cherry blossoms. I responded by iterating on the design: sketching multiple hair layouts, exploring different background colours, and adjusting the navigation bar style. Through open communication and feedback sessions, we refined the homepage together, arriving at a layout that felt both simple and expressive of her artistic identity. This iterative process taught me how valuable client input is in shaping a design that truly reflects their voice.
The
Solution
The final website is a custom-built gallery experience that highlights the client’s multimedia portfolio through clean design, smooth transitions, and carefully considered visual hierarchy. Each artwork category is structured for clarity, allowing users to browse across mediums without friction. The design incorporates generous white space, minimal interface elements, and dynamic layouts that adapt to different types of artwork. On the development side, the site is hand-coded to ensure total design flexibility, fast performance, and seamless responsiveness across screens. Content is organized in a way that makes updates straightforward, giving the artist the freedom to expand the gallery as their body of work grows.
Reflection
This project has been a valuable learning experience, both technically and creatively. From the start, strong communication with the client helped guide the design process, making collaboration smooth and productive. Most of the challenges I faced were during development, especially as someone new to coding, but they taught me how to troubleshoot issues effectively and improve my problem-solving skills. I’m proud of creating a website that reflects the artist's unique style, and even more so of how much I’ve grown in HTML, CSS, and client collaboration. While I faced setbacks, like removing some planned features, I’m glad I didn’t limit my design ideas early on. This experience showed me the balance between creative ambition and realistic execution, and it gave me more confidence in my ability to take on similar projects in the future.
I learned…
how to structure and style a responsive website using HTML and CSS, along with basic JavaScript to create interactive components. I discovered the importance of using semantic HTML elements and building flexible layouts, as well as how to troubleshoot bugs effectively using DevTools and online resources. I also gained insight into the value of clear client communication and how it can shape design direction. Most importantly, I learned that it's okay to simplify when implementation becomes overly complex, and to trust the design process without letting technical limitations restrict creativity in the early stages.
[NEXT PROJECT]
一米粒 Gallery
Artist Gallery Website
In Short
This website was created for an independent multimedia artist (@_grainofrice on Instagram). I handled the entire process, from design to development. As my first personal project involving a real client, it came with the added responsibility of delivering a satisfying final product.
Throughout the project, I collaborated closely with the artist to develop a design that truly reflected her artistic vision. It also served as a valuable learning experience, allowing me to deepen my understanding of HTML and CSS, with minimal use of JavaScript.
Product:
Web Design
Year:
2025
Role:
UX/UI Designer, End-to-end developer
Skills:
Design, Coding, Client Communication, Time management, HTML/CSS, JavaScript
Collaborators:
@_grainofrice
Key screens
The
Problem
Multimedia artists often struggle to present their work online in a way that captures the depth, range, and personality of their practice. Generic portfolio templates can be restrictive, visually inconsistent, or unable to showcase different mediums cohesively. My client needed a custom digital space that not only reflected their artistic identity but also made it easy for visitors to explore diverse works—video, installations, photography, sound, and more—without feeling overwhelmed or lost in the navigation.
Solution
Overview
To address this, I designed and developed a fully custom artist gallery website tailored to the client’s creative style and multi-disciplinary body of work. The goal was to create a visually immersive yet user-friendly experience that allowed the art to take center stage. Through a bespoke layout system, intuitive navigation, and thoughtful interaction design, the site supports multiple content types while maintaining a cohesive and accessible user journey.
The
Research
To prepare for this project, I first explored HTML and CSS tutorials online, building on my previous experience with Framer to better understand how websites are structured. I then researched the client’s artistic style to identify key visual elements before our first meeting. During the call, we discussed her content needs, aesthetic preferences, and the desire for a minimalist design with subtle personal touches, such as a custom eye-shaped cursor. I asked her to create a Pinterest mood board to guide the visual direction, while I started sketching layout ideas and mapping out the site’s structure.
Key
Insights
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
No coding needed. Instant visual feedback.
Select, edit, rotate, resize any layer even if it's projected in 3D space.
The
Challenge
How might we create a minimalistic website that reflects the artist’s visual style and personality?
The
Ideation Process
During the ideation phase, I developed initial layout sketches based on the client’s request for a minimalistic design with subtle references to her Chinese heritage and artistic style. While some ideas included complex animations I didn’t yet know how to code, I chose not to limit my creativity and trusted I could learn the technical side later. After receiving her curated mood board, I refined my sketches to match her eerie, grotesque aesthetic, introducing elements like hair and a rabbit-mask logo inspired by her zodiac sign. In our second meeting, she provided valuable feedback, asking for a simple, grid-based layout with minimal text and suggesting changes that shifted the site’s purpose from a portfolio to an artist gallery. I responded by reworking my designs accordingly, embracing the change as an opportunity to simplify and focus on functionality while still expressing her unique identity.
The
Low Fidelity Prototype
In the wireframing phase, I translated my sketches into a functional low-fidelity layout that aligned with both my vision and the client’s preferences. The design was intentionally minimal, with subtle personal touches on the landing page. After presenting the wireframe, the client provided detailed feedback on typography, background tones, and the integration of cultural elements like Chinese characters and cherry blossoms. I responded by iterating on the design: sketching multiple hair layouts, exploring different background colours, and adjusting the navigation bar style. Through open communication and feedback sessions, we refined the homepage together, arriving at a layout that felt both simple and expressive of her artistic identity. This iterative process taught me how valuable client input is in shaping a design that truly reflects their voice.
The
Solution
The final website is a custom-built gallery experience that highlights the client’s multimedia portfolio through clean design, smooth transitions, and carefully considered visual hierarchy. Each artwork category is structured for clarity, allowing users to browse across mediums without friction. The design incorporates generous white space, minimal interface elements, and dynamic layouts that adapt to different types of artwork. On the development side, the site is hand-coded to ensure total design flexibility, fast performance, and seamless responsiveness across screens. Content is organized in a way that makes updates straightforward, giving the artist the freedom to expand the gallery as their body of work grows.
Reflection
This project has been a valuable learning experience, both technically and creatively. From the start, strong communication with the client helped guide the design process, making collaboration smooth and productive. Most of the challenges I faced were during development, especially as someone new to coding, but they taught me how to troubleshoot issues effectively and improve my problem-solving skills. I’m proud of creating a website that reflects the artist's unique style, and even more so of how much I’ve grown in HTML, CSS, and client collaboration. While I faced setbacks, like removing some planned features, I’m glad I didn’t limit my design ideas early on. This experience showed me the balance between creative ambition and realistic execution, and it gave me more confidence in my ability to take on similar projects in the future.
I learned…
how to structure and style a responsive website using HTML and CSS, along with basic JavaScript to create interactive components. I discovered the importance of using semantic HTML elements and building flexible layouts, as well as how to troubleshoot bugs effectively using DevTools and online resources. I also gained insight into the value of clear client communication and how it can shape design direction. Most importantly, I learned that it's okay to simplify when implementation becomes overly complex, and to trust the design process without letting technical limitations restrict creativity in the early stages.
[NEXT PROJECT]