Quy trình thiết kế website: từ brief đến chạy thật

Tóm tắt nhanh

Một dự án website đi qua mười chặng: brief, phạm vi, cấu trúc, wireframe, thiết kế, code, đưa nội dung, kiểm thử, chạy thật, bàn giao. Phần việc của bạn tập trung ở đầu và cuối. Hãy dùng bốn cổng duyệt, vì sửa ở chặng đầu rẻ hơn rất nhiều so với sửa sau khi đã code. Bài này tóm từng chặng và dẫn tới bài chi tiết cho những chặng cần đào sâu.

Quy trình thiết kế website gồm những bước nào?#

Quy trình thiết kế website là chuỗi việc đi từ lúc bạn nói "tôi muốn có website" đến lúc khách mở được website thật. Cách chia bước hơi khác nhau giữa các đơn vị, nhưng khung chung thì giống nhau: hiểu nhu cầu, vẽ cấu trúc, thiết kế, lập trình, kiểm thử, chạy thật, bàn giao.

Bài này là bản đồ tổng. Ba chặng có bài chuyên sâu riêng: chuẩn bị gì, mất bao lâu và bàn giao gồm những gì. Ở đây chỉ tóm tắt để bạn thấy các chặng nối với nhau thế nào, rồi chỉ chỗ nên đọc tiếp.

Đây là mô hình chung, không phải quy trình cố định của mọi đơn vị. Dự án dựng từ mẫu có sẵn gộp nhiều chặng vào một ngày. Dự án giao diện riêng kéo mỗi chặng ra nhiều ngày.

Mười chặng, từ brief đến bàn giao#

1. Brief. Bạn nói mục tiêu: bán gì, cho ai, website cần làm được việc gì, và có website nào bạn thích. Brief tốt dài một trang, không cần kỹ thuật. Chặng này cũng là lúc gom tài liệu như logo, ảnh, giá và chính sách. Danh sách đầy đủ nằm trong bài thiết kế website cần chuẩn bị gì.

2. Phạm vi. Chốt website có những trang và tính năng nào, ai là người duyệt cuối. Đây là chặng quyết định thời gian và giá. Một tính năng thêm giữa chừng buộc phải làm lại một phần. Nếu phạm vi cần công nghệ riêng, bài WordPress hay code tay giúp bạn hỏi đúng câu.

3. Cấu trúc. Vẽ cây trang và đặt tên menu: trang chủ, nhóm sản phẩm, blog, liên hệ nằm ở đâu và nối nhau thế nào. Cách sắp xếp ảnh hưởng cả trải nghiệm khách lẫn việc Google tìm thấy trang, như phân tích trong bài cách sắp xếp menu, danh mục và URL.

4. Wireframe. Phác khung từng trang bằng ô và dòng, chưa màu, chưa ảnh, để thấy thứ tự các khối. Với trang chủ, bài trang chủ website cần có gì liệt kê mười hai phần và thứ tự nên sắp.

5. Thiết kế giao diện. Phối màu, chữ, ảnh, nút theo nhận diện của bạn. Chặng này cho ra bản xem được trên điện thoại. Với WebMượt, bản xem thử này thường có sau khoảng hai giờ kể từ khi nhận link fanpage hoặc ảnh, vì dựng từ mẫu đã làm sẵn.

6. Code. Dựng giao diện thành website chạy được: giỏ hàng, form, kết nối thanh toán nếu có. Chặng này gần như là việc của bên làm web. Điều bạn cần biết là họ dùng cách nào và ai bảo trì sau đó.

7. Đưa nội dung. Chữ, ảnh sản phẩm, giá, chính sách thật được đưa vào. Thiếu nội dung là lý do thường gặp nhất khiến dự án trễ. Giao diện đẹp nhưng chữ giả vẫn chưa phải website.

8. Kiểm thử. Đặt thử đơn, thanh toán thử, kiểm tra email báo đơn, mở trên điện thoại và máy tính, đo tốc độ như trong bài cách đo tốc độ trên điện thoại. Đây là phần không nên cắt dù bị hối.

9. Chạy thật. Trỏ tên miền về website và bật chạy chính thức. Nếu chưa có tên miền, hãy xem bài cách chọn tên miền cho website và đăng ký bằng tài khoản của bạn.

10. Bàn giao. Bạn nhận tài khoản quản trị, quyền với tên miền, bản sao lưu, hướng dẫn thao tác và bảo hành. Mười hai thứ cần nhận được liệt kê trong bài bàn giao.

Ai làm gì ở mỗi chặng?#

Nhìn bảng sẽ thấy một mẫu hình: bạn dẫn dắt ở brief, phạm vi và đưa nội dung, cùng duyệt ở cấu trúc, thiết kế và nghiệm thu, còn phần code gần như do bên làm web. Điều này giải thích vì sao dự án chậm thường chậm ở phía người đặt chứ không phải phía người làm: chờ nội dung, chờ duyệt, đổi ý.

Nếu bạn cần biết mỗi chặng mất bao lâu và chỗ nào hay tắc, bài thiết kế website mất bao lâu có bốn mốc để hỏi cho đúng thay vì chỉ hỏi "bao giờ xong".

Bốn cổng duyệt: dừng lại đúng chỗ#

