Thiết kế UI/UX

5 dấu hiệu nên đầu tư UI UX riêng

Không phải mọi web hay ứng dụng đều cần thuê UI UX riêng. Đối chiếu 5 dấu hiệu trước khi quyết định:

• Có nhiều dự án dùng chung thương hiệu: nhiều web kèm landing page và ứng dụng, mỗi dự án người thiết kế khác. Cần hệ thống thiết kế tập trung.
• Đội ngũ thiết kế nội bộ hơn 2 người: mỗi người vẽ kiểu riêng. Cần chuẩn chung màu, font, khoảng cách để bàn giao gọn.
• Sắp build ứng dụng di động native: không chỉ là phiên bản đa thiết bị của web. Cần UX chuyên di động kèm gesture và vùng chạm.
• Web hiện tại có tỉ lệ thoát cao dù tốc độ ổn: vấn đề có thể ở UX — luồng không rõ, CTA mờ. Cần rà soát UX rồi thiết kế lại.
• Đối thủ có UI UX rõ ràng hơn: khách so sánh nhanh trong 3-5 giây. Thiết kế kém là mất khách trước khi xem nội dung.

Nếu chỉ có 1 web duy nhất, không có ứng dụng, đội thiết kế 1 người — dịch vụ thiết kế website thông thường đã đủ.

Phân biệt hệ thống thiết kế standalone và UI UX 1 website

2 thứ dễ nhầm — đối chiếu 5 tiêu chí trước khi chọn:

Quy tắc: chỉ có 1 web duy nhất → dịch vụ thiết kế website đủ. Có nhiều dự án cùng thương hiệu → cần hệ thống thiết kế — xem Xây dựng hệ thống thiết kế.

Phân biệt UI UX ứng dụng di động và thiết kế web

Ứng dụng di động native KHÁC web di động đa thiết bị. Bỏ qua khác biệt là ứng dụng khó dùng, khách bỏ ngay:

• Điều hướng: web có URL bar và nút back trình duyệt. Ứng dụng có tab bar và back trong ứng dụng — UX hoàn toàn khác.
• Vùng chạm: web có chuột chính xác. Ứng dụng chạm bằng ngón cái — tối thiểu 44×44px Apple HIG hoặc 48×48dp Android.
• Cử chỉ: ứng dụng dùng vuốt, kéo, chạm 2 ngón. Web không có (trừ touch event hạn chế).
• Trạng thái ngoại tuyến: ứng dụng cần xử lý mất mạng kèm đồng bộ sau. Web phụ thuộc mạng.
• Chuẩn thiết kế: iOS dùng Apple HIG, Android dùng Material Design 3. Cùng ứng dụng phải có 2 bản design riêng.

“Làm UI UX ứng dụng như web di động” là sai lầm phổ biến. Web22 nhận thiết kế UI UX ứng dụng theo chuẩn HIG/Material — phí 5-80 triệu, xem Thiết kế UI ứng dụng di động.

Tại sao Web22 chia thành 2 hướng

Web22 chia 2 hướng UI UX độc lập để phù hợp 2 nhu cầu khác nhau:

• Hướng 1 — Hệ thống thiết kế standalone (3-60 triệu): thư viện thành phần Figma kèm design tokens. Có 4 phân hạng từ UI kit nhỏ đến hệ thống doanh nghiệp.
• Hướng 2 — UI UX ứng dụng di động (5-80 triệu): Figma kèm prototype tương tác. 4 phân hạng từ mockup nhỏ đến ứng dụng doanh nghiệp. CHỈ thiết kế, KHÔNG code ứng dụng.

Dịch vụ này là dịch vụ nâng cao, phù hợp sau khi khách đã hoàn thành web cơ bản. Khách cần build ứng dụng sẽ được Web22 giới thiệu đối tác chuyên Native, React Native hoặc Flutter.

8 yếu tố quyết định chi phí UI UX

Cùng “thiết kế UI UX ứng dụng” có thể chênh 20 lần giá. 8 yếu tố quyết định:

