7 etapów projektowania stron internetowych

Każda strona internetowa przypomina w swojej budowie tradycyjny, stacjonarny sklep — nawet jeśli sama nie ma nic wspólnego z e-commerce, a stanowi jedynie np. wirtualną wizytówkę firmy. Mamy zatem front-end, a więc odpowiednik sklepowej wystawy i dostępnego dla klientów wnętrza oraz back-end — czyli zaplecze.

Front-end

Front-end zawiera składowe wpływające na wygląd strony, zaczynając od kolorystyki, a kończąc na kształcie poszczególnych buttonów. Na layout składa się także ustawienie i rozłożenie poszczególnych elementów na stronie. Choć z pozoru może się to wydawać proste, zaprojektowanie spójnej i ładnej witryny, dostosowanej do trendów i prawideł UX, to trudna sztuka.

Witryny internetowe można podzielić na dwa rodzaje — te z oryginalnym layoutem, projektowane przez grafików na zamówienie i na te, które korzystają z gotowych szablonów. Obie mogą spełniać swoją funkcję, a wszystko zależy od tego, czego potrzebujesz. Jeśli klientem jest duża firma ze sporym budżetem, stawiająca na oryginalność, to nie może pozwolić sobie na korzystanie z szablonu. Z kolei małe przedsiębiorstwo, które potrzebuje witryny jako wizytówki z podstawowymi funkcjami, jak najbardziej może zadowolić się stroną opartą o gotowy szablon. Oba rozwiązania są możliwe do zrealizowania z systemem Drupal.

Back-end

Z kolei do back-endu można zaliczyć wszystko to, co dzieje się poza zasięgiem wzroku użytkownika, czyli na serwerze witryny. Na architekturę zaplecza składa się przede wszystkim baza danych, na której opiera się cała witryna, serwer — wykonujący operacje na danych inicjowane przez kod strony, a także interfejsy API, które umożliwiają wymianę danych między back-endem a innymi serwerami i bazami danych.

W praktyce wszystko, co użytkownik widzi na ekranie — artykuł na blogu, historia zakupów w odzieżowej sieciówce, lista cen biletów lotniczych do Helsinek czy formularz otwarcia rachunku w banku — jest uzależnione od prawidłowego działania back-endu. To właśnie on odpowiada za to, jakie dane wyjściowe otrzyma po każdym kliknięciu użytkownik oraz, w drugą stronę, czy witryna przetworzy dane wprowadzane w przeglądarce.

W procesie tworzenia stron internetowych praca z back-endem czasem wydaje się tą bardziej „niewdzięczną” w porównaniu np. z projektowaniem UX. Jednak jest równie ważna! Owszem, nikt podczas robienia zakupów nie powie głośno, że strona ma świetnie zoptymalizowaną bazę danych — ale każdy od razu odczuje, gdy po stronie serwera pojawią się problemy. Dlatego przy wdrożeniu strony internetowej trzeba równie mocno zadbać o front-end i zaplecze strony.

Przejdźmy do meritum – co składa się na projektowanie stron internetowych? Jakie etapy pracy mają przed sobą web-designerzy?

Rozmowa z klientem o jego oczekiwaniach powinna być pierwszym krokiem jakichkolwiek prac nad projektowaniem strony internetowej. Dlatego przed włączeniem Photoshopa czy Sketcha lepiej przeprowadzić krótki briefing — nie tylko na zasadzie przygotowywania specyfikacji i dokumentacji strony, ale także kierunku wizualnego.

O ile wielu klientów w pełni zdaje się na wykonawców — w końcu po to płacą profesjonalistom — to niektórzy chcą mieć większy wpływ i własną wizję strony. Jeśli ktoś chce dużo niebieskiej barwy, to nie trzeba na siłę forsować swoich pomysłów — wówczas zleceniodawca nie będzie zadowolony z pracy, nawet jeśli otrzyma najpiękniejszą stronę na świecie.

Ważne jest także dokładne zapoznanie się z brand bookiem klienta. Jeśli ma dobrze zaprojektowany logotyp, to warto dokładnie przestudiować wszystkie wytyczne i wymogi stosowania logo. Projektowanie stron internetowych niezgodnych z brand bookiem to ogromna wpadka każdego designera.

To nie wszystko w kwestiach wizualnych, które zaskakująco często okazują się największą kością niezgody między klientem a wykonawcami. Dobry projektant stron WWW zada o wiele więcej pytań, na przykład:

• Kto jest docelowym odbiorcą strony?
• Co przyszły użytkownik spodziewa się znaleźć na stronie? Do czego ma ona mu służyć?
• Czy witryna ma odzwierciedlać główny przekaz marki, czy ma być jedynie częścią większej strategii, zachowując swój unikalny charakter?
• Z jakimi stronami witryna klienta będzie konkurować?

