Uncommon Studio: Case Study Website Studio Sáng Tạo

Case study website studio sáng tạo Uncommon Studio — xây bằng Next.js, GSAP & Strapi, đạt Awwwards Site of the Day, Awwwards Developer Award và giải FWA.

Case StudyAwwwardsFWANext.jsGSAPStrapi

Uncommon Studio: Case Study Website Studio Sáng Tạo

Làm website cho chính một studio là đề bài khó nhất: nó phải là một tác phẩm portfolio, chứ không chỉ trưng bày portfolio. Bài case study Uncommon Studio này phân tích cách tôi xây website studio sáng tạo cho Uncommon Studio — một design studio ở Úc — bằng Next.js, GSAP và Strapi, và vì sao bản build đó đạt Awwwards Site of the Day, Awwwards Developer Award và một giải FWA. Nếu bạn là studio hay agency đang muốn biết một website flagship thiên về chuyển động thực sự cần gì để ship ở đẳng cấp này, đây là phần kỹ thuật và những đánh đổi thật, do chính người làm ra nó viết.

Ai làm — và vì sao vai trò developer quan trọng

Website Uncommon Studio là sản phẩm hợp tác: Uncommon (Oliver Muñoz) chỉ đạo thiết kế, còn Hon Tran — tôi — là creative developer. Oliver và tôi từng làm chung sản phẩm đoạt giải trước đó (portfolio kinetic typography Mat Voyce, một Awwwards Site of the Day), nên lần này đề bài mang tính cá nhân: xây ngôi nhà của chính studio.

Nhấn mạnh vai trò dev không phải để khoe cúp. Khi một đề bài sống chết nhờ chuyển động, khoảng cách giữa một file Figma đẹp và một website chạy mượt 60fps chính là developer. Tôi có hơn 11 năm xây trải nghiệm web đoạt giải cho khách ở Na Uy, Đan Mạch, Thụy Điển, Malta, Đức, Úc và Việt Nam; hai lần được Awwwards vinh danh "Independent of the Year" và đang là giám khảo Awwwards. Với website của chính một studio — nơi người xem là các designer khác và khách hàng khó tính — kinh nghiệm đó là khác biệt giữa một site chứng minh được gu của studio và một site âm thầm hạ thấp nó.

Đề bài: một site chứng minh studio, không chỉ mô tả

Định vị của Uncommon rất thẳng — "We design for impact. See for yourself." (Chúng tôi thiết kế để tạo tác động. Hãy tự kiểm chứng). Và chính cái "tự kiểm chứng" đó là vấn đề. Một studio nói mình làm việc xuất sắc, trên một website tầm thường, thì coi như đã thua ngay từ vòng pitch. Bản thân website chính là bằng chứng.

Ba ràng buộc định hình mọi quyết định:

Site chính là case study. Mọi transition, hover, cuộn đều phải toát lên sự chỉn chu có chủ đích — loại chi tiết mà khách hàng tiềm năng cảm nhận được mà không gọi tên nổi.
Hình ảnh phải luôn sắc nét. Các dự án nổi bật (như Yondr) hiện full-bleed và video reel. Không hiệu ứng nào được phép làm mềm hay giảm chất lượng nguồn — vì đó chính là sản phẩm.
Studio tự cập nhật. Dự án mới, reel mới, sắp xếp lại — không cái nào được đòi hỏi developer hay một lần deploy. Tức là phải có headless CMS ngay từ đầu.

Phần craft: Next.js, GSAP và Strapi

Stack là Next.js ở front end, GSAP điều phối toàn bộ hệ thống chuyển động, và Strapi làm headless CMS. Dưới đây là cách các mảng đặc trưng được ghép lại.

Page transition có đạo diễn, không phải đổi route

