- YouTube, khởi đầu vào năm 2005 từ ý tưởng một trang web hẹn hò bằng video, nay đã phát triển thành một nền tảng truyền thông nơi hàng tỷ người trên toàn thế giới ghé thăm mỗi ngày để xem nhiều loại nội dung khác nhau
- Logo màu đỏ mang tính biểu tượng của YouTube từ lâu đã đại diện cho bản sắc thương hiệu, nhưng gần đây một tông đỏ mềm hơn cùng dải chuyển sắc magenta đầy bất ngờ đã được đưa vào
- Đây là một thay đổi nhỏ nhưng có ý nghĩa, cho thấy cách YouTube làm mới thương hiệu khi bước sang năm thứ 20
Lý do của sự thay đổi
- Đội ngũ art direction và thiết kế nội bộ của YouTube muốn phát triển tiếp màu đỏ đã được sử dụng suốt 20 năm
- Sau khi nghiên cứu những yếu tố hiện có không còn phù hợp với thời đại, họ kết luận rằng màu sắc nằm trong nhóm ưu tiên cần cải tiến hàng đầu
- Màu sắc mới được điều chỉnh theo hướng hiện đại hơn và dễ tiếp cận hơn, đồng thời vẫn giữ được bản sắc thương hiệu
Vấn đề của màu đỏ cũ
- Màu đỏ trước đây (đỏ thuần RGB) quá chói trong UI, và có vấn đề về tính nhất quán màu sắc như việc trông giống màu cam trên một số màn hình nhất định
- Trên một số màn hình như TV, màu này còn gây ra hiện tượng burn-in, để lại vết hằn vĩnh viễn trên màn hình
- Do màu đỏ quá mạnh, đã có ý kiến cho rằng nếu dùng sai cách thì nó có thể gây mệt mỏi trong trải nghiệm người dùng
Giới thiệu màu đỏ mới và dải chuyển sắc
- Màu đỏ được điều chỉnh theo hướng hơi lạnh hơn để giảm bớt các vấn đề kỹ thuật như burn-in màn hình và méo màu
- Tông màu mới được thiết lập để mềm mại và giàu sức sống hơn, có cân nhắc đến tính dễ tiếp cận và cảm giác hiện đại, đồng thời vẫn tôn trọng di sản của YouTube
- Một chiến lược đã được xây dựng là chỉ dùng màu đỏ ở những khoảnh khắc quan trọng thể hiện rõ bản sắc cốt lõi của YouTube, nhằm tối đa hóa tác động thị giác
- Tại đây, dải chuyển sắc được bổ sung để tạo thêm sự thú vị về mặt thị giác với sự hòa trộn giữa đỏ và magenta
- Nó đã được áp dụng mới cho logo, icon sản phẩm, progress bar, nút Like/Subscribe, huy hiệu Premium và vòng live
Chiến lược thiết kế và các ví dụ áp dụng
- YouTube cố gắng duy trì bản sắc thương hiệu đồng thời tránh gây mệt mỏi cho người dùng bằng cách chỉ sử dụng màu đỏ mạnh khi thực sự cần thiết
- Họ đã hợp tác với nhiều nhóm khác nhau để khám phá phạm vi có thể áp dụng màu mới và dải chuyển sắc, đồng thời đảm bảo tính nhất quán trên toàn bộ giao diện sản phẩm thực tế
- Thông qua thảo luận chi tiết với các designer, director và engineer, họ kiểm tra xem dải chuyển sắc trông như thế nào trên màn hình lớn và liệu có đáp ứng các tiêu chuẩn accessibility hay không
- Màu thương hiệu được gán cho các hành động quan trọng như nút đăng ký hoặc nút thích, còn các trạng thái mặc định khác giữ tông monochrome để truyền đạt thông tin rõ ràng
Motion design và bản sắc thương hiệu
- Vì YouTube là một nền tảng video, việc thu hút ánh nhìn và cung cấp hướng dẫn chức năng thông qua motion là điều quan trọng
- Cùng với bản cập nhật màu sắc, họ cũng thêm hiệu ứng trong startup animation, nơi logo phóng to thu nhỏ và làm nổi bật dải chuyển sắc
- Progress bar được làm mảnh hơn và hiển thị nhanh hơn để tăng cảm giác hiện đại và niềm vui thị giác
- Các icon kênh chủ đề có dải chuyển sắc magenta cũng được thêm animation nhỏ để tăng tính thống nhất thương hiệu và sự thú vị
- Khi chỉ dùng màu đơn, chỉ có thể thay đổi hình dạng, nhưng với dải chuyển sắc, chỉ cần chuyển động tinh tế cũng có thể điều chỉnh bầu không khí, đây là một lợi thế
- Họ theo đuổi “một lượng đường vừa đủ” để người dùng không cảm thấy bị quá tải bởi motion, tức là mang lại sự vui vẻ nhưng không quá mức
Cân nhắc về accessibility
- Để đảm bảo độ tương phản cho văn bản, độ sáng và tông của màu đỏ và magenta được chia thành nhiều mức khác nhau, rồi áp dụng giá trị tối ưu theo kích thước phần tử UI và từng tình huống
- Họ cẩn trọng để không truyền đạt thông tin chỉ bằng một màu duy nhất; các nút quan trọng dùng màu thương hiệu, còn trạng thái mặc định giữ tông đơn sắc
- Một framework thích ứng đã được đưa vào, như giới hạn motion cho thiết bị cấu hình thấp hoặc điều chỉnh cường độ motion theo kích thước màn hình
- Nếu có thể, phạm vi motion được thu hẹp để giảm gánh nặng thị giác, và hệ thống cũng được thiết kế để có thể tắt animation khi cần
Kết luận
- Màu đỏ mới và dải chuyển sắc là những yếu tố cốt lõi trong quá trình YouTube phát triển thương hiệu nhân dịp kỷ niệm 20 năm
- Họ đã tạo ra một kết quả vừa giữ được sức mạnh đặc trưng của màu đỏ, vừa cải thiện các vấn đề về kỹ thuật, thiết kế và accessibility
- Bằng cách sử dụng hợp lý motion và dải chuyển sắc, YouTube đã góp phần trở thành một nền tảng thú vị hơn và giàu tính con người hơn
- Đây là một ví dụ cho thấy YouTube đang không ngừng thay đổi, đồng thời giúp người dùng trực quan cảm nhận được sự phát triển của thương hiệu
2 bình luận
Đến cuối bài viết mà cả màn hình chuyển sang màu magenta thì mắt đúng là nhức kinh khủng..
Cá nhân tôi cảm thấy thanh tiến trình có thêm dải chuyển màu magenta trông như thể màn hình bị lỗi. Điều thú vị là thiết bị khiến tôi có cảm giác đó lại là Google Pixel.