WordPress Web Design Trendy 2020

Czy nadążasz za najnowszymi trendami projektowania stron internetowych w świecie WordPress? Patrząc w przyszłość, staramy się pokazać niektóre z ważnych elementów konstrukcyjnych i technicznych, które się pojawią.

Tak więc, jak wiesz, projektowanie stron internetowych stale ewoluuje, ponieważ coraz więcej firm konkuruje o ustanowienie swojej marki w Internecie i wyróżnia się spośród rosnącego tłumu stron opartych na szablonach.

W ostatnich latach widzieliśmy – i pisaliśmy o-wielu trendach w projektowaniu stron internetowych, które zawładnęły zbiorową wyobraźnią projektantów stron internetowych i firm świadomych marki.  Nagle każda strona internetowa, którą klikasz, wydaje się być pod wpływem stylów projektowania stron internetowych, takich jak Brutalizm, minimalizm, nowoczesne retro, materiałowe, modułowe lub skoncentrowane na bezpieczeństwie.

A co z wykorzystaniem geometrii w projektowaniu stron internetowych, Łamanej przez reguły typografii, nasyconych kolorów, asymetrycznych, łamanych lub pochylonych układów, siatek CSS, nagłówków wideo, paralaksy, kinografie, niestandardowe ilustracje, ręcznie rysowane animacje, mikrointerakcje i powiadomienia push witryny? Tak, to też omówiliśmy!

Omówiliśmy nawet zalety korzystania z jednostronicowego projektowania stron internetowych i podzieliliśmy się z Tobą tym, co mówią badania na temat korzystania z pasków bocznych na stronach internetowych.

Podczas gdy niektóre trendy w projektowaniu stron internetowych koncentrują się na pomaganiu witrynom wyróżniać się z tłumu, inne trendy wynikają z funkcjonalnej lub ekonomicznej konieczności, a nawet zgodności. Na przykład pomyśl o projektowaniu mobilnym lub integracyjnym projektowaniu stron internetowych. Trudno sobie dziś wyobrazić place budowy bez projektów przyjaznych dla urządzeń mobilnych lub uwzględniających dostępność.

Właściciele witryn chcą świetnie wyglądających witryn, które przyniosą wyniki. Nie powinno więc dziwić, że wymienione poniżej trendy łączą estetyczny design z niezbędną funkcjonalnością.

WordPress Web Design Trendy 2020

Zacznijmy od trendu, który moim zdaniem zdominuje świat projektowania stron internetowych WordPress nie tylko w 2020, ale przez wiele lat.

Najlepszy Projekt WordPress Zaczyna Się Od Bloków

Bez wątpienia WordPress Gutenberg block-based web design to najważniejszy trend projektowania WordPress, na który musisz zwrócić uwagę w 2020 i Później.

Podczas najnowszego stanu słowa adres dostarczony w listopadzie 2019 w WordPress Camp US (WCUS) w St.Louis, Missouri, Matt Mullenweg (współzałożyciel WordPress) wyjaśnił, że Gutenberg jest przyszłością projektowania i tworzenia stron internetowych WordPress.

Matt Mullenweg giving a State Of The Word address at WCUS St. Louis, Missouri, 2019
Matt Mullenweg mówi nam, że wszystkie drogi WordPress poprowadzą do Gutenberga. (“State of the Word” address at WCUS St.Louis, Missouri, listopad 2019.)

Aby docenić znaczenie wypowiedzi Matta, musisz wiedzieć, że Gutenberg to największa zmiana, jakiej dokonał WordPress w swojej 16-letniej historii.

Od czasu wydania WordPress 5.0 w grudniu 6, 2018, Gutenberg miał nowe Wydania 20, Liczba współpracowników znacznie wzrosła (z 200 do ponad 480 w ciągu jednego roku), a przyjęcie redaktora Gutenberga w witrynach WordPress prawie potroiło się.

Każdy, kto dziś projektuje lub buduje witryny WordPress, po prostu nie może sobie pozwolić na zignorowanie tego, jak poważny jest WordPress w kwestii jego przyjęcia dla Gutenberga.

v.com/blog/wp-content/uploads/2019/11/WordPress53.png”alt=” WordPress 5.3 Release Screen”width=” 600″height=” 442 ” />WP 5.3 pokazuje, że WordPress poważnie traktuje Gutenberga.