Powiedzmy wprost — design witryny internetowej ma służyć nie tyle preferencjom projektanta i klienta, ile końcowego użytkownika. To jego satysfakcja, wygoda i pozytywne skojarzenia o marce są ostatecznym celem, który powinien przyświecać kolejnym etapom pracy nad stroną internetową.

Warto jeszcze na moment zatrzymać się przy stronach konkurencji. Z perspektywy klienta nie ma prostszego sposobu, aby jasno zarysować swoją wizję, niż wskazać kursorem na przykłady istniejących już witryn. Jednak należy z tym uważać. Nie chcesz przypadkiem stworzyć strony, która równie dobrze mogłaby być szablonem w WordPressie! Nie zmienia to faktu, że serwisy innych firm (niekoniecznie z tej samej branży) będą dla designera i świetnym źródłem inspiracji, i dobrym benchmarkiem do oceny projektu.

Poznałeś klienta i jego branżę, przejrzałeś konkurencyjne strony i masz pewne inspiracje dla swojej pracy, a także materiał, który śmiało możesz pokazać zleceniodawcy. Na tej podstawie możesz już spokojnie ustalić wstępny harmonogram projektu strony internetowej, a potem — zabrać się do pracy.

Właściwy proces projektowania witryny niemal zawsze rozpoczyna się od stworzenia mapy strony. Jest to poglądowy schemat wszystkich treści, które docelowo mają znaleźć się na stronie, wraz z wizualizacją ich hierarchii. Najprostsze mapy zawierają po prostu strukturę podstron; nieco dokładniejsze opisują także czym, mniej więcej, powinna zostać wypełniona każda z nich.

Już na tym etapie projektowania strony internetowej designer musi wiedzieć, wokół jakich treści ma stworzyć witrynę. Wiele projektów zaczyna się nie od pracy w Figmie, a od stworzenia tekstów przez copywritera, które potem stanowią swego rodzaju bazę dla projektantów i grafików. Jeśli copywritera w projekcie jeszcze nie ma — warto stworzyć przynajmniej zarys tematyczny treści i tego, jak rozmieszczone będą między podstronami. Dzięki temu wiesz:

• jak ma wyglądać architektura informacji na stronie;
• jakie mają być relacje między elementami witryny;
• jakim konkretnie treściom Twój projekt graficzny strony ma służyć.

Widzisz, dlaczego rozrysowanie mapy witryny to tak ważny etap tworzenia strony?

Jak wspomnieliśmy, proces tworzenia strony internetowej może pójść jedną z dwóch ścieżek: albo zaczynasz od projektu, a potem tworzysz treści — albo dopasowujesz warstwę wizualną do już istniejącego contentu. Dużo zależy tu od założeń projektu: czy projektujesz stronę od zera, czy przebudowujesz już istniejącą? Czy witryna opiera się na treściach (jak większość stron firmowych), czy stanowi usługę (jak e-sklepy), która ma być przede wszystkim wygodna dla klienta?

Tym razem zacznijmy od designu. Nie chodzi tu tylko o stworzenie przyciągających uwagę grafik czy dobór atrakcyjnej, spójnej z brandingiem firmy szaty kolorystycznej, choć to też jest istotne. Jeszcze ważniejsze jest to, aby zaprojektować intuicyjny, przejrzysty layout.

Ułożenie elementów, przygotowanie poszczególnych buttonów czy projekt menu to nie tylko podstawa layoutu, ale kluczowy element funkcjonalności strony. Tak naprawdę na tym etapie powinien być zaangażowany nie tyle grafik, ile przede wszystkim UX designer, który zaprojektuje całą ścieżkę klienta zgodnie z najlepszymi praktykami user experience.

Słowem-kluczem na tym etapie powinno być wireframe. Jest to szkic interfejsu strony, na którym projektant UX może wskazać, gdzie mają znaleźć się treści, a gdzie — grafiki; jaki ma być ostateczny układ menu; jak rozmieszczone powinny być buttony i jakie powinny pełnić funkcje. Typowe wireframe’y są pozbawione ozdobników — przyciski mogą być szarymi, kwadratowymi bloczkami, a w miejscu tekstu może pojawić się słynne lorem ipsum. Co więcej, takie szkice niektórzy projektanci przygotują na kartce… choć dziś standardem jest Figma i Balsamiq. Najważniejsze, aby wireframe dał odpowiedź, jak ma wyglądać wizualnie struktura interfejsu. Kolejne etapy tworzenia strony internetowej pójdą dzięki temu znacznie łatwiej.

Dopiero w tym miejscu do projektu wkracza grafik i/lub UI designer. O ile praca nad strukturą strony służy temu, by końcowy efekt był funkcjonalny, tak szata graficzna ma przede wszystkim cieszyć oko użytkownika. Na tym etapie powinieneś skupić się więc na:

• przygotowaniu atrakcyjnych grafik lub zdjęć;
• zaprojektowaniu buttonów;
• wyborze czcionek;
• wykonaniu animacji dla mikrointerakcji z interfejsem...

