Thiết kế background video hiệu quả trên website

Tạo nên những video đơn giản bằng sự tương phản đối lập

Phong cách tốt nhất cho background video là tạo nên sự tương phản rõ rệt giữa video và phần text của trang web. Nguyên tắc căn bản nhưng quan trọng nhất là làm nổi text sáng màu bằng một video tối màu và ngược lại. Điều này sẽ thực sự hữu hiệu nếu cảnh phim hầu như chỉ nhất quán trong một vài màu sắc.

Coulee Creative là một ví dụ điển hình với những video đơn giản được tạo nên bởi sự tương phản đối lập khá tốt

Coulee Creative là một ví dụ điển hình với những video đơn giản được tạo nên bởi sự tương phản đối lập khá tốt. Ở đầu trang của webite, bạn sẽ thấy thanh điều hướng nhỏ cùng với một đoạn giới thiệu ngắn,. Video xoay nhanh giữa nhiều phân cảnh nhưng mỗi một cảnh trong số chúng sẽ xuất hiện mờ đi ở mức độ nào đó. Hiệu ứng này được tạo ra bởi một đường kẻ ô bao phủ bằng cách lặp lại nhiều chấm nhỏ màu đen. Nếu nhìn thật gần, bạn sẽ thấy một mô hình lặp lại trên đầu video.

Mặc dù phương pháp kiểu lát gạch này không hề rõ ràng nhưng nó vẫn thực sự hiệu quả và có vẻ thú vị. Bạn cũng có thể thử chỉnh sửa video bằng phần mềm như Premiere Pro hoặc After Effect – Tuy nhiên, không phải tất cả chuyên viên thiết kế đều có đủ kinh nghiệm để làm việc này.

Hãy giữ yên lặng!

Phương tiện truyền thông video trên website đang mắc một lỗi vô cùng nghiêm trọng: Audio có âm thanh. Tôi không thể nào đếm nổi đã bao nhiêu lần tôi thoát ra khỏi 1 website bởi vì những tiếng ồn không cần thiết. Đó thực sự là điều không mong muốn, gần như không bao giờ được chào đón và nó đơn thuần chỉ là nỗi phiền toái.

Âm thanh từ phuong tiện truyền thông video gây nên những khó chịu và phiền toái cho người dùng web

Khi người dùng chú ý đến một video được tích hợp trên trang, thường thì nó phải đợi được kích hoạt. Người dùng có thể lựa chọn kích hoạt hoặc không. Fullscreen Background video đã được thiết lập chạy tự động. Cũng tốt thôi. Dù vậy, không phải ngẫu nhiên mà hầu hết chúng đều được mặc định ở chế độ câm.

Người dùng truy cập Internet thường đang nghe nhạc. Khi âm thanh khác phát ra bất ngờ họ sẽ bị shock tạm thời hoặc là cảm thấy rất khó chịu. Ngay cả khi bạn giả định rằng họ đã tắt loa, vậy liệu có đáng để mạo hiểm hay không?

Hãy tuân thủ nguyên tắc và chỉ để background video ở chế độ tắt tiếng. Hãy tin tôi, người truy cập website của bạn hay kể cả chính bạn cũng sẽ cảm thấy hài lòng nếu bạn làm như thế!

Video với kích thước chiều cao phù hợp

Không phải tất cả bạckground video đều bắt buộc phải ở giao diện toàn màn hình. Sẽ khôn ngoan hơn nếu giảm kích thước ở khu vực background, như thế có thể giúp người dùng tiếp cận được với các vùng khác của trang web. BKWLD là một ví dụ tuyệt vời.

BKWLD là một ví dụ tuyệt vời cho việc sử dụng background video với kích thước chiều cao hợp lý

Tất cả nội dung của video đều sinh động và vừa vặn với bố cục website. Hơn thế nữa, không phải lo lắng về text nên thiết kế cũng sẽ trôi chảy mà không cần nỗ lực gì nhiều. Mỗi dự án thiết kế sẽ khác nhau vì vậy sẽ tốt hơn nếu xem xét kỹ tất cả các phương án trước khi hoàn thiện bản mẫu (mockup).

