Đẳng cấp sáng tạo đáng học hỏi trong thiết kế Website Gédéon

  • 15/01/2020
  • 0 Bình Luận

Đẳng cấp sáng tạo đáng học hỏi trong thiết kế Website Gédéon là sự pha trộn khéo léo giữa truyền thống và hiện đại, nét thiết kế đơn giản mà đầy táo bạo.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon1

 

Thiết kế Website cho Gédéon – Một Agency lớn trong lĩnh vực truyền hình

Ra đời năm 1984, Gédéon là một Agency sáng tạo và công ty sản xuất có trụ sở tại Paris. Agency được thành lập với mục đích hoạt động trong lĩnh vực truyền hình, thiết kế các ấn phẩm lên sóng truyền hình, ấn hành và phát trực tiếp cho các kênh truyền hình lớn nhất trên thế giới. Trong hơn ba thập kỷ, họ đã sản xuất hàng trăm bản jingle (bài hát ngắn hoặc giai điệu được sử dụng trong quảng cáo và cho các mục đích thương mại khác), logo, ý tưởng và các bộ phim ngắn. 

Gédéon đề nghị giúp họ thiết kế Website doanh nghiệp và bộ nhận diện thương hiệu trên phương diện kỹ thuật số với trải nghiệm hoàn toàn mới.

The cobbler’s children go barefoot

(Tạm dịch: Con thợ chữa giày mà phải đi chân đất)

Những nhà sáng tạo có xu hướng không thích tự tay “vẽ” ra sản phẩm cho bản thân mình, giống như “con hát mẹ khen hay” vậy. Gédéon cũng không ngoại lệ. Họ đã dành hơn ba mươi năm để sản sinh ra các thương hiệu và bản sắc cực kỳ tinh tế trên toàn cầu, nhưng logo và sự hiện diện trực tuyến của họ trên các kênh đã bị gạt sang một bên và không được chú trọng trong một vài năm. 

Điều làm nên danh tiếng của Gédéon là bởi kinh nghiệm của họ. Công ty đã tồn tại được một 30 năm và tạo ra nhiều thương hiệu mang tính biểu tượng như kênh truyền hình quốc gia Pháp France Televisions. Họ cần một cuộc đại tu hoàn hảo và mới mẻ mà họ không thể đơn giản là bắt đầu lại từ đầu với một nền móng rộng lớn như vậy.

Sáng tạo bản sắc cũng là bản chất công việc của họ. Vì lý do đó, họ cần tìm kiếm một thứ đủ sâu sắc tinh tế để liên kết với bất kỳ một dự án nào, nhưng vẫn có đủ khoảng trống để sự sáng tạo vụt lên khi cần thiết.

“Họ muốn mỗi ấn phẩm tự cất tiếng nói về bản thân, không phải là một thông điệp doanh nghiệp nhàm chán” – Gédéon chia sẻ

Thiết kế lần này xem như một phần mở rộng của phần trước, minh họa cho sự phát triển của công ty bắt đầu từ những năm tám mươi cho đến đương thời. 

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon2

Họ làm việc trên bất cứ chất liệu nào để có thể truyền đạt lĩnh vực chuyên môn và di sản đó nhưng phải bền vững và sử dụng phù hợp trong loạt các bối cảnh. Họ đã đề xuất sự hòa trộn khéo léo giữa truyền thống và hiện đại, biến sản phẩm này như một tư liệu nói về quá trình và kinh nghiệm của Agency, mặt khác cũng từ đó nảy ra những quan niệm sáng tạo và hiện đại.

Thiết kế Website sống động với Logo vui tươi

Họ đã thiết kế logo Gédéon với chữ cái “o” làm gợi hình ảnh một ống kính máy quay và con mắt sáng tạo của studio. Nó là sản phẩm sáng tạo của wordmark. Một số mẫu được ghép với biểu tượng cảm xúc, mang ý nghĩa riêng nhưng cũng đầy vui tươi và thú vị.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon3

Trên đây là một số wordmark đậm và sắc nét kết hợp với serif thanh lịch và tinh tế. Sự đơn giản và sắc nét trong Typography được cân bằng bởi các hình dạng vui tươi và hình hoạ gợi lên sự sống động. Đơn giản, táo bạo, thanh lịch, vẫn có đủ không gian minh họa và linh hoạt cho các vòng cung sáng tạo và những khoảng trống vui tươi.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon4

Trong thiết kế Website, 1 hình ảnh chuyển động = 1000 từ ngữ

Gédéon triển khai công việc luôn gắn kết với các hình ảnh chuyển động. Tất cả các sản phẩm của họ đều khởi đầu với các hình ảnh di chuyển, từ hình họa 2D / 3D đến việc sản xuất phim, jingle và logo, các hình ảnh chuyển động là một phần không thể thiếu của hầu hết các dự án họ làm.

Đây mới là khởi đầu trong công cuộc nghiên cứu thiết kế Website cho Gédéon của họ, với ẩn dụ chính là chiếc màn hình TV. Họ đặt vị trí khách truy cập trước một trình phát video màn rộng và thu hút tương tác từ người xem video. Kịch bản video truyền tải những thứ sẽ khiến người xem ngay lập tức liên tưởng tới lĩnh vực hoạt động của Agency. Người xem cũng có thể chuyển từ dự án này sang dự án khác một cách liên tiếp, như điều khiển TV. Thật thú vị phải không nào!

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon5

