04 / UX/UI / Website / Branding
Sprinklez
A playful brand with a working discovery flow.
Explore the website ↗
The task
For this self-initiated project, a 36-item dessert catalog needs to stay playful while letting visitors narrow the selection and inspect a specific item.
My contribution
I designed and built a playful dessert website, including the catalog, category navigation, product details and responsive visual system.
The approach
A branded catalog with category filters, repeated product cards and a shared detail-page layout.
What I built
A branded dessert catalog with category filtering and reusable product pages.
Visual System
Color
#EC618CBrand / pink
#6FC6E6Action / blue
#FFF0DEBrand / cream
#0F0F0FText / ink
Typeface
Quicksand
AaBbCc Gg Qq 0123456789
Rounded display type for the dessert identity.
RegularMediumBold
Typeface
Source Sans 3
AaBbCc Gg Qq 0123456789
Body copy and controls.
RegularSemibold
Actions & patterns
Rounded catalog action with 0.3-second color and background feedback.
Explore the actual work
Explore the website.
Browse the dessert catalog, narrow it by category and open a product. A consistent card system keeps the playful identity connected to useful browsing.
01
The task & my contribution
My contribution
I designed and built a playful dessert website, including the catalog, category navigation, product details and responsive visual system.
The task
Move from a broad dessert selection to a relevant category and a specific product without losing the brand’s personality.
02
Visual & interaction decisions
Brand and utility together
Pink, blue and cream establish the dessert identity. Consistent product cards give the catalog a stable structure underneath the playful presentation.
Narrow before inspecting
Category filters reduce the collection before a visitor opens a detail page. The Donuts view makes the difference visible: 12 matching items from a 36-item catalog.
Feedback at the point of action
More Info controls use 0.3-second color and background transitions. The response identifies the next action without adding a separate animated interruption.
Explore a dessert
03
Functional & interaction QA
Journey review
The category controls narrow the 36-item menu to 12 donuts. Product cards then lead to a consistent detail page, keeping browsing and product information connected.
04
Reusable systems
One catalog, shared patterns
Structured product content, category controls and a shared detail-page layout connect the catalog. Product titles, imagery and actions stay consistent from browsing to an individual dessert.
Consistency across views
Product title, image and More Info treatment stay recognizable from the menu to a product detail.
05
Design through implementation
Catalog to product details
Category controls filter the catalog, and each product links to a shared detail-page layout. Structured product content connects the collection, controls and individual dessert pages.
Brand across changing content
Shared card, type and spacing rules keep different dessert categories consistent. The responsive grid adapts to smaller screens without flattening the playful brand or hiding the product selection.
06
Accessibility
Clear reading and interaction
Text category names and product titles support the visual catalog. Clear selection feedback identifies the active category, while the menu remains usable on a narrow screen.
07
The finished work
Built
A branded dessert catalog with category filtering and reusable product pages.
Delivered work
36 desserts, category filters and shared product pages