Không có yêu cầu nào về kích thước với background fullscreen. Hầu hết các video đều trải rộng ra toàn trang nhưng chẳng có lý do nào buộc bạn phải tuân theo quan điểm này. Hãy tìm kích thước phù hợp nhất cho mỗi dự án và mang lại hiệu quả cao nhất cho bạn!

Parallax Scrolling

Xu hướng video background hầu hết đều phù hợp với thẻ div trên trang. Một số designer thích sử dụng hiệu ứng parallax khi nội dung background thay đổi lúc bạn cuộn trang xuống.

Những kỹ thuật phát triển đặc trưng sẽ rất cần thiết để hợp nhất hiệu ứng parallax vào background. Nó cũng sẽ đòi hỏi một số tùy chỉnh riêng (custom) hoặc sự kết hợp của nhiều plugin. Nếu có ý định xây dựng một giao diện parallax tương tự. Stack Overflow  sẽ là bạn tốt của bạn.

Gần đây tôi đã tìm ra một case study về video fullscreen nói về việc triển khai background video trên Wistia. Các bài viết về video fullscreen đang có sự sụt giảm bất ngờ nhưng thông tin bạn cần vẫn ở ngay đó nếu bạn biết mình nên tìm kiếm ở đâu.

Tương thích tốt với các trình duyệt

Ở chủ đề Usability, đã dấy lên một câu hỏi liên quan đến những loại file video và sư hỗ trợ trình duyệt phổ biến. HTML5 đã rút ngắn khoảng cách đó nhưng chặng đường để tìm ra giải pháp toàn cầu của chúng ta vẫn còn khá xa. Vì vậy việc bạn có thể làm chính là phải đảm bảo sự tương thích với background video?

Bước đầu tiên là kiểm tra sự hỗ trợ trình duyệt cho những lọai file tự nhiên. Website Can I Usecung cấp sự phân tích chi tiết cho những đặc tính của Java Script và CSS, cùng với những yêu tố của HTLM5. Hãy biến điều này thành lợi thế của bạn và nhớ nhắm đến nhóm khách hàng mục tiêu của bạn.

Website Can I Use cung cấp sự phân tích chi tiết cho những đặc tính của Java Script và CSS

Nếu bạn sử dụng Analytics traffic, chúng sẽ cực kỳ hữu dụng. Hãy theo dõi các trình duyệt thường được sử dụng phổ biến nhất và tính toán mức độ hỗ trợ cho mỗi loại video. Video flash có lẽ là lựa chọn được hỗ trợ rộng rãi nhất nếu bạn cần phải xử lý những phiên bản hợp pháp của Firefox và IE.

Một điểm quan trọng cần phải ghi nhớ chính là kích thước file. Video 1080p của trông thật tuyệt khi xem trên một chiếc iMac. Nhưng buộc mỗi visitor phải sử dụng một laptop 13 inch để xem một video với dung lượng hàng trăm megabyte, liệu có cần phải phức tạp như vậy không?

Không giống như những background JPEG truyền thống, video hiện nay có thể tự điều chỉnh kích thước. Ngay cả khi đã giảm kích thước file, video của bạn vẫn phải trông thật đẹp. Vì vậy để đảm bảo tính khả dụng của background video trên các trình duyệt, có hai nguyên lý quan trọng nhất là loại file thích hợp và kích thước file được giảm bớt.

Những nguồn background video

Vì background video vẫn đang là khái niệm khá mới mẻ với bối cảnh hiện tại và bạn sẽ không có quá nhiều lựa chọn. Tuy nhiên vẫn có một vài lựa chọn Java Script ở bên ngoài, cũng như có một số plugin của WordPress vẫn có thể giúp bạn đạt được mục đích của mình.

Video nguồn

Nếu bạn đang tìm kiếm video nguồn để sử dụng như một background thực thụ, bạn có thể tìm kiếm ở danh mục của Stock Footage trên VideoHive, trang này hiện tại có một thư viện với hơn 90,000 video!

Xu hướng background full screen vẫn đang dần xâm nhập sâu hơn vào công nghệ thiết kế web hiện đại. Mặc dù những background hình ảnh vẫn là lựa chọn phổ biến nhất nhưng background video vẫn đang thu hút sự quan tâm cùng với sự hỗ trợ lớn hơn và những phương pháp thực hiện dễ dàng hơn.