Thiết kế hình ảnh anh hùng: cách hoàn thiện ấn tượng đầu tiên cho trang web của bạn

Ngay cả khi bạn không quen thuộc với thuật ngữ hình ảnh anh hùng, bạn rất có thể biết đó là gì. Đó là hình ảnh lớn, nổi bật mà bạn nhìn thấy đầu tiên khi truy cập một trang web, hoạt động giống như sự kết hợp giữa biểu ngữ và thảm chào mừng.

Hầu hết mọi trang web đều có hình ảnh anh hùng. Trên một số trang web, hình ảnh anh hùng thay đổi thường xuyên trong khi ở những trang khác, nó vẫn giữ nguyên trong nhiều năm. Rất nhiều trang web cũng sử dụng thanh trượt, một tập hợp các hình ảnh xoay và tiêu đề làm hình ảnh anh hùng.

Công việc của một hình ảnh anh hùng là tạo ra sự tương tác với thương hiệu. Bởi vì đây là thứ đầu tiên mà khách truy cập nhìn thấy trên một trang web, nó thường là yếu tố khiến họ quyết định ở lại trang web đó hay chuyển hướng đi. Vì vậy, nếu bạn muốn xây dựng một trang web hấp dẫn và gửi sự tham gia của khách truy cập thông qua mái nhà, hãy đảm bảo bạn thiết kế hình ảnh anh hùng hoàn hảo cho thương hiệu của mình.

Cách tạo hình ảnh anh hùng hoàn hảo cho trang web của bạn:
–

Hình ảnh anh hùng trang web là gì?
–

Bạn nhìn thấy chúng mỗi ngày. Hình ảnh anh hùng là những hình ảnh nổi bật lớn mà bạn thấy trên các trang chủ. Chúng là thứ đầu tiên bạn nhìn thấy trên một trang web, một lời giới thiệu lớn, táo bạo về thương hiệu (ngay cả khi bản thân thương hiệu không quá đậm nét).

Dưới đây là một vài ví dụ về hình ảnh anh hùng của trang web:

Hình ảnh chính được định vị là thứ đầu tiên bạn nhìn thấy khi truy cập vào một trang web, vì vậy chúng được thiết kế để thu hút bạn và giữ cho bạn cuộn qua trang web. Hình ảnh chính thường được sử dụng để quảng cáo các ưu đãi hoặc phần nội dung cụ thể, nhưng điều này không phải lúc nào cũng đúng. Điều này luôn xảy ra: một hình ảnh anh hùng được thiết kế đẹp sẽ thể hiện rõ ràng thương hiệu của trang web.

Hình ảnh anh hùng thường là hình ảnh lớn nhất trên trang chủ và trên một số trang web, đó là hình ảnh duy nhất. Chúng có thể nhấp được — nhưng không nhất thiết phải như vậy. Tương tự, họ có thể có văn bản – nhưng họ không nhất thiết phải có. Mục tiêu ở đây là thiết kế một hình ảnh anh hùng của trang web kết nối với khách truy cập và giữ họ ở lại trang web của bạn đủ lâu để làm những việc bạn muốn họ làm, cho dù đó là mua sản phẩm, đọc hoặc xem nội dung của bạn, tải xuống nội dung nào đó hoặc tương tác với những người khác trên trang web.

Điều gì tạo nên một hình ảnh anh hùng tốt?
–

Một hình ảnh anh hùng tốt cho thấy, hơn là nói.

Nó thể hiện thương hiệu của bạn trong một hình ảnh, nhưng không thể hiện theo cách logo. Một biểu trưng tổng hợp thương hiệu của bạn một cách tượng trưng, ​​trong khi hình ảnh anh hùng là một bức ảnh chụp nhanh về trải nghiệm mà khách truy cập trang web có thể mong đợi từ thương hiệu của bạn.

Một hình ảnh anh hùng được thiết kế tốt chứa nhiều thành phần. Mặc dù hình ảnh anh hùng độc đáo như các trang web mà chúng được tìm thấy trên đó, nhưng tất cả chúng đều chứa cùng các lựa chọn thiết kế có chủ ý được tạo ra để thu hút và duy trì sự chú ý của khách truy cập. Các lựa chọn thiết kế này là:

