Obrazy bohaterów są często używane przez twórców stron internetowych do powitania odwiedzających ich witrynę w atrakcyjnym formacie.

Jeśli kiedykolwiek zastanawiałeś się " co to jest wizerunek bohatera? ", jesteś we właściwym miejscu. W tym artykule przyjrzymy się temu tematowi i sposobom tworzenia pięknych obrazów bohaterów z potężnymi efektami wizualnymi.

Obraz bohatera to termin używany przez twórców stron internetowych do opisania zbyt dużej zawartości u góry strony internetowej.

Rolą wizerunku bohatera jest powitanie gościa, gdy tylko spotka on Twoją firmę lub organizacja. Obfitość typów obrazów bohaterów w zestawie narzędzi do tworzenia stron internetowych daje tak wiele powodów, aby umieścić obraz bohatera na swojej stronie internetowej.

Rozumiemy główne zalety takiego postępowania i dlaczego?

Czym jest wizerunek bohatera?

Obejmujące zaletę „dobrego pierwszego wrażenia”, obrazy bohaterów zazwyczaj mają jedną lub więcej z następujących cech:

  • Obraz wysokiej jakości
  • Urzekający film
  • Suwak obrazu lub karuzela multimedialna
  • Animowana lub statyczna ilustracja
  • Nagłówki i opisy obok lub przed treścią wizualną

Jeśli chodzi o styl, typowe szczegóły projektu zastosowane do obrazów bohaterów to:

  • Obrazy tła lub filmy z nakładkami w tle
  • Pozycjonowanie stałe lub lepkie
  • Wskazywanie wpływa na zmianę przezroczystości lub nakładki
  • Elementy kontrastu, które odróżniają obraz od powyższego nagłówka lub późniejszej treści

Nowość obrazów bohaterów w projektowaniu stron internetowych polega na tym, że z jednej strony pracujesz z bardzo konkretną i zdefiniowaną przestrzenią na stronie internetowej. Z drugiej strony, wybór stylu, efektów i technik do wykorzystania podczas projektowania tej części zawartości strony jest absolutnie nieskończony.

Dlaczego powinieneś używać obrazu bohatera?

Kiedy projekt i funkcjonalność twojego bohatera ma wysoki kaliber, automatycznie zyskujesz wiarygodność i zaufanie użytkownika. Twój wizerunek bohatera i towarzysząca mu treść często stanowią pierwszą okazję do przekazania wyjątkowej zalety Twojej oferty organizacja oraz główny punkt kontaktowy dla użytkowników w zakresie konwersji.

Jeśli chcesz wywołać określone zachowania użytkowników, najlepszym sposobem na rozpoczęcie jest doskonały, mocny obraz bohatera, który wywiera silne pierwsze wrażenie na odwiedzających.

Możesz zrobić trwałe pierwsze wrażenie

Pierwsze wrażenia mają znaczenie w wielu dziedzinach życia, ale szczególnie jeśli chodzi o to, jak użytkownicy odnoszą się do estetyki strony internetowej.

Wyniki ekspertów w zakresie interakcji człowiek-maszyna (HCI) i wizualizacji w Google Research poświadczają wpływ zdjęć bohaterów na sukces strony internetowej:

To badanie „ Rola złożoności wizualnej i prototypowości w pierwszych wrażeniach na stronie internetowej : praca nad rozumieniem sądów estetycznych ”, Bada, w jaki sposób złożoność wizualna i prototypowość wpływają na projekt strony internetowej i pierwsze wrażenia jej użytkowników.

Autorzy pokazali uczestnikom badania 119 rzeczywistych zrzutów ekranu ze strony internetowej i stwierdzili, że złożoność wizualna i prototypowość wpływają na odbiór estetyczny użytkownika w pierwszych 50 obrazach eksponatu, a czasem nawet w ciągu 17 ms.

Jako twórcy stron internetowych nasz wniosek jest dość prosty: wybrany przez nas obraz bohatera i sposób, w jaki prezentujemy go na naszej stronie, ma duży wpływ na nastroje i zachowanie użytkowników.

W pełni wykorzystasz swoje treści w części widocznej na ekranie

nad zakładką projektowanie stron internetowych
Pobrane z: crazyegg.com

Sekcja „nad zakładką” strony internetowej może być zdefiniowana w prosty sposób: treść, która wypełnia ekran / pojawia się nad dolną krawędzią okna przeglądarki internetowej po załadowaniu strony. Jeśli treść wymaga przewijania, aby była widoczna, oznacza to, że znajduje się „pod zakładką”.

