Najlepsze praktyki, porady i wskazówki dotyczące projektowania stron internetowych, które powinieneś znać

8 Min.
Najlepsze praktyki w zakresie projektowania stron internetowych

Jakie są najlepsze praktyki w projektowaniu stron internetowych? Jak wdrożyć je z powodzeniem w kolejnym projekcie związanym z projektowaniem stron internetowych? A co właściwie definiujemy jako standard projektowania i najlepsze praktyki w projektowaniu stron internetowych?

Co właściwie rozumiemy przez "najlepsze praktyki"?

W tworzeniu stron internetowych obowiązują stałe zasady, które dotyczą głównie czytelności i czystości kodu oraz bezpieczeństwa strony internetowej. Z drugiej strony, w projektowaniu stron internetowych terminologia jest nieco bardziej niejasna, a zasady są bardziej otwarte na własne interpretacje.

Najlepsze praktyki: Webdesign to coś więcej niż tylko estetyka

Najlepsze praktyki w projektowaniu stron internetowych to połączenie projektowania wizualnego, projektowania doświadczeń użytkownika, dostępności i pisania treści - z naciskiem na SEO.

Najlepsze praktyki w projektowaniu stron internetowych to zbiór zasad, których należy przestrzegać, aby spełnić ogólne oczekiwania użytkowników. Są one również wskazówkami dla większej jasności i lepszych doświadczeń użytkownika.

W tym artykule przedstawię Państwu najlepsze praktyki w zakresie dobrego projektowania stron internetowych. Dla każdego obszaru podaję wskazówki, w jaki sposób można zdobyć dalszą wiedzę oraz przedstawiam narzędzia i przykłady, które pomogą Ci w kolejnym projekcie.

Pokrótce omówię również temat najlepszych praktyk w obszarze WordPress Development. Jak z pewnością wiesz, planowanie i zarządzanie projektami jest ważną częścią projektowania stron internetowych. W tym artykule pozostawię na razie oba tematy, ponieważ wykraczałoby to poza zakres tego artykułu.

Najlepsze praktyki: Projektowanie wizualne

Zaczynamy teraz od ustalonych standardów projektowania wizualnego: Jakie są najlepsze praktyki w dziedzinie projektowania wizualnego? A jakie to ma znaczenie?

Cecha rozpoznawcza i budowanie marki

Strona musi pasować do reszty wyglądu firmy i powinna być zgodna z przewodnikiem stylu. Sprawdź stronę internetową pod kątem następujących pytań:

  • Czy na pierwszy rzut oka można powiedzieć, dla jakiej firmy została stworzona ta strona?
  • Czy przewodnik po stylu został zintegrowany?
  • Czy operatorzy stron internetowych są rozpoznawalni z elementów wizualnych?
  • Czy elementy wizualne są stosowane konsekwentnie?
  • Czy język używany na stronie internetowej odzwierciedla wizerunek marki?

Google jest w czołówce firm o spójnej marce. Nie przychodzi mi na myśl żadna inna marka, która ma tak wiele różnych produktów, a mimo to udaje jej się dać każdemu produktowi poczucie przynależności do firmy. Nawet gdy patrzę na produkt Google, którego nigdy wcześniej nie widziałem, mogę skojarzyć go bezpośrednio z marką.

Jak Google to robi?

Między innymi dzięki konsekwentnemu stosowaniu kolorów Google, typografii, charakterystycznej białej przestrzeni, konsekwentnemu wywoływaniu akcji i nawigacji. Logo wykazuje również pewną spójność, która sprawdza się we wszystkich firmach i kategoriach - choć ta ostatnia nie musi oznaczać, że projekt będzie również przynosił korzyści.

Przy zachowaniu spójności w budowaniu marki, najpierw analizuje się tylko to, czy strona odzwierciedla firmę i jej wizerunek w najlepszy możliwy sposób.

Standard projektowania stron internetowych i użyteczność

Inną "najlepszą praktyką" jest integracja standardów. Obejmuje to, na przykład, umieszczenie logo w lewym górnym rogu, wygląd przycisków, linków itp. Pomagają one odwiedzającym Twoją stronę szybko i łatwo odnaleźć się na niej. Dlatego też standardy te są niezbędne do wdrożenia skutecznej użyteczności.

