Websites
Chrivelle Velvet Gallery: home textiles store redesign
A full redesign for a home textiles store in the Philippines, built around velvet: a mauve-to-plum hero whose nap visitors can brush with the pointer or a swipe, a photo hanging on a brass wire, and cards with a velvet edge and a brass name plate. The new homepage also loads 0.80 MB instead of 99.52 MB.
- Context
- Chrivelle Velvet Gallery, a store for velvet fabrics, home textiles and made-to-order upholstery in Dasmariñas City, Cavite, Philippines.
- My role
- Design, frontend development, and image production
- Year
- 2026


My redesign: before and after
The old site next to my design, at the same screen size.
Homepage
A mauve gradient card where the yellow list text almost vanished became a velvet first screen: a serif headline on brushed mauve-to-plum velvet, beside a photo of the showroom hanging on a brass wire.


On a phone
The old phone layout was 780 px wide on a 390 px screen, with a long block of centred text. Now the headline, short list and buttons fit the screen.


Overview
Chrivelle Velvet Gallery sells velvet fabrics, curtains, covers and home textiles and takes made-to-order upholstery and event draping in Dasmariñas City, Cavite. The new website is about the material itself: velvet you can almost touch.
The problem
The old homepage downloaded 99.52 MB on every visit, which took 80.1 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, part of its text was yellow on mauve and barely readable, it requested images that didn't exist, and it loaded fonts and icons from three outside hosts. It also listed a business registration and VAT reference nobody had confirmed, guaranteed workmanship, and card payments the store doesn't take.
The solution
A rebuild with no framework, in mauve, plum and cream with brass accents, using a book serif and a soft sans-serif. In the hero, the pointer, or a sideways swipe on a phone, brushes the velvet nap, and the trail slowly relaxes back; with reduced motion it shows a still stroke instead. The hero photo hangs on a brass wire, and every card has a pinked velvet top edge that changes sheen on hover and a small brass name plate. The range is split into fabrics and home textiles, and made-to-order services on plum velvet. Images are compressed WebP files that load as the visitor scrolls, and the fonts ship with the site, so the homepage makes no third-party requests.
Screenshots
Captured from the real, live website.
My contribution
Designed and built the new site, produced the image set and compressed it for the web, built the brushable velvet, rebuilt the cart and order page including service requests, removed the unconfirmed claims, and measured the old and new versions with the same script.
What it does
- Velvet hero whose nap can be brushed with the pointer or a swipe, with a still version for reduced motion
- Hero photo hanging on a brass wire
- Cards with a pinked velvet edge that shifts sheen on hover, and a brass name plate
- Two groups: fabrics and home textiles, and made-to-order services
- Products with tags drawn from the store's own name, no third-party brands
- Unconfirmed registration and VAT references, a workmanship guarantee and card payments removed; only the tax number is shown
- Order sent as a pre-filled email that the customer sends; services are scheduled after confirmation, with measuring on site
- Field checks on the order page, including Philippine mobile number formats
- The three original customer quotes kept word for word
Technical challenges
Making a texture interactive
Velvet is about touch, which a screen can't give. Letting visitors brush the nap with the pointer or a finger is the closest thing, and the effect respects the reduced-motion setting.
Products and services in one cart
The store sells ready-made textiles and made-to-order work. Both go into the same order, and the page explains that services are scheduled after confirmation, with measuring on site.
Verified stack
- HTML
- CSS
- JavaScript
- Canvas
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 99.52 → 0.80 MB
- On load, on a phone
- 99.51 → 0.58 MB
- After scrolling the whole page
- 99.52 → 1.07 MB
- Fully loaded, simulated 10 Mbps
- 80.1 → 0.49 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products and services
- 15
Outcomes
- Live at chrivellevelvet.site.
- Measured with the same script: homepage on load down from 99.52 MB to 0.80 MB on desktop and 0.58 MB on phones.
- No failed requests, console errors or third-party requests on the new site during the capture run.
Lessons
- When the product is a material, let people play with it.
- Remove claims the business can't back up.
- If images are illustrations, say so on the page.
About this case study
Client website, shown by name. Screenshots and measurements come from one capture script run on the old and new site, on a local server. The 10 Mbps figure is a simulated connection, not data from real visitors. The images are generated illustrations in mauve and plum velvet with tags drawn from the store's own name and no people, not photos of its stock, and the shop says so. Product descriptions, store hours and the three customer quotes are carried over from the old site. In the new homepage screenshots, the street address and phone number are blurred.
Planning a new website, or is yours too slow?
Describe it in a few sentences. You'll get a reply within two business days with questions, a rough approach, and a price range in CHF.