Làm Website Chuyển Động Mất Bao Lâu? (Timeline)

Khi bạn lên kế hoạch ra mắt, bạn cần một mốc thời gian — nhưng làm website chuyển động mất bao lâu là câu khó nhận được câu trả lời thẳng thắn nhất. Báo giá dao động từ "hai tuần!" tới "vài tháng" mơ hồ, và cả hai đều vô dụng khi bạn phải book chiến dịch hay brief cho team. Đây là câu trả lời trung thực từ phía người làm, viết bởi một creative developer đã ship nhiều dự án Awwwards Site of the Day và là giám khảo Awwwards (Awwwards Jury). Bài này chia một timeline dự án website thực tế thành các giai đoạn thật — khảo sát, thiết kế, build, animation, WebGL, QA và launch — kèm thời lượng mẫu theo từng cấp và những yếu tố cụ thể khiến dự án nhanh hơn hoặc chậm đi.

Trả lời ngắn (rồi trả lời thật)

Quy tắc ước lượng cho một bản build custom, có chuyển động, do một creative developer senior thực hiện:

• Landing page custom: ~2–4 tuần
• Website thương hiệu (5–8 template, có CMS): ~6–12 tuần
• Flagship cấp giải thưởng / WebGL: ~3–6 tháng

Đó là khoảng thời gian theo lịch, không phải lời hứa. Biến số lớn nhất thường không phải là code — mà là bạn đã sẵn sàng tới đâu. Một dự án có thiết kế hoàn chỉnh, nội dung đã viết và một người quyết định duy nhất có thể ship nhanh gấp đôi so với cùng phạm vi nhưng đang chờ content và phải duyệt qua một hội đồng.

Các giai đoạn của một timeline dự án website

Mọi bản build custom nghiêm túc đều đi qua sáu giai đoạn giống nhau. Tỷ lệ thay đổi theo cấp, nhưng trình tự thì hiếm khi đổi.

1. Khảo sát & xác định phạm vi — 3 ngày đến 2 tuần

Trước mọi thứ liên quan đến hình ảnh: xác định mục tiêu, đối tượng, tham chiếu, số lượng template, ràng buộc kỹ thuật và tham vọng về chuyển động. Đây là lúc phạm vi được viết rõ và timeline trở thành thật. Bỏ qua bước này là nguyên nhân số một gây trễ tiến độ — bạn không thể ước lượng cái bạn chưa định nghĩa.

2. Thiết kế — 1 đến 6 tuần

Wireframe → thiết kế visual → định hướng chuyển động. Nếu bạn mang file Figma hoàn chỉnh, giai đoạn này gần như biến mất khỏi timeline của tôi (dù ai đó đã trả tiền cho nó trước đó). Nếu thiết kế nằm trong phạm vi, đây thường là giai đoạn dài nhất, vì nó gánh nhiều vòng chỉnh sửa và nhiều ý kiến nhất.

3. Build & animation — 2 đến 8 tuần

Lập trình front-end: component, layout, tích hợp CMS và lớp animation (timeline GSAP, smooth scroll, pinned section, page transition). Trên một bản build custom, giai đoạn này và thiết kế chồng lấn — tôi bắt đầu dựng hệ thống trong khi các trang sau vẫn đang được thiết kế.

4. WebGL / 3D bổ sung — +1 đến 6 tuần

Đây là một nhánh thêm, không phải bước ai cũng cần. Một hero WebGL hoặc hiệu ứng displacement ảnh có thể thêm một đến hai tuần; một scene Three.js tương tác đầy đủ với shader GLSL tự viết thêm cả tháng hoặc hơn, kèm ngân sách hiệu năng riêng. Đây là đòn bẩy lớn nhất với lịch trình — xem cách lớp WebGL và chuyển động được dựng trong case study website sự kiện đoạt giải Iventions.

5. QA & hiệu năng — 1 đến 3 tuần