Không phải chặng nào cũng cần bạn dừng lại. Có bốn chỗ nên đặt cổng duyệt, vì đây là những chỗ sau đó sửa sẽ tốn.

Cổng phạm vi. Hai người cùng xem một danh sách trang và tính năng, và đồng ý. Nếu còn bất đồng thì chưa đi tiếp. Cổng khung trang. Xem thứ tự các khối có dẫn khách tới nút mua hay không. Cổng giao diện. Đọc thử chữ trên điện thoại, kiểm tra màu và ảnh đúng thương hiệu. Sau cổng này không nên đổi bố cục lớn. Cổng nghiệm thu. Đặt thử một đơn từ đầu đến cuối, kiểm tra email báo, tên miền và quyền quản trị.

Hình trên là nguyên tắc chung, không phải số liệu đo. Đổi một dòng chữ ở bước phạm vi thì gần như không tốn gì. Đổi cả bố cục khi giao diện đã code xong là làm lại. Vì vậy, thay vì cố gắng đổi ý ít đi, hãy đổi ý sớm.

Ví dụ minh hoạ: một shop váy áo đi qua mười chặng#

Để thấy các chặng nối nhau thế nào, hãy theo một shop giả định bán váy công sở, đang bán qua fanpage. Đây là ví dụ minh hoạ, không phải dự án của khách hàng cụ thể.

Ở chặng brief, chủ shop gửi link fanpage, mười ảnh sản phẩm đẹp nhất, bảng giá và chính sách đổi size. Ở chặng phạm vi, hai bên chốt: một trang chủ, ba nhóm sản phẩm, giỏ hàng, thanh toán QR, trang liên hệ, và người duyệt cuối là chính chủ shop. Cấu trúc chia ba nhóm là váy, áo, phụ kiện, thêm blog nhỏ để đăng hướng dẫn chọn size.

Khi có khung và giao diện, chủ shop xem trên điện thoại, đổi một nút từ "Xem thêm" thành "Xem váy mới" và thay ảnh hero. Đó là những sửa đổi rẻ vì còn ở chặng thiết kế. Sau đó nội dung thật được đưa vào, đặt thử một đơn có thanh toán QR, kiểm tra email báo đơn về đúng hộp thư của chủ shop, rồi trỏ tên miền và bật chạy. Ở chặng cuối, chủ shop nhận tài khoản quản trị và được hướng dẫn đăng sản phẩm.

Điểm đáng chú ý của ví dụ: mọi quyết định lớn đều xảy ra trước chặng code. Sau đó chủ shop chỉ phải làm hai việc, cấp nội dung thật và kiểm tra kỹ lúc nghiệm thu.

Chọn đường nào sau khi đã hiểu quy trình?#

Từ bản đồ này, bạn đi tiếp theo nhu cầu.

Nếu bạn muốn website chạy sớm và chưa cần giao diện độc, hãy xem kho 15 mẫu website theo ngành và thử trên điện thoại. Mẫu có sẵn rút ngắn nhiều chặng, vì cấu trúc, wireframe và thiết kế đã được làm.

Nếu bạn bán hàng và cần giỏ hàng, thanh toán, quản lý đơn, dịch vụ thiết kế website bán hàng của WebMượt đi qua đủ sáu bước: nhận yêu cầu, bản xem thử, góp ý, hoàn thiện, kiểm thử, bàn giao. Bạn đặt cọc 50% khi chốt gói và trả nốt khi website chạy thật.

Nếu thương hiệu cần giao diện vẽ riêng hoặc tính năng không có trong mẫu, dịch vụ thiết kế website theo yêu cầu chạy đủ các chặng với thời gian 3 đến 7 ngày, tính năng ngoài mẫu được thỏa thuận riêng.

Khi nào quy trình này không cần đủ mười chặng?#

Có ba trường hợp nên rút gọn. Landing page một trang cho chiến dịch thường gộp cấu trúc và wireframe vào thiết kế. Website dựng từ mẫu bỏ gần hết chặng thiết kế vì giao diện đã có. Website nội bộ hay trang giới thiệu đơn giản có thể không cần cổng duyệt giao diện riêng.

Ngược lại, có hai trường hợp nên thêm chặng. Website có tính năng đặc thù như báo giá theo yêu cầu, đặt lịch, kết nối phần mềm thì cần thêm chặng thiết kế luồng nghiệp vụ trước khi code. Website lớn có nhiều người duyệt cần thêm chặng thống nhất ai quyết định cuối cùng. Cả hai trường hợp đều nên được ghi vào phạm vi ở chặng hai, không phải phát sinh giữa chừng.

“

Quy trình tốt không phải quy trình dài nhất, mà là quy trình cho bạn dừng lại đúng chỗ còn sửa được.

Hãy in bản đồ mười chặng, đánh dấu chặng nào bạn đã làm xong, và hỏi bên làm web họ đang ở chặng nào. Câu hỏi đó thường đủ để biết dự án có đang đi đúng hướng không.

Nguồn thông tin: mô tả quy trình, thời gian, đặt cọc và gói dịch vụ lấy từ bảng giá và điều khoản hiện hành của WebMượt. Bản đồ mười chặng và bốn cổng duyệt là cách chia của WebMượt để dễ trao đổi, không phải tiêu chuẩn ngành.