Koncepcja „nad zakładką” powstała w projektowaniu i publikowaniu druków na długo przed erą mediów cyfrowych. Wszyscy wiemy, jak to jest od razu zauważyć coś w górnej połowie pierwszej strony i można nawet śmiało powiedzieć, że treść na pierwszej stronie często skłania nas do podjęcia decyzji, czy kupić gazetę, czy po prostu przestać w kiosku.

Właśnie dlatego Twoje treści w części widocznej na ekranie mogą być głównym przełomem w sukcesie Twojej witryny.

Co mamy na myśli?

Jeśli odwiedzający witrynę zdezorientują Twoje treści i obrazy w części widocznej na ekranie, szybko opuści Twoją witrynę. Jeśli wizerunek twojego bohatera i jego otoczenia nad zakładką są jasne, wciągające i dobrze ilustrują twoją propozycję wartości, będzie on bardziej skłonny do pozostania w pobliżu.

Ostatecznie, im więcej zainwestujesz w obraz i treść swojej sekcji bohaterów, tym mniej prawdopodobne jest, że użytkownicy szybko wyjdą.

Nie zapomnij o Responsive Design

Należy pamiętać, że położenie zagięcia ekranu zależy od rozmiaru ekranu urządzenia. Jest to ważny czynnik w projektowaniu responsywnym, ponieważ zawartość strony widocznej na ekranie powinna być dostosowana i skonfigurowana w sposób odpowiedni dla różnych rozmiarów urządzeń.

Projektanci stron internetowych i programiści często używają punkty przerwania specyficzne dla urządzenia aby zagwarantować taką responsywność. Daje to pełną kontrolę nad możliwością dostosowania projektu witryny do odpowiednich rozmiarów ekranu i pozwala uniknąć pogorszenia wyglądu lub wpływu obrazu bohatera.

Przedstaw swoją propozycję wartości bez nadmiaru informacji

jak stworzyć wizerunek bohatera

Być może znasz pojęcie „przeciążenie informacyjneW projektowaniu stron internetowych i doświadczenie użytkownika : Chcemy uniknąć używania zbyt dużej ilości treści, zwłaszcza pisanych, gdy reprezentujemy naszą markę i naszą wartość biznesową.

W tym sensie użycie obrazu, ilustracji lub filmu jest warte 1 słów. Dopracowanie skutecznych obrazów brandingowych uchwyci całą Twoją historię w jednym wizualnym nośniku. Zamiast werbalizować swoją historię i propozycję brandingu, możesz w prosty i przyjazny dla użytkownika sposób zmniejszyć obciążenie poznawcze użytkownika.

Powyższy zrzut ekranu pochodzi z Budowa Millbrook, firma budowlana z siedzibą w Perth, specjalizująca się w „budownictwie mieszkaniowym z wysokiej jakości wykończeniem i dbałością o szczegóły”. W przypadku witryny Elementor obraz bohatera na stronie głównej doskonale wykorzystuje interfejs „nad zakładką”. Przyciągające wzrok, wyraźne zdjęcie szczęśliwego nowoczesnego domu i basenu na świeżym powietrzu wprowadza pozytywne, relaksujące wibracje.

Idąc o krok dalej, wybór stylu pełnego obrazu tła i rozmiaru „koca” wskazuje na solidny talent firmy do tworzenia luksusowych nieruchomości mieszkalnych. Propozycja wartości jest przejrzysta jak woda w basenie, a użytkownicy wygodnie przyswajają sobie wszystkie niezbędne informacje.

Twoje obrazy bohaterów mogą pomóc w konwersji potencjalnych klientów

jak stworzyć wizerunek bohatera

Atrakcyjne i widoczne punkty styku są podstawowym składnikiem przepływu użytkowników do reprodukcji konwersji. Właśnie dlatego związek między wezwaniem do działania w sekcji bohatera a samym wizerunkiem bohatera może przyczynić się do osiągnięcia lub złamania celów związanych z budowaniem witryny.

Niech Twoje SMS-y z wezwaniem do działania mówią „ Zarejestruj się teraz "," Więcej "," Kliknij aby przejść do formularza zgłoszeniowego » itd. Twój wizerunek bohatera musi być skoordynowany w przejrzysty sposób na wszystkich frontach: widoczność, komunikaty, kolorystyka, wygląd itp.

