Overview
Brooklyn Red Handmade Pottery and Ceramic Art is a minimalist, image-forward portfolio site built for ceramic artist Brooklyn Red to showcase and manage her latest work. I was responsible for the entire project from design and frontend development to backend setup and problem-solving. The site features a responsive layout, clean aesthetic, and a custom admin-only interface for uploading, sorting, and managing gallery images.
Role
UI/UX Designer
Frontend Developer
Tools
Figma / HTML / CSS / JavaScript / Firebase / Netlify
Challenge
The artist needed a professional portfolio that would let her showcase new ceramic work without relying on a developer every time the gallery changed. The challenge was to create a minimal visual experience for visitors while also giving her a simple and secure way to manage the site herself. Some of the biggest challenges included:
- Figuring out how to store and manage image data using Firebase, including uploads, deletions, and tracking sort order.
- Implementing a drag-and-drop sortable gallery, something I hadn’t done before and had to piece together from documentation and community examples.
- Setting up Firebase Authentication to protect admin-only functionality.
- Learning to problem-solve without step-by-step instructions, often debugging JavaScript or Firebase behaviors through trial and error.
User Needs
Before starting the design, I worked closely with the artist to understand how she wanted to use the site both as a portfolio for showcasing her work and as a tool she could manage herself. The goal was to create a minimal, elegant experience for visitors while also giving her control over the content without needing technical help.
- A clean, professional website that showcases ceramic work across devices
- An easy way for the artist to upload, reorder, and remove images without using a third-party Content Management System
- Minimalist branding and elegant typography
- The ability to privately manage content without needing technical knowledge
Solution
I designed and developed a fully responsive single-page site using HTML, CSS, JavaScript, and Firebase. The entire backend is invisible to visitors, but powerful enough for the artist to update her gallery from any device. Key features include:
- Firebase Authentication for secure login
- Image upload & delete system for managing artwork
- Drag-and-drop gallery reordering, with saved sort order in Firestore
- Reusable UI components and clean, scalable design
- Custom color palette and typography based on the artist’s brand tone
Designs
To align with the artist’s vision, I collaborated closely with her to select a color palette that reflected earthy tones and her personal preferences. Typography choices blended elegance and warmth, using a serif font for sophistication and a handwritten script for personality. I kept the layout minimal and spacious so the interface would not compete with the artwork, allowing each piece to remain the focus while maintaining a consistent visual identity across the site.
Typography
Cormorant Garamond
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Bold / Semibold / Regular
Brittany Signature
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Regular
Colors
#7171AA
#CCCCFF
#807440
#BFB78F
#F5F5F5
Illustration
High Fidelity
Once the visual direction was approved, I moved into high-fidelity mockups that reflected the final layout, colors, and typography choices. These designs captured the full experience across desktop and mobile views, ensuring the site looked cohesive and professional on all devices. The final screens were used as a blueprint for building the live site, bringing the artist’s vision to life with precision.
Takeaways
This project was a turning point in my journey as a frontend designer and developer. It also reinforced the value of close collaboration and listening to feedback, even for personal projects. This case study is a reflection of both creative flexibility and technical growth. I gained hands-on experience with:
- Working with Firebase Storage, Firestore, and Authentication
- Structuring dynamic JavaScript for real-world functionality
- Solving UI/UX problems through both design and code
- Learning how to ship a real product while learning on the fly
