Brand guideline và hệ thiết kế số: hai thứ khác nhau

Đây là câu hỏi Sinh Vũ gặp nhiều nhất khi tư vấn dịch vụ A3. Anh/Chị đã bỏ công làm bộ quy chuẩn nhận diện (brand guideline) chỉn chu, đóng thành file đẹp, rồi thắc mắc: vậy hệ thiết kế số (design system) còn khác gì nữa mà phải làm thêm? Câu trả lời thẳng: hai thứ đó phục vụ hai đối tượng khác nhau và thiếu một cái thì nhận diện vẫn bị loãng khi đưa lên sản phẩm số.

Guideline và hệ thiết kế số khác nhau ở đâu

Bộ quy chuẩn nhận diện là tài liệu ngôn ngữ: nó giải thích màu chủ đạo là gì, font được dùng ra sao, logo xuất hiện ở đâu và không xuất hiện ở đâu. Người đọc là designer, nhân sự marketing, đối tác in ấn. Họ đọc, hiểu, rồi diễn giải.

Hệ thiết kế số là tài liệu kỹ thuật: nó dịch chính nhận diện đó thành các giá trị mà máy tính đọc được. Màu không còn là "xanh đậm ấm" mà là một token (mã giá trị) cụ thể. Font không còn là tên font mà là biến số được gọi trong code. Người dùng là lập trình viên và designer kỹ thuật số. Họ không cần đọc, họ cần kế thừa trực tiếp.

Quy chuẩn nhận diện thuộc lớp ngôn ngữ và nguyên tắc cho con người. Hệ thiết kế số thuộc lớp thực thi: token, component, tài liệu tương tác. Cùng một nhận diện nhưng hai lớp phục vụ hai loại người dùng khác nhau.

Alla Kholmatova, Design Systems (Smashing Magazine)

Vì sao guideline PDF không đủ cho sản phẩm số

Vấn đề không nằm ở chất lượng của guideline. Vấn đề nằm ở cơ chế thực thi. Khi lập trình viên cầm file PDF và tự nhập màu vào code, sai số nhỏ xảy ra ở mỗi bước. Cộng dồn qua nhiều màn hình, nhiều thành phần, nhiều lần cập nhật thì giao diện thực tế lệch dần so với nhận diện gốc. Không ai cố tình làm sai, nhưng không có cơ chế tự động thì sai là tất yếu.

Token thiết kế (design token) là nguồn chuẩn duy nhất cho màu, chữ, khoảng cách. Khi Anh/Chị muốn đổi một màu chủ đạo, chỉ cần sửa ở token gốc, tất cả nơi kế thừa token đó cập nhật theo, không sót chỗ nào. Guideline thì không có cơ chế này vì guideline không chạy trong code.

Thương hiệu đẹp trên giấy vẫn loãng dần khi vào sản phẩm số nếu thiếu cơ chế thực thi tự động. Guideline mô tả trạng thái đúng. Hệ thiết kế số duy trì trạng thái đúng đó.

Sinh Vũ, phương pháp A3

Khi nào cần làm, khi nào chưa cần

Lỗi thường gặp khi nhầm hai thứ

• Trả tiền làm guideline xong tưởng đã có hệ dùng được trong code. Đây là lỗi hiểu nhầm phổ biến nhất Sinh Vũ gặp.
• Xuất guideline thành PDF đẹp nhưng lập trình viên vẫn phải đo màu, khoảng cách bằng mắt mỗi lần cần dùng.
• Làm hệ thiết kế số khi nhận diện gốc chưa ổn định. Token phải sửa liên tục theo nhận diện thì chi phí tăng gấp đôi mà kết quả vẫn bất ổn.

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

Nếu Anh/Chị đã có guideline tốt và đang vận hành sản phẩm số, bước tiếp theo tự nhiên là đưa nhận diện đó vào hệ thiết kế số để đội kỹ thuật không phải tự diễn giải nữa. Sinh Vũ gọi đây là dịch vụ A3: lấy nhận diện đã có, đúc thành token và component để đội lập trình kế thừa trực tiếp.

Nếu Anh/Chị chưa có guideline hoàn chỉnh, Sinh Vũ có thể đi từ đầu: rà soát nhận diện hiện tại trong giai đoạn phát hiện, hoặc tư vấn làm A1 và A2 trước để có gốc chuẩn, rồi mới chuyển sang A3. Không nên đảo ngược thứ tự đó.