VELUM — CASE STUDY
PROJECT TYPE
Self-initiated portfolio concept, not a client commission
MY ROLE
Concept development · Brand and art direction · AI-assisted product photography · Design review · AI-assisted frontend implementation
TOOLS
ChatGPT Images · Codex · Next.js · TypeScript · Tailwind CSS · GitHub · Vercel
SCOPE
Homepage · Collection · Three product pages · Demo bag
View live website ↗
Live homepage, desktop and mobile.
THE BRIEF
The goal was to balance editorial storytelling with clear product discovery, and to keep the scope small enough to finish well.
01
Distinctive identity
An original premium direction: cool mineral color, frosted glass, brushed aluminum, and precise type.
02
A coherent routine
Three products in a fixed order, CLEANSE → FORTIFY → SEAL, with names, sizes, and prices consistent everywhere.
03
Responsive shopping
Browsing, product detail, and a working demo bag on desktop and mobile.
04
Focused scope
Static product data and a client-side bag. No payments, accounts, CMS, or backend.
These were design goals for a fictional brand, not findings from customer research.
ART DIRECTION
Instead of warm botanical cues, VELUM uses a cool mineral palette, frosted glass, and brushed aluminum. Manrope carries the interface; Instrument Serif is reserved for a few editorial statements.
Chalk
#F1F0EA
Graphite
#252728
Mineral
#C8CED0
Fog Blue
#AABAC0
Frosted White
#E2E5E2
CLEANSE / FORTIFY / SEAL
01 / CLEANSE · 150 mL · $38
02 / FORTIFY · 30 mL · $68
03 / SEAL · 50 mL · $58
One canonical image per product came first. Every later catalog and campaign image was checked against it for label text, geometry, and scale.
Quality-control example: an early FORTIFY render added ingredient lines and an ℮ symbol, so I corrected the label to the approved minimal hierarchy before generating the homepage hero.
Closing editorial image: the same three packages, in order, on architectural stone.
THE EXPERIENCE
Homepage storytelling. Hero → Collection → Philosophy → The System → Closing editorial; split editorial sections slow the pace without hiding the products.
Collection. Matched backgrounds, baselines, and relative scale let three different packages read as one system, with name, size, and price directly beneath.
Product detail. Name, price, size, quantity, and Add to Bag sit together beside a large packshot; details live in disclosures below.
Demo bag. Quantities merge and update the subtotal (2 × FORTIFY = $136.00). Checkout is clearly labeled as unavailable in this portfolio demo.
RESPONSIVE + BUILD
On mobile, the hero stacks live text above the complete campaign photograph so the product is never cropped away. Product cards, purchase controls, and the bag drawer reflow into a single column.
Collection
Product detail
Demo bag
BUILD
Next.js, TypeScript, and Tailwind CSS, deployed on Vercel. Static product data, a client-side bag with saved quantities, and six optimized WebP images; original photography stays outside the repository.
AI-ASSISTED PRODUCTION
ChatGPT Images generated the photography from my brief and canonical references; Codex implemented the frontend from my specifications. I set the direction, supplied references, reviewed outputs, and directed every revision.
QUALITY REVIEW
OUTCOME
An original brand direction and three canonical product designs.
Cohesive core photography for catalog and editorial use.
A responsive site with a homepage, collection, three product pages, and a working demo bag, live on Vercel.
Still in progress: final deployed QA, a more compact mobile product summary, and dedicated packaging close-ups.
VELUM is a fictional brand created for this portfolio. Products, prices, and benefits are conceptual; no clinical claims are made.