8 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, który jest odpowiednikiem 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 zasad UX, to trudna sztuka.

Witryny internetowe można podzielić na dwa rodzaje: te z oryginalnym layoutem, projektowane przez grafików na zamówienie i 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 motyw. Oba rozwiązania są możliwe do zrealizowania z systemem Drupal.

Back-end

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ładają się przede wszystkim:

• baza danych, na której opiera się cała witryna;
• serwer wykonujący operacje na danych inicjowane przez kod strony;
• interfejsy API, które umożliwiają wymianę danych między back-endem a innymi serwerami i bazami.

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?

Cały proces zazwyczaj wygląda bardzo podobnie i składa się z następujących etapów:

1. Zbieranie informacji i analiza potrzeb klienta
2. Zaplanowanie funkcji strony oraz jej architektury
3. Projektowanie UX i UI
4. Przygotowanie treści na stronę
5. Development
6. Testy i ewentualne poprawki
7. Wdrożenie

W praktyce warto byłoby jeszcze uwzględnić w tym planie wszelkie formalności przed startem projektu (przygotowanie umowy, ustalenia co do harmonogramu oraz budżetu itd.), a także utrzymanie i rozwój strony już po wdrożeniu – o tym więcej powiemy na końcu.

Kolejność tych etapów też nie zawsze wygląda tak samo, na przykład jeśli chodzi o treści. W niektórych projektach copywriter zaczyna pracę dopiero, gdy developerzy kończą budować stronę, a czasem klient od startu ma gotowe treści i chce zaprojektować cały UX/UI wokół nich. Ważne, aby przejść przez wszystkie etapy i nie zlekceważyć żadnego z nich.

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 najbardziej estetyczną stronę na świecie.

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 mu ona 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 zarówno świetnym źródłem inspiracji, jak 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 ich rozmieszczenia 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 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. Ważniejsze jest jednak to, aby zaprojektować intuicyjny, przejrzysty layout.

Słowem-kluczem na tym etapie powinien 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 wciąż 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ółgrał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ć 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 content buduje zaufanie do marki i jest najsilniejszym narzędziem niosącym jej przekaz. To także on motywuje użytkowników do powrotu na stronę oraz podjęcia konkretnych działań. Nie wspominając nawet o znaczeniu treści dla SEO i pozycji witryny w wyszukiwarkach – to od niej w ogromnej mierze zależy to, ile osób w ogóle trafi na stronę.

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).

Nie będziemy tu pisać o szczegółach. Podkreślmy tylko jeszcze raz, jak ważne jest, aby przy tworzeniu strony internetowej 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, projektantowi nie zajmie to zbyt wiele czasu i developer szybko będzie mógł przystąpić do ostatniego etapu: wdrożenia 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 był rentowny. Tego typu zasady współpracy należy ustalić na samym starcie.

Gdy projekt będzie już gotowy, 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 niemal zawsze się zdarzają, nawet w przypadku najbardziej dopracowanych stron.

Mówi się, że wdrożenie projektu to dopiero początek pracy. Jako ósmy etap projektu wyróżniliśmy więc codzienną opiekę nad stroną, czyli:

• wdrażanie aktualizacji CMS-a, wtyczek i modułów;
• monitoring dostępności oraz wydajności strony;
• analitykę, czyli śledzenie, jak użytkownicy korzystają z witryny i gdzie, być może, da się ją zoptymalizować;
• działania SEO – pozycje w Google niestety nie utrzymują się same.

Do tego oczywiście dochodzi fakt, że wraz z rozwojem biznesu strona też będzie musiała się rozwijać – naprawdę rzadko da się spotkać witrynę, która w ciągu dwóch-trzech lat nie przeszła żadnych zmian. Strona z czasem może potrzebować rozbudowy o nowe sekcje, integracji z nowymi narzędziami, które wdrażasz w firmie, nie wspominając już np. o mniejszych poprawkach w kodzie z myślą o przyspieszeniu ładowania albo dostępności dla osób z niepełnosprawnościami. Takich drobnych prac wokół strony z reguły jest więcej, niż mogłoby się wydawać. Dlatego właśnie mówimy, że proces tworzenia strony internetowej 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 developerów. Jednak efekt jest tego warty!