• Hình ảnh hoạt động với dòng tiêu đề
• Hình ảnh có liên quan đến thương hiệu và mục đích của trang web
• Một lời kêu gọi hành động rõ ràng
• Hình ảnh chất lượng cao
• Khả năng đáp ứng
• Thương hiệu rõ ràng phù hợp với phần còn lại của thiết kế trang web của bạn

Nghe thì có vẻ nhiều, nhưng hãy tin chúng tôi, thiết kế một hình ảnh anh hùng hiệu quả tuân theo nhiều nguyên tắc giống như thiết kế các phần khác của trang web. Đọc tiếp để tìm hiểu thêm về tất cả các yếu tố tạo nên một hình ảnh anh hùng trên trang web được thiết kế tốt.

Làm việc với dòng tiêu đề

Một hình ảnh anh hùng tốt phải phù hợp với tiêu đề của nó. Ngay cả bản sao thông minh nhất cũng không thể thu hút sự chú ý của khách truy cập và tự cuốn họ vào, và hình ảnh đẹp nhất cũng không thể. Nhưng cùng với nhau, dòng tiêu đề mạnh mẽ và hình ảnh hoàn hảo là bộ đôi động hoàn hảo cho hình ảnh anh hùng trên trang web của bạn.

Hãy xem hình ảnh và bản sao dòng tiêu đề hoạt động cùng nhau như thế nào trong thiết kế ở trên của DSKY. Trước khi người xem thậm chí đọc đoạn giải thích rằng Stillwater Investment là một công ty đầu tư vào Maine, hình ảnh người hùng đã nói với họ rất nhiều điều về thương hiệu. Nó cho thấy họ có trụ sở tại New England, họ hứa sẽ giúp bạn theo đuổi sự độc lập về tài chính và bằng cách tin tưởng giao tiền của bạn cho họ, bạn có thể đạt được phong cách sống được mô tả trong hình ảnh: dành thời gian cho những người thân yêu, theo đuổi sở thích trong một khung cảnh đẹp như tranh vẽ , tất cả vì bạn có đủ tài chính để làm như vậy.

Thiết kế hình ảnh anh hùng của MNoriega cũng làm được điều tương tự: nó làm cho mục đích của trang web và hứa hẹn rõ ràng với khách truy cập ngay từ thời điểm trang web tải xong. Hình ảnh minh họa trực quan hóa chủ đề phức tạp một cách hấp dẫn, dễ nắm bắt.

Hình ảnh có liên quan

Nghe có vẻ hiển nhiên, nhưng điều đáng bàn: hình ảnh bạn chọn cho hình ảnh anh hùng của mình phải liên quan đến trang web và thương hiệu của bạn.

Điều này không có nghĩa là hình ảnh trừu tượng không thể hoạt động. Nó hoàn toàn có thể, miễn là nó hoạt động với phần còn lại của thiết kế của bạn. Điều đó có thể có nghĩa là một mô hình hình học tạo ra một kết cấu trực quan hấp dẫn hoặc một biển ngất ngây trong bảng màu thương hiệu của bạn.

Những hình ảnh tốt nhất để sử dụng không chỉ phù hợp — chúng có chất lượng cao. Đừng rẻ tiền với bất cứ thứ gì kém hơn hình ảnh có độ nét cao — mọi người sẽ chú ý, và điều đó sẽ tác động đến cách họ cảm nhận về thương hiệu của bạn (và không theo cách tốt).

Hình ảnh anh hùng của bạn không cần phải tĩnh. Rất nhiều thương hiệu, như fivefootsix, giới thiệu hình ảnh anh hùng hoạt hình trên trang chủ của họ.

Hình ảnh anh hùng hoạt hình có thể là lựa chọn phù hợp cho bạn nếu thương hiệu của bạn năng động, hay thay đổi hoặc vui nhộn. Nếu bạn là một nhà làm phim hoạt hình hoặc một công ty sáng tạo cung cấp hoặc chuyên về hoạt hình, thì loại hình ảnh anh hùng này rất có thể là điều không cần bàn cãi đối với bạn. Tương tự, nếu bạn là một nhà quay phim hoặc video là một phần quan trọng trong dịch vụ của bạn, thì một video trực tiếp có thể là hình ảnh anh hùng hoàn hảo để thu hút khách truy cập trang web của bạn.