Wiarygodne i efektywne rozmowy z potencjalnymi klientami opierają się na komfortowej i naturalnej atmosferze; wizualnie przyjemne obrazy to najlepszy sposób, aby to osiągnąć.

To jest dokładnie to, co widzimy na stronie Elementor stworzonej przez Karykatura STL, zespół rysowników zajmujących się rozrywką eventową. Animowany tytuł (tekst bohatera) przedstawia zadowolonych klientów na ich zdjęciach bohaterów, pokazując, co twórcy kreskówek zapewniają każdej osobie.

Tak więc, kiedy już zakasasz rękawy i zaczniesz zajmować się praktycznością, co dzieje się w procesie podejmowania decyzji, jakiego typu obrazu bohatera użyć?

Przyjrzyjmy się czterem różnym typom obrazów bohaterów i dowiedzmy się, który z nich jest najlepszy dla Twojej witryny.

# 1 obraz bohatera produktu!

jak stworzyć wizerunek bohatera

Obraz bohatera produktu to duży, wysoki obraz définition produktu marki. Obrazy te mogą być prezentowane statycznie lub w ruchu/w akcji, o ile pozwalają na wizualizację propozycji wartości produktu.

Popularne wśród projektantów stron internetowych sposoby prezentowania i personalizowania zdjęć bohaterów produktów obejmują:

  • Szczegółowy / migawkowy przykład pojedynczego produktu, jak widzimy powyżej na stronie internetowej firmy australijska subskrypcja avo lover.
  • Zrzut ekranu cyfrowego interfejsu produktu, takiego jak pulpit nawigacyjny.

Zdjęcia bohaterów produktów zwykle znajdują się na stronach internetowyche-Commerce (ale nie tylko). Potencjalni kupujący oczekują, że zobaczą przykłady rzeczywistych produktów, wspierające świadome podejmowanie decyzji o tym, czy sklep jest odpowiedni dla ich potrzeb zakupowych.

Miłośnik Avo wykorzystał Elementora do stworzenia swojej witryny e-commerce, której klienci używają do zakupu cotygodniowych subskrypcji świeżych awokado dostarczanych do ich domu.

Baza klientów Avo lover jest rynkiem niszowym w wąsko zdefiniowanym obszarze zainteresowań, więc wybór wizerunku bohatera produktu ma sens. Potencjalni subskrybenci to entuzjaści awokado; zobaczenie z bliska i skomplikowanej fotografii produktów jest dokładnie tym, co chcą zobaczyć.

Najlepsze praktyki:

  • Zainwestuj w jakość obrazów tła

Niezależnie od tego, czy tło jest zdjęciem, filmem, ilustracją itp., plik obrazu powinien być jak najjaśniejszy i mieć krystalicznie czystą rozdzielczość.

  • Zwróć uwagę na poziomy kontrastu

Jeśli dodasz tekst przed obrazem sekcji bohatera (lub jakimkolwiek komponentem), upewnij się, że kontrast między elementami witryny jest silny i łatwo dostrzegalny. W tym miejscu nakładki tła i efekty filtrów mogą być niezwykle przydatne.

# 2 Obraz bohatera klienta

Poniższy rodzaj wizerunku bohatera używanego przez firmy internetowe przyjmuje alternatywne podejście do pokazania ich wartości dodanej: pokazywanie klientowi korzystającego z produktu. Ta perspektywa jest strategicznym sposobem na empatię dla odwiedzających, zwięźle pokazując, że rozumiesz ich problem i możesz zaspokoić ich potrzeby.

Powyższy klip wideo pochodzi z witryny Elementor utworzonej przez Aleksandrze Fischerowi, osobisty trener z siedzibą w Stuggart, który świadczy szereg usług związanych ze zdrowiem i sprawnością fizyczną.

Bohaterski wizerunek klienta Aleksandra pokazuje więcej niż tylko zadowolony klient, cieszący się zdrowym i wysportowanym stylem życia. Obraz bohatera idzie o krok dalej, przedstawiając film, w którym jego klient nawiązuje więź i łączy się z bliskimi.

Najlepsze praktyki:

  • Podziel się swoimi przypadkami użycia i doświadczeniami klientów

Wyróżnij swój produkt, pokazując jego najbardziej dominujący przypadek użycia. Obraz, który przedstawia Twoje cele biznesowe i wartość, pokazuje, w jaki sposób odwiedzający skorzysta z Twojej wyjątkowej oferty.

  • Odnosić się do grupy docelowej