• Số lượng màn hình: dưới 10 màn → mini mockup. 15-25 màn → tiêu chuẩn. Trên 40 màn → doanh nghiệp.
• Độ phức tạp luồng: đăng nhập + mua đơn giản → rẻ. Luồng đa nhánh đặt phòng, đặt lịch → đắt hơn 3-5 lần.
• Số thành phần hệ thống thiết kế: 5-10 thành phần 3-6 triệu. 20-30 thành phần 10-25 triệu. 50+ thành phần 30-60 triệu.
• Có làm prototype tương tác không: chỉ Figma tĩnh → rẻ. Prototype clickable đầy đủ luồng thêm 30-50%.
• Hỗ trợ chế độ tối và WCAG AA: 1 bộ thiết kế → rẻ. 2 bộ sáng tối kèm WCAG AA thêm 40-60%.
• Kiểm tra với người dùng thật: không kiểm tra → rẻ. Kiểm tra 5-8 người kèm báo cáo thêm 5-15 triệu.
• Tài liệu bàn giao lập trình viên: chỉ Figma share link → rẻ. Tài liệu spec đầy đủ thêm 20-30%.
• Số vòng chỉnh sửa: 2 vòng mặc định → giá cố định. Vòng thứ 3 trở đi thêm 10-20%/vòng.

Đơn vị báo giá dưới 3 triệu cho ứng dụng di động UI UX — cẩn thận. Thường chỉ vẽ qua loa Figma, không prototype, không kiểm tra.

Quy trình áp dụng cho cả 2 hướng (hệ thống thiết kế và ứng dụng di động). Khác nhau ở độ sâu mỗi bước.

Bước 1 — Workshop tư vấn

Trao đổi sâu về nhu cầu, đối tượng người dùng, thương hiệu, đối thủ trong 1-2 giờ.

Phí 1-2 triệu/buổi độc lập, miễn phí nếu khách đặt dự án.

Bước 2 — Bản phạm vi và báo giá

Web22 viết bản 2-4 trang gồm mục tiêu UX, số màn hoặc thành phần, công cụ, lịch trình, giá cố định. Khách duyệt và ký trước khi đi tiếp.

Bước 3 — Phác thảo khung (wireframe)

Bản phác đen trắng cho 80% màn quan trọng. Tập trung luồng và bố cục, chưa có màu sắc hoặc font.

Khách duyệt phác thảo trước khi đi tiếp.

Bước 4 — Thiết kế chi tiết (mockup)

Áp màu, font, ảnh thật vào khung. Sản phẩm là file Figma high-fidelity kèm design tokens.

2 vòng chỉnh sửa với khách mặc định trong gói.

Bước 5 — Prototype tương tác (nếu có)

Liên kết các màn thành luồng clickable. Khách kèm 5-8 người thử để phát hiện vấn đề UX.

Sửa lần cuối trước khi bàn giao.

Bước 6 — Bàn giao và tài liệu

File Figma, design tokens JSON, tài liệu spec PDF, video hướng dẫn lập trình viên. Bảo hành 30 ngày sửa lỗi spec.

Hệ thống thiết kế — đầu tư cho ai

Hệ thống thiết kế là tài sản, không phải chi phí 1 lần. 4 nhóm doanh nghiệp hợp lý đầu tư:

• Tập đoàn nhiều thương hiệu phụ: mỗi thương hiệu có web kèm ứng dụng riêng. Tiết kiệm 30-50% chi phí thiết kế mỗi dự án sau này.
• Startup gọi vốn vòng A-B trở lên: đã có sản phẩm, đang mở rộng. Hệ thống thiết kế giúp ra mắt tính năng mới nhanh hơn.
• Đại lý làm web hoặc ứng dụng phục vụ nhiều khách: mỗi khách phong cách riêng nhưng dùng chung cấu trúc. Tăng năng suất nội bộ.
• Đội nội bộ chuyển đổi số doanh nghiệp lớn: đang xây nhiều ứng dụng nội bộ. Cần ngôn ngữ thiết kế chung.

KHÔNG hợp lý cho doanh nghiệp 1 web duy nhất, đội thiết kế 1 người, không có lộ trình thêm dự án trong 12 tháng.