Nhưng đây là điều có thể khiến hình ảnh anh hùng hoạt hình trở nên khó khăn: hình ảnh động có thể làm chậm thời gian tải trang web. Trang web tải chậm hơn là trang web có tỷ lệ thoát cao hơn và xếp hạng công cụ tìm kiếm thấp hơn. Nhưng mà bao nhiêu hoạt ảnh làm chậm trang web của bạn phụ thuộc vào một vài yếu tố và nếu bạn có thể giữ cho tốc độ chậm này ở mức tối thiểu, thì lợi ích của hình ảnh anh hùng hoạt hình có thể vượt trội hơn nhược điểm của nó.

Một cách để giữ cho hoạt ảnh không làm chậm trang của bạn là tạo nó bằng CSS thay vì Javascript. Bạn cũng có thể tăng tốc độ trang bằng cách loại bỏ bất kỳ hoạt ảnh đồng thời nào và / hoặc trì hoãn hoạt ảnh đi một phần giây. Với chiến lược thứ hai này, bạn đang cho phần còn lại của trang đủ thời gian để sử dụng sức mạnh của trình duyệt để tải mà không khiến người xem phải chờ đợi.

Nếu hoạt ảnh của bạn là gif, bạn cũng có thể nén tệp để tối ưu hóa nó và thời gian tải trang của bạn.

CTA rõ ràng

Lời kêu gọi hành động (CTA) là một đoạn văn bản, thường nằm trên một nút hoặc ngay gần nút, cho người xem thực hiện một hành động cụ thể. Hình ảnh anh hùng của bạn chào đón khách truy cập vào trang web của bạn và bắt đầu cuộc hành trình của họ với bạn, nhưng cuộc hành trình không kết thúc ở đó. Hình ảnh anh hùng của bạn nên làm cho bước tiếp theo của khách truy cập trở nên rõ ràng và cách để làm điều đó là một lời kêu gọi hành động rõ ràng.

Khi bạn đang thiết kế hình ảnh anh hùng của mình, hãy nghĩ về hệ thống phân cấp và sự cân bằng của thiết kế. Cân bằng đơn giản có nghĩa là bố trí hình ảnh và văn bản theo cách cân bằng. Nó không thể quá gần nhau hoặc quá xa nhau; nó không bị chụm lại ở một bên trong khi bên kia đứng thẳng tắp, nó không chỉ hơi lệch về bên trái (hoặc bên phải) hoặc phía trên (hoặc bên dưới) tâm của hình ảnh đủ để làm cho hình ảnh có cảm giác bị lệch.

Hệ thống phân cấp có nghĩa là có một tiến trình rõ ràng mà mắt người xem theo dõi và trong tiến trình này, thông tin được trình bày một cách hợp lý. Người xem của bạn nên đọc dòng tiêu đề của bạn trước, sau đó đến tiêu đề phụ, sau đó là bất kỳ văn bản bổ sung nào, sau đó cuối cùng là lời kêu gọi hành động và hình ảnh bạn chọn sẽ tạo điều kiện thuận lợi cho quá trình này.

Khi hệ thống phân cấp của bạn không rõ ràng, người đọc sẽ nhầm lẫn và bị tắt bởi vì họ xử lý thông tin bạn đã trình bày không đúng thứ tự. Điều này có thể có nghĩa là nhìn thấy lời kêu gọi hành động trước khi biết họ được yêu cầu làm gì, đọc dòng giới thiệu trước khi tìm hiểu tên thương hiệu của bạn hoặc thậm chí bỏ sót dòng tiêu đề hoàn toàn.

Kích thước hình ảnh anh hùng đáp ứng

Ngày nay, hơn một nửa lưu lượng truy cập web được thúc đẩy bởi điện thoại di động. Điều đó có nghĩa là một trang web đáp ứng — và một hình ảnh anh hùng thích ứng — là không thể thương lượng nếu bạn muốn kết nối với đối tượng mục tiêu của mình. Thiết kế đáp ứng là thiết kế phản hồi lại người dùng và thông thường, cụm từ này đề cập đến các thiết kế web thích ứng với các thiết bị mà chúng được hiển thị trên đó.

Khi chọn hình ảnh anh hùng trên trang web, hãy nhớ kiểm tra xem nó sẽ trông như thế nào trên các màn hình khác nhau. Có bất kỳ phần quan trọng nào của hình ảnh bị cắt bỏ không? Có bất kỳ chi tiết hoặc bản sao nào khó xem / đọc không? Hình ảnh anh hùng của bạn cần duy trì tính hiệu quả và truyền đạt cùng một thông điệp cho dù khách truy cập của bạn sử dụng thiết bị nào.