Điều đầu tiên giám khảo Awwwards phản ứng với một website studio là sự liền mạch — chuyển trang phải như được dàn dựng, không bao giờ là một cú cắt cứng giữa hai trang. Mẹo là coi việc đổi route như một timeline duy nhất: nội dung đi ra, lớp phủ, và trang đi vào là một chuỗi được dàn dựng liền mạch, chứ không phải hai sự kiện rời rạc.

import gsap from 'gsap'

function pageTransition(swapRoute: () => void) {
  const tl = gsap.timeline({ defaults: { ease: 'expo.inOut', duration: 0.9 } })

  tl.to('[data-cover]', { yPercent: 0 })                    // lớp phủ quét vào
    .add(swapRoute)                                          // đổi route tại đỉnh
    .to('[data-cover]', { yPercent: -100 }, '+=0.05')        // lộ trang mới
    .from('[data-page] [data-stagger]', { yPercent: 110, stagger: 0.05 }, '<0.2')

  return tl
}

Các tham số position ('<0.2', '+=0.05') chính là thứ tạo cảm giác có chủ đích: nội dung trang mới bắt đầu nổi lên trước khi lớp phủ rút hẳn, nên mắt không bao giờ rơi vào một khung hình chết. Kết hợp với cuộn mượt theo quán tính, cả site đọc như một mặt phẳng liền mạch — chi tiết kỹ thuật nằm trong bài cuộn mượt trong Next.js với GSAP & Lenis.

Reel sang trọng mà không giết hiệu năng

Trang chủ Uncommon dựa nhiều vào video — một reel dự án nổi bật có nút tắt/bật tiếng và play/pause. Video là cái bẫy hiệu năng lớn nhất trên loại site này: autoplay cả loạt clip là xem trang nghẹt thở ngay. Nguyên tắc đơn giản nhưng nghiêm: một video chạy tại một thời điểm, lazy-load, có poster frame đứng thay cho tới khi thật sự cần.

const reels = gsap.utils.toArray<HTMLVideoElement>('[data-reel]')

function activate(target: HTMLVideoElement) {
  reels.forEach((video) => {
    if (video === target) {
      video.play()
    } else {
      video.pause()      // không bao giờ decode quá một clip cùng lúc
      video.currentTime = 0
    }
  })
}

Animation chuyển giữa các dự án chỉ chạm vào transform và opacity, nên tương tác vẫn mượt ngay cả khi một clip mới đang decode ở nền. Đó là khác biệt giữa chuyển động cảm giác đắt tiền và chuyển động cảm giác hỏng.

Strapi: để studio tự sở hữu site của mình

Chọn Strapi làm headless CMS nghĩa là mọi dự án — tiêu đề, reel hero, gallery, khách hàng, thứ tự — đều là một bản ghi nội dung, không phải sửa code. Next.js fetch lúc build/revalidate và render trang nhanh như tĩnh, còn Uncommon thêm dự án mới qua admin Strapi mà không cần đụng tới deploy. Với một studio có danh sách dự án lớn lên liên tục, đó là khác biệt giữa một site sống và một site lặng lẽ cũ đi sáu tháng sau khi ra mắt.

Giữ tốc độ giữa ngần ấy chuyển động

Một giải thưởng không sống sót nổi qua một cú cuộn giật. Những thói quen hiệu năng đã gánh bản build này:

Chỉ animate transform và opacity. Chúng được GPU dựng layer, bỏ qua layout/paint, nên main thread rảnh để lo cuộn.
Lazy-init phần nặng. Reel và các section nhiều chuyển động chỉ khởi động khi gần viewport, và dừng khi cuộn đi — không đốt cycle cho thứ không nhìn thấy.
Tôn trọng người xem. gsap.matchMedia() tắt phần dàn dựng nặng khi bật prefers-reduced-motion, giữ site dễ tiếp cận mà không phải tách codebase.

const mm = gsap.matchMedia()
mm.add('(prefers-reduced-motion: no-preference)', () => {
  // toàn bộ dàn dựng transition + reel nằm ở đây
})