Dalsze zasoby na temat użyteczności:

Dlaczego jako projektant stron internetowych miałbyś być szczególnie zainteresowany użytecznością i doświadczeniem użytkownika? Znajdziesz bardziej kompleksowe podejście do tematu użyteczności w tym artykule i dalej https://www.usability.gov/.

Co definiuje standard projektowania stron internetowych?

Definiujemy powszechne standardy projektowania w projektowaniu stron internetowych poprzez Wzory projektowania interfejsu użytkownika. Andy Crestodina wyjaśnia bardzo jasno, jak definiuje się standardy w swoim artykule na temat Standardy projektowania stron internetowych.

Zgodnie z tym podejście projektowe musi być stosowane na co najmniej 80 % stron internetowych, aby liczyć się jako standard. Wszystko inne jest albo nawykiem (50-79%), albo nawet przynosi niespójność i zamieszanie (0-49%) na Twojej stronie.

Harmonijne wzornictwo: zasada trzech trzecich

Na ten temat harmonijny webdesign Zgłosiłem się już wcześniej. Tym razem chciałbym bardziej szczegółowo omówić zasadę trzech trzecich.

Stosuje się go od kilkuset lat - głównie w dziedzinie sztuk pięknych, a później w fotografii. Tutaj, jak pokazano na rysunku, projekt jest podzielony na 9 jednakowo dużych pudełek:

Projektowanie interakcji
Źródło: interaction-design

Przy tworzeniu stron internetowych, zasada "thirds" pomaga przede wszystkim umieścić najważniejsze informacje w taki sposób, aby odwiedzający mógł je bezpośrednio odebrać. 

Mówiąc wprost, element wizualny nie powinien zajmować więcej niż trzy pola i powinien być umieszczony w jednej trzeciej układu. Węzły te są również szczególnie dobrze przystosowane do umieszczania ważnych komunikatów i wywołań do akcji.

W programie Photoshop możesz szybko i łatwo przeglądać i dostosowywać swoje układy za pomocą narzędzia Crop Tool oraz ustawienia Reguły Trzecich. Dla zilustrowania Reguły Trzecich stworzyłem stronę internetową Marqeta trochę bliżej:

Najlepsze praktyki

Produkt i jego przesłanie są dobrze rozmieszczone w węzłach. W tym przypadku projekt mógłby być nieco bardziej efektywny poprzez niewielkie przesunięcie CTA. Ucierpiałaby jednak nieco na tym harmonia projektu:

Najlepsze praktyki

Wersja mobilna wyraźnie pokazuje, że wiadomość wypełnia dolną trzecią część układu, podczas gdy produkt jest wyświetlany dość wyśrodkowany. Tutaj możemy jeszcze przemyśleć rozmieszczenie CTA.

Tak zwane "mapy cieplne" pomagają również dowiedzieć się, gdzie osoby odwiedzające Twoją stronę głównie patrzą i klikają. Narzędzie Crazy Egg oferuje tutaj na przykład (odpłatną) usługę.

Innym sposobem na sprawdzenie projektu jest tzw. test rozmycia. Tutaj bierzesz ostrość ze swojego układu (np. za pomocą Photoshopa i "Gaussian Blur" - 12 procent). Jeśli użytkownicy nie mogą już czytać treści, szybko staje się jasne, na którym miejscu znajduje się centrum uwagi podczas przeglądania strony. Test ten nadaje się również dobrze do analizy CTA. Czy nadal jest rozpoznawalny jako taki?

Najlepsze praktyki w zakresie projektowania stron internetowych

W tym celu ponownie mam stronę internetową Marqeta jest używany. Szczególnie widoczny jest prawy CTA i produkt, następnie przesłanie, a na końcu logo i drugi CTA:

Najlepsze praktyki w zakresie projektowania stron internetowych

Wersję mobilną rozbroiłem jeszcze bardziej, by sprawdzić, co zostało. Tutaj produkt przykuwa najpierw uwagę, a następnie CTA i logo. Możesz wykonać ten test z całą stroną - najlepiej w fazie projektowania. Tutaj możesz szybko i łatwo przeanalizować, które elementy Twojego projektu są widoczne i zdecydować, czy to jest to, czego chcesz.

