Thiết Kế Website Bảo Tàng: Case Study Triển Lãm Số

Thiết kế website bảo tàng tốt làm được điều mà một trang scan catalogue không bao giờ làm nổi: nó để bộ sưu tập thở trên mạng — dẫn mắt người xem, giữ một tâm trạng, và khiến khách cảm nhận được quy mô lẫn sự tĩnh lặng của một phòng trưng bày ngay từ chiếc laptop. Một triển lãm số không phải là một lưới thumbnail; nó là một chuyến đi được curate. Đây là góc nhìn người trong nghề về cách tôi dựng website trải nghiệm triển lãm số bằng WebGL, GSAP và Next.js — immersive, đạt chuẩn lưu trữ, và thực sự accessible. Viết bởi chính người làm ra chúng.

Người viết là ai — và vì sao làm văn hoá là một bộ môn riêng

Tôi là Hon Tran, một creative developer với hơn 11 năm làm các trải nghiệm web đạt giải, performance-first cho thương hiệu, studio và khách hàng văn hoá. Tôi được vinh danh Awwwards "Independent of the Year" hai lần, có 9× Site of the Day, và là thành viên ban giám khảo Awwwards.

Công việc văn hoá và bảo tàng mang một trách nhiệm mà đa số site thương mại không có. Bạn là người giữ gìn danh tiếng của một nghệ sĩ hay một định chế, giữ những tấm ảnh lưu trữ độ phân giải cao phải hiển thị trung thực, và phục vụ một công chúng trải từ curator trên màn 5K đến sinh viên trên chiếc điện thoại mạng yếu. Cái nghề là giữ được chuẩn tiết chế của một phòng trưng bày trong khi trải nghiệm vẫn nhanh, trung thực và mở cho tất cả. Điểm giao đó chính là việc tôi làm.

Đề bài: một chuyến đi được curate, không phải một database

Mọi website trải nghiệm triển lãm số tôi dựng đều nằm trên ba căng thẳng quyết định mọi lựa chọn kỹ thuật:

• Curate hơn là tìm kiếm. Một site bảo tàng không phải bộ lọc e-commerce — nó là một tự sự. Thiết kế dẫn bạn qua các phòng và chủ đề theo một trật tự đã chọn, với nhịp và khoảng trắng để mỗi tác phẩm được đọng lại, chứ không phải một bức tường kết quả.
• Tác phẩm là thiêng liêng. Độ trung thực màu sắc, độ phân giải, và khả năng zoom vào từng nét cọ hay thớ tranh quan trọng hơn mọi hiệu ứng. WebGL ở đây là kẻ phục vụ — nó làm sâu thêm sự hiện diện (ánh sáng, chiều sâu, chuyển cảnh) mà không bao giờ làm hỏng chính tác phẩm.
• Ai cũng được mời. Định chế văn hoá chịu trách nhiệm với một sứ mệnh công cộng. Trải nghiệm phải điều hướng được bằng bàn phím, đọc được bằng screen reader, và tôn trọng reduced-motion — accessibility không phải một ô tick, nó là mục đích.

Cái nghề: khiến một bộ sưu tập sống động

Chuyển cảnh phòng trưng bày bằng WebGL

Dấu ấn của một site bảo tàng immersive là cách bạn di chuyển giữa các tác phẩm — không phải cắt cứng, mà là một displacement dissolve nơi tác phẩm này tan vào tác phẩm kế, giống cách một curator làm mờ bức tường này khi bức tường sau sáng lên. Nó được điều khiển bởi một giá trị tiến trình đã làm mượt và một displacement dựa trên noise trong shader:

import gsap from 'gsap'

const t = { v: 0 } // 0 → 1 khi một tác phẩm tan vào tác phẩm kế
gsap.to(t, {
  v: 1,
  duration: 1.2,
  ease: 'power2.inOut',
  onUpdate: () => {
    material.uniforms.uProgress.value = t.v          // crossfade hai texture
    material.uniforms.uDisplace.value = Math.sin(t.v * Math.PI) * 0.15 // gợn sóng đỉnh ở giữa chuyển
  },
})

// fragment — displacement dissolve giữa hai tác phẩm, trung thực với cả hai
uniform sampler2D uFrom;
uniform sampler2D uTo;
uniform float uProgress;
uniform float uDisplace;
varying vec2 vUv;

void main() {
  vec2 dir = vec2(uDisplace);
  vec4 from = texture2D(uFrom, vUv + dir * uProgress);
  vec4 to   = texture2D(uTo,   vUv - dir * (1.0 - uProgress));
  gl_FragColor = mix(from, to, smoothstep(0.0, 1.0, uProgress)); // màu trung thực, không trộn đục
}

Chuyển cảnh displacement đó chính là kỹ thuật WebGL tôi mổ xẻ trong hiệu ứng displacement ảnh WebGL — ở đây được làm chậm và mềm lại thành một nhịp curate chứ không phải một cú hover.

Ảnh lưu trữ mà trình duyệt tôn trọng

Tác phẩm không bao giờ được banding, nhoè, hay pop-in. Nghĩa là AVIF/WebP với một <picture> thật cho các crop theo viewport, một bộ load tiled deep-zoom cho những khung chi tiết chất lượng bảo tàng, và một pipeline quản lý màu để một sắc đỏ vẫn là sắc đỏ của nghệ sĩ:

