Chính xác thì một hero image trông như thế nào?

Hero image là một hình ảnh biểu ngữ lớn được đặt ở đầu trang web. Hero image thực hiện nhiệm vụ anh hùng là truyền đạt thông tin quan trọng về một trang web cho khách truy cập ngay khi họ truy cập vào trang đó. Hoặc hero image là một kiểu phong cách thiết kế ảnh to, chiếm phần lớn diện tích ứng dụng, website.

Tùy thuộc vào mục tiêu của trang web bạn đang tạo, Hero image có thể được phủ lên với CTA khuyến khích khách truy cập nhấp qua để duyệt qua sản phẩm hoặc tìm hiểu thêm về thương hiệu.

Hero trên trang web của bạn không nhất thiết phải là một hình ảnh tĩnh - video cũng tạo ra một biểu ngữ anh hùng thú vị thu hút sự chú ý ngay lập tức.

Hero image thêm sự quan tâm trực quan đến trang web

Bạn cảm thấy thú vị hơn: truy cập trang web dẫn đầu với tiêu đề và một khối văn bản hay đến trang web có hình ảnh hấp dẫn ở đầu trang?

Sử dụng Hero image trong thiết kế web của bạn là một cách đơn giản để tăng thêm sự quan tâm cho bất kỳ trang web nào, bất kể chủ đề nào.

Lựa chọn rõ ràng nhất cho Hero image có thể là hình ảnh mô tả sản phẩm hoặc dịch vụ được cung cấp. Nhưng suy nghĩ bên ngoài cũng có thể tạo ra một thiết kế hấp dẫn hơn - và nếu thương hiệu đằng sau trang web của bạn không bán thứ gì đó hữu hình, bạn sẽ cần phải sáng tạo hơn với lựa chọn hình ảnh của mình. Đây là nơi chụp ảnh lưu trữ (videography) đến để tiết kiệm trong ngày.

Hình ảnh con người, cảnh thiên nhiên và họa tiết trừu tượng đều là những lựa chọn phổ biến trong kho ảnh cho Hero image cho nhiều loại trang web. Tất nhiên, có thể quá dễ dàng đối với loại nội dung trực quan này để có một cái nhìn rõ ràng về cookie. Chọn hình ảnh lưu trữ lấy cảm hứng từ thương hiệu của bạn có thể giúp bạn tránh giao diện "hình ảnh có sẵn" cổ điển đó. Chúng tôi sẽ chỉ tìm hiểu cách thực hiện điều đó bên dưới.

Nơi để tìm một Hero image tuyệt vời với ngân sách

Vì vậy, điều gì sẽ xảy ra nếu bạn không có trong tay những bức ảnh đẹp cho Hero image trang web của mình? Có thể bạn đang thiết kế cho khách hàng của một công ty SaaS không có sẵn bất kỳ hình ảnh sản phẩm nào. Hoặc có lẽ bạn đang tạo một thiết kế trang web cho một wedding planner mới bắt đầu và chưa có ảnh để sử dụng.

Ngay cả khi bạn đang cần hình ảnh thể hiện một loại sản phẩm hoặc dịch vụ cụ thể, vẫn có rất nhiều thư viện ảnh miễn phí và chi phí thấp - ít nhất một trong số chúng có thể có những gì bạn đang tìm kiếm. Pexels.com chỉ là một tùy chọn hữu ích để sử dụng ảnh và video chất lượng cao, miễn phí.

Cách chọn Hero image hoàn hảo

Bạn sẽ muốn khá kén chọn hình tượng anh hùng mà bạn sử dụng. Rốt cuộc, đó là điều đầu tiên mọi người sẽ nhìn thấy khi họ đến trang web của bạn.

Dưới đây là một số mẹo chính cần ghi nhớ khi bạn bắt đầu tìm kiếm hình tượng anh hùng hoàn hảo.

Suy nghĩ về tâm trạng của trang web của bạn

Bạn có muốn làm cho mọi người cảm thấy thích thú và tăng cường không? Thư giãn và yên tâm? Tò mò và hấp dẫn? Hãy dành một chút thời gian để xem xét cảm giác mà bạn muốn trang web bạn đang thiết kế truyền đạt và hãy ghi nhớ điều này khi bạn tìm kiếm Hero image.

Advertisement

Hình ảnh có độ tương phản cao với màu sắc tươi sáng sẽ có cảm giác rõ nét hơn, trong khi hình ảnh có độ tương phản thấp hơn và nhiều tông màu bị tắt hơn sẽ có cảm giác yên bình hơn. Lựa chọn Hero image của bạn sẽ thiết lập tông màu cho trang web theo sau nó, vì vậy hãy suy nghĩ kỹ xem bạn muốn tông màu đó là gì trước khi bắt đầu tìm kiếm hình ảnh của mình.

