Học cách thiết kế website kỷ niệm sự kiện thông minh của McDonald

Thiết kế website công ty không chỉ gói gọn trong việc tạo ra một website đại diện hình ảnh cho công ty đó và được sử dụng với chỉ một hoặc một vài nội dung chính. Ở đây chúng tôi muốn đề cập thêm một sản phẩm nữa của website công ty, đó là website kỷ niệm sự kiện.

Những thiết kế website đẹp mắt này được tạo ra với một mục đích duy nhất là để đánh dấu một sự kiện nào đó có ý nghĩa với lịch sử công ty. Chẳng hạn như ra đời một sản phẩm mới hay sự kiện thành lập công ty như ví dụ về website của McDonald mà chúng tôi giới thiệu hôm nay.

Hãng đồ ăn nhanh nổi tiếng thế giới kỷ niệm 40 năm thành lập của mình với một thiết kế web chuyên nghiệp, trên đó đã giới thiệu cho khách hàng những cột mốc đáng nhớ của chặng đường gần 5 thập kỷ kể từ khi thành lập. Thiết kế tương tác này được tạo ra bởi Razorfish, một trong bốn hãng thiết kế được yêu thích nhất trên Twitter.

Website được xây dựng bằng HTML5 Canvas API, có hai điều ở đây khiến nó trở nên bắt mắt: giao diện hoạt họa đẹp mắt và typography rất hấp dẫn.

thiet ke website cong ty McDonald 40Together

Họ tạo ra website đó như thế nào?

Bố cục dạng lưới grid và poster được làm với Pixi.js, một trình kết xuất 2D WebGL bởi Goodboy Digital. Một trình kết xuất tùy chỉnh 3D được tạo ra trên đầu để mang đến animation chuyển tiếp và khiến cho việc trình chiếu trở nên mượt mà hơn, kể cả khi hiển thị trên thiết bị di động.

Hệ thống tạo typography poster sử dụng ngôn ngữ tự nhiên và phân tích cú pháp để thao tác với từng câu và từ tag dựa trên cảm xúc trong nội dung. Bạn cũng sẽ chú ý đến cách chọn màu sắc và hình ảnh của website này. Phần màu tươi sáng giúp mang lại cảm xúc tích cực và vui vẻ cho người xem. Mỗi một ô kỷ niệm mở ra, bạn sẽ thấy chúng giống như việc mở một gói đồ ăn truyền thống của McDonald, việc mà bạn và những người thân thiết đã làm rất nhiều lần. Nền nhạc cũng góp phần nhấn mạnh cảm xúc với người xem. Chúng ta có cảm giác như vừa được tận hưởng một bộ phim tương tác cảm động nhưng rất đáng yêu về những gì đã trải quả của không chỉ hãng MacDonal mà còn với chính chúng ta, những khách hàng của họ.

Các thông điệp đầy tình cảm được gắn trên các poster sẽ làn lượt xuất hiện một cách mượt mà trước mắt người xem khi họ tương tác với website. Mọi người cũng có thể chia sẻ cảm xúc thông qua speech input trong trình duyệt có hỗ trợ Web Speech API. Đây cũng là một chi tiết làm nên sự thú vị của website này.

Bởi vì website này không còn được duy trì bởi McDonald nữa, nhưng bạn vẫn hoàn toàn có thể thưởng thức nó một cách trọn vẹn thông qua link sau: 40together.razorfishawards.com.