<picture>
  <source media="(max-width: 640px)" srcSet="/plate-portrait.avif" type="image/avif" />
  <source media="(min-width: 641px)" srcSet="/plate-wide.avif" type="image/avif" />
  <img src="/plate-wide.jpg" alt="Sơn dầu trên toan, 1911 — bản đầy đủ, nền hoàng thổ ấm" loading="lazy" />
</picture>

Accessible ngay từ trong kiến trúc

Một cảnh immersive không được khoá cửa screen reader hay hành hạ người dễ say chuyển động. Phần WebGL là trang trí; nội dung thật — tiêu đề, niên đại, xuất xứ, wall text — nằm trong HTML ngữ nghĩa phía sau nó. Và mọi chuyển động đều kiểm tra tuỳ chọn của người dùng trước khi chạy:

const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (reduce) {
  // bỏ dissolve — cắt thẳng giữa các tác phẩm, giữ triển lãm dùng được trọn vẹn
  material.uniforms.uProgress.value = 1
}

Dựng để load nhanh và bền lâu

Site văn hoá sống nhiều năm và có spike quanh dịp khai mạc và báo chí. Next.js với static rendering, ISR và edge caching phục vụ triển lãm tức thì toàn cầu; phần WebGL nặng và các tile deep-zoom được lazy-load để first meaningful paint — tác phẩm và wall text — không bao giờ phải chờ. Tôi giữ cả chuyến đi trôi trên một chiếc đồng hồ Lenis + GSAP duy nhất, và profile nó với kỷ luật trong tối ưu hiệu năng three.js.

Mục tiêu bảo tàng	Kỹ thuật	Vì sao quan trọng
Một chuyến đi được curate	Cảnh nhịp bằng GSAP, khoảng trắng, trật tự đã chọn	Tự sự hơn một lưới tìm kiếm
Tác phẩm trung thực	AVIF <picture> + deep-zoom tiled + quản lý màu	Tác phẩm là thiêng liêng — không banding, đúng màu
Immersive không đánh đổi	Displacement dissolve WebGL trên một đồng hồ	Sự hiện diện và tâm trạng, không làm hỏng tranh
Mở cho tất cả	HTML ngữ nghĩa sau canvas + reduced-motion	Sứ mệnh công cộng: accessibility là mục đích

Đây là họ hàng gần với cái nghề trải nghiệm sự kiện trong case study website sự kiện Iventions đoạt giải và lối kể chuyện bằng scroll trong làm website tương tác immersive — bảo tàng chỉ nâng chuẩn độ trung thực và accessibility lên mức lưu trữ. Xem thêm vốn từ hình ảnh trong ví dụ website WebGL.

FAQ

Thế nào là thiết kế website bảo tàng tốt?

Curate hơn tìm kiếm — một chuyến đi tự sự qua bộ sưu tập với nhịp và tiết chế — cộng với tác phẩm trung thực, độ phân giải cao và accessibility thực sự. WebGL immersive nên làm sâu thêm sự hiện diện và tâm trạng, không bao giờ làm phân tán hay làm hỏng chính tác phẩm.

Tôi có cần WebGL cho một trải nghiệm triển lãm số không?

Không cho mọi trang — nhưng với chuyển cảnh, chiều sâu, và cảm giác về không gian, WebGL là thứ tách một triển lãm số khỏi một catalogue online. Dùng có tiết chế (như một lớp trang trí phủ trên HTML ngữ nghĩa), nó thêm không khí mà không hại accessibility hay thời gian load.

Site bảo tàng immersive có accessible không?

Có thể và phải như vậy. Tôi dựng nội dung thật — tiêu đề, xuất xứ, wall text — bằng HTML ngữ nghĩa phía sau canvas, làm mọi thứ điều hướng được bằng bàn phím và đọc được bằng screen reader, và gate mọi animation theo prefers-reduced-motion. Immersive và accessibility không phải đánh đổi khi kiến trúc đúng.

Làm sao giữ một triển lãm immersive nhanh?

Static rendering, ISR và edge caching trên Next.js phục vụ first meaningful paint — tác phẩm và wall text — tức thì, còn phần WebGL nặng và tile deep-zoom được lazy-load. Mọi thứ chạy trên một đồng hồ render duy nhất và được profile theo Core Web Vitals.

Hãy đưa bộ sưu tập của bạn sống dậy trên mạng

Nếu bạn là bảo tàng, gallery, quỹ, hay định chế văn hoá đang chuẩn bị một triển lãm số, một bộ sưu tập online, hay một chiến dịch immersive — thứ đạt chuẩn lưu trữ, accessible, và thực sự lay động — thì đó chính là việc tôi làm với vai trò creative developer.

• Xem cách tôi làm việc và bắt đầu dự án ở trang hire.
• Xem thêm các dự án đã ship, đạt giải trong kho dự án.
• Sẵn sàng trao đổi? Let's talk →

---

Viết bởi Hon Tran — creative developer, founder của hontran.dev, và thành viên ban giám khảo Awwwards. Hơn 11 năm dựng các trải nghiệm web đạt giải, performance-first (WebGL, GSAP, Next.js) cho thương hiệu và khách hàng văn hoá toàn cầu. Lập trình viên Việt Nam đầu tiên đoạt giải web quốc tế. hontran.dev · Behance.