Konstantopoulos SA “Olymp” nhà xuất khẩu ô liu và dầu ô liu nguyên chất hàng đầu thế giới đã ủy quyền cho chúng tôi thiết kế lại website liên kết của công ty với trọng tâm B2B. Chúng tôi hướng đến một website mới và hiện đại, kết hợp các tông màu tự nhiên nâu, vàng và xanh lá cây với các tương tác vi mô (micro-interaction) và hình ảnh động (animation) vui tươi, đồng thời phục vụ nhu cầu thông tin chuyên biệt của khách hàng B2B bán buôn trên toàn thế giới.
Phong cách thiết kế
Từ lúc bắt đầu, chúng tôi đã xác định tầm quan trọng của phong cách và diễn tả để định hướng thiết kế. Rất may, chúng tôi không phải tìm đâu xa: quả của cây ô liu, được trồng hàng thiên niên kỷ trên mảnh đất Hy Lạp và gắn bó chặt chẽ với truyền thống của khu vực, đã tỏ ra là “diễn viên” chính lý tưởng. Chúng tôi đã chọn những bức ảnh cận cảnh ngon lành về trái ô liu để dìu dắt đến với nội dung, từng có mặt trong cả vai trò chỉ dẫn cũng như khả năng hỗ trợ. Khi nghiên cứu content, khách truy cập liên tục được chú ý rằng sản phẩm rất chất lượng tuyệt vời.
Hệ thống hình ảnh
Hệ thống hình ảnh của website được bổ sung bằng cách tái sử dụng trên toàn bộ website để cung cấp trải nghiệm nhất quán, có thương hiệu:
- Việc sử dụng hiệu ứng cuộn parallax scrolling với các yếu tố hình ảnh nổi bật (ô liu thô, ô liu qua chế biến và lá ô liu) đảm bảo rằng các nhân vật chính của chúng ta luôn ở xung quanh, tương tác hài hòa với nội dung.
- Color palette được bổ sung bởi các noise texture fill, cung cấp sự biến đổi thị giác cần thiết mà không cần mở rộng bảng màu một cách không cần thiết
- Sử dụng các bức ảnh chìm và mờ sẽ phụ họa cho các vùng ảnh chính, cung cấp chất lượng đẹp cho các yếu tố ảnh trong khi đảm bảo trọng tâm là phần văn bản giới thiệu.
- Smooth Scrolling (hiệu ứng cuộn mượt) được sử dụng để củng cố một cách tinh tế hiệu ứng parallax và các điểm tham chiếu cuộn chuột, cho phép nhiều thời gian hơn để các animation diễn ra tự nhiên mà không cản trở điều hướng của người dùng.
Việc sử dụng cuộn parallax scrolling với các yếu tố nổi (ô liu thô, ô liu qua chế biến và lá ô liu) đảm bảo rằng các nhân vật chính của chúng ta luôn ở xung quanh, tương tác hài hòa với nội dung.
Tiêu điểm
Hãy cùng chúng tôi kiểm tra một vài yếu tố UI của website xét trên góc độ thiết kế front-end:
- CTA chính trên trang chủ: Các cách tiếp cận ban đầu của chúng tôi liên quan đến việc triển khai thanh trượt tùy chỉnh với 3 CTA khác nhau và hoạt họa liên quan. Chúng tôi đã tiến hành thử nghiệm bản nguyên mẫu của widget, chỉ để xác minh những gì nghiên cứu nào có thể làm gợi ý: trình chiếu không hoạt động cho bất kỳ slide nào ngoại trừ phiên bản đầu tiên. Cuối cùng, chúng tôi đã cô đọng ba thông điệp thành một và sử dụng animation tương ứng để hiển thị các thông điệp còn thiếu khác (cung cấp quanh năm và sự đa dạng của các biến thể sản phẩm nhãn trắng).
- Menu animation: Menu điều hướng có hai cấp độ chiều sâu. Chúng tôi sử dụng layout hai cột với cột thứ nhất hiển thị các phần tử cấp một và cột thứ hai các phần tử cấp thứ hai khi thích hợp. Tạo hiệu ứng cho menu các background và item đã được thực hiện bằng cách sử dụng animation dòng thời gian (thông qua TimelineMax). Nhìn nhận lại, animation choreography sử dụng kỹ thuật này tỏ ra vô cùng thách thức, cân nhắc thay đổi layout của menu ở độ phân giải nhỏ hơn.
- Lịch sử và quá trình sản xuất: các phần này sử dụng một bản layout phức tạp, kết hợp các yếu tố cố định (ngăn trang và năm) kết hợp với hiệu ứng cuộn có kiểm soát cho hình ảnh và bản sao. Hiệu ứng thay đổi qua các năm được thực hiện với một hệ thống đơn giản nhưng ấn tượng trực quan: mỗi số được biểu thị trên một cột số dọc (0-9) bằng cách sử dụng overflow-hidden. Qua các năm, mỗi cột sẽ quay độc lập từ năm hiện tại sang năm tiếp theo, với thời lượng hoạt ảnh khác nhau và độ trễ của hiệu ứng tạo lợi ích trực quan mà không làm việc lập trình phức tạp. Sau khi phân tích các năm thực tế sẽ được hiển thị, chúng tôi đã chọn cách thay đổi các cột theo yếu tố để mỗi cột bắt đầu từ 9. Do đó làm cho các hoạt ảnh “bay qua từng thế kỷ” không làm người nhìn hoang mang.
- Các thành phần Floating Animation. Những nỗ lực ban đầu tập trung vào việc mỗi phần tử di chuyển độc lập và cũng tiếp tục di chuyển ngay cả khi người dùng không cuộn. Ý tưởng nghe có vẻ hay trên lý thuyết, nhưng khi cho ra nhanh nguyên mẫu thì chúng có tác động ngược lại so với dự định: ô liu di chuyển xung quanh một cách đáng sợ, giống như lỗi lập trình. Chúng tôi đã đơn giản hóa và sắp xếp hợp lý chuyển động, tăng thời gian của animation và loại bỏ chuyển động độc lập để đi đến kết quả “free-floating” mong muốn.
Ý tưởng nghe có vẻ hay trên lý thuyết, nhưng khi cho ra nhanh nguyên mẫu thì chúng có tác động ngược lại so với dự định: quả ô liu di chuyển quay quanh một cách đáng sợ, giống như lỗi lập trình.
Nghệ thuật
Kết quả cuối cùng sẽ không như ý muốn nếu không có video và hình ảnh chuyên nghiệp phù hợp làm tăng sự trải nghiệm. Chúng tôi đã cung cấp rõ ràng từng bước cho các chuyên viên của chúng tôi để tạo ra phần nội dung trực quan hiệu quả, bổ sung cho chiến lược truyền thông và hình ảnh.
Sự đón nhận
Website cuối cùng đã nhận được những đánh giá nhiệt tình từ khách hàng và đối tác trong ngành của họ, định hình lại một website B2B chuyên nghiệp trong lĩnh vực chế biến và xuất khẩu ô liu. Chúng tôi cũng rất vui khi được công nhận website đã tập hợp được các yếu tố thiết kế cần thiết.
Công nghệ
Back-end của website được xây dựng bằng Drupal 8, CMS yêu thích của chúng tôi. Ở front-end, chúng tôi đã kết hợp TimelineMax cho animation và ScrollMagic để tối ưu hóa parallax và hiệu ứng cuộn mượt mà. Noise texture trong các tiêu đề có được với nước màu sáng sủa kết hợp với hình nền có thể tùy chỉnh được. Tất cả CSS được viết bằng SASS theo các quy ước BEM / SMACSS.
Về Point Blank
Point Blank là một agency về website tập trung vào việc tạo ra các trải nghiệm riêng biệt “không đụng hàng”. Chúng tôi có trụ sở tại Thessaloniki, Hy Lạp, với các khách hàng trải dài trên nhiều quốc gia trên khắp Châu u và Châu Mỹ. Chúng tôi sử dụng Drupal như một lựa chọn hàng đầu cho CMS, với hơn 10 năm kinh nghiệm sản xuất các giải pháp Drupal tùy chỉnh. Chúng tôi thích hóa giải những thách thức bằng giải pháp thành công, kết hợp công nghệ tiên tiến với kinh nghiệm sâu sắc trong thiết kế và UX.
Nguồn: www.awwwards.com