Muốn bộ playbook hiệu năng đầy đủ mà những thói quen này đến từ đó, xem bài Core Web Vitals cho web nhiều chuyển động.

Kết quả: các giải thưởng (và chúng báo hiệu điều gì)

Giải thưởng	Tổ chức	Đánh giá điều gì
Site of the Day	Awwwards	Thiết kế, khả dụng, sáng tạo, nội dung
Developer Award	Awwwards	Riêng phần kỹ thuật front-end
Giải FWA	The FWA (Favourite Website Awards)	Craft digital tiên phong

Cái tôi muốn chỉ ra là Awwwards Developer Award. Site of the Day tưởng thưởng cả gói tổng thể; Developer Award là giám khảo chọn riêng phần kỹ thuật — transition, hiệu năng, chất lượng build — là hàng đầu. Với website của chính một studio, đó là tín hiệu hữu ích nhất khách hàng có thể nhận được: đội ngũ đằng sau không chỉ thiết kế giỏi, mà còn ship được ở đẳng cấp đó. Bạn có thể xem bản build tại uncommonstudio.com.au và kiểm chứng các giải thưởng trên Awwwards và The FWA.

Case study này thực ra nói về điều gì

Bài học áp dụng rộng hơn nhiều so với một website studio: một site thiên về chuyển động sống chết ở phần kỹ thuật, không phải ở mockup. Cùng một playbook đã thắng ở đây — một hệ thống chuyển động GSAP, một headless CMS khách tự kiểm soát, và kỷ luật hiệu năng khắt khe — là thứ giúp bất kỳ website flagship của brand hay studio nào ship được thay vì mắc kẹt.

Đó cũng là lý do các agency và studio ngày càng đưa một chuyên gia vào phần build thay vì ép chuyển động và WebGL qua một đội generalist. Nếu đó là tình huống của bạn, bài white-label creative development cho agency sẽ giải thích cách hợp tác này vận hành, còn nếu bạn đang tính ngân sách, chi phí làm website chuyển động phân tích con số chi tiết.

FAQ

Website Uncommon Studio được xây bằng gì?

Next.js ở front end, GSAP cho toàn bộ hệ thống chuyển động (page transition và tương tác reel), và Strapi làm headless CMS — stack được chọn để có trang nhanh, quản lý nội dung được, mà vẫn gánh được chuyển động nặng, có dàn dựng, do studio tự cập nhật.

Ai thiết kế và phát triển site Uncommon Studio?

Đây là sản phẩm hợp tác giữa Uncommon (Oliver Muñoz) chỉ đạo thiết kế và Hon Tran làm creative developer, phụ trách front-end, hệ thống chuyển động GSAP và tích hợp Strapi.

Website Uncommon Studio đạt những giải nào?

Awwwards Site of the Day, Awwwards Developer Award (ghi nhận riêng phần kỹ thuật front-end), và một giải FWA.

Làm sao giữ một site studio nhiều video vẫn nhanh?

Chỉ chạy một video tại một thời điểm, lazy-load reel cho tới khi gần viewport, dùng poster frame làm placeholder, chỉ animate transform và opacity khi chuyển, và tôn trọng prefers-reduced-motion để dễ tiếp cận.

Cùng làm một sản phẩm xứng tầm giải thưởng

Nếu bạn là studio, agency hay brand cần một website studio sáng tạo với chuyển động thực sự ship được — và đoạt giải — thì đó chính là việc tôi làm với tư cách creative developer.

Xem cách tôi làm việc và bắt đầu dự án tại trang hire.
Xem thêm các sản phẩm đã ship và đoạt giải trong kho dự án.
Sẵn sàng trao đổi? Liên hệ ngay →

Viết bởi Hon Tran — creative developer, founder của hontran.dev, và giám khảo Awwwards. Hơn 11 năm xây trải nghiệm web đoạt giải, ưu tiên hiệu năng (GSAP, WebGL, Next.js) cho khách hàng 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.