Hệ thống nhận diện hoạt động tốt không phải khi trông đẹp ở kích thước trình bày, mà khi vẫn nhận ra được ở kích thước nhỏ nhất và vẫn không vỡ ở kích thước lớn nhất. Bí quyết nằm ở hai thứ: hình dạng đặc trưng đủ mạnh để nhận ra dù thiếu chi tiết, và tỉ lệ được thiết kế theo từng ngưỡng kích thước, không phải một phiên bản duy nhất co giãn tự do.
Trong bài này · 6 phần
Hầu hết logo được trình bày và duyệt ở một kích thước duy nhất: vừa tầm nhìn, đủ thấy chi tiết, trông cân đối trên màn hình. Nhưng đó không phải nơi logo thật sự sống.
Logo sống trên tab trình duyệt, rộng 16 điểm ảnh. Logo sống trên tấm biển ngoài mặt tiền, cao ba mét.
Hai nơi này đặt ra hai bài toán hoàn toàn khác nhau, và một thiết kế duy nhất không thể tự co giãn mà qua được cả hai.
Kích thước không phải con số, đó là ngưỡng nhận thức
Mắt người không đọc hình ảnh theo tỉ lệ tuyến tính. Khi một hình đủ lớn, não nhận diện từng chi tiết. Khi hình thu nhỏ dưới một ngưỡng nào đó, não chuyển sang nhận diện hình dạng tổng thể.
Nghiên cứu của Lindgaard và cộng sự công bố năm 2006 trên tạp chí Behaviour & Information Technology cho thấy ấn tượng thị giác hình thành trong 50 mili-giây.
Ở khoảng thời gian đó, não không đọc chi tiết, não đọc hình khối.
Điều này có nghĩa: logo cần một hình dạng đủ mạnh để nhận ra ngay khi không còn chi tiết nào. Đó là điều kiện tối thiểu để tồn tại ở đầu nhỏ của thang kích thước.
Thử thách đầu nhỏ: favicon và ký hiệu tối giản
Favicon là ô vuông 16x16 hoặc 32x32 điểm ảnh. Ở kích thước đó, một logo bình thường còn lại gần như không gì cả: chữ nhoè, đường nét mảnh biến mất, khoảng trắng lấp đầy.
Thử nghiệm đơn giản nhất: thu nhỏ logo xuống 16px và nhìn từ xa 50cm. Nếu Anh / Chị không nhận ra ngay, khách cũng vậy.
Giải pháp không phải thu nhỏ thêm mà là thiết kế lại cho ngưỡng đó. Cụ thể:
- Giữ lại một hình dạng duy nhất, bỏ mọi chi tiết trang trí.
- Tăng độ tương phản: nền sáng trên nền tối hoặc ngược lại, không dùng màu trung tính.
- Tránh nét mảnh dưới 2px ở kích thước xuất cuối.
- Nếu logo có chữ, giữ lại một chữ cái hoặc một từ viết tắt, không cố giữ tên đầy đủ.
Nhiều thương hiệu lớn dùng favicon khác hẳn logo đầy đủ. Khách vẫn nhận ra vì hình dạng cốt lõi nhất quán qua các phiên bản.
Tài sản nhận diện chỉ tích luỹ được khi lặp lại nhất quán. Sự nhất quán là cơ chế của trí nhớ, không phải thẩm mỹ.
Jenni Romaniuk & Byron Sharp, Building Distinctive Brand Assets
Thử thách đầu lớn: biển hiệu và cấu trúc chịu lực
Ở chiều ngược lại, biển hiệu 10 mét phóng to những thứ vốn không được thiết kế để lộ ra.
Đường cong không đủ mượt trông có răng cưa. Nét chữ mảnh trông bất ổn, run rẩy. Khoảng trống giữa các phần tử không còn cân xứng khi phóng to gấp mười lần.
Bài toán ở đây khác hoàn toàn: không phải tối giản mà là cấu trúc chịu lực.
Logo cần đường nét dứt khoát, tỉ lệ được kiểm soát ở kích thước lớn, và các phần tử đủ nặng để không bị không gian xung quanh nuốt chửng.
Một số điểm kiểm tra thực tế:
- In thử ở kích thước thật trên giấy trước khi giao tệp cho đơn vị làm biển. Màn hình không nói thật ở tỉ lệ lớn.
- Kiểm tra logo trong điều kiện ánh sáng thực tế: ánh nắng ban ngày, đèn chiều tối, phản chiếu.
- Xem xét cả trường hợp logo đứng một mình trên nền phẳng lẫn nền có hoạ tiết hoặc không gian.
- Chữ trên biển cần khoảng cách chữ (khoảng trống giữa các ký tự) rộng hơn so với dùng trên màn hình.
Hệ thống nhiều phiên bản, một hình dạng cốt lõi
Giải pháp không phải thiết kế nhiều logo khác nhau. Đó là thiết kế một hệ thống nhiều phiên bản, tất cả chia sẻ cùng một hình dạng cốt lõi.
Paul Rand, người thiết kế logo IBM và UPS, từng nói rằng một biểu tượng tốt phải nhận ra được khi nhìn từ xa, nhìn nhanh, hoặc nhìn trong điều kiện xấu.
Đó là bài kiểm tra thực tế, không phải tiêu chí thẩm mỹ.
Hình dạng cốt lõi là thứ còn lại khi bỏ đi tất cả màu sắc, chi tiết, và chữ. Nếu phần còn lại vẫn nhận ra được, hệ thống có nền tảng vững.
Nếu không, mọi phiên bản đều chỉ là biến thể của một vấn đề chưa được giải.
Nguyên lý thiết kế theo ngưỡng, không theo tỉ lệ
Sai lầm phổ biến nhất: giao một tệp vector rồi nói “co giãn tự do”. Vector cho phép phóng to không vỡ hình, nhưng không giải quyết được vấn đề tỉ lệ và nhận thức.
Thiết kế theo ngưỡng có nghĩa là mỗi khoảng kích thước được xem xét riêng:
- Dưới 32px: chỉ còn ký hiệu đơn, tối đa hai màu, không nét mảnh.
- 32px đến 120px: bản rút gọn, có thể giữ tên viết tắt hoặc một phần logo.
- 120px trở lên: bản đầy đủ với chữ và tất cả chi tiết.
- Biển hiệu vật lý: phiên bản riêng, được kiểm tra thực tế ở kích thước thật.
Tài liệu hướng dẫn nhận diện (brand guidelines, tức tài liệu hướng dẫn sử dụng thương hiệu) cần ghi rõ ngưỡng này, không chỉ liệt kê “dùng logo đầy đủ khi có thể”.
Kiểm tra trước khi giao tệp
Sinh Vũ kiểm tra mỗi bộ nhận diện theo ba điều kiện trước khi giao:
Một. In tất cả phiên bản ở kích thước thật, xem ở khoảng cách đọc thông thường và ở xa hơn ba mét.
Hai. Mở favicon trên trình duyệt thật, cạnh các tab khác, không phải trong tệp thiết kế.
Ba. Mô phỏng điều kiện ánh sáng khác nhau: màn hình tối, giấy in, ánh sáng ngoài trời.
Logo chưa qua ba bước này chưa phải hệ thống đã hoàn thiện, dù hồ sơ trình bày có đẹp đến đâu.
Thương hiệu không nằm trong tệp thiết kế. Thương hiệu nằm ở chỗ khách nhìn thấy nó, và ở đó nó phải tự đứng được.
Nguồn tham khảo
Jenifer Tidwell, Designing Interfaces. Ellen Lupton, Thinking with Type. Jen Simmons, Intrinsic Web Design (Mozilla). Romaniuk & Sharp, Building Distinctive Brand Assets. Paul Rand, A Designer’s Art. Material Design 3, Google (material.io). Lindgaard et al., Behaviour & Information Technology, 2006.