Dlaczego projekt graficzny strony internetowej jest ważny?

Projekt graficzny strony internetowej jest ważny zarówno dla osoby zlecającej jak i dla osoby, która będzie realizować dany projekt. Dlaczego jest to tak ważne? Jest wiele powodów, dla który warto tak robić: oszczędność czasu i nerwów, zmniejszenie liczby poprawek, poukładana lista zadań, wiadomo co i w jaki sposób ma być zrobione… Zapraszam Cię do czytania!

Jak wygląda praca bez projektu graficznego?

Praca bez projektu graficznego strony internetowej jest bardzo ciężka. Zarówno Ty jako twórca strony lub Ty w roli klienta możesz stracić mnóstwo czasu na dostosowaniu strony do założonych wymagań. Jeśli realizujesz/zlecasz projekt strony internetowej bez wspomnianego projektu graficznego narażasz się na dodatkowe koszty jako klient lub stratę mnóstwa czasu i nerwów jako deweloper.

Ty jako twórca strony internetowej

Wyobraź sobie taką sytuację, gdzie Ty jako twórca strony internetowej dla swojego klienta macie już wszystko ustalone i spisane w briefie. Wiesz jakie są jego oczekiwania, jakie strony internetowe podobają się Twojemu klientowi (przekazał Ci linki do tych stron), masz czym się inspirować w tworzeniu. Od razu zabierasz się do pracy i realizujesz projekt strony internetowej, który już masz w swojej głowie! Od strony klienta może to wyglądać w tej chwili jak coś na zasadzie poniższego obrazka.

Oczywiście obrazek jest trochę przesadzony, ale nie mogłem się powstrzymać. Poza tym sam przyznasz, że postawienie klienta trochę przed faktem dokonanym jeśli chodzi o wygląd jego strony internetowej jest bardzo odważne i często jest trochę nerwowo w takich sytuacjach. Powróćmy jednak do tematu, za chwilę wszystko wyjaśnię…

Zaczynasz tworzyć stronę internetową wg Twojego projektu w głowie. Po dwóch lub trzech dniach kodowania szablonu nagle dochodzisz do wniosku, że sposób wyświetlania się postów na blogu Ci się nie podoba i trzeba go zmienić. No to odszukujesz kod, zmieniasz co trzeba i jest git! Następnie uświadamiasz sobie, że można byłoby dodać jeszcze jakieś meta informacje o danym poście, datę dodania, ilość komentarzy, autora itp… I ponownie szukasz w kodzie odpowiedniego miejsca, aby dodać te rzeczy. Okazuje się, że nie wystarczy w tym przypadku po prostu tego dodać i będzie ok – nie! Wcześniej tego nie zaplanowałeś więc trzeba nieco przerobić prawdopodobnie kontener, w którym wyświetla się dany wpis. Tracisz czas. Mimo wszystko po dodatkowym dniu pracy nad własnymi poprawkami jest ok! Cały czas mając w głowie założenie, że klientowi się wszystko spodoba. No przecież się nie do końca na tym zna, dlatego przyszedł do nas.

Po czterech lub pięciu dniach pisania szablonu, wrzucamy wszystko na serwer i przedstawiamy klientowi wygląd na przykładowych danych. Klient przeklikuje kolejne zakładki, ogląda, ocenia, drapie się po głowie po czym stwierdza, że trzeba tutaj coś pozmieniać, bo nie do końca mu się to wszystko podoba! A te drobne zmiany narzucone przez klienta, to tylko przerobienie całego layoutu archiwum postów, układu i wyglądu sekcji na stronie głównej, dodanie bocznego paska, którego nie uwzględniłeś i zmiany być może innych części strony internetowej. Jedyne, co mi w takiej sytuacji przyszłoby na myśl, to jedno, pięcioliterowe słowo na K.

Tak przeważnie kończy się praca bez projektu graficznego strony. Mało tego, nanosząc kolejne poprawki, w końcu może być tak, że pogubimy się w końcu we własnym kodzie, lub będzie on już tak dużo razy zmieniany, że lepiej będzie po prostu napisać go od nowa. Znowu stracimy cenny czas. Zobaczmy podobny scenariusz od strony klienta.

Ty jako klient zlecający stworzenie strony internetowej

