Dựng web

UPGO

Một quy trình dựng lặp lại được, từ brief trên bảng tính đến landing page chạy thật, có URL chạy thật ngay từ các vòng đầu.

Trạng thái: Đang chạy, landing page tiếng Việt cho một mạng lưới affiliate toàn cầu.

Vấn đề

Landing page bị chậm vì thiếu nội dung và review kéo dài. Link chưa có, asset đến muộn, và các thay đổi chồng lên nhau mà không có đường lùi.

Cách vận hành

1Chốt phạm vi brief
Thông tin thương hiệu và thứ tự section lấy từ Google Sheet, kèm logo và bảng màu mới, làm tiếng Việt trước. Phần chưa có như link CTA và dữ liệu offer được đánh dấu placeholder để tiến độ không bị chặn.
2Khung thông tin
Brief thành một trang bảy khối: ticker, slider launch week, hero, lợi thế, top offer, insights và CTA cuối. Nội dung được rút về ba động từ: tìm offer, chạy traffic, scale.
3Hệ thống hình ảnh
Xanh điện làm màu chủ đạo, vàng dành cho CTA, navy cho các khối hiệu suất. Space Grotesk cho tiêu đề, Manrope cho nội dung, viền mảnh. Symbol chữ U của logo được tái sử dụng thay vì tạo họa tiết mới.
Công cụ hoặc model: Space Grotesk, Manrope
4Bản nền responsive, publish sớm
HTML, CSS, JavaScript thuần với đúng thứ tự section, đủ nội dung tiếng Việt và trạng thái placeholder rõ ràng, publish sớm để review trên URL thật.
5Asset theo từng component
Mockup offer, cờ GEO, thumbnail insights, visual banner và symbol U được thêm sau khi layout ổn định, mỗi asset đúng kích thước crop hiển thị.
Bài học: Một ảnh nét khi mở riêng nhưng đường vàng mảnh bị răng cưa khi thu nhỏ vào banner. Phải đánh giá asset ở đúng kích thước hiển thị.
6Tương tác, theo từng vòng
Ticker dừng khi hover, slide tự chuyển với crossfade, tab và vuốt, highlight chỉ số, parallax nhẹ và hiệu ứng khi cuộn. Thêm từng nhóm, không làm một lượt.
Bài học: Symbol U từng tăng từ hai lên mười một lớp 3D và che mất màu thương hiệu. Bản nhẹ lại sang hơn.
7Vòng review trực tiếp
Publish, xem trang thật, chụp chỗ chưa ổn, sửa một nhóm vấn đề, publish lại. Ticker không chạy, autoplay giật và tiêu đề rớt một từ đều được sửa ở từng vòng riêng.
8Phiên bản và rollback
Mỗi thay đổi là một commit và một phiên bản. Khi hiệu ứng glow theo chuột ở khối offer không hợp, nó được revert bằng commit mới thay vì vá chồng.
Bài học: Luôn đồng bộ source trước mỗi lần chỉnh. Có lúc bản live đi trước checkout hai phiên bản và asset cũ bị đọc nhầm.

Hiện đã có

Tám bước từ chốt phạm vi brief đến phiên bản và rollback.
Một trang đã publish được review trên URL thật ngay từ các vòng đầu.
Mỗi thay đổi một commit và một phiên bản, rollback thay vì vá chồng.
Bài học được ghi lại: đồng bộ source trước mỗi lần chỉnh, đánh giá asset ở đúng kích thước hiển thị, bắt đầu chuyển động từ phiên bản nhẹ nhất.