Projektowanie stron internetowych

Projektowanie stron i UX : 

Źle zaprojektowana i mało atrakcyjna strona internetowa będzie powodować gorszą konwersję i mniejszą ilość klientów. User experience jest dziedziną zajmującą się badaniem i projektowaniem doświadczeń użytkownika w stosunku do używania produktu jakim może być np strona internetowa, sklep czy aplikacja. Drugim pojęciem które również towarzyszy działaniom UX jest użyteczność (usability) czyli poszukiwaniem rozwiązań, które przyczynią się do maksymalnie prostego (intuicyjnego) używania przedmiotu. 

Pod względem użytkownika i właściciela strony, sklepu internetowego proces tworzenia warstwy UX jest bardzo ważny gdyż to w tym miejscu decydujemy o przejrzystości i czytelności produktu o jego powodzeniu lub nie.

Projektowanie UX dzielimy na etapy : 

  • researchu,
  • makietowania (tzw. wireframe tworzenia makiet niskiego poziomu).

Etap researchu przed projektem strony www

– pozwala na opracowanie grupy docelowej oraz person, analizę konkurencji oraz przygotowanie wstępnej stylistyki (określenie kierunku w którym chcemy iść przy tworzeniu nowej strony tzw moodboardów). 

W wyniku realizacji etapu researchu powstaje zbiór danych które są wspólnie omawiane celem wybrania głównych punktów i poddane dalszej realizacji – tworzenia makiet. Na podstawie analizy konkurencji oraz researchu SEO tworzona zostaje również mapa strony w formie grafu / drzewa gdzie widać logiczne powiązania pomiędzy podstronami serwisu.

Etap projektowania makiet strony www

Makieta czyli szkic, blokowe ujęcie treści w postaci wireframów / blokowych wizualizacji /, która względnie szybko pokaże nam rozplanowanie contentu, układu treści, schemat rozmieszczenia sekcji, elementów na stronie internetowej.  Dodatkowo po wykonaniu interaktywnych makiet tzw prototypów (makiety możliwe do kliknięcia – posiadają aktywne pozycje menu czy główne buttony CTA) posłuży do zobrazowania wstępnego wyglądu strony głównej i podstron. Przygotowywane zostają w wersji desktop (1366px) oraz mobile (768px, 380px) by pokazać funkcjonalność i układ poszczególnych bloków dla mniejszych ekranów.

Strona internetowa – dostosowany układ do treści

Projekt strony www, a content ?

Głównym zadaniem tego etapu jest dostosowanie układu sekcji i elementów do ilości / prognozowanej / treści. Tak by projektowana strona dobrze wyglądała z przewidzianą ilością treści w sekcjach.

Efektem pracy nad projektem strony w obszarze UX jest klikalna makieta low-fidelity (prototyp) z uwzględnionymi założeniami z etapu analitycznego, sposobem poruszania się użytkownika po stronie, realizacją celów jakie są postawione przed użytkownikiem.

Projektowanie stron internetowych – przykłady

Zobacz jak powstają projekty stron hauerpower.com. Sprawdzisz realizacje, dokładnie poznasz case studies projektów, problemy, wyzwania i osiągnięte cele.

Co daje projektowanie UX ?

Przede wszystkim pozwala uniknąć błędów, kosztownych problemów, które mogą wyjść po uruchomieniu strony. Dzięki podejściu i realizacji etapu UX możemy zminimalizować ryzyko problemów i pomyłek na etapie założeń i określenia celi, a właściwie je jeszcze raz zweryfikować. Pracujemy na konkretnych danych analitycznych lub grupie testowej która odpowiednio dobrana wskaże nam słabe miejsca projektu lub błędy w określonych wcześniej założeniach. Przy kolejnych iteracjach projektu eliminujemy wcześniej wykryte problemy i poddajemy ponownej ocenie. 

Dzięki projektowaniu UX zyskujemy :

  • wyższe zaangażowanie Klienta poprzez intuicyjność rozwiązań, łatwość poruszania, czytelność całego interfejsu / strony internetowej, sklepu, aplikacji,
  • większą konwersję / leadów, transakcji / poprzez łatwość i bezproblemowość wykonania założonego celu przez użytkownika, dając realny wpływ na poprawę i wielkość zapytań co jest priorytetowe i ważne dla Twojego biznesu.

Struktura strony internetowej:

Dzięki wcześniejszym etapom i w połączeniu ich z procesem UX jesteśmy w stanie sprecyzować i wprowadzić określone typy podstron do naszego tworzonego serwisu internetowego.

Wyróżniamy określone typy podstron, które mają swoje przeznaczenie :

Typy projektowanych podstron strony www

Strona główna – strona pozycjonowana głównie na branding, adres url. Drzwi wejściowe do naszej firmy. Odpowiednio zaprojektowana poprowadzi użytkownika w głąb serwisu podsuwając mu treści których szuka.

Kategoria produktów – pozycjonowana na frazy związane z ogólną ofertą lub usługami firmy. To głównie podstrona pełniąca funkcję prezentacji usług lub oferty w formie listy kafelków z której możemy po wybraniu przejść do docelowej usługi.

Strona produktu – pozycjonowana na frazy związane z produktem usługą. Docelowa strona konkretnego produktu lub usługi (w przypadku sklepu internetowego karta produktu).

Podstrona tekstowa – przyjmująca głównie treść w większej ilości np regulamin, polityka prywatności. 

Podstrona wpis – podstrona konkretnego wpisu przyjmująca większe ilości treści i zdjęcia

Podstrona kontakt – zwykle dedykowana wizualnie podstrona z formularzem, mapą Google i danymi kontaktowymi. 

Etap 3

Projektowanie stron – UI

Dopiero na tym etapie w którym jesteśmy po przejściu procesu analizy, researchu i budowania wiedzy o firmie i jej użytkownikach możemy na gotowych makietach przejść do wizualnej części projektowania strony internetowej. Projektant UI na tym etapie wie jakie są oczekiwania, zna klienta końcowego oraz założenia projektu i cele strony. Posiadając docelowe treści możemy projektować atrakcyjną warstwę wizualną, dobrać zdjęcia i font.

Projekt graficzny to w dużej mierze praca z makietami opracowanymi na etapie UX. Podstawowe prace prowadzone są w zakresie : 

  • opracowania kolorystyki strony i wszystkich elementów,
  • opracowanie hierarchii wizualnej elementów,
  • opracowanie typografii – dobór fontów, wielkości, proporcji, interlinii, odstępów,
  • zachowanie równowagi i balansu kompozycji – ustalenie priorytetów ważności dla sekcji,
  • opracowanie dobrego kontrastu co pozwala na hierarchizację treści,
  • zadbanie o spójność wizualną projektu : typografia, odległości, waga fontu, te same kolory / style dla elementów aktywnych np: buttony nawigacji czy linków w treści,

Na czym polega projektowanie stron internetowych ?

To etap polegający na opracowaniu nie tylko warstwy wizualnej – projektu graficznego ale także projekcie wszelkich elementów graficznych strony jak np: stany przed i po kliknięciu, gdy wystąpi błąd, gdy ładujemy listę czy zdjęcia, pola tekstowe, checkboxy, buttony) oraz style guide czyli wzorca / matrycy / wielkości i odstępów poszczególnych elementów pomiędzy sobą by zawsze raz zdefiniowany element był określonych wartości wszędzie gdzie zostanie użyty.

Projektant UI czuwa nad warstwą prezentacji treści, dba o czytelność i kontrast elementów względem siebie, projektuje i dobiera ikony.