Sổ tay thương hiệu và thư viện giao diện: 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ố giữ cho nó luôn đúng như vậy trên mọi màn hình.
Có, nếu Anh / Chị đã có sản phẩm số, 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 mã lập trình (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 bộ quy chuẩn một kiểu
- muốn đổi màu hay kiểu chữ 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
- bộ quy chuẩn chưa chốt xong
Đây là câu hỏi rất hay gặp khi một doanh nghiệp bắt đầu đưa nhận diện lên sản phẩm 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 viết bằng lời cho con người đọc: nó giải thích màu chủ đạo là gì, dùng kiểu chữ nào, logo xuất hiện ở đâu và không xuất hiện ở đâu. Người đọc là nhà thiết kế, người làm marketing (tiếp thị), đố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 cụ thể, tức giá trị được đặt tên sẵn để máy đọc. Kiểu chữ là một biến số được gọi ngay 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 rồi diễn giải, họ lấy dùng trực tiếp.
Quy chuẩn nhận diện gồm ngôn ngữ và nguyên tắc dành cho con người. Hệ thiết kế số là phần thực thi: token, thành phần giao diện dùng lại (component), tài liệu tương tác. Cùng một nhận diện, nhưng hai phần này phục vụ hai nhóm 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à khó tránh.
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, mọi nơi kế thừa token đó cập nhật theo. 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. Bộ quy chuẩn mô tả trạng thái đúng. Hệ thiết kế số duy trì trạng thái đúng đó.
Kinh nghiệm thực hành
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à hiểu nhầm phổ biến nhất giữa hai thứ.
- 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ì công làm hai lần mà kết quả vẫn bất ổn.
Nếu chưa có bộ quy chuẩn hoàn chỉnh
Thứ tự thường hợp lý là chốt nhận diện và bộ quy chuẩn trước, rồi mới dựng hệ thiết kế số từ đó. Đảo ngược thì token phải chạy theo một nhận diện còn đang đổi, và đội kỹ thuật vẫn phải tự diễn giải ở những chỗ bộ quy chuẩn chưa nói tới.
Bảng kiểm quyết định
Chủ đề: Đã có sổ tay thương hiệu rồi còn cần thư viện giao diện không. Cẩm nang Sinh Vũ, sinhvu.com
Bấm chọn từng mục Anh / Chị thấy đúng hoặc đã trả lời được, rồi bấm Tải bản gửi nhanh để gửi đi, hoặc bấm In nếu cần bản giấy.
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à kiểu chữ 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 đúng bài toán này: lập trình viên lấy giá trị từ token (mã giá trị), 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?
Thường không nên. Nếu nhận diện gốc chưa ổn định thì token phải sửa liên tục theo mỗi lần thương hiệu thay đổi, tốn công làm hai lần. Hợp lý hơn là hoàn thiện bộ quy chuẩ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õ.
Bài viết là thông tin tham khảo. Phạm vi, giá và cam kết cụ thể của Sinh Vũ ghi trong hồ sơ đề xuất và hợp đồng đã ký.