Thiết kế logo
Vào tháng 02/2021, trang web Umami Land của Google đã vinh dự chiến thắng giải thưởng “Website của tháng”. Với thiết kế giao diện bắt mắt, ý tưởng độc đáo, Umami Land đã thật sự gây bất ngờ cho người dùng. Cùng Chili điểm qua ý tưởng đầy sáng tạo của Google ngay dưới đây!
Xem thêm:
- 15 Website có giao diện đẹp xuất sắc mà Designer nên ghé thăm (Phần 1)
- 15 Website có giao diện đẹp xuất sắc mà Designer nên ghé thăm (Phần 2)
Mục đích và ý tưởng sáng tạo Umami Land
Theo Google Trends, xu hướng tìm kiếm các món ăn, ẩm thực Nhật Bản ngày một tăng cao. Nhìn thấy cơ hội để giới thiệu với mọi người về thế giới văn hóa ẩm thực hấp dẫn của Nhật Bản, Google đã nhanh chóng xây dựng một website được gọi là washoku.
Trước đó, Google đã đặt ra mục tiêu thu hút thêm du khách đến Nhật Bản nhờ văn hóa ẩm thực ấn tượng. Tuy nhiên, mọi khó khăn bắt đầu khi đại dịch Covid-19 xuất hiện. Do đó, họ đã sáng tạo nên Umami Land – một nơi để du khách thể nghiệm nhiều cung bậc món ăn Nhật Bản mà không cần đến tận nơi. Đây là website có thiết kế giao diện đẹp mắt, giống như một kho tàng các tác phẩm nghệ thuật được minh họa theo phong cách hoạt hình một cách khéo léo. Người dùng có thể truy cập từ khắp mọi nơi trên thế giới để tìm hiểu và thưởng thức ẩm thực của đất nước mặt trời mọc một cách đơn giản và nhanh chóng.
Chiến thắng giải thưởng “Website của tháng”, Umami Land không chỉ ghi điểm bởi những hình ảnh website đầy ấn tượng mà còn việc tối ưu hóa trải nghiệm người dùng, cho phép người dùng truy cập web trên cả thiết bị di động và máy tính để bàn và hỗ trợ nhiều ngôn ngữ khác nhau.
Xem thêm: PNG và JPG: Định dạng hình ảnh nào tốt nhất cho trang web của bạn?
Để có được ý tưởng chỉn chu và hoàn hảo nhất, đội ngũ thiết kế web đã bắt đầu với bản thảo bằng việc thu thập một danh sách các món ăn ngon nhất, nghiên cứu đánh giá thực tế của người dùng cũng như triết lý đằng sau từng món ăn. Sau đó, họ bắt đầu hiện thực hóa các nghiên cứu của mình bằng cách chuyển từng lựa chọn thực phẩm vào một khu vực khác nhau trong công viên “ảo” thông qua hình ảnh website 2D và 3D.
Các cảnh quan được lấy cảm hứng từ thực phẩm với các công trình và kiến trúc được thiết kế đẹp mắt để trưng bày các món ăn washoku khác nhau. Mỗi một phần trên website đều được điều chỉnh để tạo hứng thú cho người truy cập, giúp người xem thích thú hơn trong việc khám phá xem món ăn nào sẽ được thể hiện trong mỗi điểm du lịch.
Đặc biệt, đội ngũ thiết kế giao diện website Umami Land thật sự sáng tạo trong việc đánh mạnh vào mặt thị giác người dùng. Bạn càng tìm kiếm nhiều, thế giới xung quanh bạn càng trở nên sống động hơn. Điều này đã thật sự giúp thúc đẩy du khách tiếp tục tìm kiếm và tận hưởng trải nghiệm trên website này.
Xem thêm: Thiết kế giao diện trong bối cảnh covid-19: Xu hướng nào lên ngôi?
Đồng thời, khi xây dựng Umami Land, Google không chỉ muốn xây dựng niềm vui cho những người đang khao khát khám phá các lựa chọn cho bữa tối mà còn cho ai đang tìm kiếm một chơi trò chơi giải trí trên web. Vì vậy bên cạnh thiết kế giao diện đẹp mắt, họ còn kết hợp với âm thanh “a-ha” – kinh điển trong các tựa game khi người dùng tiến tới khám phá một điều mới trên web. Ngoài ra, đội ngũ xây dựng web còn bổ sung các yếu tố giống như một phiên bản game thật sự. Có thể kể đến việc các bộ sưu tập đang chờ được mở khóa cũng như các thử thách phụ để tăng mức độ tương tác của người dùng.
Phong cách và công nghệ đằng sau website Umami Land
Để có được một website với giao diện đẹp như Umami Land, cần có sự kết hợp chặt chẽ giữa thể loại hình minh họa 2D, các yếu tố hoạt hình 3D và việc triển khai toàn bộ các yếu tố này trong khuôn khổ WebGL tùy chỉnh.
Trong quá trình xây dựng và thiết kế giao diện website, đội ngũ thiết kế web đã gặp phải thách thức trong việc làm cho các hình minh họa 2D tĩnh trở nên sống động hơn. Và giải pháp lúc này chính là thêm các đối tượng 3D cách điệu, làm cho chúng liên kết với nhau, hoạt động cùng nhau và biến chúng thành một thế giới hoạt hình đầy thu hút.
Xem thêm: 7 Xu hướng màu sắc mới trong thiết kế giao diện web 2021
Thay vì phải tạo hoạt ảnh từng khung hình trong 2D, họ đã chọn phương án sử dụng các yếu tố 3D để tối ưu trải nghiệm người dùng tốt nhất cũng như tốc độ tải trang nhanh hơn. Ngoài ra, giải pháp thiết kế giao diện này còn giúp các nhà thiết kế website có thể dễ dàng di chuyển, chỉnh sửa và thay đổi các yếu tố trên web mà không cần phải vẽ lại từ đầu các yếu tố này mỗi khi muốn thay đổi bất kỳ một điều nào đó trên website.
Chia sẻ về dự án Umami Land, đội ngũ thiết kế web bật mí, để có thể kết nối website với thế giới thực, họ đã phải tập trung vào việc tích hợp Google Search vào website một cách tự nhiên nhất. Từ đó nâng cao trải nghiệm người dùng và mang đến cho họ nhiều cơ hội hơn trong việc khám phá văn hóa ẩm thực Nhật Bản.
Xem thêm: Thiết kế giao diện đa ngành: Khi con người không còn là chủ thể
Đối với giao diện người dùng, Vue.JS là giải pháp mà đội ngũ thiết kế giao diện của Umami Land lựa chọn. Họ đã tận dụng hoạt ảnh GSAP & Lottie nhằm mang đến cho người truy cập trải nghiệm web liền mạch nhất.
Về công nghệ đằng sau web Umami Land, họ đã quản lý tất cả nội dung của website thông qua Google Sheets và API của chúng. Giờ đây, Umami Land được lưu trữ trên Google App Engine để đảm bảo mọi thứ tải nhanh và có thể được cập nhật nhanh chóng.
Umami Land là một website với thiết kế giao diện đẹp, ý tưởng độc đáo, trải nghiệm người dùng mượt mà. Vì thế, không có gì khó hiểu khi website này đã vinh dự đạt giải “Website của tháng” phải không nào? Bạn cũng có thể sở hữu một website chuyên nghiệp, độc đáo và phù hợp với lĩnh vực kinh doanh nếu liên hệ với CHILI ngay bây giờ. Gọi cho chúng tôi nhé!