W ubiegłym roku Programiści Gutenberga wprowadzili znaczące ulepszenia w edytorze (niektóre z nich omówię poniżej)i zmniejszyli średni czas ładowania Gutenberga i średni czas pisania. Chociaż nie wszyscy odeszli jeszcze od klasycznego edytora WordPress, więcej użytkowników reaguje na wzrost prędkości ładowania Gutenberga, przełączając się na nowy edytor.  Matt ogłosił podczas swojego przemówienia, że ponad 270 000 postów dziennie jest obecnie publikowanych za pomocą Gutenberga.

Możesz obejrzeć pełny adres Matta w poniższym filmie:

(Cała powyższa prezentacja Matta została stworzona i wydana za pomocą Gutenberga.)

Jak Gutenberg wpłynie na projektowanie stron internetowych WordPress w 2020?

Na początek Gutenberg pozwoli większej liczbie użytkowników rozpocząć dostosowywanie własnych witryn.

Wiele nowych funkcji Gutenberga jest już dostępnych w wersji WordPress 5.3. Funkcje te obejmują ulepszenia użytkownika, takie jak:

  • Płynniejsze ruchy bloków podczas przeciągania elementów na stronie z ustawieniami ruchu w celu poprawy dostępności.
  • Tryb “maszyna do pisania”, który utrzymuje pionowe miejsce podczas pisania, aby uzyskać przyjemniejsze wrażenia z pisania.
  • Podglądy bloków, które pozwalają użytkownikom zobaczyć, jak będą wyglądać bloki przed ich wybraniem.
  • Obsługa przesyłania dużych obrazów, takich jak zdjęcia o wysokiej rozdzielczości ze smartfona. (Bezwstydna wtyczka: użyj wtyczki do kompresji obrazu, takiej jak Smush, podczas przesyłania dużych obrazów do witryny, a nigdy nie będziesz miał problemu).
  • Szybszy tryb blokowania nawigacji dla lepszej użyteczności i dostępności (użytkownicy mogą poruszać się po menu blokowania za pomocą klawiatury).
  • Możliwość dostosowania menu nawigacyjnych z elementami takimi jak tło i kolory tekstu za pomocą wbudowanego bloku menu nawigacyjnego.

Gutenberg's new menu customization blocks.
Nowe bloki dostosowywania Gutenberga dają użytkownikom możliwość projektowania własnych menu nawigacji.

Gutenberg oferuje również nowe bloki, które pozwalają grupować bloki razem( blok Grupowy), dodawać białe odstępy między blokami (blok odstępów) i używać niestandardowych gradientów i przycisków wielokrotnych na stronach i postach.

A composite screenshot of Gutenberg Custom Gradients and Buttons Block.
Witaj, niestandardowe gradienty i przyciski!

Podczas swojego przemówienia Matt wspomniał również, że jedną z najbardziej poszukiwanych funkcji, których użytkownicy chcieli od bloków Gutenberga, jest możliwość dodawania ikon społecznościowych. Blok ikon społecznościowych Gutenberga pozwoli użytkownikom dodawać ikony i przyciski społecznościowe w dowolnym miejscu na swoich postach i stronach. Spodziewam się, że różne rodzaje blokad mediów społecznościowych będą dostępne dla użytkowników do wyboru.

Gutenberg Social Icons Block.
Blok ikony Społecznej jest jedną z najbardziej pożądanych cech Gutenberga.

Ponieważ coraz więcej współpracowników i programistów koncentruje się teraz na Gutenbergu jako drodze do przodu, WordPress ogłosił również, że uruchomi Katalog bloków, który pozwoli użytkownikom wyszukiwać i instalować bloki w swoich witrynach za pomocą wbudowanego katalogu bloków. Obejmuje to bloki, które dodadzą całe kolekcje do twojej witryny, na przykład biblioteki wzorców.

Będziesz mógł projektować strony w locie za pomocą katalogu blokowego Gutenberga.

Dzięki katalogowi blokowemu Gutenberga użytkownicy będą mogli projektować strony w locie. Prowadzi to do naszego kolejnego trendu projektowania stron internetowych WordPress na rok 2020.

Jeden Temat, By Rządzić Nimi Wszystkimi

Twórcy motywów WordPress zwracają uwagę: możliwości oparte na blokach Gutenberga dadzą użytkownikom większą swobodę projektowania i dostosowywania własnych postów i stron. Zamiast skupiać się na opracowywaniu motywów specyficznych dla celu (np. motyw e-commerce lub blogu), które tylko mieszczą bloki Gutenberga, twórcy motywów WordPress powinni przemyśleć, jak wspierać tę nową wolność za pomocą wielofunkcyjnych motywów, które oferują funkcje do budowania wszelkiego rodzaju stron internetowych.

