10 porównań projektów stron internetowych, które zainspirują Twój biznes w 2022 roku

Szukasz, aby dać swoją stronę główną dobrze potrzebnej aktualizacji projektu w późnych 2021 lub 2022? Nie jest to zły pomysł; pierwsze wrażenia są kluczowe, jeśli chodzi o strony internetowe firm. Ale, naprawić swoją stronę główną i projektowanie stron internetowych nie jest łatwy wyczyn.

Trendy w projektowaniu stron internetowych ewoluują szybciej. Winić stale malejącej uwagi użytkownika. Przeciętny odwiedzający spędza teraz tylko 0,5 sekundy skanując stronę główną, aby wyrobić sobie opinię o Twojej marce i zdecydować, czy kliknąć przez czy odbijać.

Zwiększone oczekiwania użytkowników i niepewność w reakcji użytkownika, na którą duży wpływ ma pierwsze wrażenie na stronie, to kolejne powody do rozważenia. To dlatego projekty, które były trendy w 2019 roku, nie są już opłacalne w 2021 lub 2022 roku.

Zebraliśmy dziesięć najlepszych przykładów projektów stron głównych, aby zainspirować Twoją firmę w 2022 roku, w tym rundown najlepszych strategii i wskazówek.

Zacznijmy od podkreślenia, dlaczego optymalizacja strony głównej jest konieczna w 2022 roku:

Dlaczego Twoja strona główna będzie tak ważna w 2022 roku

Twoja witryna - zwłaszcza strona główna - to pierwsza szansa Twojej marki, aby przyciągnąć, zbudować zaufanie i połączyć się z odwiedzającymi.

Według ostatnich statystyk, dlaczego projektowanie stron internetowych jest ważne:

1. 38% odwiedzających przestanie wchodzić w interakcję ze stroną internetową, jeśli uzna, że jej układ nie jest atrakcyjny wizualnie lub intuicyjny. Powoduje to wyższy współczynnik odrzuceń i mniejszą liczbę konwersji.
2. 94% pierwszego wrażenia odwiedzającego opiera się na wyglądzie strony internetowej (w tym kolorach, czcionkach, układzie, menu nawigacyjnym, itp.)
3. 46% osób ocenia wiarygodność firmy na podstawie estetyki jej strony internetowej. Marki, których projekty stron nie są najlepsze, są postrzegane jako mniej godne zaufania niż firmy inwestujące w doświadczenie odwiedzającego.

Pomyśl o tym w ten sam sposób, jak o wchodzeniu do sklepu stacjonarnego. Odwiedzający są bardziej zachęcani przez starannie kuratorskiej atmosferze starannie zaopatrzonych półek i pracowników przyjazny niż sklep, który jest ciemny, bałagan, lub pozornie nieprzyjazny.

Używając tej logiki, Twoja strona główna w sekcji above-the-fold jest miejscem, w którym przywitasz odwiedzających i przyciągniesz ich po więcej.

10 Porównania projektu strony głównej (2019 vs. 2021), aby zainspirować Twój biznesowy projekt strony internetowej w 2022 roku

Projekt strony głównej przeszedł długą drogę od 2019 roku. W tej sekcji zbadasz, jak.

Te projekty stron głównych miażdżą go powyżej fałdy. Weź tylko kilka z tych wskazówek do serca, a Twoja strona będzie przygotowana do przyciągania leadów i konwersji - bez względu na to, w jakiej branży jesteś.

1. Netflix - Crafting The Perfect Call To Action That Reduces Friction With an Additional FAQs Section

Większość firm popełnia błąd dodając przycisk CTA, który najpierw przekonuje użytkownika do kliknięcia w niego, a następnie prosi o podanie adresu e-mail odwiedzającego.

Netflix również zrobił to samo w swoim projekcie na 2019 rok.

Jednak Netflix połączył oba kroki w swoim projekcie strony głównej z 2021 roku.

Nowy, ulepszony projekt strony głównej z 2021 roku prosi o adres e-mail użytkownika z samego przodu wraz z przyciskiem CTA.

