Najlepsze praktyki projektowania stron internetowych, wskazówki i wytyczne, o których powinieneś wiedzieć

.
. 8 Min.
Najlepsze praktyki projektowania stron internetowych

Jakie są najlepsze praktyki w projektowaniu stron internetowych? Jak z powodzeniem wdrożyć je do swojego kolejnego projektu webowego? A co w ogóle definiujemy jako standardy projektowania i najlepsze praktyki w projektowaniu stron internetowych?

Co właściwie rozumiemy pod pojęciem "najlepsze praktyki"?

W tworzeniu stron internetowych istnieją stałe zasady, które mają związek głównie z czytelnością i czystością kodu, a także z bezpieczeństwem strony. W projektowaniu stron internetowych, z drugiej strony, terminologia jest nieco bardziej rozmyta, a zasady są bardziej otwarte na własne interpretacje.

Najlepsze praktyki: Projektowanie stron internetowych to coś więcej niż estetyka

Najlepsze praktyki w projektowaniu stron internetowych są połączeniem 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. Ponadto, są to wytyczne zapewniające większą przejrzystość i lepsze wrażenia użytkownika.

W tym artykule przedstawię Ci najlepsze praktyki dotyczące dobrego projektowania stron internetowych. Dla każdego obszaru, dam Ci wskazówki, jak zdobyć więcej wiedzy i przedstawię narzędzia i przykłady, które pomogą Ci przy następnym projekcie.

Pokrótce poruszam również temat najlepszych praktyk w rozwoju WordPress . Jak zapewne wiesz, planowanie i zarządzanie projektami są ważną częścią projektowania stron internetowych. W tym poście pomijam na razie oba tematy, ponieważ wykraczałoby to poza zakres tego miejsca.

Najlepsze praktyki: Projekt wizualny

Zacznijmy teraz od ustalonych standardów projektowania wizualnego: Jakie są najlepsze praktyki w projektowaniu wizualnym? A jakie czynniki się liczą?

Rozpoznawalność i budowanie marki

Strona musi pasować do reszty wizerunku firmy i powinna być zgodna z przewodnikiem stylu. W związku z tym należy sprawdzić na stronie internetowej następujące pytania:

  • Czy na pierwszy rzut oka widać, dla jakiej firmy została stworzona strona?
  • Czy przewodnik po stylu został zintegrowany?
  • Czy operatorzy strony są rozpoznawalni na podstawie elementów wizualnych?
  • Czy elementy wizualne są stosowane konsekwentnie?
  • Czy język użyty na stronie odzwierciedla branding?

Google jest daleko z przodu, jeśli chodzi o konsekwentne budowanie marki. Nie przychodzi mi do głowy żadna inna marka, która ma tak wiele różnych produktów, a mimo to udaje jej się nadać każdemu z nich firmowy charakter. Nawet gdy patrzę na nieznany mi wcześniej produkt Google, kojarzy mi się on bezpośrednio z marką.

Jak to robi Google?

Obejmuje to konsekwentne stosowanie kolorów Google, typografii, wyróżniających się białych przestrzeni, spójnych wezwań do działania i nawigacji. Loga mają też pewną spójność, która sprawdza się w różnych firmach i kategoriach - choć to ostatnie nie musi oznaczać, że projekt będzie się podobał.

Dzięki spójności w brandingu, najpierw wystarczy przeanalizować, czy strona odzwierciedla firmę i jej branding w najlepszy możliwy sposób.

Standard projektowania stron internetowych i użyteczność

Kolejną "najlepszą praktyką" jest integracja standardów. Obejmuje to na przykład umieszczenie logo w lewym górnym rogu, wygląd przycisków, linków i tak dalej. Pomagają one odwiedzającym Twoją stronę w szybkim i łatwym odnalezieniu się na niej. Dlatego standardy te są niezbędne w realizacji udanej użyteczności.

Więcej zasobów na temat użyteczności:

Dlaczego powinieneś interesować się użytecznością i doświadczeniem użytkownika jako projektant stron internetowych? Możesz znaleźć więcej kompleksowych podejść do tematu użyteczności w tym artykule i dalej https://www.usability.gov/.

Co definiuje standard projektowania stron internetowych?

Definiujemy powszechnie stosowane standardy projektowe w projektowaniu stron internetowych poprzez wzorce projektowe UI. Jak definiuje się standardy, Andy Crestodina wyjaśnia bardzo zrozumiale w swoim artykule o standardach projektowania stron internetowych.

Zgodnie z tym, podejście projektowe musi być stosowane na co najmniej 80 procentach stron internetowych, aby można je było uznać za standardowe. Wszystko inne jest albo nawykiem (50-79%), albo nawet wprowadza niespójność i zamieszanie (0-49%) na Twojej stronie.