Làm mọi thứ chuyển động với một hero video

Sử dụng video cho Hero image của bạn thực sự có thể tạo thêm một số hứng thú cho trang web của bạn, ngay lập tức làm cho một trang trở nên hấp dẫn hơn. Những video tốt nhất về anh hùng có xu hướng là những video không quá phức tạp hoặc nhiều hành động và cũng như với ảnh, mọi người tạo ra một bổ sung tuyệt vời cho các video anh hùng.

Chọn một tiêu điểm mạnh

Hero image với tiêu điểm thu hút có thể giúp dẫn dắt ánh nhìn đến bất cứ nơi nào bạn muốn - ví dụ: đến nút CTA của bạn để hướng mọi người bắt đầu mua sắm. Một khung cảnh núi đẹp chắc chắn tạo nên một Hero image đẹp, nhưng phong cảnh núi non bao gồm cả người đi bộ đường dài sẽ giúp hướng ánh nhìn của người xem đến vị trí hoàn hảo cho một số văn bản hoặc một liên kết.

Sử dụng Hero image để gửi tin nhắn

Ngay cả khi bạn không mô tả sản phẩm để bán trong Hero image của mình, bạn vẫn có thể sử dụng nó để nhanh chóng truyền tải thông tin quan trọng về thương hiệu của mình. Chọn một hình ảnh có những người trong đó có xu hướng có cảm giác dễ hiểu và năng động hơn.

Ví dụ: nếu bạn đang tạo trang web cho một công ty cảnh quan, thay vì chụp cận cảnh một số chiếc lá, bạn có thể chọn hình ảnh tiêu đề mô tả một gia đình đang thư giãn trong một khu vườn xinh đẹp, giúp khách truy cập liên kết sự hài lòng và hạnh phúc với thương hiệu của bạn.

Để lại khoảng trống cho tiêu đề và văn bản

Đây là tùy chọn, vì bạn có thể chọn dẫn đầu với Hero image mà không có bất kỳ lớp phủ văn bản nào. Nhưng nếu bạn muốn thêm tiêu đề, nút hoặc bất kỳ yếu tố nào khác lên Hero image của mình, bạn sẽ cần ghi nhớ vị trí này khi tìm kiếm hình ảnh phù hợp. Mọi người có thể khó đọc văn bản phủ trên một Hero image đầy chi tiết và kết cấu.

Giữ thương hiệu với màu sắc

Điều này có thể là không có trí tuệ, nhưng nó cần nhắc đến rằng Hero image là một nơi lý tưởng để nhấn mạnh màu sắc của thương hiệu của bạn và thực sự làm nổi bật bảng màu trang web của bạn. Hero image đen trắng cũng có thể là một lựa chọn tốt cho một trang web có cảm giác cổ điển hoặc tối giản hơn. Nhiều thư viện ảnh có sẵn cho phép bạn tìm kiếm theo màu sắc, giúp bạn dễ dàng tìm thấy các hình ảnh phù hợp hoặc bổ sung cho các mã hex chính xác trong bảng màu trang web của mình.

Chọn kích thước hình ảnh phù hợp

Đương nhiên, bạn muốn Hero image của mình có chất lượng cao, rõ ràng và tập trung. Nhưng hãy nhớ rằng kích thước hình ảnh quá lớn có thể làm chậm đáng kể thời gian tải trang của bạn. 16: 9 là độ phân giải màn hình tiêu chuẩn nhất, vì vậy đây thường sẽ là tỷ lệ tốt nhất để chọn cho kích thước hình ảnh chính; 1600 x 500 pixel là một khuyến nghị tốt. Bạn cũng có thể nén tệp hình ảnh để đảm bảo nó không quá lớn.

Đảm bảo rằng nó phản hồi

Hero image của bạn có thể cần được điều chỉnh để phù hợp với màn hình nhỏ hơn. Hãy lưu ý đến màn hình thiết bị di động khi chọn ảnh hoặc video anh hùng, vì hình ảnh có thể bị cắt đáng kể trên thiết bị di động, có khả năng cắt bỏ một số sở thích về hình ảnh. Hình ảnh có tiêu điểm ở bên trái hoặc bên phải của trung tâm có thể không phải là lựa chọn anh hùng tốt nhất vì lý do này. Hoặc, bạn có thể cần đảm bảo rằng hình ảnh sẽ được cắt để hiển thị chính xác tiêu điểm trên thiết bị di động.

Hãy ghi nhớ khả năng tiếp cận

Như với bất kỳ hình ảnh và video nào trên trang web bạn tạo, khả năng truy cập là rất quan trọng. Hãy nhớ thêm các thẻ alt và mô tả thích hợp cho Hero image của bạn.