Tutaj jest dobre porównanie obu projektów:

2019 homepage design

vs.

2021 projekt strony głównej

Key Takeaways:

• Projekt zachęca odwiedzających do wprowadzenia swojego adresu e-mail zaraz po wylądowaniu na stronie głównej. W rezultacie, składanie formularzy jest znacznie łatwiejsze, gdy użytkownik rozpoczął już proces. Netflix ułatwia odwiedzającym poruszanie się wzdłuż lejka konwersji poprzez zmniejszenie tarcia.
• Projekt 2021 ma również ładną sekcję FAQ, która zapewnia szybkie informacje na temat usług firmy i poprawia ogólne wrażenia użytkownika.
• FAQ pomaga również zwiększyć organiczną obecność strony w wyszukiwarkach, ponieważ Google prezentuje snippety z sekcji FAQ w formie okienka odpowiedzi w wynikach wyszukiwania.

2. Spotify - Odświeżone kombinacje kolorów dla lepszej widoczności CTA i użycie "zasady trzech" dla tekstu nagłówka

Starszy projekt strony głównej Spotify z 2019 roku używał jasnoróżowych i pomarańczowych kolorów w swoim głównym obszarze strony głównej. Kolor CTA był zielony, ale jeśli przyjrzysz się bliżej, CTA brakuje widoczności.

Nowy projekt 2021 wykorzystuje niebieskie i zielone kolory ze znacznie większym rozmiarem czcionki dla głównego nagłówka. Kolory są atrakcyjne, a CTA jest dobrze widoczne.

Oto porównanie strony głównej Spotify 2019 design vs 2020 design:

Projekt strony głównej 2019 r.

Vs.

2021 projekt strony głównej

Key Takeaways:

• Niebieski jest najbardziej uniwersalnym kolorem, a zielony jest idealnym wyborem dla przycisku CTA. Spotify użył powszechnie akceptowanych kombinacji kolorów do przeprojektowania swojej strony głównej i sprawił, że CTA jest bardziej widoczny.
• Główny nagłówek jest również większy niż był w projekcie z 2019 roku i podąża za regułą trzech w pisaniu, która jest skuteczna i satysfakcjonująca. Używa tylko trzech słów w nagłówku głównym, aby umożliwić ludzkiemu mózgowi przetwarzanie informacji jako wzór, który jest bardziej zapamiętywalny.

3. Hulu - Daj pierwszeństwo swojej marce i ukryj ceny

Jeśli porównasz stronę główną Hulu 2019 vs. 2021 Hulu, nazwa marki została potraktowana priorytetowo i pokazana jako główny nagłówek.

Co więcej, starsza strona główna miała wszędzie informacje o cenach, które zostały inteligentnie zredukowane w nowym projekcie.

Projekt strony głównej w 2019 r.

vs.

2021 projekt strony głównej

Kluczowe wnioski:

• Nazwa marki "Hulu" jest wyświetlana jako główny nagłówek strony głównej, co pomaga budować zaufanie publiczności.
• Starszy projekt nakłaniał użytkowników do wybrania płatnego planu, mimo że mieli darmową opcję próbną - to zniechęcało użytkowników do wypróbowania ich usługi. Nowy projekt 2021 zachęca użytkowników do wypróbowania platformy za darmo. Ponadto, pakiety mają wyraźne CTA, które wspominają "wypróbuj za 0 dolarów". To posunięcie projektowe poprawia konwersje na stronie internetowej.
• Nowy projekt ułatwia odwiedzającym wybór planu oglądania z łatwym porównaniem trzech dostępnych planów. Najlepszą częścią jest to, że klienci mogą rozpocząć wszystkie plany za 0 dolarów. Jest to sytuacja win-win dla użytkowników, a oni mogą szybko wybrać plan, aby rozpocząć oglądanie Hulu.

4. Nextiva - Zmniejsz szumy wizualne i dodaj obrazki w menu, aby poprawić UX