UI UX ứng dụng di động — vì sao Web22 không code ứng dụng

Câu hỏi thường xuyên: “Web22 nhận làm ứng dụng luôn cả code không?”. Câu trả lời thẳng là KHÔNG — lý do dưới đây:

• Web22 chuyên web: đội ngũ giỏi WordPress, Next.js, Laravel. Code ứng dụng native hoặc cross-platform là kỹ năng khác.
• Code ứng dụng tốt cần 3-6 tháng dev: Web22 không kham được khi giữ chất lượng đồng thời nhiều dự án.
• Bảo trì ứng dụng khác bảo trì web: Ứng dụng Store và Play Store có quy trình duyệt riêng, cập nhật khắt khe.
• Đối tác Native và Flutter Việt Nam có sẵn: Web22 quen nhiều đối tác chất lượng tốt và hưởng phí giới thiệu minh bạch.

Web22 ưu tiên thật lòng — làm tốt phần mạnh (UI UX Figma + handoff), giới thiệu đối tác cho phần ngoài chuyên môn.

Figma, Adobe XD và Sketch — chọn công cụ nào

3 công cụ phổ biến UI UX 2026 kèm đặc điểm:

Web22 mặc định Figma cho mọi dự án — chuẩn ngành 2026, cộng tác thời gian thực. Khách yêu cầu Adobe XD hoặc Sketch thì nhận, phí có thể cao hơn 10-15%.

Bàn giao UI UX chuẩn — 10 thứ phải nhận

Sau khi đơn vị bàn giao dự án UI UX, bạn phải nhận đủ 10 thứ sau:

• File Figma đầy đủ: link share kèm file sao lưu .fig.
• Design tokens JSON: màu, font size, khoảng cách, border-radius.
• Hệ thống thành phần (component library): đầy đủ trong Figma.
• Prototype tương tác: nếu có trong phạm vi.
• Tài liệu spec PDF cho lập trình viên: khoảng cách, font, hành vi, animation.
• Video hướng dẫn 1-2 giờ: giải thích hệ thống thiết kế và cách dùng.
• Asset xuất: icon SVG, ảnh @1x @2x @3x cho di động.
• Báo cáo kiểm tra người dùng thật: nếu có trong phạm vi.
• Cam kết bảo hành: sửa lỗi spec trong 30 ngày miễn phí.
• Kênh liên hệ bảo hành: Zalo, email, Figma comment.

Yêu cầu xác nhận 10 mục trước thanh toán đợt cuối.

Duy trì hệ thống thiết kế sau bàn giao

Hệ thống thiết kế không “hoàn thành mãi mãi”. 3 nguyên nhân cần duy trì:

• Thêm tính năng mới: sản phẩm mở rộng, cần thêm modal, biểu đồ, bảng dữ liệu. Mỗi thành phần thêm 1-3 triệu.
• Cập nhật theo chuẩn mới: Apple HIG và Material Design ra phiên bản mới hàng năm. Cần điều chỉnh tương thích.
• Chỉnh sửa theo phản hồi người dùng: sau 3-6 tháng dùng thật, cần điều chỉnh UX dựa trên dữ liệu thực tế.

2 lựa chọn duy trì — theo yêu cầu (1-3 triệu/thành phần) hoặc gói duy trì hàng tháng. Gói tháng 3-5 triệu, gồm 4-6 thành phần kèm cập nhật chuẩn.

10 dấu hiệu đơn vị UI UX tin cậy

Trước khi ký, đánh giá đơn vị theo 10 điểm:

• Có danh mục dự án Figma share công khai: không chỉ ảnh chụp.
• Có làm workshop trước khi báo giá: không quote mù qua chat.
• Có quy trình rõ ràng: phác khung → mockup → prototype → bàn giao.
• Hiểu khác biệt iOS HIG và Material Design: nếu làm ứng dụng.
• Có design tokens xuất JSON: không chỉ “giao file Figma rồi xong”.
• Có tài liệu spec PDF cho lập trình viên: kèm bàn giao.
• Có cam kết số vòng chỉnh sửa rõ: 2 vòng mặc định kèm chi phí vòng thêm.
• Có thoả thuận không “vẽ thêm”: sau khi ký bản phạm vi.
• Có ví dụ hệ thống thiết kế đã làm: đọc được cấu trúc, không chỉ ảnh đẹp.
• Sẵn sàng từ chối “thiết kế + code ứng dụng full”: đơn vị làm hết thường không giỏi cả hai.

