11 błędów projektowych, które zwykle popełniają kupujący motywów WordPress

Czy zdarzyło Ci się kiedyś tworzyć stronę internetową z motywem WordPress, ale efekt końcowy nie przypominał demonstracji motywu? Wymieniłem 11 typowych błędów projektowych, które często są pomijane przez twórców stron internetowych.

Znalazłeś idealny motyw WordPress. Demo motywu wyglądało bezbłędnie. Twojemu klientowi bardzo się to spodobało i zgodził się z Tobą dokonać zakupu. Kupiłeś go, zainstalowałeś i zacząłeś edytować motyw do potrzeb klienta.

Zmieniłeś logo, zmieniłeś kolory motywu, wstawiłeś obrazy suwaków i treść, ale ostatecznie strona, którą stworzyłeś, w ogóle nie wygląda jak demo. Wiesz, że coś jest nie tak, ale po prostu nie możesz wykryć, co. Brzmi znajomo?

W ciągu ostatnich 5 lat, pracując jako projektant w branży motywów WordPress, widziałem niezliczone przykłady pięknych stron internetowych stworzonych za pomocą naszych motywów WordPress.

Ale od czasu do czasu widzę witrynę z solidnymi fundamentami, ale z kilkoma drobnymi błędami projektowymi, które rujnują ogólne wrażenia. Mówię o małych drobiazgach, które każdy może łatwo naprawić.

Wiem, że ciężko jest dostrzec te wady, zwłaszcza jeśli nie jesteś projektantem. Z tego powodu postanowiłem napisać post na blogu o tym, jak ulepszyć stronę internetową swojego klienta, aby wyglądała jeszcze lepiej.

Dodaj ten post do zakładek i przejrzyj poniższą listę, gdy następnym razem będziesz tworzyć witrynę z motywem WordPress. Usunięcie wszystkich niedoskonałości zajmie Ci tylko godzinę lub dwie, ale efekt będzie o 100% lepszy.

1. Słaby kontrast tekstu na suwaku

Mówiłem o nakazach i zakazach dotyczących obrazów suwaków, więc teraz będę się streszczał. Zasady są proste:

• Jeśli kolor tekstu na suwaku jest biały, wybierz ciemne tło. Jeśli tekst suwaka jest ciemny, wybierz jasne tło.
• Upewnij się, że obszar, w którym pojawia się tekst, nie ma zbyt dużego wizualnego szumu w tle. Zaśmiecone tło zmniejsza czytelność tekstu na froncie i może przeoczyć pierwotną propozycję wartości zapisaną na suwaku.

Na szczęście dla Ciebie większość naszych motywów zawiera opcję półprzezroczystego jednolitego tła za tekstem. Nasze nowsze motywy WordPress mają również cień zastosowany do całego tekstu na suwaku, dzięki czemu kontrast jest jeszcze lepszy.

2. Zbyt duże obrazy suwaków

Kiedy patrzę na strony wykonane za pomocą naszych motywów WordPress, dość często zauważam, że użytkownicy używają zbyt dużych obrazów sliderów. Posiadanie obrazu suwaka, który zajmuje 100% wysokości ekranu, jest dopuszczalne tylko wtedy, gdy jesteś fotografem, a zdjęcia są Twoim produktem końcowym. W innych przypadkach trzymaj się bezpiecznej strony i trzymaj się zaleceń dotyczących tematów. Zachowa idealną równowagę wizualną Twojej witryny.

3. Słaba biała (ujemna) przestrzeń

Biała lub negatywna przestrzeń w projektowaniu stron internetowych to pusta przestrzeń między widżetami, blokami tekstu, obrazami lub jakąkolwiek inną częścią witryny, która pomaga uporządkować wszystko i zapewnia przejrzysty, logiczny przepływ dla użytkownika końcowego.

