Brand guideline và hệ thiết kế số: hai thứ khác nhau
Bộ quy chuẩn nhận diện nói thương hiệu nên trông thế nào, còn hệ thiết kế số đảm bảo nó luôn đúng như vậy trên mọi màn hình.
Có, Anh/Chị vẫn cần, vì hai thứ này giải hai bài toán khác nhau. Bộ quy chuẩn nhận diện là tài liệu để con người đọc và diễn giải. Hệ thiết kế số (design system) là phiên bản máy đọc được của cùng nhận diện đó, để đội kỹ thuật lấy dùng trực tiếp trong code. Nói gọn: bộ quy chuẩn mô tả trạng thái đúng, còn hệ thiết kế số giữ trạng thái đúng đó mà không cần ai nhớ và làm lại bằng tay.
- có sản phẩm số và mỗi đội diễn giải guideline một kiểu
- muốn đổi màu hay font một chỗ, toàn hệ cập nhật theo
- đội thiết kế và kỹ thuật nhìn hai nguồn chuẩn khác nhau
- chưa có sản phẩm số, chỉ có ấn phẩm và mạng xã hội
- guideline chưa chốt xong
Đây là câu hỏi Sinh Vũ gặp nhiều nhất khi tư vấn dịch vụ thiết kế hệ giao diện số. Anh/Chị đã bỏ công làm bộ quy chuẩn nhận diện (brand guideline) chỉn chu, đóng thành tệp đẹ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. 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ố.
Bộ quy chuẩn nhận diện 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à nhà thiết kế, 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à nhà thiết kế 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 bộ quy chuẩn PDF không đủ cho sản phẩm số
Vấn đề không nằm ở chất lượng của bộ quy chuẩn nhận diện. Vấn đề nằm ở cơ chế thực thi. Khi lập trình viên cầm tệp 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. Bộ quy chuẩn nhận diện thì không có cơ chế này vì nó 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
Nên làm hệ thiết kế số khi:
- Anh/Chị đã có sản phẩm số, website hoặc ứng dụng đang chạy thật.
- Đội thiết kế và đội lập trình đang diễn giải bộ quy chuẩn nhận diện mỗi người một kiểu, dẫn tới giao diện không đồng nhất.
- Mỗi lần cập nhật nhận diện phải sửa tay ở nhiều nơi, tốn thời gian và dễ bỏ sót.
- Đội ngày càng lớn, nhiều người cùng đụng vào giao diện.
Chưa cần khi:
- Chưa có sản phẩm số nào, hoạt động chủ yếu là in ấn và mạng xã hội. Lúc này bộ quy chuẩn nhận diện là đủ.
- Bản thân bộ quy chuẩn nhận diện vẫn đang thay đổi, nhận diện chưa chốt. Nên ổn định nhận diện trước, không thì token sẽ phải sửa liên tục.
Lỗi thường gặp khi nhầm hai thứ
- Trả tiền làm bộ quy chuẩn nhận diện 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 bộ quy chuẩn nhận diện thành tệp 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ó bộ quy chuẩn nhận diện 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ố. Như vậy đội kỹ thuật không phải tự diễn giải nữa. Sinh Vũ gọi đây là dịch vụ thiết kế hệ giao diện số: 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ó bộ quy chuẩn nhận diện hoàn chỉnh, Sinh Vũ có thể đi từ đầu. Sinh Vũ sẽ 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ự đó.
Checklist quyết định
Chủ đề: Đã có brand guideline rồi còn cần design system không. Cẩm nang Sinh Vũ, sinhvu.com
Bấm chọn từng mục Anh / Chị thấy đúng, rồi bấm in hoặc lưu thành PDF để mang theo.
Nếu Anh / Chị đánh dấu phần lớn ở nhóm dấu hiệu trên, đây là lúc nên trao đổi kỹ hơn. Sinh Vũ có thể cùng Anh / Chị soi lại và đề xuất hướng đi.
Nguồn tham khảo
Alla Kholmatova, Design Systems (Smashing Magazine). Design Tokens Community Group (W3C). Sinh Vũ, tài liệu dịch vụ thiết kế hệ giao diện số.
Câu hỏi thường gặp
Nếu chỉ xuất bộ quy chuẩn nhận diện thành tệp PDF đẹp, lập trình viên không dùng được sao?
Lập trình viên vẫn dùng được, nhưng phải đo lại màu, khoảng cách và font bằng mắt mỗi lần. Nghĩa là mỗi người tự diễn giải một chút, cộng dồn lại thì giao diện trên web và ứng dụng sẽ lệch dần so với nhận diện gốc. Hệ thiết kế số giải quyết chính xác bài toán này: lập trình viên lấy giá trị từ token, không cần đoán.
Làm hệ thiết kế số trước khi bộ quy chuẩn nhận diện hoàn chỉnh có được không?
Không nên. Nếu nhận diện gốc chưa ổn định thì token sẽ phải sửa liên tục theo mỗi lần thương hiệu thay đổi, gây tốn công gấp đôi. Sinh Vũ khuyên hoàn thiện bộ quy chuẩn nhận diện trước, hoặc chạy song song hai việc với điều kiện phạm vi nhận diện đã được chốt rõ ràng.