Dark palette + AVIF/WebP
All images use AVIF primary, WebP fallback; LCP < 1.5s p75 on the dark background.
Signage & Manufacturing · Case Study
Işıklı Tabela — Dark Cinematic Design System
A dark cinematic design system that creates a premium perception, presenting the manufacturing process as a cinema-grade gallery for a signage manufacturer.
Results
Measurable Outcomes
Dark cinematic
Design system
12
Hub page count
AVIF + WebP fallback
Image format
TODO — average order value
Premium positioning
The Brief
What was the goal?
Signage is a visual industry. But by 2025, 90%+ of the sector used the same white-background + product-photo combo. Creating a premium perception required visual differentiation — without sacrificing SEO signals.
The Approach
Which methodology pillars I applied
I prioritized the Distribution & Authority pillar: brand entity (Wikidata + GBP + sameAs), original photography (shot in the workshop), Schema.org Photograph + ImageObject. Design carries brand signal; content carries SEO signal — separate layers.
See the full process → 47-Point AI-Ready SEO Audit methodology.
Tech Stack
What it's built with
- Next.js 15
- TypeScript
- Tailwind CSS
- Sharp (AVIF pipeline)
- Schema.org ProfessionalService
The Build
Key decisions and tradeoffs
Design call: hero images aren't product catalog shots — they're workshop photos from the manufacturing process. This "product-as-art" framing filtered out price-sensitive buyers and pulled the audience toward the premium tier.
The dark background isn't a Core Web Vitals tax — on OLED screens, the LCP element actually renders faster (I tested it). But the page is image-heavy, so every visual ships as AVIF + WebP fallback.
Instead of a /[city]/[district]/[category] dynamic route for signage categories, we chose 12 hub pages + curated long-form content for premium positioning. Quality-first content over programmatic SEO.
On the schema side I wired a ProfessionalService + Photograph + ImageObject chain; every workshop photo ships with author + creator + dateCreated metadata.
Steps Applied
Methodology in practice
Curated 12 hub pages
Instead of 1,000+ programmatic pages, 12 deepened hub pages; each 1,500+ words with original photography and sector cases.
ProfessionalService + Photograph schema
Service scope + manufacturing photography are tied via a schema chain — strengthening entity signals for AI Overview.
Honest Reflection
What I'd Do Differently
The dark design did create a premium perception — but our mobile conversion rate ran 12% below light-themed competitors for the first three months. Reason: older users unaccustomed to dark mode had a harder time scanning page content. We revised CTA colors and pushed contrast to WCAG 2.2 AAA. On the next dark-theme project I'll start with an A/B test.
Screenshots
Want this for your project?
Same 47-point methodology, $499 fixed price, 5-7 business days. Book the audit.