Harmonijne wzornictwo: zasada trzech trzecich

Już wcześniej poruszałem temat harmonijnego projektowania stron internetowych. Tym razem chciałabym bardziej szczegółowo omówić zasadę trzech trzecich.

Stosowano ją od kilkuset lat - głównie w sztukach plastycznych, a później w fotografii. Tutaj, jak pokazano na rysunku, konstrukcja jest podzielona na 9 równej wielkości pól:

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

Przy tworzeniu stron internetowych zasada trzeciego planu pomaga również w umieszczeniu najważniejszych informacji w taki sposób, aby odwiedzający mógł je bezpośrednio dostrzec. 

Mówiąc prościej, element wizualny powinien zajmować nie więcej niż trzy pola i znajdować się w jednej trzeciej layoutu. Węzły te nadają się również szczególnie do umieszczania ważnych wiadomości i wezwań do działania.

W Photoshopie możesz użyć narzędzia "Kadrowanie" i ustawienia "Reguła Trzecich Tysięcy", aby szybko i łatwo sprawdzić i dostosować układy. Aby zilustrować Zasadę Trzech Rzędów, przyjrzałem się bliżej stronie internetowej Marqeta:

Najlepsze praktyki

Zarówno produkt, jak i jego przesłanie są dobrze rozproszone po węzłach. Tutaj, projekt mógłby stać się nieco bardziej wydajny poprzez przesunięcie CTA nieco. Ucierpiałaby na tym jednak nieco harmonia projektu:

Najlepsze praktyki

W wersji mobilnej wyraźnie widać, że komunikat wypełnia dolną trzecią część layoutu, podczas gdy produkt wyświetlany jest dość centralnie. Tutaj możemy przemyśleć umiejscowienie CTA.

Tak zwane "heatmapy" pomogą Ci również dowiedzieć się, gdzie odwiedzający Twoją stronę głównie zaglądają i klikają. Narzędzie Crazy Egg, na przykład, oferuje (płatną) usługę tutaj.

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

Best-Practices-in-Web-Design

W tym celu ponownie skorzystałem z witryny internetowej firmy Marqeta. Szczególnie widoczne jest właściwe CTA i produkt, następnie przekaz, a na końcu logo i drugie CTA:

Best-Practices-in-Web-Design

Wersję mobilną dodatkowo rozbroiłem, aby przetestować, co wtedy pozostanie. Tutaj najpierw uwagę przykuwa produkt, a następnie CTA i logo. Taki test możesz wykonać z całą stroną - najlepiej jeszcze w fazie projektowania. Tutaj możesz szybko i łatwo przeanalizować, które elementy Twojego projektu są wyróżniające się i zdecydować, czy to jest to, czego chcesz.

Tekst i SEO

Tworzenie stron internetowych obejmuje oczywiście również treści pisane. Istnieją profesjonalni copywriterzy, którzy - mając na uwadze SEO, użyteczność i przewodnik stylu - piszą sensowne treści na Twoją stronę internetową. Istnieje jednak również kilka wytycznych, których można przestrzegać samodzielnie. 

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

Nawet jeśli grupa docelowa jest przyzwyczajona do pewnego żargonu, zawsze należy mieć świadomość, że nasza uwaga na stronie internetowej jest znacznie krótsza niż np. podczas czytania artykułów technicznych. Przeglądając strony internetowe, szukamy raczej konkretnych informacji. Skanujemy treść, że tak powiem, zamiast poświęcić czas na jej właściwe przeczytanie.

Google daje Ci również punkty ujemne, jeśli zdania na Twojej stronie są zbyt długie, a punkty dodatnie, jeśli są połączone tzw.słowami przejściowymi.

Ciekawe posty na temat SEO to także:

Dostępność

Dostępność stron internetowych to niestety wciąż temat marginalny i zbyt często ignorowany. Również w tym przypadku istnieją proste rozwiązania, które możemy rozważyć już przy pierwszym projekcie. Na przykład, czy przeważnie używasz kolorów do podkreślania informacji? 

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

Best-Practices-in-Web-Design

W tym celu przeanalizowałem ponownie tę samą stronę internetową. Nawet bez kolorów, przekaz jest wyraźny. Prawy górny CTA może być problematyczny pod względem kontrastu.

Aby sprawdzić to z całą pewnością, istnieje "Contrast Checker". Domyślny współczynnik kontrastu wynosi co najmniej 4,5:1 dla normalnego tekstu i 3:1 dla dużego tekstu, takiego jak nagłówki:

Best-Practices-in-Web-Design
Best-Practices-in-Web-Design