… i, oczywiście, dobraniu odpowiedniej palety kolorów. Z jednej strony kolorystykę (tak jak inne elementy UI) można zmienić bardzo szybko i bezboleśnie, a z drugiej może mieć ona ogromny wpływ na całą strukturę strony. Dlatego lepiej od razu odpowiednio dobrać kolory, by dobrze współdziałały z logotypem i brand bookiem klienta, a także wpisywały się w zaplanowany customer journey. Nie przesadzaj jednak z liczbą barw – według prawideł trzy kolory to maksymalna i optymalna liczba dla jednego projektu strony internetowej.

Kolejnym wyzwaniem będzie stworzenie treści na stronę. I pod wieloma względami jest to etap najważniejszy. Można tu przytoczyć pewną pracę brytyjskich badaczy, którzy analizując zachowania czytelników stron poświęconych zdrowiu, doszli do wniosku, że pierwsze wrażenie na temat witryny aż w 94% jest związane z designem, a tylko 6% - z właściwą treścią.

Pamiętaj jednak, że to treść witryny, a nie jej szata graficzna jest powodem, dla którego użytkownicy zostaną na stronie na dłużej. To treści budują zaufanie do marki i są najsilniejszym narzędziem niosącym jej przekaz. To także one motywują użytkowników do powrotu na stronę oraz podjęcia konkretnych działań. Nie wspominając nawet o ich znaczeniu dla SEO i pozycji witryny w wyszukiwarkach — od której w ogromnej mierze zależy to, ile osób na stronę w ogóle trafi.

Jakość treści to być albo nie być dla witryny — dlatego harmonogram tworzenia strony WWW zawsze powinien przewidywać czas dla dobrego copywritera. Warto zadbać przy tym o to, aby mógł on też aktywnie współpracować z projektantem/grafikiem. Jak pisaliśmy wyżej, design i content muszą iść ze sobą w parze i wzajemnie podkreślać swoje atuty.

Na tym etapie typowe projektowanie strony WWW masz za sobą — i to jest moment, aby oddać projekt w ręce developera (lub kilku).

O szczegółach pisać tutaj nie będziemy. Podkreślmy tylko jeszcze raz, jak ważne jest, aby przy tworzeniu strony internetowej również nie lekceważyć rozwoju „zaplecza” witryny po stronie serwera. Jako że jest to dość wymagające, w przypadku wielu projektów optymalnym rozwiązaniem może okazać się postawienie strony na systemie CMS. To jednak jest kwestia tego, do jakiego stopnia firma potrzebuje pełnej kontroli nad własnym kodem — i czy jest w stanie zbudować niezbędne funkcje w już gotowym środowisku. Podpowiadamy: z dobrymi specjalistami zazwyczaj jest to możliwe!

Nie zapominaj o poprawkach. Nawet najlepszy, najbardziej dostosowany projekt nie musi podobać się klientowi i może wymagać zmian. Jeśli to drobne modyfikacje, to projektantowi nie zajmie to zbyt wiele czasu i developer szybko będzie mógł przystąpić do ostatniego etapu — wdrażania projektu.

Przed startem prac warto ustalić, ile poprawek klient może zgłosić. Na zasadzie — umawiamy się na stworzenie projektu strony internetowej, a w ramach wyceny zostanie stworzony jeden layout zgodny z wytycznymi. Klient ma prawo do dwóch poprawek (każda poprawka to zbiorowa lista uwag), które zostaną wprowadzone w ramach wyceny. Każde kolejne zmiany powinny być dodatkowo wyceniane, aby projekt pozostał rentownym. Tego typu zasady współpracy należy ustalić na samym starcie!

Gdy projekt będzie już gotowy — przed wrzuceniem go do sieci warto jeszcze poświęcić trochę czasu na to, aby go przetestować. Można tu wyróżnić dwa etapy:

• testowanie funkcji strony — gdy sprawdzasz, czy strona wykonuje wszystkie zakładane przez Ciebie operacje;
• testowanie wydajności — czyli m.in. tego, czy strona działa na każdym urządzeniu i czy dobrze skaluje się do ekranów mobilnych; czy wszystkie linki są sprawne; jak szybko się ładuje.

Dopiero po testach można z czystym sumieniem powiedzieć, że projektowanie strony WWW dobiegło końca. Teraz wystarczy załadować witrynę na serwer, zgłosić do indeksacji w Google i… czekać na pierwsze problemy. One zawsze się zdarzają, nawet w przypadku najbardziej dopracowanych witryn. Dlatego właśnie mówi się, że wdrożenie projektu to dopiero początek pracy, a proces tworzenia strony internetowej tak naprawdę nigdy się nie kończy.

Zaprojektowanie i wdrożenie funkcjonalnej strony internetowej wymaga czasu, cierpliwości i gotowości do poprawek. To czasochłonny proces, do którego nierzadko trzeba zatrudnić sporą grupę osób, od designerów, przez grafików, aż po deweloperów. Jednak efekt może być tego wart!