Lấy cảm hứng từ trình chiếu video, họ đã nảy ra ý tưởng sử dụng các sản phẩm từ video làm thành phần chính cho dự án. Giao diện nằm trên một background video khổng lồ, bằng cách di chuột và nhấp, tên dự án sẽ di chuyển từ dự án này sang dự án khác. Cuối cùng hành trình người dùng sẽ kết thúc với loạt video và hình họa điện ảnh chuyển động khắp nơi.

Cốt lõi mà Gédéon đặt ra là giao diện và văn bản được tối giản, hình ảnh chuyển động được ưu tiên nhiều hơn.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon6

Thiết kế Website độc đáo với Click & Chill

Gédéon tạo ra một loạt các dự án quảng cáo truyền hình cho phạm vi khách hàng rất rộng. Từ nhận diện thương hiệu đến ý tưởng chuyển động phức tạp, jingle, thậm chí là các tác phẩm điện ảnh ngắn hay dài. Mỗi dự án đều được lên bản thảo cẩn thận với một hướng nghệ thuật nguyên bản, sản xuất nội dung chuyên nghiệp, thiết kế âm thanh, v.v.

Nhiệm vụ của họ – Agency thiết kế Website chuyên nghiệp là xây dựng cách nhìn để giới thiệu những câu chuyện, hậu trường, những người đóng góp đằng sau mỗi dự án thành công bậc nhất Thế giới mà Gédéon đã làm nên. Ý tưởng ấy phải mang lại một cái nhìn sâu sắc và ý nghĩa cho dự án.

Thách thức lớn nhất là cần tạo ra một hệ thống Layout linh hoạt để từng dự án tương ứng các case-study cụ thể và bao gồm tất cả các cấu hình được áp dụng. Ngoài hành vi mô-đun đó, họ cũng muốn thiết kế một hệ thống, trong đó mỗi trang dự án sẽ có phong cách thiết kế riêng, được điều phối bởi chính dự án.

Bên cạnh đó, họ đã tạo ra một cấu trúc Case-study chuyên dụng dựa trên phương pháp mô-đun, cho phép xây dựng các trang với một cấu ​​trúc cụ thể cho từng dự án. Đơn giản là hoán đổi và sắp xếp các mô-đun bên trong trang là có thể tạo ra vô số nội dung hoàn toàn mới.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon7

Một hệ thống tùy biến cũng được xây dựng cho phép thiết kế và cấu hình kiểu trong mỗi mô-đun. Màu sắc, kiểu chữ và phong cách có thể được điều chỉnh bên trong mỗi trang để điều phối chúng hướng về cùng nghệ thuật, giao diện và cảm nhận trang.

Tính năng đó mang lại cảm quan độc đáo hơn cho mỗi trang dự án khi cần thay đổi chủ đề và xu hướng nghệ thuật của nó, mà vẫn ổn định và linh hoạt để hỗ trợ cho ra đời hàng chục các tư liệu công việc và sản xuất nội dung.

Cuối cùng nhưng không kém phần quan trọng, một hệ thống điều hướng vòng lặp vô hạn được thiết kế nhằm đảm bảo một hành trình liền mạch từ dự án này sang dự án khác. Khi người dùng tải nội dung, chức năng sẽ tự động đưa bạn đến các Case-study tiếp theo trên đầu trang.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon8

Tất cả các thiết kế và cấu trúc trang đã được điều chỉnh phù hợp với các tính năng đặc thù riêng của thiết bị di động và máy tính bảng với Layout và chuyển tiếp chuyên dụng. Cấu trúc trang không đổi, điều chỉnh theo khung chiều dọc giúp kích thích ham muốn khám phá nội dung. Tương tác và điều hướng với cảm ứng chạm. Thao tác vuốt và cuộn được trải đều khắp các Layout để mang đến một hành trình người dùng suôn sẻ và mượt mà.

Dang-cap-sang-tao-dang-hoc-hoi-trong-thiet-ke-website-gedeon9

Nền tảng công nghệ trong thiết kế Website Gédéon

Họ đã sử dụng WordPress để quản lý back-end. Front-end được xây dựng nhờ Laravel v5.3 và API REST trong wordpress. Sau đó, tích hợp các tính năng ở front-end bao gồm HTML5, SASS và Javascript (trên ES6). Việc chuyển đổi / chuyển mã được thực hiện bởi Gulp.

Ở mỗi phân đoạn back-end và front-end, một số plugin tuyệt vời giúp tăng cường khả năng thiết kế sáng tạo: ACF, WP Super Cache, Greensock, Barba.js, v.v …

Ai là người đã làm nên những sáng tạo tuyệt vời ấy cho Website Gédéon?

Johnathan da Costa là một nhóm thiết kế phát triển độc lập và hợp tác đến từ Pháp có trụ sở tại Paris. Chuyên môn của họ là sáng tạo và xây dựng các sản phẩm kỹ thuật số cho các khách hàng và các thương hiệu, tập trung vào trải nghiệm và tương tác của người dùng.


Agency thiết kế Website doanh nghiệp, Landing Page uy tín