Quy trình phát triển website

Nhu cầu/Mục đích/mục tiêu sử dụng website
Đối tượng website hướng tới/Khách hàng mục tiêu
Thời gian – tiến độ
- Nghiên cứu
- Lập kế hoạch
- Thiết kế
- Phát triển
- Tối ưu
- Kiểm thử
- Triển khai – Ra mắt
- Bảo trì
Ngân sách
- Ngân sách khởi tạo
  - Tên miền
  - Lưu trữ
  - CMS
    - Theme
    - Plugin
- Ngân sách vận hành
- Ngân sách bảo trì
Yêu cầu giao diện/thiết kế
- Giao diện tham khảo
- Phong cách
- Màu sắc
- Kiểu chữ(Typeface – Font)
- Hình khối
- Tương thích đa thiết bị
Yêu cầu công nghệ
Yêu cầu chức năng
- Bán hàng
  - Giỏ hàng
  - Thanh toán
  - Theo dõi đơn hàng/tracking vận chuyển
  - So sánh sản phẩm
  - Đặt trước
  - Đấu giá
  - Tìm kiếm/Bộ lọc sản phẩm
  - So sánh giá
  - Đánh giá sản phẩm
- Marketing
  - Chatbot
  - Đăng ký/Đăng nhập
  - Livechat
  - Chat bot
  - Bình luận
  - Form liên hệ
  - Đăng ký bản tin
  - Lưu sản phẩm/bài viết
  - Diễn đàn/Forum
Yêu cầu nội dung
- Ngôn ngữ
- Sitemap
Yêu cầu bảo mật
Yêu cầu backup
Yêu cầu khác
- Số lần tùy chỉnh
- Hỗ trợ sau khởi tạo
- Hướng dẫn sử dụng
- Bảo hành/bảo trì
- Uptime/Livetime

Nghiên cứu – Phân tích – Tư vấn – Báo giá

Quá trình này cần đưa ra được các trả lời cho:
– Đối tượng trực tiếp sử dụng website là ai?
– Khách hàng tìm kiếm điều gì trên website?
– Khách hàng có những vấn đề gì cần giải quyết?
– Công ty có những ưu điểm gì khác biệt so với đối thủ?
– Những điều khiến người dùng từ chối dùng sản phẩm/dịch vụ của công ty

1. Đọc tiêu đề 3 – 5 giây
2. Tìm giá trị họ cần và lý do để tin tưởng
=> Bạn làm gì? Bạn phục ai? Bạn có gì đặc biệt? Cần làm gì để liên hệ bạn

Nghiên cứu doanh nghiệp

Mục đích, tầm nhìn, sứ mệnh
Sản phẩm, dịch vụ
Đối tượng khách hàng mục tiêu
Những điểm khác biệt cạnh tranh
Thông tin doanh nghiệp
- Tên thương hiệu
- Tên doanh nghiệp
- Lĩnh vực hoạt động
- Sản phẩm/dịch vụ
- Slogan/Tagline
- Tầm nhìn
- Sứ mệnh
- Mục tiêu
- Đối tượng khách hàng
- Địa chỉ
- Điện thoại
- Hotline
- Email
Mạng xã hội
- Facebook
- Youtube
- Tiktok
- Instagram
- MXH Khác
Brand Guideline
- Giới thiệu về thương hiệu
- Logo
- Màu sắc
- Kiểu chữ(Typeface – Font)
- Hình ảnh
- Giọng điệu
- Cách sử dụng
Tài nguyên marketing
- Tài nguyên(hình ảnh, video, tài liệu..) về công ty(logo, profile, video giới thiệu, giải thưởng/chứng nhận…)
- Tài nguyên(hình ảnh, video, tài liệu..) về sản phẩm
- Tài nguyên thiết kế website

Nghiên cứu khách hàng

Chân dung khách hàng

Hành trình khách hàng

Nghiên cứu đối thủ

Nghiên cứu nhà phân phối