Upewnij się, że grupa docelowa jest brana pod uwagę podczas wybierania typu osoby, która ma zostać przedstawiona na Twoim obrazie. Wybierz obraz, który komunikuje Twoje zrozumienie branży i zdolność do zachwytu klientów.

#3 Obraz bohatera założyciela

jak stworzyć wizerunek bohatera

Obraz bohatera założyciela to duży obraz założyciela właściciela firmy, umieszczony w sekcji bohatera, aby powitać odwiedzającego witrynę.

Obrazy bohaterów założycieli są często używane w witrynach portfolio dla freelancerów, właścicieli firm, takich jak psycholog, wizażysta lub muzyk, jak pokazano na Witryna Elementora autorstwa Jasmine Cain powyżej.

Największą zaletą założycielskiego wizerunku bohatera jest to, że stawia twarz w imię; łączy odwiedzającego witrynę z usługodawcą, tworząc przyjemną dynamikę między tymi dwiema osobami.

Dobór obrazów do wizerunku bohatera założyciela powinien być ostrożny. Mnóstwo opcji do wyboru, co sprowadza się do:

co najmocniej przekaże przekaz Twojej marki?

Czy to zdjęcie założyciela patrzącego prosto w obiektyw i uśmiechniętego, czy może patrzącego w innym kierunku?

A może lepiej pasowałoby szczere zdjęcie ciężko pracującego właściciela firmy?

Najlepsze praktyki:

  • Zwróć uwagę na rozmiar i wymiary

Użyj wyraźnego obrazu (lub filmu) w odpowiednim rozmiarze, który pokazuje odwiedzającym dokładne szczegóły, które muszą zobaczyć. W razie potrzeby możesz skupić się na większych obszarach obrazów, przycinając je i usuwając mniej ważne treści.

  • Skoncentruj się na tym, co powinien przekazywać Twój wizerunek

Rolą tła powinno być skupienie się na osobie stojącej przed nim, a nie na odwrót. Najbardziej wpływowe zdjęcia bohaterów założycieli pokażą uśmiechniętego właściciela firmy, co oznacza jego pasję do uszczęśliwiania klientów.

# 4 Niekontekstowy obraz bohatera

jak stworzyć wizerunek bohatera

Niekontekstowe obrazy bohaterów to, jak sama nazwa wskazuje, sekwencje, które pokazują coś pozornie „niezwiązanego” z właścicielem produktu lub firmy. Celem niekontekstowego wizerunku bohatera jest wywarcie wrażenia na odwiedzającym poprzez wizualne skojarzenie lub przekaz podprogowy. Oglądanie niekontekstowego obrazu pokazuje użytkownikowi, czym jest produkt lub marka, ale w sposób pośredni.

Ta technika jest używana na przykład w powyższym przykładzie ze strony Elementora zbudowanej przez firmę zajmującą się marketingiem cyfrowym Technologia AP, z siedzibą w Oklahomie. Witryna internetowa firmy wykorzystuje szeroki, wyraźny obraz tła, który pokazuje unikalny kąt drapaczy chmur w Oklahoma City.

Ta fotografia przedstawia propozycję wartości firmy, jak podano w głównym tekście witryny: Zbuduj swój biznes i obserwuj, jak rośnie, tak wysoki, jak najwyższe biurowce w mieście.

Gdy tylko ludzkie oko zobaczy fizyczne struktury dominujące na niebie, zrozumie, że ci specjaliści od marketingu pracują nad tym, aby firmy oderwały się od ziemi na wyżyny.

Najlepsze praktyki:

  • Upewnij się, że odwiedzający rozumieją, dlaczego obraz jest odpowiedni

Chociaż nie wyświetlasz bezpośredniego obrazu samego produktu, upewnij się, że połączenie wartości produktu z niekontekstowym wizerunkiem bohatera jest nadal łatwe do zidentyfikowania. Użytkownicy nie powinni tracić czasu na zastanawianie się nad jego trafnością.

  • Utwórz wyraźny związek między obrazem bohatera a tekstem bohatera

Tekst bohatera, który umieszczasz w połączeniu z obrazem, powinien odnosić się bezpośrednio do jego zawartości wizualnej. Jest to konieczność, nawet jeśli wymaga kilku iteracji tekstu i doboru sformułowań.

  • Stwórz spójny schemat projektowy

