Okładka artykułu Proces projektowania stron internetowych — Jakie kroki należy przejść?
Poradniki Teoria

Proces projektowania stron internetowych

Jakie kroki należy przejść?

Zdjęcie autora Aleksandra Tulibacka
0

Jak wygląda proces projektowania strony internetowej? Na co zwrócić uwagę i jak w ogóle podejść do tematu? W dzisiejszym artykule postanowiłam podzielić się z Wami tym, jak wygląda mój briefing, makietowanie, projektowanie oraz przekazywanie plików programiście. 

Briefing

Jak każdy proces projektowy, tworzenie strony internetowej musi rozpocząć się od poznania wymagań i szczegółów na temat projektu, jaki wykonujemy. Można to zrobić rozmawiając z klientem na żywo, telefonicznie lub przez Internet, albo skorzystać z drogi mailowej i stworzyć dokument, który pozwoli określić wymagania formie pisemnej. 

Niezależnie od drogi, jaką wybierzemy, warto przygotować sobie dokument z listą pytań, które chcemy zadać klientowi. To szczególnie ważne także podczas spotkań na żywo, ponieważ nie możemy pozwolić sobie na improwizację i bazowanie jedynie na tym, co chce nam przekazać klient - on nie zawsze musi wiedzieć, co powinien powiedzieć, aby pozwolić nam na stworzenie odpowiedniego projektu. Z listy pytań można ewentualnie zrezygnować w przypadku, gdy pracujecie w branży wiele lat i odbyliście setki takich spotkań. 

W mojej pracy zawodowej - ze względu na to, że większość klientów mieszka dość daleko - zazwyczaj ograniczam się do kontaktów mailowych. Jeśli spotkania i rozmowy się zdarzają, zazwyczaj jedynie uzupełniają one komunikację mailową. Pozwala mi to na zachowanie przejrzystości korespondencji i uniknięcie niedomówień. Nie ma nic gorszego niż sytuacja w której będziemy zmuszeni udowadniać, kto ma rację i kto lepiej pamięta ustalenia. 

Nawet jeśli współpracę opieracie na kontaktach na żywo, albo rozmowach telefonicznych, gorąco polecam spisywanie najważniejszych ustaleń i akceptowanie tej korespondencji z klientem dodatkowo. O co pytać? To temat na inny artykuł. Jeśli chcecie poznać moje spojrzenie - dajcie znać w komentarzu. 

Szkice na kartce

Pierwszym etapem pracy jest spisywanie wszystkich ustaleń, wyodrębnienie sekcji i porządkowanie myśli. Wszystko to odbywa się na kartce papieru. To na niej szkicuję także bardzo wstępną strukturę strony i planuję jej zawartość. Szkice te nie są nikomu pokazywane, służą mi jedynie jako baza do kolejnego etapu - makietowania.

Makiety stron

Od kilku lat zmieniłam swój proces projektowy i pierwszą rzeczą, jaką daję klientowi do akceptacji nie jest projekt graficzny. Skupiłam się na funkcjach jakie ma mieć strona i jej użyteczności. W do tego celu wykorzystuję makiety, zwane też czasem w wireframes, czyli po prostu szkielety strony, które zawierają już docelowe treści (jeśli mamy je już na tym etapie). Ich głównym celem jest ustalenie dokładnej struktury strony, jej układu. Dzięki temu wraz z klientem możemy skupić się na tym, jakie zadania ma spełniać witryna, gdzie mają znaleźć jakie przyciski i w jaki sposób odbywać ma się nawigacja. 

Oczywiście zdarzają się strony, w których proces makietowania jest pominięty. Jest tak w wtedy, gdy dokładnie wiem jaka stylistyka odpowiadać będzie klientowi, wtedy gdy tworzymy bardzo niestandardową witrynę oraz przypadku projektowania kolejnych realizacji dla tej samej osoby – gdy bazujemy na grafice, która już istnieje. W przeciwnym wypadku pominięcie makiet, które może wydawać się oszczędnością czasu, bardzo często sprawia, że całość realizacji się przeciąga. 

Bardzo ważne jest jednak abyśmy wytłumaczyli klientowi czym makiety są, po co je tworzymy, jaki cel mają spełniać i co dają obu stronom. Często zdarza się, że klienci którzy nie są obyci z technologiami internetowymi, nie rozumieją ich idei. Zdarzyło mi się już, że brak odpowiedniego wytłumaczenia tego, co przesyłam sprawił, że klient się wystraszył, bo pomyślał, że docelowa strona będzie tak prosta, jak przesłana grafika.

