Series xu hướng thiết kế web 2014 Phần II: Thiết kế Parallax

Ra mắt công chúng từ năm 2012 trên các diễn đàn công nghệ, thiết kế parallax đang dần trở nên phổ biến và được nhiều người biết đến. Khác với xu hướng thiết kế web phẳng thiên hướng đơn giản, thiết kế parallax lại đem đến góc nhìn mới mẻ, kích thích trí tò mò người xem bằng sự phức tạp của những layout, hình ảnh động trên màn hình. Tuy nhiên, khác với một bộ phim nơi mà người dùng chỉ tiếp nhận một cách thụ động thì thiết kế parallax lại cho phép người xem tự chiếu “đoạn phim” nhanh, chậm thông qua việc sử dụng nút cuộn chuột.

Thuật ngữ "Parallax" xuất hiện lần đầu tiên trên các hiệu ứng hình ảnh của video game 2D mà trong đó sử dụng những hình ảnh có tốc độ di chuyển khác nhau để tạo ra ảo giác về chiều sâu và sự chuyển động trong quá trình chơi. Điều này thường được thực hiện bằng cách làm cho hình nền phía sau di chuyển chậm hơn hình nền phía trước khiến người chơi cảm giác mọi thứ di chuyển trên một chặng đường có vẻ xa.

Sử dụng khái niệm tương tự, parallax design ra đời với việc sắp xếp nhiều “lớp” trên màn hình sao cho chúng di chuyển với tốc độ khác nhau khi người dùng sử dụng nút cuộn để tạo nên phông nền cho website.

Với khái niệm toàn chữ, bạn rất khó để có thể cảm nhận được hoàn toàn ưu điểm cũng như khuyết điểm xu hướng thiết kế này. Vậy, hãy cùng chúng tôi thực hiện một chuyến du ngoạn trên internet để đi tới những website đã áp dụng thiết kế này một cách thành công.

1. New York Times: Tomato Can Blues

Khởi đầu là một website tin tức nổi tiếng trên thế giới. Làm sao để cuốn hút độc giả vào những bài báo dài luôn là điều trăn trở đối vớingười viết bài. Bằng việc áp dụng thiết kế parallax một cách hợp lý. Tác giả đã minh họa cho câu chuyện trở nên đặc sắc và hấp dẫn thông qua các hình ảnh dựa trên hồ sơ vụ án. Độc giả khó lòng dừng việc sử dụng nút cuộn chuột để khám phá câu chuyện.

2. Health Service Payouts

Chuyển tải những thông tin khô khan trở thành sinh động chính là điều mà website này đã làm được khi công bố thông tin thanh toán bồi thường hằng năm của Dịch vụ y tế quốc gia Anh. Vào vai một nhân viên y tế, bạn sẽ đẩy một giường bệnh đi qua các khu vực của một bệnh viện. Mỗi khu vực tương ứng với một năm và sẽ có một popup hiển thị chi tiết thanh toán bồi thường lớn nhất của năm đó.

"Các khu của bệnh viện được xây dựng bằng cách sử dụng một số các kỹ thuật thiết kế website mới nhất trong HTML5, CSS3 và JavaScript" Stickyeyes - thuộc cơ quan đã tạo ra Infographic này giải thích.

3. Savings Challenge

Trong chương trình khuyến mãi gần đây của Arnold Clark – công ty bán xe hơi tại Anh đã đưa ra một website Parallax cực kì thú vị

Nhóm nghiên cứu sử dụng CSS3 3D để đạt được các hình ảnh động mong muốn. Và chỉ cần cuộn trang, khách hàng của họ sẽ khám phá "làm thế nào để tiết kiệm tiền từ việc mua xe của công ty".

Bằng một hình thức sáng tạo và mới mẻ, khách hàng của họ đã bị thuyết phục bởi những bằng chứng và số liệu thực tế được trình bày một cách sống động và tạo hứng thú.

4. Walking Dead

Bạn cuộn nút cuộn chuột theo chiều dọc nhưng hình ảnh lại cuộn theo chiều ngang. Điều này đem lại hiệu ứng giống như việc bạn đang đọc truyện hoặc xem một bộ phim vậy. Chỉ có điều khác biệt đó chính là việc bạn trực tiếp điều khiển nhân vật chính trên màn hình. Thông qua website này, bạn sẽ có những thông tin cơ bản trong quá trình “tạo ra” một zombie như thế nào cũng như số lượng zombie xuất hiện trong mỗi phần của bộ phim.

Thông qua những ví dụ trên, có lẽ bạn cũng đã phần nào hiểu được về ý tưởng chính của thiết kế parallax.Tổng hợp lại, ta có những ưu điểm mà Parallax Scrolling đem lại:

- Đem đến cho người dùng những trải nghiệm tuyệt vời về độ sâu của trang web và hình ảnh động.

- Tiếp cận người xem bằng một phương thức mới mẻ và thú vị: kể chuyện thông qua website.

- Khuyến khích người truy cập dừng lại lâu hơn trên website để thăm quan toàn bộ trang web chỉ bằng 1 thao tác là cuộn trang.

- Khuyến khích khách hàng hành động (như gọi điện, đặt hàng...).

- Tăng uy tín của website với sự tương tác mới, đầy sáng tạo.

Thiết kế parallax là thiết kế hết sức tuyệt vời cho website của bạn, tuy nhiên, nó cần được thực hiện bởi những công ty thiết kế website chuyên nghiệp hàng đầu để mang lại hiệu quả tốt nhất nếu không nó sẽ dễ dàng trở thành con dao hai lưỡi làm hại chính ý tưởng của bạn.

Bài viết trước: 9 ý tưởng cho website du lịch của bạn