Khi bạn làm việc với một nhà thiết kế hình ảnh anh hùng, hãy làm việc với một người có kinh nghiệm trong việc tạo hình ảnh đáp ứng và có thể tạo hình ảnh anh hùng cho các kích thước màn hình khác nhau.

Đặt âm báo cho phần còn lại của trang web

Trung bình, một khách truy cập dành ít hơn 15 giây trên một trang web trước khi rời khỏi, hay còn gọi là “thoát”, như được gọi trong biệt ngữ phân tích. 15 giây hiếm khi đủ dài để tương tác với trang web của bạn theo bất kỳ cách nào có ý nghĩa. Đó là lý do tại sao điều quan trọng là hình ảnh anh hùng của bạn thu hút sự chú ý của khách truy cập và giao tiếp với họ ngay lập tức rằng trang web và thương hiệu của bạn nói chung là chính xác những gì họ đang tìm kiếm.

Đây là bước một trong hành trình của khách truy cập thông qua trang web của bạn. Thiết kế liên quan đến hành trình này được gọi là thiết kế trải nghiệm người dùng (UX). Thiết kế UX hiệu quả đưa khách truy cập trang web bằng tay và hướng dẫn họ đi qua trang web đến một kết luận hợp lý, làm cho khách truy cập cảm thấy như mỗi bước của cuộc hành trình là hợp lý và theo một tiến trình tự nhiên. Khi bạn làm việc với một nhà thiết kế UX để tạo trang web của mình, vị trí hình ảnh anh hùng sẽ là một phần của kế hoạch thiết kế.

Thiết kế hình ảnh anh hùng trang web phù hợp cho thương hiệu của bạn
–

Như đã đề cập ở trên, hình ảnh anh hùng trang web của bạn đóng một vai trò quan trọng: bắt đầu cuộc trò chuyện giữa trang web của bạn và khách truy cập. Hãy coi nó như một ngọn hải đăng cho thương hiệu của bạn. Nếu nó không phù hợp với thẩm mỹ thương hiệu của bạn, mô tả chính xác tính cách thương hiệu của bạn hoặc đưa ra lời hứa mà phần còn lại của trang web có thể giữ, khách truy cập sẽ không đặt nhiều tin tưởng vào thương hiệu của bạn.

Bắt đầu thiết kế hình ảnh anh hùng của bạn bằng cách đề cập đến nhận dạng thương hiệu của bạn. Tại sao bạn lại chọn màu sắc, hình dạng, phông chữ và phong cách thẩm mỹ tổng thể mà bạn đã chọn ban đầu? Hãy tìm những lựa chọn thiết kế đó để lấy cảm hứng cho hình ảnh anh hùng của bạn. Khi bạn làm việc với bộ nhận diện thương hiệu để xác định hướng đi đúng đắn cho hình ảnh anh hùng của mình, hãy tiến hành nghiên cứu thị trường.

Nghiên cứu thị trường cũng liên quan đến việc thử nghiệm các hình ảnh anh hùng khác nhau. Một cách phổ biến để kiểm tra hình ảnh anh hùng, cũng như các khía cạnh khác của thiết kế web, là thực hiện thử nghiệm A / B. Với thử nghiệm A / B, bạn làm cho nó để một nửa số khách truy cập trang web của bạn nhìn thấy một phiên bản trang chủ của bạn và một nửa nhìn thấy phiên bản khác. Sau đó, bạn có thể phân tích tỷ lệ thoát, tỷ lệ nhấp và các thống kê khác cho từng phiên bản và xác định phiên bản nào phù hợp hơn với khán giả của bạn.

Tiết kiệm trong ngày với thiết kế hình ảnh anh hùng tuyệt vời
–

Tìm kiếm bất cứ thứ gì ít hơn hình ảnh anh hùng tốt nhất có thể có nghĩa là lượt truy cập ngắn hơn, ít nhấp chuột hơn, ít tương tác hơn và ít chuyển đổi hơn. Đừng cản trở sự thành công của thương hiệu bằng cách sử dụng hình ảnh anh hùng có chất lượng thấp hoặc thương hiệu kém trên trang web của bạn. Làm việc với một nhà thiết kế web có kinh nghiệm để tạo ra hình ảnh anh hùng trang web hoàn hảo cho thương hiệu của bạn.