A w czym tworzyć makiety? Istnieje wiele aplikacji, które mogą nam w tym pomóc. Są rozwiązania internetowe oraz programy które zainstalować możemy na komputerze. Ja polecam Wam tworzenie ich w tym samym programie, w którym tworzyć będziecie projekt strony. Moim przypadku jest to Adobe XD. Dzięki wykorzystaniu tego samego programu najpierw tworzę makietę, a później na podstawie jednego pliku, dodaję grafikę, zmieniam kolory, fonty i inne elementy. Takie podejście sprawia, że nawet kiedy klient nie miał do makiet żadnych uwag, ich tworzenie nie jest czasem straconym, ponieważ później tą strukturę wykorzystujemy i tak naprawdę przyspiesza ona tworzenie docelowej grafiki.

Weryfikacja przez klienta

Etap makietowania kończy weryfikacja ich przez klienta. Wspólnie ustalamy czy określona struktura spełnia wymagania czy jednak wymaga jakichś poprawek. 

Projektowanie strony

Po zakończeniu jednej lub kilku tur makietowania i ich ostatecznej akceptacji przez klienta, przechodzę do procesu projektowania strony czyli mówiąc obrazowo – jej „ozdobienia”. Na początku tworzę jedynie projekt strony głównej i przesyłam ją klientowi do akceptacji. Pozwala nam to na ostateczne ustalenie stylistyki i uniknięcie niepotrzebnych poprawek wykonywanych na większej ilości widoków. Po akceptacji strony głównej rozpoczynam projektowanie pozostałych podstron - dzięki zaakceptowaniu makiet i stylistyki, zazwyczaj nie ma do nich uwag.

Większość ze stron, które tworzę opiera się na sekcjach czyli powtarzających się na całej stronie elementach. Po akceptacji wyglądu podstron z projektu, do osobnego widoku kopiuje te sekcje i projektuje dla nich widoki mobilne. Zazwyczaj nie akceptuje ich z klientem. Robię to tylko wtedy, gdy wyraźnie o to poprosi i w przypadku podstron, w których mogą wystąpić jakieś problemy czy wątpliwości co do marginesów i wielkości konkretnych elementów. Pozostałe widoki responsywne tworzone są nie dla klienta, a dla programisty – tak, aby mógł zakodować stronę bez mojej ingerencji. Oczywiście czasem pojawiają się pytania i wątpliwości, jednak jeśli chodzi o wielkości fontów, odstępy czy marginesy - nie powinniśmy pozostawiać tego do decyzji programisty. Nie od tego jest.

Oprócz projektów responsywnych, zanim przekażę stronę do kodowania, tworzę także jeszcze jeden dodatkowy widok w którym zamieszczam wszystkie przyciski i elementy które nie są widoczne na pierwszy rzut oka. Możemy nazwać tą część rodzajem uproszczonego design systemu. W zależności od projektu, na tej warstwie pokazane są przyciski we wszystkich wersjach jakie występują na stronie, efekty po najechaniu na nie, formularze w różnych stanach i komunikaty. Dodatkowo wygodnie jest pokazać tam efekty hover różnych części strony. Można to zrobić także na projekcie w miejscu gdzie ten element występuje. 

Przekazanie plików

Niezależnie od tego jak pracujemy, zazwyczaj musimy przekazać także pliki programiście. Istotne jest, aby sam projekt był w łatwej do otwarcia formie oraz aby przekazać dodatkowe pliki potrzebne do jej zakodowania. W przypadku korzystania z Adobe XD, bardzo wygodnie można przekazać pliki korzystając z wbudowanego w aplikację udostępniania. Pozwala ona także na proste kodowanie bo generuje przystępny CSS i umożliwia pobieranie plików w różnych formatach. Początkowo, podczas kodowania stron korzystaliśmy z tego rozwiązania, okazało się jednak że nie zawsze można ufać generowanym plikom, w szczególności problemy pojawiały się przy plikach SVG oraz takich które miały nałożone efekty. 

Od tego czasu zamiast pozwalać programiście samodzielnie pobierać pliki, ja eksportuje je z programu i udostępniam w osobnym folderze. Dodatkowo ważne jest, aby w paczce dla programisty znalazły się fonty których użyliśmy (oczywiście o ile licencja nam na to pozwala). 

Oddanie strony

Ostatnim etapem jest kodowanie strony. Nie jest to mocno związane z naszą pracą, nie będę więc zagłębiać się w ten temat szczególnie długo. Kiedy jednak pracujemy zewnętrznym programistą warto, abyśmy chociaż w pewnym stopniu sprawowali nadzór nad tym jak strona będzie ostatecznie wyglądać. Często zdarza się że koderzy do projektu podchodzą bardzo luźny sposób i z dobrze zaprojektowanej strony z poprawnymi światłami i przemyślaną interlinią wychodzi potworek, który tylko na pierwszy rzut oka przypomina przygotowany przez nas projekt. Warto być tego świadomym ponieważ klient  może mieć później o to pretensje.

A jak wygląda Wasz proces projektowy? Czy macie jeszcze jakieś etapy których ja nie wykonuję? A może aplikacje z których korzystacie narzucają inne, ciekawe wzorce projektowe które warto wdrożyć codzienny tryb pracy? Dajcie znać w komentarzach.

To może Cię zainteresować