Wybrane kolory tekstów przycisków i tła, nagłówków lub opisów powinny współgrać z obrazem lub grafiką bohatera. Dotyczy to również klikalnych akcentów w Twojej witrynie:

elementy menu nawigacyjnego, logo itp...

Wszyscy wiemy, jak ważny jest spójny język wizualny dla prestiżu naszej strony, obecności marki i wiarygodności zawodowej. W tym miejscu przewodniki po stylu projektowania mogą być naprawdę pomocne, zwłaszcza w upewnieniu się, że obrazy bohaterów są dopasowane do projektu witryny.

Jak przetestować swój wizerunek bohatera: metody, które lubimy

Gdy zaczniesz eksperymentować z kilkoma opcjami swojego wizerunku bohatera, możesz od razu ocenić, która opcja generuje największe zaangażowanie i uzyskać wgląd w najskuteczniejszy projekt – i ostatecznie trzymać się tego.

Oto kilka niezbędnych metod testowania, które są łatwe do skonfigurowania i zapewniają bogatą wiedzę, aby upewnić się, że używasz najlepszego możliwego obrazu bohatera.

A / B Przetestuj swój wizerunek bohatera

Testy A / B wymagają od projektanta stworzenia dwóch lub więcej opcji dla sekcji bohatera (niezależnie od tego, czy są to dwie wersje tytułów i ich kopia, sam obraz bohatera, sekcja układu, rozmiar czcionki lub cokolwiek innego, co możesz wymyślić) - to zależy wyłącznie od Ciebie.

Wyobraź sobie, że zdecydowałeś się użyć trybu mieszania, gdy użytkownicy najeżdżają na twój obraz bohatera, ale nie wiesz, który tryb najbardziej poprawi wrażenia użytkownika.

Wykonaj Test A/B między dwiema różnymi opcjami trybu (w końcu jest 13 opcji trybu mieszania), pozwala wypróbować więcej niż jeden tryb, aby zobaczyć, który ma najwięcej naciśnięć, kliknięć i ostatecznie większe zaangażowanie.

Jednym z najczęstszych i najważniejszych kroków w testowaniu A / B sekcji bohatera jest również przetestowanie co najmniej dwóch opcji przycisku CTA - aby określić, który przycisk uzyskuje najwięcej konwersji.

W szczególności testowanie koloru przycisku CTA jest zawsze przydatnym doświadczeniem, które pozwala zrozumieć, który kolor przycisku najbardziej przyciąga i angażuje użytkowników. Testowanie kolorów przycisków A / B jest bardzo popularne wśród projektantów stron internetowych, ponieważ jest szybkie i łatwe do wykonania i nie wymaga dodatkowych zasobów projektowych.

Użyj narzędzi mapy ciepła, aby odkryć zachowania użytkowników

Narzędzia Heatmap identyfikują i analizują miejsca, w których użytkownicy klikają na stronie internetowej. Dzięki tym narzędziom właściciele witryn i stron docelowych mogą dokładnie zobaczyć, w jaki sposób użytkownicy aktywnie poruszają się po treści. Osiąga się to, gdy narzędzie określi, czy użytkownicy wchodzą w interakcję z kluczowymi elementami (i w jaki sposób), takimi jak linki, przyciski, opcje i oczywiście CTA.

Oto kilka informacji, które właściciele witryn mogą uzyskać dzięki narzędziom do map cieplnych:

  • Elementy, których nie można kliknąć, rozpraszają uwagę użytkowników.
  • Rozmiary przycisków są za duże lub za małe.
  • Kolory przycisków nie są widoczne.

Bądź bohaterem swojej witryny

Projektowanie sekcji bohaterów i jej wizerunku jest jedną z najważniejszych i najbardziej wpływowych decyzji w procesie projektowania stron internetowych. Twórcy stron internetowych często odnoszą się do sekcji bohatera witryny internetowej jako „aktu otwierającego” prezentację witryny, zasadniczo gest powitalny.

Trendy na stronach internetowych nieustannie ewoluują, dodając nowe funkcje do możliwości projektowania stron internetowych. Zawsze ważne jest, aby sekcja bohatera znajdowała się na czele rozważań projektowych - upewniając się, że zawsze osiąga swój potencjał, prezentując swoją witrynę tłumom.

Pobierz Elementor Pro teraz!

Wnioski

Tutaj ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak zrobić obraz bohatera. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać fdaj nam znać w commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...