6 kroków projektowania strony internetowej

Każdy proces projektowy musi zacząć się z od wyszczególnienia i wyceny wszystkich prac. Bez dobrze określonych potrzeb nawet najlepszy na świecie grafik nie odgadnie co miał na myśli klient prosząc “o prostą stronę www”.

Zwłaszcza jeśli chodzi o szatę graficzną – dobrze wypełniony i uzupełniony o własne przemyślenia brief będzie na wagę złota. Zdajemy sobie sprawę, że przekazanie tego, co widzi się (albo nie widzi… 🙂 ) oczami wyobraźni bywa trudne do zobrazowania. Wierzymy jednak, że szczera rozmowa z doświadczonym grafikiem jest w stanie rozwiać wiele wątpliwości, usystematyzować i poukładać projekt tak, by był on funkcjonalny i w pełni odpowiadający wyobrażeniom klienta. Warto zatem umówić się na spotkanie z działem graficznym i po prostu opowiedzieć o swoim pomyśle.

Często bywa tak, że klient nie ma totalnie pomysłu, jak dany projekt może finalnie wyglądać. Nie zrażajmy się – wówczas jako graficy, jesteśmy w stanie tak poprowadzić rozmowę, by dowiedzieć się jak najwięcej i stworzyć odpowiedni dla danej branży layout.

Dobrze spisany brief ma także jeszcze jedną zaletę – w przypadku, gdy w trakcie realizacji zdarzy nam się zapomnieć o jakimś elemencie bądź funkcjonalności, zawsze można do niego wrócić i zweryfikować wytyczne co do projektu.

W trakcie omawiania briefu, można od razu “pójść za ciosem” i stworzyć z klientem także całościową architekturę informacji i strukturę menu. Jest to dobre rozwiązanie, zwłaszcza jeśli nasz klient jest z innego regionu czy nawet kraju. Im więcej szczegółów uda się nam dograć i ustalić od razu, tym łatwiej i szybciej będziemy w stanie oddać gotową witrynę do użytku.

Jeśli wszystkie potrzeby klienta zostały spisane i omówione, można przystąpić do pracy. Przeważnie w odstępie pięciu do dziesięciu dni, grafik jest w stanie przesłać pierwsze szkice, tzw. makiety, do wglądu klienta. 

Przy dzisiejszym postępie technologicznym, w dobie takich narzędzi jak Adobe XD, Sketch czy Figma, wysyłany projekt może być klikalny i naśladować wszystkie funkcjonalności oraz wygląd gotowej strony internetowej. Jest to spore ułatwienie, zwłaszcza gdy mamy do czynienia z klientem, który nie jest w stanie sobie wyobrazić pewnych elementów i zachowań, choćby hover, czy animacji.

Co ważne – warto dobrze wytłumaczyć czemu mają służyć i co przedstawiają makiety. W przypadku serwisów, rozbudowanych systemów, pierwsze makiety będą bardzo proste, pozbawione “smaczków i efektów”, co może zrazić albo wręcz przestraszyć klienta. Dobrze jest więc, zadbać o obustronne zrozumienie idei makiet.

Jeśli wszystkie makiety i ich funkcjonalności zostaną zaakceptowane przez klienta, możemy przystąpić do właściwego zaprojektowania strony, na bazie wypracowanego stylu i rozwiązań. Przeważnie odbywa się to etapowo: projektujemy i przesyłamy projekt strony głównej, do którego klient może zgłosić zmiany i poprawki. Po akceptacji, tworzymy resztę (ustalonych na początku) podstron – przeważnie jest to robione w sposób analogiczny, korzystamy z podobnych wizualnie modułów, tak, by całość witryny była spójna i korespondowała ze sobą. Gdy klient otrzymuje komplet widoków, zgłasza jeszcze ostatnie korekty. Po ich naniesieniu, następuje finalny akcept szaty graficznej. W tym miejscu, graca graficzna w pewien sposób się kończy.

W tym etapie, grafik przekazuje cały projekt i dodatkowe wytyczne, których nie dało się zawrzeć w plikach graficznych, programiście, który koduje stronę w wybranym na początku środowisku. W tym etapie, developer krok po kroku, podstrona po podstronie wdraża witrynę, sprawia by zaczęła ona realnie żyć.

Grafik w tej fazie, może, choć nie musi (często tę rolę sprawuje sam project manager) nadzorować wyświetlanie kodowanego projektu – głównie jeśli chodzi o wielkość poszczególnych elementów czy wyświetlanie się poszczególnych wersji na urządzeniach mobilnych.

Ponownie – testy funkcjonalności i poprawności może przeprowadzać project manager, grafik lub specjalnie oddelegowany tester, którego zadaniem jest wychwycenie wszystkich nieścisłości i błędów w wyświetlaniu strony na wszelkich systemach operacyjnych i urządzeniach mobilnych. Logicznym jest, aby kwestie graficzne (czyli np. odległości interlinie, typografia, czy marginesy) weryfikował grafik – który najlepiej będzie wiedział, czy zakodowana strona wizualnie jest 1:1 zgodna z projektem, jaki zaakceptował klient.

Klient otrzymuje link roboczy z kompletną witryną, który także, we własnym zakresie może samodzielnie przetestować i przeklikać na dostępnych urządzeniach. Na tym etapie nie ma już miejsca na zmiany polegające na “bo mi się nie podoba ta sekcja, zmieńmy ją” – nie zmieniamy stylistyki, układu treści, czy samych sekcji. 

Klient oczywiście może chcieć tutaj zmieniać użyte fotografie, czy podmieniać teksty – po odpowiednim przeszkoleniu, może także rozbudowywać stronę o kolejne podstrony.

Gdy testowanie zostaje zakończone, a całość jest zaakceptowana, nic nie stoi na przeszkodzie, by finalnie opublikować stronę w domenie klienta.

Tutaj także, wszystko zależy od początkowych ustaleń – na jakim hostingu i pod jaką domeną witryna będzie widniała, kto będzie odpowiedzialny za przeniesienie (przeważnie robi to agencja, jednak w niektórych przypadkach, przesyłana jest cała paczka zawierająca stronę, którą firmowy informatyk wgrywa na serwer) i wreszcie – kto będzie odpowiedzialny za serwis i aktualizacje zabezpieczeń. 

O takiej usłudze możesz dowiedzieć się tutaj: KLIK! (link do obsługi posprzedażowej)

Czytaj więcej o strona internetowa…