一米粒 Gallery
Artist Gallery Website
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:
Brand Identity
Brand Identity
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
Challenge
How might we create a minimalistic website that reflects the artist’s visual style and personality?
Take a look at my approach
↓
Research & defining target audience
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.
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.
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.
High Fidelity Prototype
The final website is a minimalistic artist gallery that reflects the client’s unique, eerie aesthetic while remaining clean and easy to navigate. It features a light background inspired by traditional Chinese ink paintings, accented with red cherry blossom details and a custom eye cursor. The homepage includes an illustrative hair element, subtle animations, and clear category filters for the client’s paintings, sculptures, and illustrations. The site balances functionality with personal expression, resulting in a design that feels both professional and deeply tied to the artist’s identity.
Unique assets created
For the website, I created several custom visual elements to enhance the client’s identity, including an illustrative custom cursor in the shape of an eye and a hair graphic used on the homepage background. These were designed to reflect the eerie and personal aesthetic discussed with the client. Icons used throughout the site were sourced from external design libraries, while the fonts were also chosen from external sources to match the desired elegant and minimal look. All artwork featured on the site was provided directly by the artist, ensuring the visual content remained authentic and aligned with her portfolio.
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
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:
Brand Identity
Year:
2025
Role:
UX/UI Designer, End-to-end developer
Skills:
Design, Coding, Client Communication, Time management, HTML/CSS, JavaScript
Collaborators:
@_grainofrice
Key screens
Challenge
How might we create a minimalistic website that reflects the artist’s visual style and personality?
Take a look at my approach
↓
Research & defining target audience
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.
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.
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.
High Fidelity Prototype
The final website is a minimalistic artist gallery that reflects the client’s unique, eerie aesthetic while remaining clean and easy to navigate. It features a light background inspired by traditional Chinese ink paintings, accented with red cherry blossom details and a custom eye cursor. The homepage includes an illustrative hair element, subtle animations, and clear category filters for the client’s paintings, sculptures, and illustrations. The site balances functionality with personal expression, resulting in a design that feels both professional and deeply tied to the artist’s identity.
Unique assets created
For the website, I created several custom visual elements to enhance the client’s identity, including an illustrative custom cursor in the shape of an eye and a hair graphic used on the homepage background. These were designed to reflect the eerie and personal aesthetic discussed with the client. Icons used throughout the site were sourced from external design libraries, while the fonts were also chosen from external sources to match the desired elegant and minimal look. All artwork featured on the site was provided directly by the artist, ensuring the visual content remained authentic and aligned with her portfolio.
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]