Utwórz obraz idealnego bohatera za pomocą kontrastu
Chcesz zrobić świetne pierwsze wrażenie? Zaczyna się od nagłówka Twojej witryny. Obraz widziany przez użytkownika powoduje dobre lub złe wrażenie - i określa, czy użytkownik kliknie i kontynuuje, czy opuści witrynę w ogóle.
To wysokie zamówienie na jeden obraz.
Kluczowym elementem tworzenia obrazu bohatera, który przyciąga użytkowników i pozwala im poruszać się po projekcie, jest kontrast. (Poważnie! Wszystko wraca do teorii projektowania 101.) Głowa, która zawiera kontrastujące elementy w rozmiarze, kolorze i skali zapewnia odpowiednią mieszankę zainteresowania wzrokowego i mówi użytkownikom, jak wchodzić w interakcję z projektem. Oto kilka sposobów na maksymalizację kontrastu na ścieżce tworzenia idealnego obrazu bohatera.
Przycinaj strategicznie
Obraz bohatera nie musi wypełniać "pierwszego" ekranu na urządzeniach. Nie daj się złapać w tę pułapkę.
Przytnij obraz pod kątem wpływu na podstawie zawartych w nim treści. Rozważ inne elementy, które są ważne dla użytkowników, gdy znajdą się na stronie i ułatwią im również zakwaterowanie. W zależności od tego schematu może to oznaczać, że obraz bohatera jest skalowany, aby był większy lub mniejszy niż okno przeglądarki (rozważmy tylko bardziej standardowe rozdzielczości dla dobra argumentacji).
Zanim odrzucisz pomysł, rozważ go przez chwilę.
- Płytki obraz pomoże przejrzeć inne treści.
- Niezwykle głęboki obraz zachęci użytkowników do przewijania o więcej.
- Zwróci uwagę każdy niezwykły kształt.
Zastanów się nad animacją
Nie musisz tworzyć pełnoprawnego obrazu kinematograficznego, aby dodać ruchome obrazy do nagłówka bohatera. Najmniejsze ruchy tworzą wystarczająco dużo kontrastu, by przyciągnąć wzrok.
Subtelne ruchy, takie jak samolot przelatujący nad obrazem w Bar Z Winery, zapewniają ten element kontrastu bez przytłaczania. Jest to prosta alternatywa dla bardziej krzykliwych nagłówków wideo, które stały się popularne. Element kontrastu jest dwojaki: projekt jest inny niż wiele innych, na które użytkownicy są narażeni, a subtelny ruch jest zachwycający i raczej nieoczekiwany.
Z drugiej strony możesz zagrać all in z animacją lub filmem dla wizerunku bohatera. Ruch może być szczególnie wciągający i jest popularną opcją. Używaj go w taki sam sposób, w jaki robisz zdjęcie, jeśli chodzi o dodawanie efektów, takich jak typografia i wezwania do działania.
Pomyśl Odważna typografia
Typografia na obrazie bohatera powinna zadziwić użytkownika. Musi być odważny, mocny i niezapomniany.
Możesz utworzyć to za pomocą wyboru kroju pisma i słów na ekranie. (Brak nagłówków Arial, które mówią tutaj "Witaj".)
Połączenie stylu literowania i przesyłania komunikatów musi mieć bezpośredni wpływ i atrakcyjność dla użytkownika. Słyszeliście, że ludzie mają krótszą uwagę niż złota rybka; Twoim zadaniem jest złapać je z pięknym napisem i językiem.
Jeśli chodzi o czcionkę pogrubioną, kluczowymi elementami kontrastu są kolor i rozmiar.
- Typ musi być kolorem, który wyróżnia się na tle. Światło w ciemności lub ciemności w świetle to najlepsze opcje, jeśli chodzi o czytelność.
- Odważna to dygresja od normy. Rozważ nadmierną lub niewymiarową typografię w nagłówku bohatera pod kątem wpływu.
- Wybierz słowa o znaczeniu. O ile nie jest kluczem do twojej wiadomości, nie potrzebujesz akapitu w nagłówku. Zdecyduj się na kilka słów kluczowych, które zachęcą użytkowników do nauki. (Liczba słów wpłynie na to, jak duże lub małe litery mogą być.)
Wybierz kolor ostrożnie
Obraz bohatera może w ogóle nie być obrazem. Może to być blok koloru lub fajna tekstura.
Wybierz kolor ostrożnie, który przedstawia dokładne znaczenie, jakie masz zamiar. Pogrubiony nagłówek bohatera może zadziwić użytkowników, ale niewłaściwy kolor może być wyłączony.
Jasne, modne opcje to dobra alternatywa. Zaletą tej opcji jest możliwość mieszania jej od czasu do czasu poprzez zmianę koloru tła. Duże kolorowe tło może również pomóc wzmocnić tożsamość marki - szczególnie jeśli ma silne powiązanie kolorów - i nadaje się do czytelności ze względu na prostą naturę projektu.
Kolor jest również ważnym czynnikiem w przypadku korzystania z innego obrazu lub wideo. Od kolorowych typografii po kolorowe elementy interfejsu użytkownika, ważne jest, aby upewnić się, że wybory kolorów na obrazie pasują do reszty projektu. Wiele z tego wraca do teorii koloru i zrozumienia koła kolorów, aby wybór obrazu i koloru współdziałał w projekcie.
Ale co, jeśli obraz bohatera i kolory marki nie zazębiają się? Zastanów się kreatywnie, jak wykorzystać części w obrazie bohatera. Wypróbuj kolorową nakładkę na zdjęciu; rozważ obraz czarno-biały dla obrazu lub tekstu. Przenieś elementy o wysokim kolorze na pasek nawigacyjny, który jest biały lub czarny, aby nie dopuścić do rzeczywistego obrazu. Gdy obraz i obowiązkowe kolory nie grają dobrze, najlepszą opcją jest wyeliminowanie lub rozdzielenie koloru.
Pomyśl o jasnych i ciemnych przestrzeniach
Uwzględnienie ciemnych i jasnych przestrzeni na obrazie może być najtrudniejszym zadaniem podczas dodawania elementów, aby stworzyć kontrast w obrazie bohatera. Zwłaszcza w przypadku responsywnych formatów i punktów przerwania umieszczanie tekstu lub przycisków na obrazie może się zmieniać i nie zawsze można znaleźć doskonałą lokalizację.
Co powinien zrobić projektant?
- Wybierz inny obraz;
- wybierz inną rodzinę, rozmiar lub kolor;
- dodaj nakładkę koloru;
- jak najlepiej.
Każda z powyższych jest realną opcją. Najlepsza opcja może się różnić w zależności od projektu.
The Society Inc. Roztwór w suwaku obrazu bohatera - z dużą ilością różnic między jasnymi i ciemnymi przestrzeniami - miał zawierać nakładkę z logo z białym tekstem w czarnym kształcie. Nie pogarsza obrazu i jest o wiele mniej natarczywy, niż mogłoby się wydawać, słysząc ten pomysł. Logo w centrum pomaga również ustalić tożsamość marki i wizualną.
Dołącz wyraźne wezwanie do działania
Nie zapomnij o CTA!
Co chcesz zrobić użytkownikom po obejrzeniu Twojego fajnego obrazu bohatera? Powiedz im.
Wezwanie do działania powinno być jasne, czy to wypełnianie formularza, przewijanie w celu uzyskania większej ilości treści czy kliknięcie łącza do innej strony. Powinien zawierać wystarczającą definicję i kontrast, aby był łatwo widoczny na tle obrazu. (Jaki jest sens CTA, jeśli nikt go nie widzi?)
Kolor i rozmiar mają tutaj szczególne znaczenie. Kolor przycisku (wspólna wskazówka CTA) powinien wyróżniać się na tle pozostałej części obrazu. Słowa mówiące użytkownikom, co mają robić, muszą być wyjątkowo czytelne, proste i jasne.
Wniosek
Kontrast jest jedną z kluczowych technik dla każdego dobrego projektu. Tworzy oddzielenie elementów i pomaga kierować użytkowników do pożądanego działania.
Zachowaj szczególną ostrożność, aby stworzyć wystarczający kontrast podczas projektowania obrazu bohatera, aby użytkownicy wiedzieli dokładnie, jakie działania należy podjąć na stronie. Sprawdzaj swoje dane i jeśli te konwersje się nie pojawiają, przemyśl ponownie kontrast w projekcie. Być może nadszedł czas, aby wzmocnić to jeszcze bardziej.