Projektowanie stron internetowych w 2021
Obecnie możesz uruchomić stronę internetową w kilka minut. Warto jednak rozróżnić czym jest optymalnie zbudowana strona internetowa a strona po prostu opublikowana. Projektowanie stron internetowych w 2022, od czego zacząć.
Dlaczego strona internetowa powinna być zbudowana zgodnie z dobrymi praktykami w ramach dobrze zarządzanego projektu? Opinia na temat Twojej strony powstaje w 0,05 sekundy. Tak, dobrze przeczytałeś – 50 milisekund to wystarczający czas na wyrobienie sobie opinii na temat Twojej strony. Ma to bardzo duże znaczenie dla odwiedzających. Pierwsze wrażenie.
To jak Twoja strona jest zaprojektowana wpływa również na ilośc konwersji. Ilość konwersji wpływa bezpośrednio na Twój biznes. Rok 2020 pokazał jak istotne jest posiadanie optymalnej strony czy sklepu internetowego. Zadaj sobie pytanie czy Twoja strona jest optymalna? Czy Twój sklep jest prawidłowo zbudowany?
Żadna witryna nie jest idealna, ale należy zadbać by poziom optymalizacji pod jej cele był maksymalnie możliwy do osiągnięcia. To cel dla Ciebie i dla Agencji, która będzie wykonywała dla Ciebie stronę WWW lub sklep.
Podsumowując: jeśli projekt Twojej witryny internetowej nie jest zoptymalizowany pod kątem wygody użytkownika (UX), będzie to miało negatywny wpływ dla Twojego biznesu. Zacznijmy więc od najważniejszych punktów, na które warto zwrócić uwagę przy projektowaniu strony internetowej cennik.
Oto kilkanaście najważniejszych elementów, którym należy nadać wysoki priorytet w 2021 r. Jeśli zastosujesz się do tych sprawdzonych metod, wydajność Twojej witryny znacznie się poprawi a doświadczenie i emocje jakie ona wywoła na odwiedzających ją użytkownikach będą bardzo pozytywne.
Nie wypełniaj swoich stron ogromnymi blokami tekstu. Jeśli Twoja strona nie jest blogiem i nie pełni funkcji informacyjnej warto byś ograniczył ilość treści. Myślę głównie o Twoich stronach, które spełniają funkcje sprzedażowe i reprezentacyjne np. strona główna, strona produktu, usługi, strona przeznaczona do działań reklamowych. Ogranicz w nich tekst do minimum.
Chcesz opowiedzieć odwiedzającym Twoją witrynę wszystko o sobie -warto to zwizualizować i nadać dyskretny, nienachalny przekaz.
Elementy wizualne nie tylko pomagają w zrozumieniu napisanych treści, ale mogą również dostarczyć więcej informacji niż zwykły tekst. Pokaż swoim gościom, o co Ci chodzi. Zrozumieją więcej w krótszym czasie jeśli to pokażesz. Załóżmy na przykład, że Twoja witryna sprzedaje maszynki do golenia, ostrza, krem do golenia i inne produkty do golenia dla mężczyzn.
Działasz w modelu biznesowym subskrypcji i co miesiąc dostarczasz te produkty swoim klientom. Wygląd twoich maszynek do golenia jest bardzo atrakcyjny – są wykonane z rzeźbionego twardego drewna i są na tyle ładne, że można je podarować jako prezent.
Zamiast zagłębiać się we wszystkie szczegóły na swojej stronie produktowej, możesz po prostu umieścić zdjęcie tych produktów z tekstem w stylu „dostarczamy pod Twoje drzwi”. Przekazujesz swoją wiadomość w zaledwie czterech słowach.
Oczywiście, im głębiej użytkownik zagłębia się w Twoje strony, tym bardziej szczegółowe informacje są dostępne, ale obszerny opis tekstowy nie jest wymagany szczególnie w pierwszym kroku.
Krótkie zdania są łatwiejsze do odczytania. Prawda?
Nie bombarduj odwiedzających dużymi fragmentami tekstu. Nie będą wiedzieć, od czego zacząć czytać i nie będą w stanie przetrawić Twoich treści.
Wymieszaj to. Jeśli potrzebujesz długiego zdania, dołącz do niego krótkie. Warto stosować narzędzia takie jak Yoast w WordPress, który w locie analizuje Twoje treści i wskazuje elementy do poprawienia. Czytelność treści jest jednym z kluczowych parametrów UX i SEO.
Wykorzystaj przerwy w akapitach, daj odpocząć od tekstu. Można pisać dłuższe akapity, ale lepiej jest ograniczać akapity szczególnie strony głównej do kilku kluczowych zdań.
Ważne jest również, aby nie przesadzić. Rozpoczynaj każdy akapit od nowych informacji, więc jeśli ktoś przewija, może szybko stwierdzić, czy musi przeczytać ten akapit czy może go pominąć.
Wyeliminowanie zbędnego tekstu na stronach zmniejsza bałagan i nie odciąga uwagi od najistotniejszych informacji. Szczególnie ważne jest by nie odciągać uwagi od “call to actions” CTA.
Wyróżnienie wezwania do działania w akapicie to kluczowy cel.
Bardzo przydatnym narzędziem w tej sytuacji są listy. Zamiast dodawać akapity i długie formy, rozważ użycie list z punktami.
Badania pokazują, że więcej osób będzie patrzeć na listy niż na inne formaty treści. Listy są jasnym przekazem. Grupują one najważniejsze informacje w punty. Dla wielu użytkowników tego typu formy są jedynymi przyswajalnymi.
Wybierz schemat kolorów, który pasuje do Twojej strategii budowania marki.
Wybór kolorów identyfikujących Twój Brand jest ważniejszy niż myślisz.
Odwiedzający oceniają Twoją witrynę w mniej niż 90 sekund. W większości jest to efekt wybranych przez Ciebie kolorów.
Najlepszym sposobem wyboru schematu kolorów witryny jest branding. Zobacz swoje logo. Czy kolory na Twojej stronie internetowej pasują do wizerunku Twojej marki?
Oto przykład strony internetowej Starbucks.
Kiedy słyszysz słowo Starbucks, jestem pewien, że masz w głowie obraz. Może to logo, znak lub lokalizację jakiegoś konkretnego sklepu.
Czy kojarzysz jakieś kolory z tą nazwą? Spójrzmy teraz na ich witrynę internetową.
Nic dziwnego, że zdecydowali się na zieloną kolorystykę.
Ten wybór projektu pasuje do ich logo i wizerunku marki, co wzmacnia to, co konsumenci już kojarzą z marką. Zachowując spójność, utrwalasz swój wizerunek w umysłach klientów.
Byłoby to dość abstrakcyjne doświadczenie, gdybyś odwiedził stronę Starbucks, a kolory byłyby żółte i czerwone. To nie miałoby nic wspólnego z ich marką i tym jak ją sobie wyobrażasz.
Nie należy ukrywać CTA . Muszą być duże, odważne i widoczne oraz powinny wyróżniać się jako kolejna czynność, którą powinni wykonać Twoi goście. Myśl jaka powinna towarzyszyć użytkownikowi to – kliknij.
Większość witryn nie ma jednak przycisku wezwania do działania, który można znaleźć w mniej niż trzy sekundy. To nie jest grupa stron WWW, w której chcesz się znaleźć ze swoją witryną.
Nie możesz generować konwersji bez skutecznego przycisku wezwania do działania, CTA.
Prawie nigdy nie widzę wezwania do działania na stronach firmy (stronach, które wyjaśniają, czym zajmuje się Twoja marka i co oferujesz). Jest to poważna wada projektowa. Nie możesz oczekiwać, że użytkownicy będą wracać do Twojej strony głównej, aby dokonać konwersji. Jest to znakomite miejsce by używać mechanizmów dostępnych w ramach działań Marketing Automation.
Mamy tu minimalny przekaz, komunikat jest jasny. Możesz poprosić o wycenę strony lub konsultacje. Mam nadzieję, że masz ochotę kliknąć.
Miejsce, w którym należy umieścić wezwanie do działania, różni się w zależności od strony. Na przykład posty na blogu powinny mieć wezwanie do działania u góry, aby czytelnicy mogli je szybko zobaczyć, a także u dołu, po przeczytaniu postu. Ewentualnie w miejscu, w którym ja umieściłem. Przycisk jest naturalnym elementem wynikającym z treści. Tekst naprowadza Cię by kliknąć.
Jeśli Twoja wiadomość jest taka sama we wszystkich przypadkach np:. “wyślij zapytanie”, wezwanie do działania powinno być takie samo na każdej stronie, na której ten komunikat chciałbyś umieścić.
Pomyśl o tym, jak ludzie poruszają się po Twojej witrynie. Nawet jeśli skonfigurujesz określony scenariusz, nie wszyscy będą nim podążać. Zrozumienie ról jakie pełnią poszczególne strony to ważny punkt w projektowaniu stron internetowych.
Załóżmy na przykład, że masz witrynę e-commerce. Nie należy zmieniać przycisku wezwania do działania ze strony na stronę.
Jeśli odwiedzający zobaczy jeden z tych przycisków na Twojej stronie głównej, drugi na stronie kategorii, a trzeci na stronie produktu, będzie miał wrażenie, że coś tu jest pomieszane.
Zamiast tego zachowaj spójność przekazu i stylu. Spójność to kolejna z cech o jaką warto zadbać. Spójność w języku, przekazie i projekcie wzmacnia tożsamość Twojej marki i pozostawia trwałe wrażenia w umysłach odwiedzających.
Odwiedzający witrynę internetową nie powinien mieć trudności ze znalezieniem w niej tego, czego szuka.
Postaw się na ich miejscu. Dlaczego odwiedzasz witrynę? Jak wykonujesz to zadanie? Może chcesz coś kupić, uzyskać więcej informacji lub zobaczyć, co ma do zaoferowania. Niezależnie od przyczyny, jeśli odwiedzający nie mogą szybko tego znaleźć, stracisz go.
Użytkownicy nie mają powodu, aby męczyć się z nieporęczną nawigację w witrynie. Opuszczą Twoją witrynę i tyle. Jest wiele innych konkurencyjnych stron
Nie próbuj wymyślać na nowo koła za pomocą złożonego projektu. Trzymaj się standardowych, wypróbowanych formatów.
Na przykład większość witryn internetowych umieszcza menu nawigacyjne poziomo u góry każdej strony. Jeśli twoje menu znajduje się gdzie indziej, może to zmylić odwiedzających.
Mobile to kanał, przez który większość ludzi na świecie korzysta z ze stron internetowych. Oznacza to, że jeśli nie jesteś zoptymalizowany pod kątem komórek, Twoja witryna nie będzie działać dobrze.
Szczególnie ważne jest to dla SEO i UX. Wyszukiwarki rozpoznają to czy strona jest przystosowana do mobile i nagradzają witryny przyjazne dla urządzeń mobilnych. Oto kilka dodatkowych statystyk, które pomogą Ci zrozumieć jak to jest ważne:
Jeśli Twoja witryna nie wygląda dobrze na smartfonie, ludzie nie będą chcieli do niej wracać. Dlatego upewnij się, że projekt Twojej witryny jest dostosowany do urządzeń mobilnych. Sprawdź to na stronie sprawdzającej witryny mobilne.
Projektowanie stron www i SEO mają wiele ze sobą wspólnego. Pierwszym z nich jest mapa witryny strony. Prawidłowa struktura bez duplikacji i błędów jest jednym z czynników wpływających na widoczność strony w wynikach wyszukiwarek.
W trakcie projektowania witryny, zwróć uwagę na następujące elemeny:
Wiem, co niektórzy z Was myślą. Co szybkość ładowania strony ma wspólnego z projektowaniem stron internetowych? Ma i to bardzo dużo.
Pewnie większość z Was myśli, że czas ładowania strony zależy głównie od szybkości hostingu na jakim ta strona się znajduje.
Każdy nowy element, który dodajesz do swojej witryny, zwłaszcza obrazy, filmy i inne złożone pliki multimedialne, może wpłynąć na wydłużenie czasu ładowania.
Długie czasy ładowania prowadzą do wysokich wskaźników porzuceń. Nie możesz tego zignorować. Jeśli Twoje strony ładują się zbyt długo, będzie to ogromny problem dla Ciebie i Twojego biznesu.
Co więcej, 25% ludzi opuszcza strony internetowe, które ładują się dłużej niż cztery sekundy. Oznacza to, że stracisz 25 na 100 odwiedzających. Większość odwiedzających oczekuje, że strona załaduje się w ciągu dwóch sekund lub krócej. Czas nad tym się pochylić i sprawdzić jak to wygląda u Ciebie. Sprawdzisz to używając narzędzia Google do analizy czasu ładowania się strony.
Poniżej kilka z kluczowych czynników:
Więcej przeczytasz w moim artykule na temat czasu ładowania się strony i mobile first. Zadbaj o najszybszy hosting dla WordPress.
Wersja AMP stron to kolejny ważny element. Często strona traktowana jest jako jedna aplikacja WWW. W niektórych przypadkach zalecane jest zastosowanie dodatkowej bardzo lekkiej wersji strony jaką jest wersja AMP. Więcej przeczytasz w moim wpisie na temat Co to jest AMP
W tym artykule chciałbym bardzo zwrócić uwagę na spójność projektów AMP i nie AMP. Czcionki, kolorystyka czy układ powinny być w obu przypadkach zbliżone. Pamiętać należy o tym, że AMP jest minimalną wersją strony będzie wiec zawierała bardzo uproszczone style CSS oraz moduły. Dzięki temu zachowa lekkość wymaganą w przypadku stron AMP.
Jeśli chodzi o projekt witryny, nie możesz go tak po prostu opublikować, zostawić i zapomnieć.
Jak powiedziałem wcześniej, żadna witryna nie jest idealna. Zawsze możesz ulepszyć swój projekt. Dlatego zalecane są systematyczne testy A / B w celu poprawy poszczególnych składników strony.
Testy A / B umożliwiają regularne ulepszanie witryny i testowanie elementów, aby implementować poprawki i usuwać elementy negatywnie wpływające na odczucia użytkowników.
Niemal każdy element projektu witryny można przetestować. Na przykład możesz utworzyć dwie różne strony docelowe, które mają różne wezwania do działania CTA, ale poza tym są takie same. Jeśli jedna strona docelowa działa lepiej niż druga, wiesz, że jej wezwanie do działania prawdopodobnie wykona zadanie znacznie lepiej niż to drugie.
Oto kilka sugestii, które pomogą Ci ukierunkować swoje testy:
Koszt projektowania stron internetowych zależy od wielu czynników, takich jak skala projektu, zaawansowanie techniczne i potrzeby klienta. Firma może naliczyć osobny koszt za każdy składnik projektu, w tym widok wstępny, architekturę informatyczną, programowanie aplikacji backend i serwerów, szablony frontend oraz testowanie. Wycenianie tego typu projektów może mieć postać stawki godzinowej lub całościowej usługi.
Najpopularniejsze programy do projektowania stron internetowych to Adobe Dreamweaver, Visual Studio Code i WordPress. Inne popularne opcje to Adobe Photoshop, Sketch i Figma. Program HTML5 Boilerplate jest często stosowany do tworzenia prostych szablonów lub baz dla witryn internetowych.
Zarobki projektanta stron internetowych są trudne do określenia, ponieważ zależą one od wielu czynników, takich jak miejsce zamieszkania, poziom kompetencji technicznych i doświadczenie zawodowe. Ogólnie rzecz biorąc, możliwe jest zarabianie od 50 do 100 dolarów na godzinę lub średnio 60-100 tysięcy dolarów rocznie.
Koszt projektowania i tworzenia strony internetowej wizytówki zależy od wymagań i skomplikowania projektu. Przy typowej witrynie internetowej wizytówkowej koszty wahają się od 500 do 2 500 dolarów.
Tak, strona może zostać zaprojektowana i skonfigurowana tak, aby dobrze wyświetlała się na smartfonach. Jednak ważne jest, aby projektant był świadomy szczegółów dostosowania witryn internetowych do wielu urządzeń, aby upewnić się, że strona będzie prawidłowo wyświetlana na każdym urządzeniu.
W przypadku projektowania stron internetowych najlepszym wyborem jest korzystanie z usług agencji interaktywnej lub freelancera. Agencji interaktywnej można zaufać, że ukończy projekt na czas i zgodnie z wizją, ale będzie to kosztowniejsze niż wynajmowanie pojedynczego freelancera. Jednak freelancer może mieć mniejsze doświadczenie w określonym rodzaju projektu i może się spóźnić z terminem realizacji. Dlatego ważne jest, aby porównać referencje obu i ocenić, kto bardziej pasuje do Twoich potrzeb.
Stwierdzenie, że projekt strony internetowej jest ważny, brzmi bardzo trywialnie. Twoje decyzje dotyczące projektu strony internetowej ostatecznie wpłyną na to, czy witryna odniesie sukces i zrealizuje swoje cele.
Nie ma znaczenia, czy Twoja witryna jest zupełnie nowa, czy istnieje już od dekady. Oto najlepsze praktyki projektowania stron internetowych, których musisz przestrzegać w 2021 roku
Artykuł uaktualniony 4 miesiące
2 Comments
Testowałem AMP na stronie przez ponad 6 miesięcy https://totemat.pl/. Moje wnioski są takie. Strona mobilnie działała szybciej ale nie miało to żadnego wpływu na jej pozycję. Dodatkowo pojawiały się co jakiś czas konflikty wtyczek. Także mniej osobów na stronach AMP wchodziło na kolejne strony serwisu. Dlatego uważam że responsywne strony są lepsze i bardziej trafne niż korzystanie z AMP. Samemu całkowicie wyłaczyem AMP już jakiś czas temu.
Zgadzam się, wersja responsywna jest znacznie efektywniejsza.