Cách Đạt Giải Awwwards Site of the Day (Góc Nhìn Giám Khảo)

Creative developer nào cũng có một thư mục ảnh chụp màn hình giống nhau: hàng chục Awwwards Site of the Day mà họ ước mình đã làm ra. Vậy nên câu hỏi tôi nhận nhiều nhất là phiên bản nào đó của làm sao để đạt giải Awwwards — và câu trả lời hiếm khi như mọi người nghĩ. Nó không phải hiệu ứng WebGL điên rồ hơn hay màn loading dài hơn. Nó là một ý tưởng rõ ràng, khả năng sử dụng không khoan nhượng, và độ hoàn thiện kỹ thuật trụ vững khi 18 người lạ mở site của bạn trên bất cứ thiết bị nào họ đang cầm. Đây là bài viết tôi ước mình từng có: cách chấm điểm thật sự diễn ra, điều giám khảo cộng và âm thầm trừ điểm, và cách lên kế hoạch một dự án có thể thật sự giành Awwwards Site of the Day.

Tôi viết từ trong ban giám khảo, không phải đứng ngoài. Tôi là Hon Tran — creative developer và giám khảo Awwwards, lập trình viên Việt Nam đầu tiên đoạt giải web quốc tế, với 9 lần Awwwards Site of the Day, 8 lần Awwwards Developer Award, 9 lần FWA of the Day và hai lần Independent of the Year. Những gì sau đây là cách tôi thật sự chấm, và cách những giám khảo quanh tôi chấm.

Awwwards chấm điểm thật sự như thế nào

Khi bạn nộp một URL live và được duyệt, nó sẽ tới tay ít nhất 18 giám khảo, mỗi người chấm độc lập theo bốn tiêu chí có trọng số. Hệ thống sau đó loại bỏ ba điểm xa giá trị trung bình nhất để khử ngoại lệ, và vòng bình chọn kéo dài khoảng năm ngày. Đây là tiêu chí chấm điểm Awwwards:

Tiêu chí	Trọng số	Giám khảo thật sự soi gì
Design	40%	Typography, bố cục, màu, composition — chỉ đạo nghệ thuật
Usability	30%	Điều hướng, rõ ràng, tốc độ, "người lạ dùng được không"
Creativity	20%	Độ độc đáo của ý tưởng và cách thực thi
Content	10%	Chất lượng và sự liên quan của tác phẩm được trưng bày

Điểm 6.5+ đạt Honorable Mention; site điểm cao nhất trong ngày giành Site of the Day. Rồi có một vòng thứ hai hầu hết mọi người bỏ sót: mọi site đoạt SOTD đều được gửi tới ban giám khảo developer, chấm theo Development Guidelines, và bất cứ site nào trên 7 điểm sẽ nhận Developer Award — ghi nhận xuất sắc kỹ thuật, accessibility và chất lượng code bên cạnh chiến thắng về thiết kế. (Xem trang chính thức hệ thống chấm điểm Awwwards và Developer Award.)

Điều ít người để ý: Design + Usability chiếm 70% điểm. Người mới dồn tất cả vào Creativity — phần 20% — và bỏ đói phần nền tảng. Tôi từng chấm những site đẹp, sáng tạo thấp hơn cả điểm chúng "xứng đáng" chỉ vì chậm hoặc khó dùng. Hãy xây cái sàn trước khi xây cái trần.

Điều giám khảo cộng điểm

Khi tôi mở một bài dự thi, vài thứ kéo điểm của tôi lên nhanh — và chúng nhất quán giữa các giám khảo mà tôi hay trao đổi.

• Chỉ đạo nghệ thuật độc đáo. Một site có quan điểm riêng, không phải moodboard của trend năm nay. Cách nhanh nhất để mất điểm Creativity là làm lại đúng cái gallery cuộn ngang mà ai cũng đã làm.
• Chuyển động có chủ đích. Animation dẫn dắt mắt và điều tiết nhịp kể chuyện — một chuỗi cuộn được pin, một page transition được cân nhắc, một khoảnh khắc đặc trưng. Chuyển động phải có nghĩa.
• Trải nghiệm loading tôn trọng người xem. Một màn reveal có thương hiệu dài hai giây tạo tông là tay nghề. Một thanh tiến trình sáu giây là điểm trừ usability đội lốt nghệ thuật.
• Responsive hoàn hảo. Tôi chấm trên thiết bị thật. Một site chỉn chu trên điện thoại y như trên màn 27 inch toát lên sự chuyên nghiệp trưởng thành.
• Nội dung thật sự tốt. Copy thật, case study thật, hình ảnh thật. "Năng lượng lorem-ipsum" lộ ra ngay, kể cả ở trọng số 10%.