Bez względu na to, jak bardzo się staramy, jak zabezpieczamy każdy możliwy aspekt motywu WordPress, użytkownicy zawsze znajdują sposób na zniszczenie białej przestrzeni.

Na szczęście dla Ciebie w naszych motywach używamy potężnego Kreatora Stron, co oznacza, że ​​możesz z łatwością dostosować odstępy w witrynie. Kreator Stron pozwala na zmianę wypełnienia widżetu, wypełnienia wiersza i pozwala na modyfikację rozmiaru rynny między kolumnami.

Nie będę mówić o szczegółach i wolę podać kilka praktycznych przykładów.

• W większości przypadków twórcy stron internetowych wykorzystują zbyt mało białego miejsca, co nie pozwala zawartości oddychać, więc zazwyczaj im bielsze miejsce zastosujesz, tym lepszy wynik.
• Pokaż relacje między elementami za pomocą odstępów. Elementy, które idą w parze, na przykład tytuł wpisu na blogu i data wpisu, powinny być bliżej siebie niż elementy, które mają inne przeznaczenie, takie jak data wpisu na blogu i nagłówek strony.
• Bądź spójny z odstępami. Oznacza to, że każdy wiersz w Twojej witrynie powinien mieć taką samą ilość białego miejsca na górze, na dole, z lewej i prawej strony.

A więc chodzi o widżety. Powinny mieć taką samą ilość dopełnień i marginesów, bez względu na to, gdzie na stronie się pojawiają. Spójność zapewni równowagę Twojej witrynie i skupi się na tym, co ma znaczenie – treści.

4. Zła przyjazność dla urządzeń mobilnych

Procedura i zasady są takie same jak na powyższym pulpicie. Nadal musisz zwracać uwagę na białą przestrzeń, ale w przypadku urządzeń mobilnych istnieje kilka dodatkowych zasad:

• Jednym z nich jest konstrukcja przyjazna dla palców. Ponieważ palce to nasze narzędzia do poruszania się po witrynie podczas przeglądania na urządzeniach mobilnych, musimy dostosować do nich stronę. Projektując motyw WordPress, dbamy o to, aby przyciski i elementy klikalne nie były mniejsze niż 50px. Jeśli dodajesz elementy innych firm do motywu WordPress, upewnij się, że są one wystarczająco duże. Upewnij się też, że te aktywne elementy nie sklejają się zbyt mocno, aby zapobiec błędnym kliknięciom.
• Optymalizuj obrazy pod kątem szybkości. Wiele osób korzysta ze stron internetowych w podróży, co oznacza zawodne, a czasem słabe połączenie. Spróbuj wyeliminować powolne ładowanie witryny (na urządzeniach mobilnych) i zoptymalizuj swoje obrazy.
• Przetestuj swoją witrynę na rzeczywistym urządzeniu mobilnym. Możesz zmienić rozmiar okna przeglądarki, aby zobaczyć widok mobilny, ale kiedy skończysz ze wszystkimi dostosowaniami, spójrz, jak witryna wygląda na rzeczywistym urządzeniu mobilnym.

Systemy operacyjne, przeglądarki i ogólne wrażenia użytkownika rozróżniają komputery stacjonarne i urządzenia mobilne, co może prowadzić do pewnych nierówności.

Google opracował test przyjazny dla urządzeń mobilnych, narzędzie do sprawdzania, czy Twoja witryna jest przyjazna dla urządzeń mobilnych.

Dbamy o to, aby każdy z naszych motywów WordPress przeszedł z łatwością.

5. Używanie kolorów, które po prostu nie idą w parze.

Wybór odpowiedniej kombinacji kolorów to trudna sprawa. Jeśli jesteś utalentowany, możesz podążać za swoim przeczuciem. W przeciwnym razie użyj narzędzi stworzonych specjalnie do tego celu.

Pokażę ci przykład:

