Brand guideline và design system: hai hay một

Brand guideline tốt là điều kiện cần nhưng chưa đủ để xây hệ thiết kế số. Hai tài liệu này không cạnh tranh nhau mà phục vụ hai lớp hoàn toàn khác nhau trong hệ sinh thái thương hiệu. Câu hỏi đúng không phải "có hay không" mà là "doanh nghiệp của Anh Chị đang ở đâu trong hành trình số".

Hai tài liệu, hai đối tượng

Brand guideline (cẩm nang nhận diện thương hiệu) định nghĩa logo, màu sắc, typography (kiểu chữ), giọng điệu thương hiệu bằng ngôn ngữ con người có thể đọc và áp dụng thủ công. Đối tượng của nó là designer, agency, nhà in.

Design system (hệ thiết kế số) định nghĩa design token (biến giá trị thiết kế, ví dụ màu chính được lưu thành biến --color-primary trong code), component (thành phần giao diện tái sử dụng) và hành vi tương tác. Đối tượng của nó là frontend developer viết code sản phẩm số.

Theo Nielsen Norman Group, đây là hai tầng tách biệt: brand identity system (hệ nhận diện thương hiệu) và design system (hệ thiết kế số). Nhầm lẫn hai tầng này dẫn đến deliverable (kết quả bàn giao) không rõ ràng cho cả designer lẫn developer.

Khoảng cách giữa guideline và code

Vấn đề thực tế xảy ra khi Anh Chị giao brand guideline dạng PDF cho developer và kỳ vọng họ tự dịch sang code. Kết quả là mỗi người hiểu một kiểu, mỗi người viết button (nút bấm) theo một cách khác nhau dù cùng nhìn vào một tài liệu.

Design token chính là cầu nối giải quyết khoảng cách đó. Thay vì để developer tự diễn giải "màu chính của thương hiệu là xanh đậm", token ghi rõ giá trị cụ thể dùng được trong mọi framework (bộ khung lập trình). Salesforce Lightning Design System và Material Design của Google là hai ví dụ thực tế lớn về cách tổ chức dùng token để đảm bảo nhất quán khi có hàng trăm developer cùng làm việc.

Nhất quán thương hiệu là yếu tố cốt lõi của brand equity (tài sản thương hiệu). Design system là cơ chế kỹ thuật để bảo đảm nhất quán đó tại mọi điểm chạm số.

Kevin Lane Keller, Strategic Brand Management, khung CBBE

Khi nào chỉ cần một, khi nào cần cả hai

Trường hợp đặc biệt: startup sinh ra từ môi trường số, chưa có brand guideline đầy đủ, có thể xây design token trước rồi trích xuất ra brand guideline sau. Nhưng nếu thương hiệu cần xuất hiện trên cả kênh offline, nên làm brand guideline trước để có nguồn sự thật chính thống, tránh token và ấn phẩm in chạy hai hướng khác nhau.

Lỗi thường gặp

• Giao brand guideline PDF cho developer và kỳ vọng họ tự dịch sang code chính xác, kết quả là giao diện không đồng nhất dù cùng một thương hiệu.
• Xây design system khi chưa có brand guideline, developer tự đặt tên màu tùy ý, token không có nguồn thương hiệu chính thống để bám vào.
• Nhập nhằng hai tài liệu trong cùng một dự án, deliverable không rõ ràng, designer và developer không biết mình cần nhìn vào đâu.
• Bỏ qua design system vì nghĩ brand guideline đã đủ, rồi phát hiện giao diện app và website đang dùng hai bộ màu khác nhau sau khi đã launch.

Góc nhìn của Sinh Vũ

Khi khách hàng đã có brand guideline, Sinh Vũ dùng nó làm đầu vào để trích xuất design token cho design system, không làm lại từ đầu. Cách này tiết kiệm thời gian và đảm bảo token luôn đồng nhất với thương hiệu đã được định nghĩa.

Câu hỏi Sinh Vũ luôn hỏi trước khi đề xuất có nên xây design system hay không: đội developer của Anh Chị có đang phải duy trì giao diện sản phẩm số không, và họ hiện đang dịch brand guideline ra code theo cách nào? Nếu câu trả lời là "mỗi người một kiểu" thì design system không phải chi phí thêm, mà là công cụ tiết kiệm thời gian sửa lỗi nhất quán về sau.

Câu hỏi thường gặp

Design system có thay thế được brand guideline không?

Không thay thế được. Brand guideline định nghĩa thương hiệu bằng ngôn ngữ con người, dùng cho designer, agency và in ấn. Design system chuyển những định nghĩa đó thành biến code và component, dùng cho frontend developer. Thiếu brand guideline thì design system không có nguồn thương hiệu chính thống để bám vào.

Nếu đã có brand guideline, Sinh Vũ xây design system mất bao lâu?

Sinh Vũ dùng brand guideline hiện có làm đầu vào để trích xuất design token, không làm lại từ đầu, nên tiết kiệm đáng kể so với xây mới hoàn toàn. Thời gian cụ thể phụ thuộc vào số lượng component cần xây và độ phức tạp của sản phẩm số, Sinh Vũ sẽ đánh giá sau khi xem hệ sinh thái hiện tại của Anh Chị.

Startup chưa có brand guideline nên làm cái nào trước?

Nếu sinh ra từ môi trường số, Anh Chị có thể xây design token trước rồi trích xuất ra brand guideline sau. Tuy nhiên nếu thương hiệu cần xuất hiện trên cả kênh offline thì nên làm brand guideline trước để có nguồn sự thật chính thống, tránh tình trạng token và ấn phẩm in chạy theo hai hướng khác nhau.