Tekst i SEO

Tworzenie stron internetowych obejmuje oczywiście treści pisane. W tym celu istnieją profesjonalni copywriterzy, którzy - mając na uwadze SEO, użyteczność i przewodnik po stylu - piszą sensowne treści dla Twojej strony. Ale jest też kilka wskazówek, którymi można się kierować samemu. 

Należy zwrócić szczególną uwagę na długość i czytelność tekstów - często są one zbyt obszerne i zbyt zagnieżdżone. 

Nawet jeśli grupa docelowa jest przyzwyczajona do pewnej ilości żargonu, zawsze należy mieć świadomość, że zakres naszej uwagi na stronie internetowej jest znacznie mniejszy niż na przykład podczas czytania profesjonalnych artykułów. Szukamy raczej konkretnych informacji podczas przeglądania stron internetowych. Bardziej prawdopodobne jest, że zeskanujemy zawartość, niż że poświęcimy czas na jej prawidłowe odczytanie.

Również z Google są minusy punktów, jeśli zdania na Twojej stronie są zbyt długie i plusy punktów, jeśli są one zastąpione przez tzw.słowa przejściowe"są połączone.

Interesujący jest również wkład w tematykę SEO:

Dostępność

Dostępność sieci jest niestety nadal tematem marginalnym - i zbyt często jest ignorowana. Istnieją również proste podejścia, które moglibyśmy wziąć pod uwagę już od pierwszego projektu. Na przykład, czy używasz głównie kolorów do podkreślania informacji? 

Możesz to łatwo sprawdzić oglądając swoją stronę internetową w czerni i bieli:

Najlepsze praktyki w zakresie projektowania stron internetowych

W tym celu ponownie przeanalizowałem tę samą stronę internetową. Nawet bez kolorów komunikat jest jasny. Górny prawy CTA może stać się problematyczny w odniesieniu do kontrastu.

Aby to sprawdzić z pewnością, istnieje "Sprawdzanie kontrastu" (Contrast Checker). Domyślny współczynnik kontrastu wynosi co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu, np. nagłówków:

Najlepsze praktyki w zakresie projektowania stron internetowych
Najlepsze praktyki w zakresie projektowania stron internetowych

Jeśli podam odcienie szarości, CTA nie jest wystarczająco bogaty w kontrast, ale wariant kolorystyczny jest wystarczający.

http://colorsafe.co/ jest kolejnym narzędziem do określania kolorów i ich kontrastu. Tutaj można bezpośrednio wypróbować różne kombinacje kolorów. Współczynnik jest podawany bezpośrednio do Ciebie i masz możliwość wyboru czcionek, a także według których WCAG Standard chcesz dokonać wyboru.

Problemy mogą pojawić się w związku z użyciem kolorów do wizualnej prezentacji obsługi błędów. Weźmy na przykład elementy formy. Błędy są tu często przedstawiane poprzez kolorowe podświetlenie pola wejściowego. Może to spowodować, że ktoś ze słabością koloru nie będzie w stanie rozpoznać błędów, a tym samym nie będzie w stanie ich rozwiązać. 

Należy wziąć to pod uwagę podczas planowania i dlatego zawsze należy upewnić się, że istnieje inne przedstawienie błędu. Tutaj można znaleźć więcej interesujących faktów i zasobów dotyczących dostępności, jak również cenne wskazówki dotyczące tworzenia dostępnej strony WP.

Inne zasoby

Rozdzielczość i projektowanie urządzeń krzyżowych

Nie ma chyba żadnej reguły w projektowaniu stron internetowych, do której zwraca się się częściej - i częściej się ją ignoruje - niż "mobile first”.

W tym podejściu treści są tworzone dla urządzeń mobilnych, a następnie dostosowywane do większych urządzeń. Przeciwieństwem jest projektowanie dla komputerów stacjonarnych i tym podobnych, a następnie dostosowanie go do mniejszych urządzeń. 