Jeśli podam odcienie szarości, CTA nie jest wystarczająco kontrastowe, ale w wariancie kolorowym jest wystarczające.

http://colorsafe.co/ to kolejne narzędzie do określania kolorów i ich siły kontrastu. Tutaj możesz bezpośrednio wypróbować różne kombinacje kolorów. Jesteś bezpośrednio podany współczynnik i masz możliwość wyboru czcionek z, a także zgodnie z którym standardem WCAG chcesz wyrównać swój wybór.

Używanie kolorów do wizualnej reprezentacji obsługi błędów może powodować problemy. Weźmy na przykład elementy formularzy. Błędy są często reprezentowane przez podświetlenie pola wprowadzania danych kolorem. Dla osoby z zaburzeniami kolorów może to prowadzić do nierozpoznania błędów, a tym samym do ich nierozwiązania. 

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

Inne zasoby

Rozdzielczość i projektowanie z uwzględnieniem różnych urządzeń

Prawdopodobnie nie ma reguły w projektowaniu stron internetowych, która jest częściej poruszana - i częściej lekceważona - niż "mobile first”.

Dzięki takiemu podejściu, treść jest tworzona na urządzenia mobilne, a następnie odpowiednio dostosowywana do większych urządzeń. Przeciwieństwem tego jest dostosowanie projektu do komputerów stacjonarnych i co. a następnie dostosowanie go odpowiednio do mniejszych urządzeń. 

Przychodzą mi na myśldwa inne podejścia:

  • Stwórz osobną stronę internetową dla każdego urządzenia mobilnego i desktopowego, a następnie uzyskaj do niej dostęp zgodnie z potrzebami.
  • Wyświetlanie strony w wersji desktopowej na telefonie komórkowym

Pierwsze z nich może być właściwym podejściem - w zależności od projektu - ale nie jest zbyt rozpowszechnione, ponieważ jest bardzo kosztowne i czasochłonne. To ostatnie jest niestety wciąż zbyt często spotykane w sieci i dlatego pilnie wymaga dodania do listy "najlepszych praktyk". Więcej wskazówek na temat optymalizacji mobilnej znajdziesz tutaj.

Mobile first nie zawsze musi być właściwą drogą: Badania grupy docelowej i jej zachowań w Internecie mogą szybko pokazać, z jakich urządzeń jest głównie odwiedzana Twoja strona. 

Chodzi nie tylko o to, aby treści były przygotowywane wizualnie, ale również o to, aby uwzględniały zmienione warunki zewnętrzne. Więcej na ten temat można przeczytać w artykule Mobile-First UX Design Is No Longer a Trend.

Poniższa tabela jasno ilustruje, które ekrany są częściej odwiedzane w Internecie. Pomoże Ci to zdecydować, dla jakich ekranów chcesz zoptymalizować swoją stronę. Należy jednak pamiętać, że takie uogólnienie może służyć jedynie jako wskazówka. Statystyki te nie zastąpią badania grup docelowych.

Best-Practices-in-Web-Design
Źródło: https://www.hobo-web.co.uk/best-screen-size/

Najlepsze praktyki dla WordPress

WordPress Codex

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

The WordPress Codex

Na stronieWordPress znajduje się ogólny kodeks, który może pomóc w bardziej szczegółowym zajęciu się tym tematem.

WordPress Plugins oraz Themes

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

WordPress Aktualizacje i bezpieczeństwo

Regularne aktualizowanie witryn Themes i Plugins zmniejsza podatność na niepożądany dostęp. Błędy są rozwiązywane, a Twoje strony są dostosowywane do ciągle zmieniającego się środowiska technicznego. Bezpieczeństwo Plugins jak WordFence pomaga również śledzić witrynę i jej bezpieczeństwo oraz reagować na problemy na czas. Certyfikat SSL powinien być zintegrowany z każdą stroną internetową. 

Najlepsze praktyki w projektowaniu stron internetowych: Twoje pytania

Jakie masz pytania do Sonji? Jakie najlepsze praktyki możesz sam polecić? Zapraszamy do skorzystania z funkcji komentarza. Chcesz uzyskać więcej wskazówek na temat projektowania i tworzenia stron internetowych? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Po ukończeniu studiów z zakresu projektowania gier i twórczego pisania w malowniczym Auckland (w Nowej Zelandii) Sonja Hoffman zadecydowała o tym, by dalej rozwijać się jako webdesigner oraz specjalista ds. tworzenia aplikacji i ich rozwoju. Zajmuje się grywalizacją (to wykorzystanie elementów gier i technik projektowania gier w kontekście niezwiązanym z grami) i badaniami nad motywacją i doświadczeniami użytkownika. Łączy swoją profesję z własnym zainteresowaniem nowościami technologicznymi.

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.