Giai đoạn dân nghiệp dư hay bỏ qua. Test đa trình duyệt và đa thiết bị, accessibility, và công việc thật để giữ chuyển động ở 60fps trong khi Core Web Vitals vẫn xanh trên một chiếc Android tầm trung: giới hạn device pixel ratio, chỉ animate transform/opacity, khởi tạo scene 3D theo kiểu lazy, tôn trọng prefers-reduced-motion. Chuyển động nặng mà giật còn tệ hơn không có chuyển động.

6. Launch & bàn giao — 2 đến 5 ngày

Nội dung cuối, DNS, analytics, redirect, smoke test trên production, và training CMS để team bạn tự tin chỉnh sửa. Nhanh, nhưng đừng dồn hết vào sáng ngày launch.

Timeline mẫu theo từng cấp

Đây là các khoảng thời gian thực tế cho một engagement thiết kế-và-build với một creative developer senior duy nhất và một khách hàng phản hồi nhanh. Các giai đoạn chồng lấn trong thực tế, nên tổng nhỏ hơn tổng các phần cộng lại.

Cấp	Khảo sát	Thiết kế	Build + motion	WebGL/3D	QA + perf	Tổng thực tế
Landing page custom	2–3 ngày	3–7 ngày	1–2 tuần	—	2–4 ngày	~2–4 tuần
Website thương hiệu	1 tuần	2–3 tuần	3–5 tuần	tùy chọn +1–2 tuần	1–2 tuần	~6–12 tuần
Flagship WebGL / cấp giải	1–2 tuần	3–6 tuần	4–8 tuần	+3–6 tuần	2–3 tuần	~3–6 tháng

Vài lưu ý trung thực:

• Cấp flagship là nơi giải thưởng nằm, và nó mất thời gian có lý do: chuyển động, 3D và hiệu năng đều phải đạt chuẩn production cùng lúc. Đó không phải kéo dài câu giờ — đó là kỹ thuật khó, và cũng là lý do nó nằm trên cùng của các mức chi phí làm website chuyển động.
• Nếu bạn cung cấp thiết kế hoàn chỉnh, trừ đi cột thiết kế — thường là 30–50% lịch trình.
• Các con số này giả định một bản flagship tại một thời điểm với người thực hiện senior, không phải một dev junior ráp template, cũng không phải agency 40 người chạy qua account manager.

Điều gì khiến dự án nhanh hơn

Sau ~11 năm ship dự án khách hàng, những dự án chạy nhanh nhất đều có chung đặc điểm:

• Nội dung đã sẵn sàng. Copy cuối, hình ảnh và brand asset ngay từ kickoff. "Để sau viết" là kẻ giết deadline thầm lặng số một.
• Thiết kế đã hoàn chỉnh và được duyệt trước khi engineering bắt đầu nghiêm túc.
• Một người quyết định có thẩm quyền, không phải hội đồng duyệt từng màn hình.
• Ít template duy nhất hơn. Mười trang dùng chung ba layout ship nhanh hơn nhiều so với mười layout riêng — tốn thời gian là template, không phải số trang.
• Phạm vi rõ ràng. Một brief rõ luôn thắng kiểu "làm cho thật đỉnh" mở vô hạn.

Điều gì khiến dự án chậm hơn

• Độ sâu animation. Một hiệu ứng scroll-fade là một buổi chiều; page transition được biên đạo và chuỗi WebGL pinned là nhiều tuần. Mỗi bậc trên thang chuyển động gần như tăng gấp đôi công sức.
• WebGL / 3D. Phần bổ sung lớn nhất, cả về chi phí lẫn lịch trình.
• Vòng chỉnh sửa. Hãy đưa nó vào kế hoạch (tôi scope hai vòng mỗi giai đoạn). Chỉnh sửa vô hạn là cách timeline âm thầm nhân đôi.
• Phản hồi chậm. Trả lời ba ngày cho mỗi lần review có thể cộng thêm cả tháng cho một flagship mà "không ai làm gì sai".
• Scope creep giữa chừng. "Thêm cái này được không…" thì ổn — nhưng lần nào nó cũng đẩy lùi mốc thời gian.