Przychodzą na myśldwa inne podejścia:

  • Stwórz osobną stronę internetową dla każdego urządzenia mobilnego i stacjonarnego, a następnie wywołaj ją odpowiednio.
  • Wyświetlanie strony internetowej w wersji desktopowej na telefonie komórkowym

To pierwsze podejście może być właściwe - w zależności od projektu - ale nie jest zbyt rozpowszechnione, ponieważ jest bardzo kosztowne i czasochłonne. Niestety, ta ostatnia jest wciąż zbyt często widywana w sieci i dlatego należy ją pilnie dodać do listy "najlepszych praktyk". Więcej wskazówek dotyczących mobilnej optymalizacji można znaleźć tutaj.

Mobile first nie zawsze musi być właściwą drogą: Badania nad grupą docelową i jej zachowaniem w Internecie mogą szybko pokazać, które urządzenia są głównie wykorzystywane do uzyskania dostępu do witryny. 

Chodzi nie tylko o to, aby treść była przygotowana w odpowiedni sposób wizualnie, ale również o to, aby zostały uwzględnione zmienione warunki zewnętrzne. Więcej szczegółów można znaleźć w artykule Mobile-First UX Design is No Longer a Trend Czytaj dalej.

Poniższa tabela wyraźnie pokazuje, które ekrany są wykorzystywane do częstszego dostępu do Internetu. To może pomóc Ci zdecydować, dla których ekranów chcesz zoptymalizować swoje strony internetowe. Ale proszę pamiętać, że takie uogólnienie może być tylko wskazówką. Analiza grup docelowych nie może zastąpić tych statystyk.

Najlepsze praktyki w zakresie projektowania stron internetowych
Źródło: https://www.hobo-web.co.uk/best-screen-size/

najlepsze praktyki dla WordPress

WordPress Codex

WordPress oferuje niewiarygodną ilość możliwości prezentowania swoich projektów w sieci. Ale nawet tutaj istnieją standardy i najlepsze praktyki, których należy przestrzegać.

The WordPress Codex

WordPress udostępnia w tym celu ogólny kodeks, który może pomóc w bardziej szczegółowym podejściu do tematu.

WordPress Plugins oraz Themes

Przy wyborze odpowiedniego Plugins i Themes ważna jest nie tylko jego aktualna funkcjonalność. Dobrym pomysłem jest również przeczytanie recenzji i zapoznanie się z częstością aktualizacji oraz sprawdzenie, czy Plugin, lub Theme, będą w przyszłości dalej rozwijane. WordPress Narzędzia, które są regularnie rozwijane, mają zazwyczaj bardziej aktywne wsparcie. Są one również bardziej prawdopodobne, że pozostaną kompatybilne z przyszłymi wersjami Twojej strony.

WordPress Aktualizacje i zabezpieczenia

Regularne aktualizacje Themes i Plugins zmniejszą Twoją podatność na niepożądany dostęp. Błędy będą rozwiązywane, a Twoje strony internetowe będą dostosowywane do ciągle zmieniającego się środowiska technicznego. Bezpieczeństwo Plugins i WordFence również pomagają utrzymać Twoją stronę i jej bezpieczeństwo na wyciągnięcie ręki oraz reagować na problemy w odpowiednim czasie. Certyfikat SSL powinien być zintegrowany na każdej stronie internetowej. 

Najlepsze praktyki w zakresie projektowania stron internetowych: Twoje pytania

Jakie masz pytania do Sonji? Które Najlepsze Praktyki możesz sobie polecić? Proszę skorzystać z funkcji komentarza. Chcesz uzyskać więcej wskazówek dotyczących projektowania i rozwoju stron internetowych? Następnie podążaj za nami dalej TwitterFacebook albo zasubskrybuj nasz cotygodniowy Newsletter.

Po studiach projektowania gier i kreatywnego pisania w zielonym regionie Auckland, wyspecjalizował się Sonja Hoffmannw projektowaniu stron internetowych i aplikacji oraz ich rozwoju. Skupia się na gamifikacji i badaniu motywacji i doświadczenia użytkowników, w połączeniu z pasją i ciekawością trendów technologicznych.

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.