Co może być nie tak od strony klienta podczas pracy nad stroną internetową bez projektu graficznego? Jest kilka rzeczy, o których należy wspomnieć. Pierwszą rzeczą przy pracy nad stroną bez projektu to strata czasu. Nawiązując do poprzedniej sytuacji stawiając Ciebie jako twórcę. Deweloper przedstawia Ci ukończony, zakodowany motyw z przykładowymi danymi, który Ci się nie podoba. Deweloper spędził nad stroną cztery lub pięć dni marnując w sumie Twój i swój czas. I teraz wyobraź to sobie: czekałeś na stronę internetową z nadzieją, że będzie taka jak Ty sobie to wymyśliłeś, a dostajesz realizację, która w rzeczywistości choć spełnia Twoje założenia, to nie wygląda tak jak tego oczekiwałeś. Przedstawiasz więc listę zmian, które koniecznie trzeba nanieść. Dla Ciebie zmiany te mogą wydawać się kosmetyczne, a w rzeczywistości często kończą się kilkoma dniami ponownego dłubania w kodzie strony przez dewelopera. W ten sposób tracisz cennych kilka dni na czekaniu aż deweloper wprowadzi poprawki. I znowu zostaje Ci przedstawiony projekt i okazuje się, że dalej nie jest to to, czego oczekiwałeś. Wysyłasz kolejną listę zmian, zostają zrealizowane i jednak na końcu stwierdzasz, że poprzednia wersja wyglądała lepiej! Ponownie, obydwaj tracicie cenny czas, a dodatkowo Ty możesz stracić więcej pieniędzy, co jest kolejnym punktem.

Nawiązując do historii z poprzedniego akapitu. Ty zlecasz poprawki, deweloper je wprowadza. I tak w kółko, aż w końcu dostajesz stronę, której oczekiwałeś. Problem w tym, że te ciągłe zmiany generować mogą dodatkowe koszty. Koniec końców budżet jaki miałeś przeznaczony na stworzenie strony został przekroczony o połowę. Myślę, że ta kwota mogła zostać przeznaczona na stworzenie projektu graficznego i uniknięcie wygenerowania dodatkowych kosztów.

Optymalny kod strony

Innym skutkiem pracy bez projektu graficznego strony internetowej jaki mogę jeszcze podać, to pisanie nieoptymalnego kodu. Kodując motyw, wygląd części komponentów może być taki sam na wielu podstronach i w takich przypadkach dobrą praktyką jest pisanie kodu i klas, które będzie można wykorzystać później w innych miejscach na stronie. Lepiej jest stworzyć jedną uniwersalną klasę niż 10 klas i powtarzać w każdej te same deklaracje. Bez projektu graficznego czasami ciężko takie rzeczy dostrzec, a mając taki projekt przed sobą od razu jesteś w stanie ocenić gdzie można zaoszczędzić na kodzie – w najlepszym tego słowa znaczeniu.

Jak wygląda praca z projektem graficznym?

Praca z projektem graficznym strony internetowej pozwala zaoszczędzić przede wszystkim czas klienta i dewelopera. Realizując zlecenia dla swoich klientów zawsze rozpoczynam pracę od przygotowania layoutu strony internetowej. Co mi to daje? Mam po prostu pewność, że układ, kolorystyka, krój pisma itd. jaki zaproponowałem odpowiada mojemu klientowi. Jeśli coś jest nie tak, to poprawiam to w projekcie i wysyłam ponownie do akceptacji. Tak jest praktycznie z każdą podstroną, która ma pełnić jakąś dodatkową funkcję. Jest tak np. ze stroną Kontakt. Nie jest to zwykła podstrona, która po prostu będzie wyświetlać dodaną treść. Oprócz tego, wszystko jest odpowiednio ułożone i podzielone na sekcje. Czasami jest potrzebna mapka z dojazdem oprócz samego adresu i formularza kontaktowego. Nie zawsze jest to standardowa strona z przeważającą ilością tekstu.

Jeśli wszystko jest zaakceptowane, to dopiero wtedy przystępuję do pracy z motywem. Często bywa tak, że podczas pisania kodu pojawiają się dodatkowe pytania, które wymagają omówienia z klientem. Dla przykładu klient w przyszłości może chcieć tworzyć na swojej stronie landing pages, do których będzie potrzebować odpowiednich szablonów dla stron bez headera czy nawet bez paska nawigacyjnego i stopki na dole strony. Powinno to być zapisane w briefie, ale klient może nie koniecznie wiedzieć jak to się fachowo nazywa, a skoro system CMS będzie pozwalał mu dodawać nowe podstrony, to możliwe, że w jego rozumowaniu taka opcja pewnie będzie dostępna domyślnie. Warto dopytywać o takie rzeczy. To Ty w końcu jesteś ekspertem.