Có rút ngắn được không?

Đôi khi — với một mức giá, và trong giới hạn. Thêm người vào một bản build sáng tạo có lợi ích giảm dần rất nhanh (motion và WebGL khó chia song song cho nhiều người), nên rush thật sự thường nghĩa là thu hẹp phạm vi, không phải thêm người: ship một trang xuất sắc thay vì mười trang trung bình, dời hero WebGL sang giai đoạn hai, hoặc launch website thương hiệu trước rồi thêm 3D sau. Lịch rush cũng có phụ phí vì nó chen vào các công việc khác. Thứ duy nhất không nén an toàn được là giai đoạn QA-và-hiệu-năng — đúng cái góc mà khi thiếu sẽ lộ ra thành một bản launch giật và xấu hổ.

FAQ

Làm website custom mất bao lâu?

Với một creative developer senior, landing page custom ~2–4 tuần, website thương hiệu có CMS ~6–12 tuần, và flagship WebGL cấp giải ~3–6 tháng. Mức độ sẵn sàng của nội dung và thiết kế của bạn thường là yếu tố dao động lớn nhất.

Website có animation hoặc WebGL mất bao lâu?

Độ sâu animation và WebGL là đòn bẩy lịch trình lớn nhất. Một hero WebGL hoặc hiệu ứng displacement thêm khoảng 1–2 tuần; một scene Three.js tương tác đầy đủ với shader tự viết thêm cả tháng hoặc hơn, cộng thời gian hiệu năng riêng.

Vì sao web custom lâu hơn template?

Template tái sử dụng layout dựng sẵn và hiệu ứng generic — bạn đổi thời gian lấy sự giống nhau. Bản build custom thiết kế layout riêng và biên đạo chuyển động để giữ 60fps trên thiết bị thật, đó là kỹ thuật senior chứ không phải kéo-thả. Bài creative dev hay template, Webflow, agency phân tích kỹ sự đánh đổi này.

Cách nhanh nhất để kịp một deadline cứng?

Chốt nội dung và thiết kế trước kickoff, giao cho một người quyết định, giữ vòng phản hồi gọn, và thu hẹp phạm vi về một thứ xuất sắc thay vì nhiều thứ trung bình. Mang những thứ đó tới buổi gọi đầu tiên cũng là cách thuê creative developer hiệu quả.

Có thể bắt đầu khi thiết kế chưa xong không?

Thường là được — tôi có thể dựng hệ thống, component và CMS trong khi các trang sau vẫn đang thiết kế, vì các giai đoạn này chồng lấn trên một bản build custom. Nhưng càng chốt nhiều ở kickoff, timeline càng chặt và dễ đoán.

Cùng lên timeline cho dự án của bạn

Nếu bạn đã có mốc ra mắt trong đầu và muốn câu trả lời thẳng về website của bạn mất bao lâu — và phạm vi phù hợp với nó — đó chính là việc tôi làm với tư cách creative developer: giám khảo Awwwards, hơn 11 năm, nhiều giải Site of the Day, với dự án đã ship tại Na Uy, Đan Mạch, Thụy Điển, Malta, Đức và Việt Nam.

• Xem các gói hợp tác tại trang dịch vụ.
• Khám phá dự án đã ship và đoạt giải tại kho dự án.
• Có deadline rồi? Cùng trao đổi →

---

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 dựng các trải nghiệm web đoạt giải, ưu tiên hiệu năng (GSAP, Three.js / WebGL, Next.js) cho khách hàng toàn cầu. Là lập trình viên Việt Nam đầu tiên giành giải web quốc tế. hontran.dev · Behance.