Google không phải là một công ty bình thường. Sứ mệnh của chúng tôi là nắm giữ thông tin của thế giới, khiến chúng trở nên gần gũi, hữu ích cho mọi người và sứ mệnh đó vẫn đang được tiếp tục. Năm ngoái chúng tôi giới thiệu Material Design để giúp các nhà thiết kế và lập trình viên nắm lấy một thế giới rộng mở, đa thiết bị và đa màn hình. Với những trăn trở trong tâm trí, chúng tôi háo hức chia sẻ với các bạn bộ nhận diện thương hiệu mới với mong muốn làm cho Google trở nên gần gũi và tiện lợi hơn với người dùng – ở bất cứ nơi nào mà họ có thể bắt gặp. Hôm nay hãy để RGB tiếp tục với loạt series “Gu Gồ” tới bạn đọc nha :p
Ngay từ khi bắt đầu, trang chủ Google.com đã đơn giản một cách nổi bật: một logo kì quặc, sặc sỡ đặt bên trên một khoảng trống – nơi nhập dữ liệu yêu cầu tìm kiếm thông tin trên một bức tranh màu trắng sạch sẽ. Khi công nghệ phát triển hơn, bức tranh đó cũng đang tự thay đổi chính mình, và các dữ liệu đầu vào cũng như các nhu cầu trở nên đa dạng hơn. Các loại công cụ, cách thức tương tác và giao tiếp rõ nét hơn cùng với thiết bị công nghệ có thể đeo được (wearables technology), công nghệ giọng nói và thiết bị thông minh trong thế giới xung quanh chúng ta. Ngày nay người dùng dành tình cảm cho Google sẽ sử dụng một loạt các thiết bị của chúng tôi. Vì thế Google nên tiếp tục truyền tải sự đơn giản và niềm yêu thích mà người dùng mong đợi khi họ hoàn toàn muốn nắm lấy các cơ hội mà mỗi dịch vụ và giao diện mới có thể cung cấp cho họ, giống như những điều họ đã nhận được từ trang chủ.
Dưới đây là thông tin sơ lược một vài lưu ý quan trọng nhất trong thiết kế đã khiến người dùng biết đến và yêu mến Google. Sự phát triển của Google sẽ tiếp tục cùng với sự năng động và khác biệt mà chúng tôi luôn phấn đấu để đạt được.
[quote]ĐƯỢC THIẾT KẾ CÙNG NHAU[/quote]
Đầu năm 2015, các nhà thiết kế trên toàn công ty, bao gồm Creative Lab và nhóm Material Design, tập trung ở New York cho một dự án chạy đua nước rút kéo dài một tuần với cường độ cao. Chúng tôi phác thảo một bản yêu cầu ngắn gọn để nhận diện 4 thử thách mà chúng tôi cần phải giải quyết.
- Một điểm có thể thay đổi để truyền tải cảm xúc của toàn bộ logo chữ trong một không gian hạn chế.
- Sự kết hợp của chuyển động không ngừng và thông minh để phản hồi đến người dùng tất cả các giai đoạn của quá trình tương tác.
- Một phương pháp tiếp cận có hệ thống đến nhận diện thương hiệu để cung cấp sự nhất quán trong những lần gặp gỡ hàng ngày của người dùng với sản phẩm Google.
- Những điều tinh tế tạo nên chúng tôi Googley, kết hợp với những đặc tính tốt nhất về thương hiệu mà người dùng biết đến và yêu thích cùng với sự quan tâm ân cần đến việc người dùng thay đổi nhu cầu như thế nào.
Chúng tôi bắt đầu bằng việc chắt lọc giá trị cốt lõi của thương hiệu – 4 sắc màu trên một nền trắng tinh và xây dựng có lưu trữ. Những miếng giấy ghi chú được dán lên, những mẫu phát triển được ghim lên tường, và các chuyển động được mô phỏng lại. Với nhiều phương án bị vứt bỏ cùng hàng trăm giờ làm việc, chúng tôi đặt ra một vài hướng đi khiến bản thân hào hứng. Chúng tôi chia sẻ suy nghĩ cùng với các nhóm khác trên toàn công ty. Các bộ phận kỹ thuật, nghiên cứu, sản phẩm, marketing cùng kiểm tra ý tưởng và ước lượng tính khả thi vì chúng tôi phải làm đi làm lại các thiết kế và chiến lược triển khai. Quá trình cộng tác này dẫn đến một hệ thống linh hoạt đủ để được sử dụng toàn bộ các tài nguyên marketing và sản phẩm hoạt động được trên bất kỳ nền tảng công nghệ nào (flatform). Ba yếu tố cốt lõi tạo nên một logo duy nhất.
[quote]CÁC YẾU TỐ[/quote]
Logo chữ Google
Logo kiểu chữ san-serif duy trì sự khác biệt nhiều màu sắc của chúng tôi.
Các chấm tròn
Truyền tải phản hồi một cách súc tích của logo trong những thời điểm tương tác, trợ giúp và chuyển tiếp.
Google G
Phiên bản cô đọng của Google để sử dụng trong những phạm vi nhỏ.
Thấu hiểu hệ thống
Việc phát triển tư duy và thiết kế càng đi sâu hơn vào những yếu tố cốt lõi, một đặc điểm kỹ thuật sẽ được phát triển với sự nhất quán xuyên suốt giữa các nhóm làm việc trên phạm vi rộng của các ứng dụng. Dưới đây không phải là một ví dụ toàn diện, nhưng cho thấy phần nào tư duy mang tính hệ thống đó.
[youtube]http://www.youtube.com/watch?v=qQzCEBNZ5Ok[/youtube]
Logotype
Logo của Google luôn có một phong cách đơn giản, thân thiện và gần gũi. Chúng tôi muốn duy trì những đặc tính này bằng cách phối hợp sự tinh khiết chuẩn xác của hình học cùng với sự giản dị ngây thơ trẻ con của phong cách chữ in trong sách giáo khoa. Logo mới của chúng tôi đặt trong một hệ tùy chỉnh, kiểu chữ geometric sans-serif, giữ tính nghịch ngợm đầy màu sắc và chữ “e” xoay nghiêng của logo trước đây –nhắc nhở rằng chúng tôi sẽ luôn luôn khác biệt.
Phiên bản cuối cùng được kiểm tra tường tận ở nhiều kích thước khác nhau và các độ dầy cho khả năng dễ đọc nhất trên tất cả các thiết bị kỹ thuật số. Để hướng dẫn cách ứng dụng trên màn hình và trong in ấn, chúng tôi phát triển bộ tiêu chuẩn để kiểm soát tất cả các khía cạnh của logo bao gồm khoảng cách, quy tắc khoảng trống, tìm kiếm sản phẩm, các thông số kỹ thuật redline cho những vấn đề nội tại của sản phẩm.
[youtube]http://www.youtube.com/watch?v=-OeH9LZNbXE[/youtube]
Cấu trúc Google G
Google G bắt nguồn trực tiếp từ logo chữ “G”, ứng dụng được gia tăng tính trực quan để hiển thị với kích thước nhỏ và tại những khu vực cần chia sẻ khoảng trống với những yếu tố khác. Được thiết kế trên cùng một lưới (gird) như một biểu tượng sản phẩm, hình tròn được cải tiến về phương diện quang học để tránh cảm giác nhô ra (visual “overbite”) tại điểm mà hình tròn tiếp xúc đường crossbar. Sự cân đối về màu sắc truyền tải đầy đủ hình ảnh của logo chữ và màu sắc được sắp xếp theo thứ tự để kích thích sự chuyển động của mắt xung quanh logo.
[youtube]http://www.youtube.com/watch?v=GHQEvuLVO-U[/youtube]
Những chấm tròn Google trong chuyển động
Những chấm tròn Google là phần dịch chuyển không ngừng và sôi động. Chúng đại diện cho khả năng tiếp nhận thông tin của Google và cho biết Google đang làm việc cho bạn. Chúng tôi quan tâm đến những thời điểm độc nhất và kì diệu này. Một loạt các biểu hiện đang được phát triển bao gồm lắng nghe, suy nghĩ, phản hồi, không hiểu được và xác nhận. Mặc dù sự chuyển động của chúng có vẻ tự nhiên nhưng sự vận động này bắt nguồn từ nghiên cứu hướng chuyển động và thời gian chuyển động sao cho phù hợp, các chấm tròn chuyển động theo hình vòng cung và theo một bộ tiêu chuẩn các đường cong linh hoạt.
[youtube]http://www.youtube.com/watch?v=yvrN0mcqUAc[/youtube]
Màu sắc
Màu sắc logo Google hoàn hảo nhờ vào khoảng trắng giữa các kí tự, nhưng khi các màu sắc nằm liền nhau như trường hợp logo chữ G, việc hòa trộn về phương diện quang học có thể khiến màu sắc tối sầm và mờ đi so với giá trị ban đầu. Vì vậy, chúng tôi điều chỉnh và gia tăng độ rực của đỏ, xanh lá cây và vàng để duy trì độ bão hòa và cảm giác “pop”.
[quote]CÁC YẾU TỐ BỔ SUNG[/quote]
[youtube]http://www.youtube.com/watch?v=wDYHL7ko9Ls[/youtube]
Typogarphy
Khi cùng nhau phát triển logo, chúng tôi tạo ra một kiểu chữ tùy ý điều chỉnh, geometric sans – serif để hoàn thiện logo trong bộ sản phẩm tìm kiếm này và hỗ trợ cho giá trị bộ nhận diện. Chúng tôi gọi đó là Product Sans. Bản thiết kế kiểu chữ lấy cảm hứng từ kiểu chữ in trong sách giáo khoa, nhưng đảm bảo tính nhất quán trung lập mà tất cả chúng tôi mong muốn từ font chữ geometric sans-serif. Điều này cho phép chúng tôi duy trì được mức độ khác nhau một cách phù hợp giữa logo Google và tên sản phẩm. Bộ ký tự hoàn chỉnh gồm các chữ số, dấu chấm câu, dấu trọng âm và các kí tự thay thế, phân số, ký hiệu, và mở rộng thêm tiếng Latin, Hy Lạp và Kirin. Bạn có thể download tài liệu Product Sans để biết thêm chi tiết.
[youtube]http://www.youtube.com/watch?v=XR1b_9wrDQA[/youtube]
Sản phẩm
Nhiều sản phẩm của Google sẽ công bố phiên bản cập nhật, nhưng với đa số người dùng, lần đầu tiên trải nghiệm một thương hiệu mới sẽ thông qua Search (công cụ tìm kiếm). Nhóm xây dựng Search UX (công cụ tìm kiếm trải nghiệm người dùng) và nhóm các kỹ sư làm việc cật lực để truyền tải biểu cảm đầu tiên khi truy vấn bằng văn bản và giọng nói, chứng minh đầy đủ các sắc thái của bộ nhận diện.
Phân phối rộng hơn
Cùng với sự phát triển của thiết kế, các kỹ sư đã phát triển một cách tiếp cận độc đáo cho thế hệ logo sau này. Sử dụng đồ họa vector mở rộng điểm ảnh hoàn hảo (pixel-perfect SVGs), chúng tôi tạo ra một cách tự động hàng ngàn những biến thể dựa trên vector để làm thỏa mãn những yêu cầu về kích cỡ, màu sắc và phông nền. Những biến thể này sau đó được kiểm tra trong hệ thống kiểm soát nguồn của chúng tôi tại một vị trí chính tắc (hợp tiêu chuẩn) để tránh sự trùng lặp và đảm bảo rằng mỗi nhóm đang sử dụng những tài sản chính xác nhất, hiện đại nhất.
[youtube]http://www.youtube.com/watch?v=oMo6qXSnO98[/youtube]
Điều này giúp chúng tôi tạo ra những thiết kế điểm ảnh hoàn hảo nhất ở bất kì nơi đâu chúng được sử dụng và nó cho phép chúng tôi tối ưu hóa các tài sản bằng kích thước và sự tiềm tàng, bao gồm việc xây dựng một biến thể đặc biệt cho logo đầy màu sắc chỉ nặng có 305 bytes, trong khi logo trước đây nặng đến 14,000 bytes. Logo cũ, cùng với các đầu mút phức tạp của nó, với kích thước lớn đòi hỏi chúng tôi cung cấp một phiên bản chỉ có chữ dành cho những kết nối băng thông thấp. Logo mới được giảm kích thước file để tránh khỏi giải pháp thay thế này và tính nhất quán có một sự ảnh hưởng to lớn khi bạn quan tâm đến mục tiêu của chúng tôi là làm cho Google trở nên gần gũi và tiện dụng hơn với người dùng trên toàn thế giới và cho hàng tỉ người tiếp theo.
Vượt ra khỏi thiết kế
Thiết kế chỉ là một phần của sự nỗ lực. Giá trị của nhận diện mới đòi hỏi quá trình làm việc tập thể và siêng năng của hàng trăm Googlers trong nhiều vai trò khác nhau, trải dàn trên toàn bộ tổ chức. Họ xứng đáng nhận được công trạng to lớn cho việc xây dựng và hoàn thiện hệ thống điểm ảnh mới nhất.
Khi chúng tôi không ngừng tạo ra những sản phẩm và trải nghiệm mới, chúng tôi hy vọng việc này sẽ tiếp tục truyền tải sự đơn giản và niềm vui sướng mà bạn vốn mong đợi từ Google – ở bất cứ nơi nào công nghệ có thể giúp chúng ta.
Dịch & biên tập: Trang Đài | Ban biên tập RGB.vn
Bởi Alex Cook, Jonathan Jarvis, & Jonathan Le
Liên hệ tác giả khi đăng tải lại bài viết này
Nhập hội Sáng tạo cùng RGB nha!