Po akceptacji projektu graficznego zaczynam go analizować. Grupować sobie komponenty, które wyglądają tak samo lub podobnie. Oczywiście już na etapie projektowania mam z tyłu głowy, aby wykorzystywać powtarzalność niektórych elementów w taki sposób, aby później można było to jak najbardziej optymalnie zakodować. Czasami te bardziej złożone komponenty wymagają „rozrysowania”. Trzeba je rozebrać na czynniki pierwsze i mądrze przydzielić im odpowiednie kontenery i pogrupować. Nadać odpowiednie klasy.

Sam widzisz. Zanim przystąpi się do działania należy wykonać kilka ważnych rzeczy przed rozpoczęciem samego wdrażania projektu w życie. Z doświadczenia wiem, że ten system sprawdza się najlepiej. Nie tylko u mnie, ale też u wielu innych deweloperów. Klient również woli wiedzieć czego się spodziewać i nie tracić czasu.

Jak to wszystko się ma do wykonawców korzystających z page builderów?

Stronę internetową opartą o WordPressa można stworzyć przynajmniej na kilka różnych sposobów. Jednym z nich jest korzystanie z page builderów. Niezależnie czy to będzie Elementor, Divi, WPBakery czy jakiś inny builder. W takich przypadkach również projekt graficzny strony internetowej może okazać się bardzo pomocny i pozwolić na zaoszczędzenie głównie czasu obu stronom.

Podobnie jak w sytuacji gdzie cały motyw jest kodowany, tak samo i tutaj pewne zmiany mogą mniej lub bardziej ingerować w strukturę danej podstrony. Weźmy pod uwagę opisywaną wcześniej sytuację, gdzie deweloper tworzący stronę z głowy chce dodać do bloku z postem jakieś meta dane. Taka zmiana z wykorzystaniem page builderea (o ile nie ogranicza nas używane do budowy narzędzie) również wymaga przerobienia całego kontenera. Jest jeszcze coś. Korzystanie z możliwości i potencjału page builderaów nie polega tylko na wyklikaniu całej strony. W większej części tak, ale niektóre elementy czy komponenty wymagają mimo wszystko dopisania kilku linijek dodatkowego kodu CSS, aby mogły wyglądać tak, jak to zostało zaplanowane. Zachowanie takich elementów w różnych rozdzielczościach również kontroluje się odpowiednim kodem CSS. Niestety, ale page builder nie będzie za nas zawsze myślał. Dokładanie kolejnych zmian, może doprowadzić do sytuacji gdzie trzeba będzie poukładać kontenery na nowo i nadać im nowe klasy i jeszcze raz dodać kod CSS.

Jak oszczędzić?

Rozwiązanie, w którym tworzony jest projekt graficzny strony w pierwszej kolejności, a następnie jest on kodowany może być kosztowne. Z drugiej strony tak samo kosztowne może być poleganie tylko na wyobraźni wykonawcy, który później będzie musiał wprowadzić mnóstwo zmian do idealnego wg. niego projektu. A czy można zaoszczędzić wybierając taką ścieżkę (projekt graficzny + wdrożenie)? Oczywiście, zawsze jest sposób na zaoszczędzenie.

W takiej sytuacji najlepiej jest szukać osoby/freelancera, który w swojej ofercie ma zarówno stworzenie projektu graficznego i wdrożenie takiego projektu. Dlaczego akurat w tym przypadku freelancer? Moim zdaniem, nikt poza taką osobą nie wykona dla Ciebie tyle pracy w dobrej cenie i odpowiednio krótkim czasie co on. Agencja na pewno weźmie dużo więcej pieniędzy za taką usługę. W agencjach pracuje mnóstwo ludzi nad takim projektem – a my przypominam, mówimy o oszczędności. Co jeszcze? Agencja na pewno nie znajdzie dla Twojego projektu czasu od już. A nawet jeśli, to prawdopodobnie będzie przed Tobą długi czas oczekiwania na pierwsze szlify projektu, a później jeszcze wdrożenie go w życie. Agencje mają swoje wypracowane schematy działania, których się trzymają.

A jeśli masz pieniądze?

W takim przypadku uderzaj do agencji. Jak wspomniałem wcześniej. W agencji nad Twoim projektem pracują ludzie, z których każdy ma swoją działkę. Jedna osoba zajmuje się interfejsem, druga designem, trzecia samą grafiką. Cały zespół jest wtedy do Twojej dyspozycji za pośrednictwem Project Managera.

Podsumowanie

Przeanalizujmy sobie jeszcze raz plusy oraz minusy posiadania projektu graficznego strony internetowej. W pierwszej kolumnie znajdziesz plusy takiej sytuacji zarówno z punktu klienta jak i dewelopera. W drugiej kolumnie znajdują się minusy jakie płyną z pracy bez graficznego przedstawienia strony internetowej.