Nextiva zdała sobie sprawę z wagi redukcji szumu wizualnego na swojej nowo zaprojektowanej stronie głównej 2021. Szum wizualny występuje, gdy używasz zbyt wielu kolorów, aby przyciągnąć uwagę użytkownika. Różne kolory konkurują ze sobą, co skutkuje rozcieńczoną obserwacją klienta.

W starej stronie głównej z 2019 roku Nextiva użyła pomarańczowego, niebieskiego i zielonego jako kolorów podstawowych, natomiast w odnowionym projekcie z 2021 roku użyła niebieskiego jako koloru głównego.

Oto porównanie tych dwóch projektów:

Projekt strony głównej z 2019 r.

vs.

2021 projekt strony głównej

Co więcej, starsza strona główna nie miała obrazu w menu produktu, ale nowa strona główna z 2021 roku poprawia UX dalej.

Poniżej znajduje się porównanie:

2019 homepage design

vs.

2021 projekt strony głównej

Kluczowe wnioski:

• Nextiva użyła niebieskiego jako koloru bazowego dla projektu strony głównej i usunęła pomarańczowe i zielone kolory, aby zmniejszyć wizualną złożoność. Jest to doskonała zmiana, aby utrzymać uwagę użytkownika w centrum uwagi. Zauważ, że zielony pasek na górze strony głównej w wersji 2019 został zastąpiony kolorem niebieskim.
• Projekt 2021 ma czysty wygląd w porównaniu do projektu 2019, który wygląda na rozproszony ze zbyt wieloma różnymi elementami, w tym CTA, które dezorientują użytkowników.
• Menu produktów wykonuje doskonałą pracę, inteligentnie łącząc się ze stronami usług, takimi jak systemy telefoniczne i spotkania wideo. Wizerunek uśmiechniętej pani przyciąga użytkowników do kliknięcia na produkty Nextivy, aby dowiedzieć się o nich więcej. Poprawa UX to imponujący sposób na zmniejszenie współczynnika odrzuceń i wydłużenie czasu spędzanego na stronie.

5. GoToMeeting - unikaj długich formularzy zapisu, edukuj użytkowników na temat swoich produktów i dodawaj zdjęcia, które odzwierciedlają aktualne potrzeby odbiorców

GoToMeeting świetnie radzi sobie z edukacją użytkowników na temat swoich produktów, dodając na stronie głównej więcej treści, które wyczerpująco wyjaśniają ich cechy.

Co więcej, zastąpili starsze zdjęcie bohatera nowym, które odzwierciedla zmieniające się potrzeby odbiorców. Obecnie, istnieje wzrost w pracy z domu kultury z powodu Covid-19. Dlatego też zdjęcie i tekst nagłówka wyraźnie kierują się potrzebami swoich użytkowników.

Oto porównanie strony głównej GoToMeeting z roku 2019 i 2020:

Projekt strony głównej 2019 r.

vs.

2021 projekt strony głównej

Kluczowe wnioski:

• Projekt strony głównej z 2019 roku miał formularz zapisu na stronie głównej, który GoToMeeting usunął w projekcie z 2021 roku. Ludzie nie lubią wypełniać tak wielu informacji zaraz po wejściu na stronę główną. Dlatego GoToMeeting postąpił słusznie, usuwając formularz zapisu z ich strony głównej.
• Obrazek bohatera kradnie show w 2021 roku, ponieważ zdjęcie pracującej mamy z dzieckiem bawiącym się w studiowanie przed nią jest świetnym sposobem na przedstawienie aktualnych potrzeb społeczeństwa, kiedy ponad 60% pracowników pracuje w domu. Odbiorcy mogą szybko powiązać swoje środowisko pracy z obrazem bohatera, co prowadzi do większej liczby rejestracji.
• Starszy projekt 2019 był mylący i nie pomagał użytkownikom w zrozumieniu różnych funkcji produktu. Nowy projekt strony głównej na rok 2021 ma sekcję cech produktu, która wyjaśnia różne funkcje oprogramowania. Kiedy użytkownicy są wyedukowani na temat produktu, zdobywają pewność siebie, aby go wypróbować.

