Proces projektowania strony internetowej

Czas najwyższy zacząć długo wyczekiwaną serię o projektowaniu stron internetowych. Wiem, że wiele osób ciekawi proces powstawania takiej strony i gdzie w tym wszystkim jest miejsce na projektanta. A ja długo ten temat pomijałam, przede wszystkim na jego złożoność.

Z procesem projektowym jest bowiem tak, że nie ma jednego jedynego, który stosują wszyscy i który będzie miał wszędzie zastosowanie. Ilu projektantów – tyle procesów. Jak więc zrobić jeden materiał na ten temat? Musiałby być cholernie długi. Dlatego postanowiłam podzielić go na kilku odcinkową serię, którą zaczniemy dzisiejszym wpisem, będącym omówieniem procesu w ogóle. A w kolejnych opowiem wam po prostu o szczegółach poszczególnych etapów.

Możecie też obejrzeć film na ten temat na kanale: https://www.youtube.com/watch?v=0kXe_OsfiFY

Etap 1: Zbieranie wymagań

Choć brzmi bardzo “nieprojektowo”, to jeden z ważniejszych etapów projektowania strony. Dlaczego? Bo właśnie tu określamy co i po co tak naprawdę będziemy robić. Jakiego typu będzie to strona, dlaczego powstaje, jaki jest cel biznesowy, kim są użytkownicy końcowi, czym wyróżnia się firma spośród konkurencji? To jest właśnie moment na to, żeby odpowiedzieć na te wszystkie pytania.

Etap 2: Harmonogram

Jeżeli znamy już wymagania klientów, wiemy kim jest grupa docelowa, uzgodniliśmy co chcemy robić, przychodzi czas na ułożenie tego w jakiś plan. Na tym etapie tworzymy zakres pracy i układamy go właśnie w harmonogram prac. To wyjątkowo przydatne przy dłuższych, złożonych projektach, które musimy podzielić na etapy.

Jeżeli nasz projekt jest krótki i prosty, ten etap ogranicza się często do rozpisania poszczególnych podstron i określenia, kiedy prace zostaną zakończone. Taki zapis dobrze jest umieścić wtedy w umowie.

Etap 3: User flows i architektura informacji

Pogadane, popisane, ale musi nadejść ten moment, kiedy faktycznie zaczniemy coś wytwarzać. Mamy założenia i cele, teraz trzeba przełożyć je na działania użytkownika.

W zależności do tego jak złożony i skomplikowany będziemy mieć projekt, wybierzemy pewnie do niego różne podejścia. Przy bardzo prostej strukturze wystarczy usiąść do architektury informacji, rozpisać poszczególne obszary i jak rozkładać będą się w nich treści. Przy tych złożonych, które składać będą się z wielu procesów, warto pomyśleć o rozpisaniu najpierw tych procesów.

Narzędziem, które może nam w tym pomóc są tak zwane user flows. Ich forma może być naprawdę dowolna – mogą przypominać makiety, mogą być po prostu szybkimi rysunkami i opisami poszczególnych kroków. Mogą być zrobione na kartce albo w dowolnym programie. Sęk w tym żeby poświęcić chwilę na to, żeby zastanowić się nad procesem, a nie wyglądem strony czy aplikacji.

Etap 4: Przygotowanie treści

Zachęcam was do tego, żeby projektować dopiero, kiedy będziecie wiedzieć co macie do zaprojektowania. A do tego potrzebować będziecie… treści. Z reguły treści dostajemy na samym końcu – wielu klientów najpierw chce zobaczyć projekt, a dopiero potem zastanawia się co będzie na stronie i ile tekstów trzeba będzie umieścić. Kończy się to tym, że strona jest albo piekielnie pusta – bo projektant stworzył coś, co wymaga uzupełnienia go wieloma tekstami. A klient nie jest w stanie dostarczyć takiej ilości tekstów. Albo wręcz przeciwnie – klient zgłasza się do SEOwca i nagle minimalistyczny projekt trzeba uzupełnić masą treści.

