6 kroków projektowania strony internetowej. Dobrze – po lekturze ostatniego naszego artykułu, pt. “Ile kosztuje strona internetowa?”
wybraliśmy już typ witryny, jaki nas interesuje, mamy określony budżet, spisane własne wymagania i potrzeby. Co dalej? Jak podejść do tematu rozmów z grafikami, programistami? Na co się przygotować?
W dzisiejszym wpisie uchylimy nieco rąbka tajemnicy, jak od zaplecza powstaje strona internetowa. Nie jest to żadna tajemna wiedza, jednak jak pokazuje nasze doświadczenie – klienci czasem mają wrażenie tworzenia statku kosmicznego 🙂
Zatem: Jakie kroki należy przejść by otrzymać swoją stronę internetową?
-
Brief – najświętsza świętość
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.
-
No to zaczynamy! Makiety.
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.
-
Właściwy projekt
>>>>>>>>>>>>>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.
-
Strona internetowa – kodowanie
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.
-
Testowanie
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.
-
Oddanie strony do użytku
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. 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). 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)