Dzięki Gutenberg będziesz mógł stworzyć dowolną stronę internetową.

Jak stwierdził Ostatnio Matt Mullenweg (współzałożyciel WordPressa) w stanie słowa WCUS,

“To, co naprawdę staramy się umożliwić za pomocą tych podstawowych elementów, to to, że możesz spojrzeć na dowolną stronę internetową na świecie i zbudować ją w WordPress za pomocą zaledwie kilku kliknięć.”

Stanowi to zarówno wyzwanie, jak i szansę dla projektantów motywów WordPress. Jak budować motywy, które użytkownicy mogą przekształcić w cokolwiek chcą?

Rzućmy okiem na niektóre projekty tematyczne, które próbują to zrobić:

Neve

WordPress Theme: Neve
Neve by Themeisle.

Neve to szybko ładujący się, wysoce konfigurowalny, Wielofunkcyjny motyw, który może być używany do wszelkiego rodzaju projektów internetowych. Chociaż ten motyw ma minimalistyczny design, jest wysoce rozszerzalny i doskonale współpracuje z Gutenbergiem, a także z większością kreatorów stron.

Oprócz tego, że jest gotowy do WooCommerce, responsywny, włączony RTL i gotowy do tłumaczenia, ten lekki motyw jest również w pełni zoptymalizowany (Zobacz następny trend projektowania stron internetowych poniżej, aby dowiedzieć się, dlaczego jest to ważne).

Genesis Framework

A WordPress theme built with the Genesis framework.
Breakthrough Pro to motyw WordPress zbudowany z Genesis framework przez StudioPress.

Genesis Framework opracowany przez StudioPress (obecnie część WP Engine) ma na celu wyjście poza bycie tylko gotowym do Gutenberga, wydając szereg motywów ulepszonych, aby były specjalnie zoptymalizowane dla Gutenberga.

Motywy takie jak Breakthrough Pro, na przykład, zawierają obsługę motywów Gutenberga dla takich rzeczy, jak palety kolorów bloków, rozmiary czcionek, szerokość edytora i rozmiary obrazów, niestandardowe stylizacje i domyślne style bloków Gutenberga, które działają z pełnym zakresem dostępnych szerokości edytora, oraz łatwą edycję WYSIWYG, która pozwala tworzyć strony i posty przy użyciu bloków Gutenberga z pasującymi stylami front end i admin.

Spraw, Aby Szybkie Witryny Były Szybsze

Witryny muszą nie tylko dobrze wyglądać, ale także ładować się szybciej. Zwłaszcza na stronach mobilnych.

Dwa rosnące trendy, na które należy zwrócić uwagę to Accelerated Mobile Pages (AMP) i Progressive Web Apps (PWA).

AMP (Accelerated Mobile Pages) to zasadniczo pozbawione treści wersje HTML istniejących stron internetowych zaprojektowane z myślą o szybszym ładowaniu. Google buforuje i służy zawartości AMP, aby strony ładowały się natychmiast do użytkowników w wynikach wyszukiwania.

Tematy takie jak Neve, o których mówiłem wcześniej, są zoptymalizowane pod kątem AMP, więc nie są wymagane żadne specjalne konfiguracje.

Amp Optimized WordPress Theme
Ta strona została zbudowana przy użyciu Neve-AMP zoptymalizowany motyw WordPress.

Wtyczki PWA dla WordPressa pozwalają użytkownikom powrócić do witryny z powrotem do witryny, uruchamiając aplikację z ekranu głównego i wchodząc w interakcję z witryną za pośrednictwem interfejsu podobnego do aplikacji.

Konwersja witryny WordPress w progresywną aplikację internetową umożliwia użytkownikom powrót do witryny, uruchamiając aplikację z telefonów komórkowych i wchodząc w interakcję z witryną za pośrednictwem interfejsu podobnego do aplikacji.

Super PWA WordPress plugin.
Użyj wtyczki takiej jak Super PWA, aby zmienić swoją witrynę WordPress w aplikację.

W świecie, w którym milisekundy mogą mieć ogromne znaczenie dla tego, czy odwiedzający wybierają Twoją witrynę, czy klikają na czyjąś stronę, a jednosekundowe opóźnienie może zmniejszyć współczynniki konwersji nawet o 7%, witryny WordPress, które mogą ładować się jeszcze szybciej niż konkurencja, będą przyciągać wzrok użytkowników i wygrywające kliknięcia.