Dlatego lepiej o treści pomyśleć zdecydowanie wcześniej i to wokół niej budować swój projekt. Nie tylko ułatwi wam to pracę – unikniecie tworzenia pustego szablonu, który ostatecznie, może okazać się, nie spełnia swojej roli, kiedy doda się już wspomniane treści.

Pamiętajcie, że treści to najważniejszy element strony – to po nie przychodzą użytkownicy. Dlatego warto zaszczepić takie podejście również u klienta i zachęcić go do przygotowania treści wcześniej.

Etap 5: Projekt graficzny

A kiedy mamy już teksty, wiemy jak wyglądają procesy, jak te treści będą się rozkładać w nawigacji, w strukturze, możemy przystąpić do tworzenia oprawy graficznej. Tak, dopiero na 5 kroku!

Dzięki takiemu podejściu możecie naprawdę zaprojektować coś skrojonego na miarę potrzeb klienta. Wiecie dla kogo projektujecie, jaki jest cel tego projektu, co powinno być wyróżnione, co jest priorytetem. Nic tylko usiąść do programu graficznego i przełożyć te wszystkie założenia na coś atrakcyjnego dla kogo. I przede wszystkim – użytecznego.

Etap 6: Wdrożenie

A kiedy mamy już wszystko z naszej strony ogarnięte, czas przekazać pałeczkę programistom. Oczywiście – ci mogą zacząć pracę już dużo, dużo wcześniej. To w głównej mierze zależy od procesu pracy, który został ustalony. W przypadku procesu zwinnego (np. Scrum), od pewnego momentu prace programistyczne i projektowe mogą trwać równocześnie. W klasycznej współpracy agencyjnej, rzadko kiedy jest okazja do przetestowania takiej formy i nasza praca to przykład procesu kaskadowego (waterfall).

W związku z tym nasze gotowe projekty przekazujemy programistom i to czas na ich magiczne sztuczki. Często, wiele firm, właśnie na tym etapie kończy współpracę przy projekcie – oddając co zrobili i kasują fakturki.

Etap 7: Audyt powdrożeniowy

Ale wiecie jak to jest. My swoje, a programiści swoje. A jeszcze klient, gdzieś tam po drodze wdrożenia mógł jednak zmienić zdanie i poprosić o jakieś drobne zmiany. Na etapie wdrożenia projekty potrafią mocno zmienić się w porównaniu do tego, co zaserwowaliśmy klientowi. I nie ma w tym nic dziwnego. Dlatego fajnie, gdy projektanci mają kontakt z developerami w trakcie prac wdrożeniowych – są gotowi odpowiedzieć na pytania lub dorobić drobne braki, o których można po prostu zapomnieć w trakcie pracy (np. stan jakiegoś komponentu w czasie ładowania).

Wdrożenie projektu to tylko początek – wszak dopiero od tego momentu użytkownicy zaczną z nim pracować. Klikać, edytować, wyszukiwać, zapisywać, wysyłać, czasem gubić się i psuć. I dobrze, by ktoś nad tym co się dzieje i jak się dzieje czuwał. Na tym etapie można wykonać tak zwane audyty powdrożeniowe – czyli sprawdzamy i oceniamy co jest ok, co poszło nie tak, co można jeszcze poprawić, oraz testy z użytkownikami, już na żywym organizmie.

[ngg src=”galleries” ids=”8″ display=”basic_thumbnail”]

Na koniec

Zanim pojawią się zarzuty, że o takich procesach przeczytać można co najwyżej w książkach albo funkcjonują tylko w firmach typu Facebook czy Google. Nie – podobny proces z powodzeniem można wdrożyć do swojej firmy, zachęcić szefów czy współpracowników do tego, żeby zmienić trochę myślenie o tworzeniu produktów, z którymi mamy na co dzień do czynienia.

Doskonale zdaję sobie sprawę z tego, że w wielu firmach realizacja strony polega na tym, że zgłasza się klient, mówi co chce i na kiedy i w przeciągu dwóch tygodni powstaje strona. Sama w takich firmach pracowałam. Ale firmę zawsze można zmienić, można zmienić klientów i można zmienić proces pracy. Dobrze więc wiedzieć, że są jakieś alternatywy dla tego, co znamy.

PRzeczytaj także o Angielskim w pracy projektanta.