6. Zillow - Zastosuj prawo Hicka, aby umożliwić odwiedzającym podejmowanie szybszych decyzji

Zillow robi imponującą pracę stosowania prawa Hicka w umożliwieniu odwiedzającym do podejmowania szybszych decyzji. Prawo Hicka mówi, że im więcej opcji prezentujesz użytkownikom, tym szybciej zdecydują. Dlatego jest to główny czynnik poprawiający użyteczność witryny.

Stary projekt strony głównej 2019 Zillow oferował zbyt wiele opcji dla użytkowników, jak chcą kupić, wynająć lub sprzedać nieruchomość. Użytkownicy najpierw wybierają jedną z tych trzech opcji, a następnie wprowadzają kod pocztowy, aby rozpocząć wyszukiwanie.

Nowy projekt strony głównej 2021 zmienił to. Teraz, Zillow oferuje użytkownikom jedną opcję. Muszą tylko wprowadzić kod pocztowy, aby rozpocząć wyszukiwanie.

Poprzez zmniejszenie liczby działań, które użytkownicy muszą podjąć tylko do jednego, projekt strony głównej ułatwia ogólny proces podejmowania decyzji przez odwiedzających witrynę.

2019 projektowanie stron głównych

vs.

2021 projekt strony głównej

Key Takeaways:

• Nowy projekt strony głównej ma prosty pasek wyszukiwania, który przekonuje odwiedzających do podjęcia szybkich działań.
• Obraz Hero jest umieszczony sprytnie za paskiem wyszukiwania, aby przedstawić potrzeby użytkowników dokładnie.
• Strona główna ma trzy różne panele na zakup, wynajem, lub sprzedaży domu, gdy użytkownicy przewijają poniżej. Stary projekt brakuje, że. Nowy projekt usunął tak wiele opcji powyżej fałdy i przechowywane tylko jedną opcję dla użytkowników, aby zachęcić więcej użytkowników do wyszukiwania właściwości na stronie.

7. Plex - Umieszczenie wyraźnych wezwań do działania na stronie głównej

CTA jest kluczowym elementem każdej strony internetowej. Pomaga użytkownikom zdecydować o ich następnym działaniu i pomaga przekształcić odwiedzających w potencjalnych klientów.

Plex nie posiadał zoptymalizowanego rozmieszczenia CTA w swoim projekcie strony głównej na rok 2019. W związku z tym projekt na rok 2021 otrzymał podwyższenie, aby lepiej umieścić CTA w celu zwiększenia zaangażowania odwiedzających.

Przyjrzyj się projektom strony głównej Plex z dwóch różnych lat. Jeśli porównasz dwie strony główne z roku 2019 i 2021, główną różnicą, która przykuje Twoją uwagę, jest CTA.

Projekt strony głównej z 2019 r.

vs.

Projekt strony głównej z 2021 roku

Key Takeaways:

• Przyciski call-to-action są bardziej widoczne i mają teksty actionable.
• Liczba przycisków CTA jest zwiększona do dwóch, aby zachęcić użytkowników do podjęcia działania.
• Dodatkowy przycisk CTA jest mądrze umieszczony w centrum, aby uzyskać natychmiastową uwagę.
• Zauważ, że kolor przycisku jest również jasny i mocno kontrastuje z tłem, a jednocześnie pasuje do motywu kolorystycznego.
• Stary tekst nagłówka "Stream Smarter" był mylący, ponieważ nie pomagał użytkownikom zrozumieć, czym zajmuje się firma Plex. Dlatego został on teraz zmieniony na "Watch Free Movies and TV on Plex" (Oglądaj darmowe filmy i telewizję na Plex). Nowy tekst jest łatwy do zrozumienia i zawiera słowo "Free", co zwiększa liczbę odwiedzających klikających na CTA.

8. Dropbox - więcej treści powyżej paska i zmiana czcionki

Dropbox znacząco popracował nad swoją główną treścią, co jest wyraźnie widoczne na zdjęciach porównawczych projektu strony głównej z 2019 vs. 2021 roku.

Na stronie głównej z 2021 roku widać utrwalanie wyblakłych, minimalistycznych i mniej angażujących treści na starszej stronie głównej.

Projekt strony głównej 2019

vs.

2021 projekt strony głównej

Kluczowe wnioski:

• Sans serifs, z ich czystą czytelność, są włączone do dłuższych bouts strony głównej.
• Pogrubiony bezszeryfowy tekst wykonuje zadanie przyciągania uwagi użytkownika bez wysiłku.
• The kolor kontrast the tekst z the tło zwiększać, che polepszać the widoczność.
• Po prawej stronie obraz laptopa jest zastąpiony zrzutem ekranu oprogramowania, co intryguje użytkowników, aby dowiedzieć się więcej.

9. Cisco - Moving Blocks to Outsmart konkurencyjnych stron internetowych

Projekt strony głównej amerykańskiej firmy technologicznej Cisco doczekał się drastycznej zmiany w 2021 roku; zasługuje na to, by pojawić się na tej liście. Strona firmowa sprytnie reprezentuje apel o przyszły rozwój poprzez swój zabójczy projekt strony głównej.

Oto porównanie starego projektu strony głównej z 2019 r. vs. nowy ruchomy projekt bloku z 2021 r:

Projekt strony głównej z 2019 r.

vs.

2021 projekt strony głównej

Kluczowe spostrzeżenia

• Na stronie głównej znajdują się ruchome bloki z wiadomościami z bloga. Po najechaniu na obrazek, rozszerza się on i pojawia się przycisk CTA. Bloki reprezentują design przyszłości, który konkurencji może być trudno powielić.
• Każdy blok posiada CTA, którego brakowało w projekcie z 2019 roku. Każdy blok reprezentuje konkretną usługę Cisco i zaspokaja różne potrzeby odwiedzających.
• Nowy projekt jest elegancki i czysty z dużą ilością informacji.

10. Slack - Product Video On Home Page For More Conversions (Wideo produktowe na stronie głównej dla większej liczby konwersji)

Slack ułatwił użytkownikom dobre zrozumienie produktu za pomocą wideo na stronie głównej.

Projekt 2019 ma obraz, podczas gdy projekt 2021 ma wideo, które pomaga odwiedzającym zrozumieć, jak działa produkt.

Poniżej znajduje się porównanie projektu 2019 vs. projekt 2021:

Projekt strony głównej 2019 r.

vs.

2021 projekt strony głównej

Kluczowe wnioski

• Włączenie wideo produktu pozostawia świetne wrażenie w umysłach odwiedzających i pokazuje im, co robi twój produkt.
• Wideo pomaga Slackowi jasno i super szybko przedstawić swoją propozycję wartości.
• Wideo ma silną korelację z konwersją i działa dobrze w porównaniu do obrazów hero. Slack używał obrazu bohatera na stronie głównej w 2019 roku, ale zastąpili go wideo w 2021 roku.

Końcowe myśli na temat korzystania z tych projektów stron głównych dla inspiracji w 2021 roku

Dokonując go do tego punktu w naszym przewodniku, teraz masz mnóstwo inspiracji do uruchomienia z podczas aktualizacji strony głównej. Ty także powinieneś mieć lepsze zrozumienie jak potężny ten narzędzie może zostać dla twój marki.

W ten sposób teraz ja jest czas burza mózgów jak używać te pomysły dla twój swój 2021 homepage projekt. Po pierwsze, zanotuj kluczowe punkty z tego przewodnika i uczciwie oceń, jak Twoja strona wypada obecnie w porównaniu z nimi.

Wykonaj to zadanie, a Twoja marka może odnotować wzrost ruchu na stronie i konwersji. Może nawet zarobić miejsce w łapance zabójczych projektów stron internetowych, takich jak ta.