Większość naszych motywów WordPress składa się z kolorów podstawowych i drugorzędnych. Jeśli Twoje logo wygląda jak Shell, decyzja o wyborze koloru podstawowego i dodatkowego jest prosta. Czerwony będzie używany jako podstawowy kolor wezwania do działania. Żółty będzie kolorem drugorzędnym, używanym do tła i elementów pomocniczych.

Jeśli Twoje logo wygląda jak logo Starbucks i jest wykonane tylko z jednego koloru, musisz znaleźć drugi.

Jedną z opcji jest wybranie tego samego zielonego koloru dla koloru podstawowego i drugiego, ale zdecydowanie odradzałbym to.

Jeśli nie masz intuicji projektanta i wybieranie kombinacji kolorów jest dla ciebie trudne, mam dla ciebie rozwiązanie, zwane Coolors. Jest to proste w użyciu narzędzie do tworzenia pięknych kombinacji kolorystycznych.

Przejdź do ich aplikacji i wstaw kod koloru szesnastkowego (w moim przypadku #006241) koloru podstawowego na dole kolumny. Następnie zablokuj, klikając ikonę kłódki i naciskając spację.

Wskazówka: nie wiesz, jak uzyskać kod szesnastkowy swojego logo? Sprawdź, czy istnieje przydatne rozszerzenie do Chrome.

Mój wynik wygląda tak.

Jak widać, wszystkie kolory uległy zmianie, ale kolor podstawowy pozostaje taki sam. Jeśli nie uzyskałeś koloru, który ci się podoba, kontynuuj naciskanie spacji.

Jeśli jedynym powodem wybrania drugiego koloru jest użycie go na stronie internetowej, a kolor ten nie pojawi się nigdzie indziej, nie wybieraj koloru, który jest zbyt mocny. W naszym przypadku jasny pomarańczowy zgasł.

Musisz wybrać bardziej subtelny kolor, który nie zniszczy Twojej marki i płynnie wesprze Twój główny kolor, w naszym przypadku zielony.

Moim osobistym wyborem byłby drugi beżowy (#d8c99b), ponieważ idealnie współgrałby z zielonym i na pewno go nie wyprzedzi.

Może ten konkretny beż nie jest idealnym kolorem, ale jest wystarczająco dobrą opcją. Dlatego. Wybierając kolor, zastanów się, jak będzie wyglądał na nim ciemny lub biały tekst.

W moim przykładzie ciemny tekst wyglądałby dobrze, ale dodanie nieco większego kontrastu i wybranie nieco jaśniejszego beżu sprawiłoby, że byłby jeszcze lepszy.

Na szczęście aplikacja Coolors ma jeszcze jedną świetną funkcję. Możesz wybrać różne odcienie każdego koloru. Najedź myszą na kolorową kolumnę i kliknij pierwszą ikonę o nazwie „Alternatywne odcienie”. Następnie wybierz jaśniejsze lub ciemniejsze odcienie i zawsze pamiętaj o kontraście.

Zrobiłem szybkie demo, jak te dwa kolory będą ze sobą współpracować. W tym celu wziąłem nasz motyw WordPress Adrenaline i przekonwertowałem go na stronę Starbucks.

Byłem pod wrażeniem tego, jak szybko zmieniłem motyw Adrenaline WordPress na coś zupełnie innego, dosłownie w 2 minuty. Wszystko, co musiałem zrobić, to zmienić dwa kolory, przesłać niestandardowy obraz bohatera i przesłać niestandardowe logo. Spróbuj sam.

6. Nie zaśmiecaj nawigacji w witrynie

Uporządkuj nawigację w witrynie w czytelny, przyswajalny sposób. Grupuj mniej ważne rzeczy w listach rozwijanych lub umieszczaj je w górnym pasku lub stopce. Uczyń hierarchię nawigacji logiczną i upewnij się, że wszystkie te same poziomy menu będą miały ten sam priorytet.

Na przykład warunki i umowy są zwykle mniej ważne niż podstawowe wezwanie do działania, dlatego nie mogą występować na tym samym poziomie. Umieść Warunki w stopce, a główne wezwanie do działania w nagłówku.

Utrzymuj główną nawigację w czystości, z maksymalnie 5 lub 6 opcjami.

7. Logo jest za duże

Jest takie słynne zdanie, które wszyscy w pewnym momencie dostajemy od naszego klienta – „powiększ logo”. Twoim zadaniem, jako twórcy strony internetowej, jest edukowanie klienta, że ​​nie ma potrzeby posiadania logo o szerokości 400 pikseli, ponieważ odwiedzający witrynę nie odwiedzają Twojej witryny, aby zobaczyć, jak piękne jest Twoje logo.

Prześlij logo w rozmiarze zalecanym przez autora motywu WordPress. Prawdopodobnie najlepiej wiedzą, jaki rozmiar logo najlepiej pasuje do danego motywu.

Logo to tylko jedna z wielu rzeczy na stronie i musi harmonijnie współgrać z innymi treściami.

Jeśli mi nie wierzysz, spójrz na jakąkolwiek znaczącą markę w sieci, a zobaczysz, że 98% z nich ma logo, wystarczająco duże, aby obsłużyć całą treść. Użytkownik musi wiedzieć, jaka marka stoi za stroną, ale musi też skupić się na usługach, ofertach i głównym wezwaniu do działania.

8. Słaba jakość logo

Zdarzyło mi się kiedyś, że dostałem logo w formacie Microsoft Word (.doc). Chcę powiedzieć, że klienci zawsze znajdą sposób, aby Cię zaskoczyć.

Jeśli chodzi o logo, ważne jest, aby było ono w jak najlepszym stanie, w idealnym stanie. W tym celu będziesz potrzebować formatu wektorowego (.pdf, .ai, .svg, .eps). Następnie musisz przejść do swojej ulubionej aplikacji wektorowej (np. Adobe Illustrator) i wyeksportować to logo do rozmiaru zalecanego przez twórcę motywu. To najlepsza możliwość uzyskania najostrzejszego logo.

Jeśli otrzymasz logo w formacie .png, może działać dobrze, ale może stracić trochę ostrości przy zmianie rozmiaru. Jeśli zmiana rozmiaru zrujnuje logo, wejdź na fiverr.com i zainwestuj 5 USD, aby przerysować je na format wektorowy. Kolejna mała inwestycja dla dużego wyniku.

9. Niska jakość obrazu

Sytuacja poprawia się z roku na rok, ale wciąż znajduję firmy, które nie poświęcają wystarczającej uwagi lub zasobów na wysokiej jakości zdjęcia.

Jeśli masz witrynę internetową sprzedającą konkretny produkt, wysokiej jakości zdjęcia mają prawdopodobnie największy wpływ na potencjalnego klienta i odgrywają kluczową rolę, gdy potencjalny klient decyduje, czy kupić produkt, czy nie.

Jeśli Twój klient nie dostarczył Ci wysokiej jakości zdjęć lub jeśli ich nie posiada, Twoim zadaniem jest przekonać go, aby zainwestował 100 USD i kupił je online.

Doskonałym źródłem wysokiej jakości zdjęć jest serwis Shutterstock, w którym można uzyskać 50 zdjęć za 99 USD miesięcznie. Wystarczy na małą stronę internetową i będzie mieć ogromny wpływ na użytkowników Twojej witryny i ogólne zaufanie do marki Twojego klienta.

Wskazówka: wybierając zdjęcie, staraj się unikać zdjęć ogólnych, dopracowanych, nierealistycznych. Przykładem tego jest facet rasy kaukaskiej, z super białymi zębami i nieskazitelną skórą.

Może wywołać efekt kontrujący, ale z pewnością nie wpłynie na odwiedzających. Spróbuj znaleźć obrazy z pewną autentycznością. Aby to uprościć, użyj obrazów, które mają realistyczny wygląd i styl.

10. Nie stylizowanie wtyczek innych firm

W procesie tworzenia nowego motywu WordPress zawsze badamy niszę, dla której tworzymy motyw. Zawsze chętnie włączamy do motywu wszystkie niezbędne funkcje, ale czasami Twój klient po prostu chce czegoś innego. To czas, kiedy do gry wchodzą wtyczki WordPress.

Nic w tym złego. Po zainstalowaniu i dodaniu wtyczki do motywu WordPress, spójrz, jak wygląda na interfejsie.

Często zauważam, że nasi klienci zapominają o stylizacji guzików, form i kolorów w tym samym stylu, co reszta motywu.

Zastosowanie już napisanych klas CSS do wtyczki zewnętrznej zajmie Ci tylko 10 minut, ale ostatecznie będzie miało znaczący wpływ.

Jeśli nie masz odpowiedniej wiedzy, możemy zrobić to za Ciebie.

11. Zła czytelność

Słynne jest twierdzenie, że typografia to 95% projektowania stron internetowych – więc zrób to dobrze.

Jeśli używasz widżetów w taki sam sposób, w jaki zrobiliśmy demo motywu, nie będzie żadnych problemów, ponieważ przykładamy dużą wagę do dobrej czytelności, ale jeśli modyfikujesz układ i styl czcionek, zrób upewnij się, że przestrzegasz poniższych zasad:

• Każda linia powinna mieć 60-80 znaków ze spacjami.
• Jeśli konfigurujesz niestandardową wysokość linii, pomnóż rozmiar czcionki od 1,4 do 1,6. Jeśli masz czcionkę o rozmiarze 16 pikseli, wysokość linii powinna wynosić od 22,4 do 25,6.
• Zostaw wystarczająco dużo miejsca wokół tekstu.
• Nie używaj zbyt jasnego koloru tekstu. Wszystko jaśniejsze niż #777777 ma negatywny wpływ na czytelność.
• Nie używaj mniejszych czcionek niż zalecane. Najniższa wartość to 14px, ale polecam wybrać 16px lub 18px .
• Zachowaj ostrożność podczas instalowania w motywie niestandardowych czcionek. Niektóre czcionki są przeznaczone tylko do nagłówków i nie działają dobrze w mniejszych rozmiarach. Niektóre czcionki są przeznaczone do druku i nie działają dobrze na ekranach, a niektóre są po prostu źle wykonane. Zastanów się dwa razy, gdy chcesz zamienić domyślną czcionkę motywu WordPress na coś innego. Jeśli nadal chcesz to zmienić, trzymaj się bezpiecznej strony i wybieraj popularne.

• Użyj prawidłowego wyrównania. W 95% przypadków najlepszym rozwiązaniem jest wyrównanie tekstu do lewej. W pozostałych 5% zezwalam na użycie wyrównania do środka, ale upewnij się, że używasz go tylko do krótkiego tekstu pomocniczego.

Wyrównanie do prawej (z wyjątkiem języków pisanych od prawej do lewej) i wyrównanie do justowania nie wchodzą w rachubę. Okres.

Wniosek:

Następnym razem, gdy będziesz tworzyć stronę internetową dla swojego klienta, przejrzyj powyższą listę i spróbuj naprawić wszystkie te drobne niedoskonałości. Zajmie to tylko godzinę lub dwie, ale w końcu uzyskasz znacznie lepszy wynik, co oznacza szczęśliwszego klienta i lepszą referencję. Ponadto wyświadczysz nam przysługę, ponieważ dostaniemy fantastyczny przykład na żywo do pokazania.

Jeśli masz jakieś pytanie, możesz skomentować poniżej.

EDIT: Ten artykuł został przetłumaczony na język holenderski – daj mi znać w komentarzach poniżej, jeśli chcesz go przetłumaczyć na swój język.