Nghiên cứu nhà cung cấp

Nghiên cứu môi trường

Lên ý tưởng – Lập kế hoạch

Xây dựng ý tưởng giao diện (concept design)

Phác thảo bố cục
Xác định phong cách thiết kế
- Màu sắc
- Font chữ
- Hình ảnh

Xây dựng cấu trúc nội dung(site map)

Trang chủ
Giới thiệu
Tuyển dụng
Điều khoản – Chính sách
- Điều khoản sử dụng
- Chính sách bảo mật
Sản phẩm/Dịch vụ

Lập danh sách tính năng cần có

Form liên hệ(capcha chống spam)
Chatbot(tích hợp AI)
Giỏ hàng
Thanh toán
Chia sẻ
Đăng nhập/Đăng ký
Diễn đàn

Chọn nền nảng và công nghệ

CMS
Code
- Fontend
- Back end
- Cơ sở dữ liệu
Máy chủ lưu trữ

Lập danh sách pháp lý cần đăng ký

Thông báo/Đăng ký Bộ công thương(website bán hàng/TMĐT)
Giấy phép thiết lập mạng xã hội(Mạng xã hội/Diễn đàn)
Giấy phép chuyên ngành (tài chính, báo chí/xuất bản, y tế)

Xác định tài nguyên marketing cần có

Thiết kế website

Thiết kế sơ đồ bố cục phác thảo khung(wireframe)

Xây dựng Design System/Style Guide

Mục tiêu và Tầm nhìn (Vision and Purpose)
Ngôn ngữ Thương hiệu (Brand Voice and Messaging)
- Giọng điệu (Tone of Voice)
- Thuật ngữ (Terminology)
- Thông điệp cốt lõi (Key Messages)
Thương hiệu (Branding Elements)
- Logo: Các phiên bản logo (chính, phụ, biểu tượng), quy tắc sử dụng (khoảng cách an toàn, kích thước tối thiểu, nền cho phép), không được phép biến đổi logo.
- Màu sắc (Color Palette): Bảng màu chính và phụ với mã màu (Hex, RGB, CMYK), cách sử dụng màu sắc cho các yếu tố khác nhau (văn bản, nút, nền, cảnh báo…).
Kiểu chữ (Typography)
- Hệ thống font chữ: Các font chữ chính và phụ được sử dụng (ví dụ: một font cho tiêu đề, một font cho nội dung).
- Kích thước font: Các kích thước font cho tiêu đề (H1, H2, H3…), đoạn văn bản (paragraph), chú thích, nút bấm… trên các thiết bị khác nhau (desktop, mobile).
- Trọng lượng font (Font Weight): Bold, Regular, Light.
- Khoảng cách dòng (Line Height)
- Khoảng cách chữ (Letter Spacing).
Thành phần Giao diện Người dùng (UI Components/Elements)
- Nút (Buttons): Các trạng thái (mặc định, hover, active, disabled), kích thước, màu sắc, font chữ.
- Trường nhập liệu (Form Inputs): Ô văn bản, checkbox, radio button, dropdown, các trạng thái lỗi/thành công.
- Biểu tượng (Icons): Bộ icon sử dụng, kích thước, màu sắc, cách sử dụng.
- Hình ảnh (Imagery): Phong cách hình ảnh (ảnh chụp thực, minh họa, trừu tượng), quy tắc nén ảnh, kích thước tối ưu.
- Card, Module, Section: Các khối nội dung cụ thể, cách sắp xếp và khoảng cách.
- Thanh điều hướng (Navigation): Kiểu menu, trạng thái.
- Thông báo (Alerts/Notifications): Các loại thông báo (thành công, lỗi, cảnh báo) và cách hiển thị.
- Khoảng cách (Spacing): Quy tắc về khoảng cách giữa các thành phần, sử dụng hệ thống grid (lưới).
Trạng thái Tương tác (Interaction States)
Khả năng Tiếp cận (Accessibility Guidelines – tùy mức độ)