Toàn bộ playbook phía xây dựng đứng sau những điều này, tôi mổ xẻ trong cách làm portfolio đạt giải.

Điều giám khảo trừ điểm

Phần trừ điểm dễ đoán hơn phần cộng — tin tốt là hầu hết đều tránh được.

• Hiệu ứng ngẫu nhiên. Chuyển động không có thứ bậc: mọi thứ đều trôi, parallax, reveal, nên chẳng cái nào quan trọng. Đây là lý do phổ biến nhất khiến một site sáng tạo lại chấm điểm như site trung bình.
• Giật (jank). Một hero WebGL tụt xuống 20fps bị đọc là hỏng, dù khung hình tĩnh có đẹp tới đâu. Tôi sẽ quay lại điểm này — đây là chỗ hầu hết các site tham vọng đánh mất giải.
• Mobile vỡ. Một kiệt tác desktop với layout điện thoại sập trần ở mức Honorable Mention. Không còn cái cớ "chỉ desktop" nào nữa.
• Ý tưởng ăn theo. Mượn trend của thời điểm là dìm thẳng điểm Creativity.
• Thiếu sàn accessibility. Mất focus state, không có đường reduced-motion, tương phản thấp, custom cursor che mất con trỏ thật — những thứ nhỏ mà giám khảo đọc thành cẩu thả.

Phần không hào nhoáng: hoàn thiện kỹ thuật quyết định thắng thua

Đây là sự thật không ai đưa lên moodboard. Khoảng cách giữa Honorable Mention và Site of the Day hầu như chưa bao giờ là độ sáng tạo thô — mà là độ hoàn thiện. Và hoàn thiện phần lớn là hiệu năng và sự đồng nhất đa thiết bị.

60fps trên thiết bị thật. Tôi không chấm trên workstation full sức mạnh; tôi mở site trên laptop và điện thoại tầm trung, như một PRO user thật. Chỉ animate transform và opacity — chúng nằm ngoài đường layout/paint — và đừng bao giờ animate width, top hay box-shadow khi cuộn. Cách nhanh nhất để cảm nhận khác biệt là chạy một đồng hồ cho cả site thay vì ba vòng requestAnimationFrame đua nhau:

import Lenis from "lenis";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
const lenis = new Lenis({ duration: 1.1, smoothWheel: true });

// Một ticker điều khiển smooth scroll, tween DOM và shader uniform cùng lúc
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

Đồng nhất trên mobile. Giới hạn device pixel ratio để không render ở 3x trên điện thoại mà chẳng được lợi gì nhìn thấy, và tạm dừng WebGL khi ra khỏi màn hình:

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

Reduced motion. Khóa chuyển động trang trí sau lựa chọn của người dùng. Đó là điểm cộng accessibility và tín hiệu usability — và nó nuôi trực tiếp Developer Award:

const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduced) initScrollAnimations();

TTFB và LCP nhanh. First paint chậm nhuộm toàn bộ ấn tượng của giám khảo trước cả khi thiết kế kịp load. Nhắm LCP dưới 2.5s kể cả khi có chuyển động — ship ít JS hơn, dynamic-import các module WebGL nặng, và stream khung hình đầu. Tôi đào sâu đúng mâu thuẫn này trong Core Web Vitals cho web nhiều chuyển động, và bạn có thể đối chiếu mục tiêu với Core Web Vitals của web.dev.

Đây chính là phần việc giành Developer Award: các site SOTD đồng thời làm tốt accessibility, hiệu năng và code sạch là những site chấm trên 7 với ban giám khảo developer. Nếu bạn muốn đạt Awwwards Developer Award, hãy coi tầng kỹ thuật là một bề mặt thiết kế, không phải việc vặt.

Có đáng không? Cân nhắc lợi-hại thành thật

Tôi nói thẳng, vì ngành giải thưởng hiếm khi thẳng. Theo đuổi một Site of the Day cộng thêm thời gian thật vào dự án — thường là một giai đoạn hoàn thiện và QA dài thêm một đến hai tuần trên nền công việc thiết kế và chuyển động, gần như toàn bộ dành cho hiệu năng, test đa thiết bị và accessibility. Cái đó không miễn phí.

Vậy có đáng không? Tùy vào vì sao bạn muốn nó:

