Thiết kế website theo yêu cầu: khi nào cần, quy trình và bàn giao mã nguồn
Thiết kế website theo yêu cầu: so sánh theme, thiết kế riêng, lập trình riêng; brief, wireframe, bàn giao mã nguồn và quyền quản trị.
Thiết kế website theo yêu cầu là cụm từ được dùng cho ba việc khác nhau: sửa lại một giao diện có sẵn cho hợp màu thương hiệu, thiết kế giao diện riêng từ đầu trên một nền tảng quen thuộc, hoặc lập trình riêng cả phần chức năng. Ba việc này khác nhau về chi phí, thời gian và mức độ lệ thuộc vào đơn vị làm. Nhiều tranh chấp sau bàn giao bắt đầu từ việc hai bên hiểu “theo yêu cầu” theo hai nghĩa khác nhau.
Trang này giúp bạn xác định mình cần mức nào, quy trình một dự án thiết kế riêng diễn ra ra sao, và những gì phải có trong hợp đồng để website thật sự thuộc về bạn.
Ba mức “theo yêu cầu” và khác biệt thật sự
| Tiêu chí | Giao diện có sẵn (theme) tùy chỉnh | Thiết kế riêng trên nền tảng có sẵn | Lập trình riêng |
|---|---|---|---|
| Giao diện | Dựa trên mẫu có sẵn, đổi màu, logo, ảnh, sắp lại khối | Vẽ mới từ khung trang, theo nhận diện thương hiệu | Vẽ mới hoàn toàn |
| Chức năng | Những gì theme và plugin hỗ trợ | Chức năng phổ biến của nền tảng, thêm tùy biến vừa phải | Viết theo quy trình riêng của doanh nghiệp |
| Nguy cơ trùng mặt với website khác | Cao | Thấp | Thấp |
| Thời gian | Ngắn | Trung bình | Dài nhất |
| Chi phí | Thấp nhất | Trung bình | Cao nhất |
| Người tiếp quản sau này | Dễ tìm | Dễ tìm nếu nền tảng phổ biến | Cần tài liệu kỹ thuật, nếu không sẽ lệ thuộc đơn vị cũ |
| Hợp với | Website giới thiệu nhỏ, cần ra mắt sớm | Doanh nghiệp cần hình ảnh riêng và làm nội dung lâu dài | Quy trình đặc thù, tích hợp hệ thống nội bộ, tính năng không có sẵn |
Phần lớn doanh nghiệp tìm “website thiết kế riêng” thực ra cần mức thứ hai: giao diện riêng, nền tảng phổ biến. Lập trình riêng chỉ đáng khi có một quy trình mà không nền tảng nào đáp ứng, ví dụ tính giá theo cấu hình phức tạp, cổng cho đại lý với nhiều bậc giá, hoặc kết nối trực tiếp vào phần mềm quản lý nội bộ.
Khi nào dùng giao diện có sẵn là đủ
Không phải doanh nghiệp nào cũng cần thiết kế riêng. Nói thẳng điều này giúp bạn khỏi trả tiền cho thứ chưa dùng tới.
- Website giới thiệu vài trang cho hộ kinh doanh, văn phòng nhỏ, chủ yếu để khách kiểm tra thông tin và gọi điện.
- Cần ra mắt gấp cho một sự kiện, một đợt tuyển sinh, một dự án có hạn chót gần.
- Chưa có nhận diện thương hiệu ổn định. Thiết kế riêng khi logo, màu, phông chữ còn đang đổi thì sẽ phải vẽ lại.
- Chỉ chạy quảng cáo cho một sản phẩm. Trường hợp này landing page hợp hơn một website đầy đủ.
Ngược lại, nên thiết kế riêng khi website là kênh bán chính, khi bạn cạnh tranh trong ngành mà đối thủ dùng chung vài mẫu giao diện phổ biến, hoặc khi bạn định làm nội dung đều đặn và cần cấu trúc trang khớp với bản đồ từ khóa.
Bước khám phá: brief tốt quyết định nửa dự án
Dự án thiết kế riêng hỏng nhiều nhất không phải ở khâu vẽ mà ở khâu hiểu sai yêu cầu. Trước khi có bất kỳ bản vẽ nào, VIDCO cần câu trả lời cho những câu hỏi dưới đây. Bạn không cần trả lời đầy đủ ngay; buổi làm việc đầu tiên dùng để làm rõ chúng.
| Nhóm câu hỏi | Ví dụ cụ thể |
|---|---|
| Mục tiêu | Website để bán hàng, lấy số điện thoại, tuyển dụng hay chứng minh năng lực với đối tác? Hành động chính khách cần làm là gì? |
| Khách hàng | Ai vào website, họ tìm gì, dùng điện thoại hay máy tính, họ so sánh bạn với ai? |
| Nội dung | Đã có sẵn bài viết, ảnh, video, hồ sơ năng lực chưa? Ai viết phần còn thiếu? |
| Chức năng | Cần form nào, đặt lịch, đa ngôn ngữ, khu vực đăng nhập, kết nối phần mềm nào? |
| Vận hành | Sau bàn giao ai đăng bài, ai trả lời form, ai lo cập nhật kỹ thuật? |
| Tham khảo | Website nào bạn thích, thích cụ thể điểm gì; website nào không muốn giống? |
Kết quả của bước này là một bản tóm tắt yêu cầu và danh sách trang cần có. Hai bên cùng duyệt bản này; mọi thay đổi phạm vi về sau đều đối chiếu với nó.
Wireframe và giao diện: từ khung trang tới bản vẽ hoàn chỉnh
Wireframe là bản khung trắng đen, chỉ có khối nội dung, thứ tự và nút bấm, chưa có màu hay ảnh. Làm wireframe trước giúp hai bên tranh luận về nội dung và luồng đi của khách, thay vì tranh luận về màu nút. Sửa ở giai đoạn khung rẻ hơn nhiều so với sửa khi đã lập trình.
Ở VIDCO, phần này do Phạm Quang Huy (Creative Director, phụ trách UI/UX và nhận diện thương hiệu) thực hiện. Thứ tự làm việc:
- Khung trang cho từng loại trang: trang chủ, trang dịch vụ hoặc sản phẩm, trang bài viết, trang liên hệ, và các trang đặc thù.
- Thiết kế giao diện trên điện thoại trước, vì phần lớn khách vào từ điện thoại, rồi mới mở rộng cho máy tính.
- Bộ thành phần giao diện: nút, thẻ, bảng, form, khối trích dẫn được chuẩn hóa để trang mới về sau dùng lại, không phải vẽ thêm.
- Bản mẫu bấm thử được để bạn trải nghiệm luồng đi trước khi duyệt.
Nếu doanh nghiệp chưa có logo, màu và phông chữ chuẩn, nên làm nhận diện thương hiệu trước hoặc song song. Giao diện dựng trên nhận diện tạm thì khi đổi nhận diện gần như phải vẽ lại.
Chưa chắc nên dùng giao diện có sẵn hay thiết kế riêng?
Gửi mục tiêu website, ngành hàng và vài website bạn thích. VIDCO trả lời mức nào hợp với bạn, kèm danh sách trang đề xuất, trước khi nói chuyện giá.
Lập trình, kiểm thử và nền tảng SEO
Khi giao diện đã duyệt, đội kỹ thuật dựng website trên nền tảng đã chọn. Những việc trong giai đoạn này:
- Dựng giao diện thành các khối quản trị được, để nhân viên của bạn tự sửa chữ, ảnh, thêm trang mà không cần gọi lập trình viên.
- Lập trình chức năng riêng theo danh sách đã chốt, mỗi chức năng có mô tả cách hoạt động để nghiệm thu.
- Cài nền SEO kỹ thuật: URL, heading, canonical, sitemap, schema, tốc độ. Bộ tiêu chí nghiệm thu kỹ thuật được trình bày ở trang thiết kế website chuẩn SEO.
- Kiểm thử trên điện thoại thật và các trình duyệt phổ biến; gửi thử mọi form; kiểm tra email thông báo có tới đúng người không.
Với website lập trình riêng, yêu cầu thêm tài liệu kỹ thuật: cấu trúc mã nguồn, cách cài đặt lên máy chủ mới, danh sách thư viện sử dụng. Không có tài liệu này, việc đổi đơn vị bảo trì về sau sẽ rất tốn kém.
Bàn giao mã nguồn và quyền quản trị
Đây là phần phân biệt một công ty thiết kế website theo yêu cầu làm việc minh bạch với bên muốn giữ chân khách bằng cách giữ tài khoản. Trước khi thanh toán đợt cuối, đối chiếu:
| Hạng mục | Phải thuộc về doanh nghiệp | Câu hỏi nên hỏi trước khi ký |
|---|---|---|
| Tên miền | Đứng tên doanh nghiệp, bạn giữ tài khoản tại nhà đăng ký | Ai đăng ký, ai nhận email gia hạn? |
| Hosting, máy chủ | Đứng tên bạn hoặc bạn có tài khoản quản trị | Hết hợp đồng có chuyển đi được không, chuyển thế nào? |
| Quyền quản trị website | Tài khoản quản trị cao nhất do bạn giữ | Bên làm web giữ tài khoản gì, bạn xóa được không? |
| Mã nguồn | Bản đầy đủ gồm cơ sở dữ liệu, kèm tài liệu nếu lập trình riêng | Bản quyền mã nguồn thuộc ai? Có được thuê bên khác sửa không? |
| File thiết kế | File giao diện gốc | Có bàn giao file thiết kế không, ở định dạng nào? |
| Giấy phép theme, plugin trả phí | Ghi rõ đứng tên ai và hạn dùng | Hết hạn thì ai gia hạn, chi phí bao nhiêu? |
| Search Console, Analytics | Tạo bằng tài khoản Google của doanh nghiệp | Bên làm web được thêm vào với vai trò gì? |
Nguyên tắc của VIDCO: tài khoản và tài sản số đứng tên khách. Chúng tôi chỉ giữ một tài khoản quản trị riêng để hỗ trợ, và bạn xóa được bất cứ lúc nào.
Hợp đồng thiết kế riêng nên ghi những gì
- Danh sách trang và loại trang được thiết kế riêng, không ghi chung chung “thiết kế theo yêu cầu”.
- Số vòng chỉnh sửa ở mỗi giai đoạn (khung trang, giao diện, sau khi dựng) và cách tính khi vượt.
- Danh sách chức năng kèm mô tả cách hoạt động, làm căn cứ nghiệm thu.
- Ai cung cấp nội dung: bạn gửi hay bên làm web viết; nếu bên làm web viết thì bao nhiêu trang.
- Tiêu chí nghiệm thu kỹ thuật và biên bản bàn giao theo bảng ở trên.
- Thời gian bảo hành lỗi sau bàn giao và phạm vi: lỗi do lập trình khác với yêu cầu thêm tính năng.
Chi phí website thiết kế theo yêu cầu
Website tại VIDCO có giá từ 8 triệu. Với thiết kế theo yêu cầu, giá tăng theo số mẫu trang thiết kế riêng, số chức năng lập trình thêm, số ngôn ngữ và việc có viết nội dung hay không. Tên miền, hosting, giấy phép phần mềm trả phí và bảo trì sau bàn giao tính riêng. Nếu chỉ cần một trang cho chiến dịch, landing page có giá từ 3 triệu (Basic), 5 triệu (Premium) hoặc 8 triệu (CRO Pro).
Cách tách từng khoản và so sánh các báo giá khác nhau xem ở bài thiết kế website bao nhiêu tiền. Sau khi ra mắt, phần cập nhật, sao lưu và theo dõi lỗi thuộc dịch vụ chăm sóc website.
Đọc thêm: Thiết kế website bằng AI, Elementor, Figma
Câu hỏi thường gặp
Thiết kế website theo yêu cầu mất bao lâu?
Phụ thuộc số loại trang, số chức năng và tốc độ duyệt của hai bên, nên thời gian được ghi cụ thể trong đề xuất cho từng dự án. Khâu chờ nội dung từ phía doanh nghiệp thường là khâu kéo dài nhất.
Website thiết kế riêng có đắt hơn nhiều so với dùng theme không?
Thường cao hơn vì có thêm bước khung trang và thiết kế giao diện. Nếu website chỉ để khách kiểm tra thông tin, theme tùy chỉnh là đủ. Nếu website là kênh bán chính hoặc cần nhận diện riêng, phần chi thêm cho thiết kế thường đáng.
Tôi có được nhận mã nguồn không?
Có. VIDCO bàn giao mã nguồn đầy đủ gồm cơ sở dữ liệu, quyền quản trị cao nhất và thông tin tên miền, hosting đứng tên doanh nghiệp. Với phần lập trình riêng có kèm tài liệu kỹ thuật.
Tôi chưa có logo và màu thương hiệu thì có làm được không?
Làm được, nhưng nên làm nhận diện thương hiệu trước hoặc song song. Thiết kế website trên nhận diện tạm dễ phải vẽ lại khi nhận diện chính thức ra đời.
Sau khi bàn giao tôi có tự sửa được không?
Được. Giao diện được dựng thành các khối quản trị được; VIDCO hướng dẫn nhân viên sửa chữ, ảnh, thêm trang và đăng bài. Việc cần lập trình mới (thêm chức năng) thì báo giá riêng.
Đọc thêm
- Thiết kế website chuẩn SEO: tiêu chí kỹ thuật và checklist bàn giao
- Thiết kế website bán hàng
- Thiết kế nhận diện thương hiệu
- Thiết kế landing page
- Thiết kế website bao nhiêu tiền
- Chăm sóc website
- Đội ngũ VIDCO
Gửi brief, nhận khung trang đề xuất
Mô tả mục tiêu website, khách hàng chính và chức năng cần có. VIDCO gửi danh sách trang, mức thiết kế phù hợp và phần tính riêng trước khi báo giá.
Bạn cần tư vấn chiến lược SEO/AEO/GEO?
Đội ngũ chuyên gia Vidco Group sẵn sàng đồng hành cùng bạn