Đơn vị thiếu hơn 3/10 tiêu chí → cẩn thận.

Một giao diện đẹp chưa chắc là một giao diện hiệu quả. Đẹp mà khách không tìm thấy nút cần bấm, không hiểu bước tiếp theo, hay rối khi thanh toán thì vẫn mất khách. Web22 thiết kế hướng tới mục tiêu kinh doanh của trang — đăng ký, mua, hay liên hệ — chứ không chỉ để nhìn cho sang. Mỗi màn hình đều có một việc rõ ràng muốn người dùng làm, và bố cục dẫn mắt họ về đúng việc đó. Cái đẹp ở đây là đẹp có chủ đích, phục vụ chuyển đổi, không phải trang trí.

Đây cũng là lý do khâu kiểm thử khả dụng quan trọng: cho người thật dùng thử bản mẫu, xem họ vấp ở đâu rồi sửa trước khi lập trình — rẻ hơn nhiều so với phát hiện lỗi sau khi web đã code xong và chạy thật.

7 lỗi phổ biến khi thuê UI UX

Những lỗi này phổ biến và tốn tiền sửa. Biết trước để tránh:

• Yêu cầu UI UX không có người dùng thật: thiết kế đẹp theo cảm tính, không kiểm tra khách thật. Sửa lại tốn 30-50% phí ban đầu.
• Bỏ qua bước phác khung: đi thẳng vào mockup đẹp. Đến lúc lập trình mới phát hiện luồng sai.
• Thiếu design tokens: chỉ giao file Figma. Lập trình viên đoán giá trị màu hoặc khoảng cách → sai lệch 5-15%.
• Thiết kế chỉ cho máy tính: quên đa thiết bị. Di động-first là chuẩn 2026.
• Không kiểm tra độ tương phản WCAG: chữ xám trên nền trắng → khách lớn tuổi không đọc được. Cần WCAG AA tương phản 4,5:1.
• Vẽ ứng dụng như web di động: thiếu gesture, vùng chạm nhỏ hơn 44px, điều hướng dùng URL.
• Không bàn giao tài liệu lập trình viên: đơn vị nói “Figma đủ rồi”. Lập trình viên phải đoán hành vi animation.

Dịch vụ liên quan

UI UX là 1 lớp trong dự án số. Để có sản phẩm hoàn chỉnh, kết hợp:

• Thiết kế website — web mới có UI UX riêng, 2-35 triệu theo nhiều gói.
• Tuỳ biến theme WordPress — áp hệ thống thiết kế mới vào WordPress hiện có.
• Plugin tuỳ biến WordPress — Block Gutenberg theo hệ thống thiết kế.
• Tối ưu hiệu năng — UI đẹp nhưng tải chậm là mất khách.
• Dịch vụ WooCommerce — UI UX thanh toán là điểm yếu thường gặp.
• Dịch vụ SEO — UI UX ảnh hưởng CWV (chỉ số trải nghiệm trang của Google) và tỉ lệ thoát.

Web22 thiết kế giao diện và trải nghiệm cho các website sau:

• Mộc Wedding — thiệp cưới trực tuyến sang trọng — web studio cưới — bộ sưu tập ảnh, bảng giá gói chụp, form đặt lịch tư vấn.
• Hoa Tươi Duy Duy — web cửa hàng hoa tươi TP.HCM — shop hoa tươi — đặt hoa theo dịp, giao nhanh nội thành, giỏ hàng và thanh toán.

Xem đầy đủ tại trang dự án Web22 đã thực hiện. Tham khảo thêm nghiên cứu trải nghiệm của Nielsen Norman Group.