• Cho portfolio hay thương hiệu studio — có. Một Site of the Day là tín hiệu uy tín được bên thứ ba xác nhận, tồn tại vĩnh viễn. Nó mở ra những cuộc trò chuyện với khách mà email lạnh không bao giờ làm được. Chính các giải của tôi là lý do một phần khách hàng tìm đến tôi.
• Cho dự án khách — đôi khi. Nếu thương hiệu hưởng lợi từ việc được nhìn là tiên phong (thời trang, agency, ra mắt sản phẩm), giải thưởng là tài sản marketing. Với một site brochure thu lead, ngân sách nên dùng chỗ khác.
• Cho học hỏi — luôn luôn. Làm tới chuẩn Awwwards ép bạn lên một mức tay nghề khiến mọi dự án sau tốt hơn, có giải hay không.

Cách lên kế hoạch một dự án tham vọng giải thưởng

Nếu quyết định nó đáng, hãy lên kế hoạch thành thật ngay từ ngày đầu — gắn "chất lượng giải thưởng" vào một dự án đã xong không bao giờ hiệu quả.

1. Ý tưởng trước. Một câu khiến chỉ đạo nghệ thuật trở nên tất yếu. Nếu bạn không nói được, giám khảo sẽ không cảm được.
2. Thiết kế khoảnh khắc đặc trưng — tương tác mà người ta chụp màn hình — và bảo vệ ngân sách hiệu năng phần còn lại của site quanh nó.
3. Xây với ngân sách hiệu năng, không phải hiệu năng tính sau. Đo trên một điện thoại tầm trung thật hàng tuần, không phải ngày trước khi nộp.
4. Dành riêng một tuần hoàn thiện cho 60fps, đồng nhất mobile, reduced motion, focus state và TTFB. Tuần này là nơi Honorable Mention biến thành Site of the Day.
5. Nộp một bản build production hoàn hảo, live vào đầu tuần để cửa sổ năm ngày bình chọn nhận đủ traffic — và đừng bao giờ deploy thay đổi giữa lúc bình chọn.

Để cảm nhận mức này khi đã ship, case study website đoạt giải By-Kin và case study website sự kiện Iventions đều đi qua chặng từ ý tưởng tới tay nghề trên dự án thật. Và nếu bạn tò mò sự ổn định ở mức này đòi hỏi gì theo thời gian, đây là hai lần đạt Awwwards Independent of the Year thật sự cần những gì.

Câu hỏi thường gặp

Vòng bình chọn Awwwards kéo dài bao lâu?

Khoảng năm ngày. Khi site live của bạn được duyệt, nó tới tay ít nhất 18 giám khảo chấm độc lập theo Design, Usability, Creativity và Content, với ba điểm cực đoan nhất bị loại tự động.

Có cần WebGL hay 3D để đạt Site of the Day không?

Không. Rất nhiều SOTD là CSS và GSAP thuần với typography và chuyển động có chủ đích xuất sắc. WebGL giúp ở trục Creativity, nhưng chỉ khi nó phục vụ ý tưởng và giữ 60fps. Một site 2D hoàn hảo luôn thắng một site 3D bị giật mỗi lần tôi chấm.

Khác biệt giữa Honorable Mention và Site of the Day là gì?

Cùng một lần bình chọn của ban giám khảo. Điểm 6.5+ đạt Honorable Mention; site điểm cao nhất trong ngày giành Site of the Day. Khoảng cách hầu như luôn là độ hoàn thiện usability và hiệu năng, không phải sáng tạo.

Làm sao để đạt Awwwards Developer Award?

Bạn không thể nộp trực tiếp — mọi Site of the Day đều được tự động gửi tới ban giám khảo developer và chấm theo Development Guidelines. Chấm trên 7 về thực thi kỹ thuật, accessibility, hiệu năng và chất lượng code, bạn sẽ nhận Developer Award bên cạnh SOTD.

Muốn làm một site như vậy?

Làm tới chuẩn Awwwards là một khoản đầu tư thật về tay nghề và thời gian — chuyển động có chủ đích, WebGL, và phần việc hiệu năng không hào nhoáng thật sự giành điểm. Nếu bạn muốn đặt làm một site được kỹ thuật hóa để cạnh tranh một Site of the Day, đó chính là việc tôi làm cho các studio và thương hiệu. Xem các dự án đã ship, đã đoạt giải trong kho dự án, và cùng trao đổi về thứ bạn đang xây.

---

Viết bởi Hon Tran — creative developer và giám khảo Awwwards, với 9 lần Awwwards Site of the Day, 8 Developer Award, 9 FWA of the Day và hai lần Awwwards Independent of the Year. hontran.dev