Projektanci motywów WordPress i programiści stron internetowych mogą wyprzedzić ten trend, opracowując przyjazne dla urządzeń mobilnych motywy WordPress, które w ogóle nie wymagają potrzeby AMP i konwertowania witryn na PWAs.

Twórz Strony, Z Którymi Możesz Rozmawiać

Więcej użytkowników wyszukuje online za pomocą urządzeń mobilnych i funkcji wyszukiwania głosowego. Według badania voice search przeprowadzonego przez Backlinko, szybkość strony odgrywa znaczącą rolę w wyszukiwaniu głosowym SEO, gdzie średnia strona wyniku wyszukiwania głosowego ładuje się w 4.6 sekund (52% szybciej niż średnia strona).

Możesz dodać funkcje wyszukiwania głosowego do witryn WordPress za pomocą wtyczek.

WP najszybsze wyszukiwanie stron

WP Fastest Site Search WordPress plugin.
WP Fastest Site Search plugin pozwala dodać wyszukiwanie głosowe do WordPress.

WP najszybsze wyszukiwanie w witrynie pozwala nie tylko dodawać możliwości wyszukiwania głosowego do witryn WordPress, ale także zastępuje standardowy widżet wyszukiwania WordPress i dodaje inne funkcje rozszerzenia wyszukiwania, takie jak autouzupełnianie, poprawianie pisowni, wyszukiwanie PDF i wyszukiwanie obrazów oprócz filtrów wyszukiwania i stron wyników wyszukiwania.

Dodanie wtyczek wyszukiwania głosowego do WordPress nie wystarczy. Będziesz także musiał dowiedzieć się, jak zoptymalizować swoją witrynę WordPress pod kątem wyszukiwania głosowego. Optymalizacja wyszukiwania głosowego pomaga użytkownikom szybciej znaleźć to, czego szukają, a to wymaga szybkiego ładowania stron zoptymalizowanych pod kątem urządzeń mobilnych. Ważne jest również, aby skupić się na takich obszarach, jak Czytelność treści, aby upewnić się, że witryna może odpowiedzieć na pytania czytelników. WPAstra napisał świetny artykuł na temat wyszukiwania głosowego SEO.

Twórz Strony, Które Mówią

Użytkownicy nie tylko oczekują, że szybciej znajdą i otrzymają to, czego szukają w Internecie, ale także oczekują natychmiastowych odpowiedzi na swoje pytania.

Wystarczy pomyśleć o tym, jak “czekanie” ewoluowało dla użytkowników w Internecie przeszliśmy od nerwowego bębnienia palcami po stole, czekając na odpowiedzi na e-maile, do oglądania z niepokojem, jak animowane kropki na ekranach mobilnych mówią nam, że ktoś odpowiada na nasze wiadomości tekstowe. Technologia sprawiła, że użytkownicy oczekują natychmiastowej satysfakcji, a teraz musimy ją dostarczyć.

Rozwiązanie? AI chatboty.

Olark Live Chat

Olark Live Chat
Dodaj czat na żywo do swojej witryny WordPress.

Czat na żywo zintegrowany z technologiami AI pozwala firmom reagować i natychmiast angażować się w kontakt z klientami, którzy lądują na ich stronie internetowej. Jeśli ktoś nie jest dostępny do odpowiedzi na żywo, Skrypty AI mogą odpowiednio przejąć kontrolę nad użytkownikami i zapewnić uczucie natychmiastowego wsparcia. Czasami wszyscy użytkownicy muszą czuć, że są kochani, nawet jeśli tylko przez opiekuńczego bota.

WordPress, Poruszasz Mnie

Większość użytkowników pozostaje na stronie przez mniej niż 15 sekund. Tyle masz czasu, żeby przyciągnąć ich uwagę.

Integracja funkcji motion UI, takich jak animowane elementy i przejścia do projektu strony internetowej, może pomóc przyciągnąć uwagę odwiedzających podczas wchodzenia lub wychodzenia z witryny. Kluczem tutaj jest znalezienie właściwej równowagi między przyciąganiem ich uwagi, a następnie kierowaniem ich do tego, czego szukają.

Jeśli nie wiesz, jak zacząć dodawać ruch do swojej witryny, zacznij od miejsca, w którym większość użytkowników WordPressa zaczyna … z wtyczką!

Animuj To!

AnimateIt WordPress Plugin
Dodaj animacje do treści i przyciągnij uwagę odwiedzających.

Animuj to! pozwala dodawać animacje CSS3 do treści widżetów i stron postów, gdy odwiedzający wchodzą, wychodzą, przewijają lub klikają elementy w Twojej witrynie.

Tła Wideo

Tła wideo to kolejny sposób na dodanie ruchu do witryny WordPress. Możesz użyć bloku okładki Gutenberga, aby dodać tło wideo do swoich stron.

Bloki okładek umożliwiają łatwe dodawanie animacji wideo do WordPress

Podczas dodawania filmów i animacji upewnij się, że witryna nadal się szybko ładuje. Zainstaluj nasze wtyczki Smush i Hummingbird, aby ci w tym pomóc.

Przywitaj Się Z Ahlo Do Zialo

Podczas gdy firmy dążą do globalnej ekspansji w obszarach takich jak e-commerce, a internet sprawia, że świat staje się mniejszym miejscem, więcej kultur na całym świecie stara się zachować ich wyjątkowość.

W 2020 i Później wielojęzyczne witryny WordPress, które umożliwiają użytkownikom przeglądanie treści w ich własnym języku, staną się bardziej popularne.

Podczas gdy sam WordPress obecnie nie obsługuje witryn dwujęzycznych lub wielojęzycznych po wyjęciu z pudełka, obsługuje WordPress tłumaczony na wszystkie języki. Istnieją również wtyczki, które pozwolą Ci łatwo stworzyć wielojęzyczną witrynę.

WPML

WPML - WordPress Multilingual Plugin.
WPML-Wtyczka Wielojęzyczna WordPress

WPML (WordPress Multilingual Plugin) pozwala tłumaczyć witryny WordPress na wiele różnych języków i integruje się z WooCommerce, umożliwiając stronom interakcję z użytkownikami w ponad 100 krajach i językach. Inne popularne wtyczki do tłumaczeń językowych to Polylang, Weglot i TranslatePress.

Ważne jest, aby pamiętać, że od lat, WordPress wspiera programistów, którzy pomagają poprawić jego wielojęzyczne możliwości. WordPress nie chce zastąpić wtyczek tłumaczeniowych ani uczynić wielojęzycznym WordPress podstawową ofertą.

Simon Wheatley quote about multilingual WordPress project
WordPress obsługuje wtyczki, które poprawiają jego wielojęzyczne możliwości.

Każdy ma swoje zdanie i coś do powiedzenia

Wyobraź sobie, że możesz projektować i rozwijać witryny WordPress przy użyciu współpracy w czasie rzeczywistym. Różne działy byłyby w stanie wnieść cenny wkład w określone obszary witryny w trakcie jej opracowywania, co skutkowałoby lepszymi witrynami dla użytkowników i zespołów programistycznych.

Chociaż współpraca w czasie rzeczywistym w WordPress jeszcze nie jest, jest w drodze. Leonardo Losovitz napisał świetny artykuł na temat tego, jak Gutenberg odkrywa na nowo doświadczenie tworzenia, edytowania i zarządzania treścią w WordPress i pomaga projektantom stron internetowych pomagać użytkownikom.

Gutenberg wkrótce umożliwi współpracę z innymi WordPressami w czasie rzeczywistym.

Real Time Collaboration Using Gutenberg.
Gutenberg jest tutaj, aby zatrzymać i wkrótce pomoże użytkownikom WordPress budować witryny wspólnie. Źródło obrazu: GitHub

Zacznij projektować witryny WordPress już dziś

Jak widać z powyższego, Gutenberg jest najbardziej znaczącym rozwojem wpływającym na WordPress i wpłynie na wszystkie przyszłe trendy i zmiany w projektowaniu stron internetowych WordPress. Zignoruj to na własne ryzyko.

Projektowanie stron internetowych WordPress od 2020 będzie koncentrować się na witrynach, które integrują design i funkcjonalność, ładują się bardzo szybko i zaspokajają rosnącą bazę użytkowników mobilnych na całym świecie. Wiedza o tym powinna pomóc w budowaniu lepszych witryn.

Omówiliśmy wiele trendów w projektowaniu stron internetowych w przeszłości i będziemy nadal przewidywać trendy w przyszłości. Jeśli jesteś projektantem stron internetowych lub programistą, zapisz się, aby otrzymywać najnowsze aktualizacje i być na bieżąco z trendami.

Tagi: