Graficzne tworzenie stron, czyli jak przenieść projekt strony do sieci?

Graficzne tworzenie stron internetowych? Na pewno przynajmniej część z nas kojarzy jakiś program do robienia grafik i projektowania. W zależności od typu mogą korzystać z nich „zwykli użytkownicy”, graficy czy  np. UX designerzy, którzy korzystają m.in. z narzędzi do makietowania – zarówno on-line, jak i na dyskach komputerów.

Makieta, a graficzne tworzenie stron

Narzędzia do makietowania pozwalają między innymi na stworzenie projektu strony internetowej bez konieczności robienia go w sieci.
Dzięki takiej makiecie treści, które mają znaleźć się na stronie, są uporządkowane- zarówno tekstowa, graficzna jak i ta, która nie klasyfikuje się do żadnych z tych dwóch kategorii (odstępy, widgety etc.)

Wcześniej wykonany brief  i makieta, to jednak dopiero część drogi, jaką musimy odbyć, aby otrzymać zadowalający finalny efekt strony internetowej.  Graficzne tworzenie stron, to bardziej złożony proces. Między innymi właśnie dlatego osoby zajmujące się tym zawodowo (jak i te zlecające pojedynczy projekt)- agencje, freelancerzy itd. najczęściej współpracują jeszcze z programistami.
W ten sposób łączą siły Ci, co tworzą projekt wizualny z tymi, którzy wdrażają go w życie za pomocą kodu.

Graficzne tworzenie stron- alternatywa do tradycji

Poza tradycyjną formą tworzenia stron w stylu- brief-makieta-wdrażanie przez programistów, możemy postawić na mniej skomplikowane rozwiązanie, które z roku na rok zyskuje na popularności, a poza tym jest ogólnodostępne dla każdego. Mówię oczywiście o kreatorach stron bo o czym by innym (w końcu nazwa mojej strony zobowiązuje).
Wytyczne od Google z czasem coraz bardziej się zacieśniają i dochodzi ich coraz więcej- czas ładowania, RWD, trzymanie się poprawnej polityki SEO i wiele więcej. Nie liczy się już tylko samo stworzenie/posiadanie strony, ale też to aby była ona dobra.

Jeśli grafik nie posiada umiejętności kodowania, ale ma niezwykłe poczucie estetyki i zna się na web designie, to nic straconego. Z pomocą przychodzą właśnie takie programy graficzne do tworzenia stron, jak kreatory. Umożliwiają one projektowanie na zasadzie drag&drop. Większość z tych, które znajdziemy na rynku, będzie oferowała również szablony, z których możemy skorzystać podczas tworzenia. Warto jednak sprawdzić, jakie mamy możliwości ich edycji, czy też dodawania oraz odejmowania znajdujących się na nich poszczególnych elementów.

Graficzne tworzenie stron, czyli współpraca UX & UI

UX designerzy, czyli specjaliści od robienia interfejsów i stron przyjaznych użytkownikom, znają się najczęściej na całym procesie tworzenia stron. A przynajmniej – ich projektowania.

Począwszy od zarysu strony i jej struktury na papierze, poprzez tworzenie łatwego w obsłudze interfejsu i nawigacji, aż do porządkowania treści i ich atrakcyjnej prezentacji.

UXowcy pracują najczęściej w narzędziach do szkicowania i (/lub) makietowania. To właśnie w nich powstają pierwsze zarysy stron i kształtuje się ostateczny kształt projektu. Większość dobrych projektów stron ma swój początek na papierze, dlatego wciąż wielu projektantów stron zaczyna pracę od złapania za ołówek lub pisak. Takie podejście okazuje się jednym z najskuteczniejszych, bo pozwala na łatwe zmienianie i prezentację projektu. Jest to również bardzo praktyczne w momencie, gdy należy pewne kwestie przedyskutować. Wiele agencji marketingowych czy interaktywnych działa w ten sposób. Najpierw szkicują strukturę treści, a następnie zajmują się zagadnieniami związanymi ze skutecznym rozmieszczeniem elementów na stronie. Wciąż na papierze.

Dopiero gdy projekt jest już wyraźnie zarysowany, przenoszony jest do programu do makietowania. Dzięki temu strona zaczyna wyglądać jak strona już w pierwszej iteracji takiego szkicu.

W czym powstają makiety i szkice projektów stron internetowych?

Narzędzi do szkicowania czy makietowania nie brakuje.

Jeszcze kilka lat temu najpopularniejszy był Photoshop, ponieważ pozwalał na łatwe wykonanie projektu strony i przeniesienie go z papieru na ekran komputera. Nadal cieszy się popularnością, ale jedną z jego wad będzie to, że nie działa on w oparciu o grafiki wektorowe, ale rastrowe (czyli piksele, a nie krzywe). Oznacza to, że kolejne elementy makiet można powiększać do jakiegoś momentu, bo mają konkretną rozdzielczość. A po przekroczeniu tej rozdzielczości okazuje się, że grafika przestaje być wyraźna.

To spory kłopot zwłaszcza w tych projektach, które zawierają w sobie dużą ilość obiektów, niebędących zdjęciami.

Między innymi właśnie dlatego w środowisku web designerów dużą popularnością cieszą się programy do szkicowania i makietowania działającego w oparciu o obiekty wektorowe. Wśród nich wymienić mógłbym m.in. Sketcha (obsługiwany tylko na Mac’ach i ogólnie systemie MacOS), Adobe XD czy open source’owy Pencil Project. Głównym programem, który wiedzie obecnie prym w tej kategorii, jest chyba Figma, z której można korzystać zarówno na Windowsie, jak i na Macach.

Tego typu narzędzia pozwalają na tworzenie makiet opartych o grafiki wektorowe, które można potem przenieść do sieci. Nie dają one jednak opcji opublikowania strony, a to byłby wielki plus. Są jednak aplikacje, które pozwalają nam na kompletne dopięcie projektu. Mówię oczywiście o kreatorach takich jak WebWave. Więcej na ich temat znajdziecie np. w moim rankingu.

Graficzne tworzenie stron przy użyciu narzędzi do makietowania- dlaczego warto?

Tworzenie stron internetowych opartych o obiekty wektorowe jest ważne m.in. z trzech kluczowych powodów:

• grafiki wektorowe (format .svg) są lżejsze- mają mały rozmiar;
• są idealne do tworzenia responsywnych stron internetowych;
• mogą być powiększane w nieskończoność, nie tracąc tym samym na jakości.

Moim zdaniem te punkty naprawdę przemawiają za wykorzystaniem obiektów wektorowych do stworzenia stron www.

Projekty zbudowane w którymś z programów do makietowania mogą być wyeksportowane jako pliki rastrowe lub wektorowe. Zamiana plików w krzywych na takie w pikselach wydaje się więc bezsensowna. Zwłaszcza że format .svg nie jest już niczym niespotykanym.

Same przeglądarki nie mają kłopotu z wyświetlaniem obiektów wektorowych na stronach, więc… czemu nie wykorzystać ich na projektach platform internetowych ? Zwłaszcza że w przypadku obiektów czy ornamentów ten format sprawdza się niemalże idealnie.

Programy do makietowania pozwalają na łatwe uporządkowanie projektu strony. A to zdecydowanie duża zaleta, zwłaszcza dla projektantów stron lub ludzi, którym zależy na zaaranżowaniu (zorganizowaniu) praktycznej, ale też i przy okazji estetycznej strony www.

Przenoszenie graficznego projektu strony do sieci (czyli jak zamienić makietę w stronę)

Wspomniałem już o współpracy projektant (UX designer + UI) i programista. Znam osobiście wiele takich zespołów (dwu- i więcej osobowych). Projektant wie dokładnie, na co pozwala konkretny program do robienia stron, w którym pracuje programista. Programista nie jest zaskakiwany „rozbuchanymi” i trudnymi (lub niemożliwymi) do zaimplementowania projektami.

Taka symbioza sprawdza się najlepiej, a mówię to z własnego doświadczenia.

Wielu grafików działa również „solo”, nie współpracując z innymi specjalistami. Czasem opierają się o znane ścieżki, które oferują im popularne narzędzia takie jak WordPress i współpracujący z nim Elementor.

To rozwiązanie pozostawia sporo do życzenia, zwłaszcza jeśli chodzi o późniejszą pracę nad optymalizacją strony. Sam interfejs również pozostawia wiele do życzenia.  Niby da się zrobić  dużo, pracować w blokach, dostawiać obiekty i tak dalej, ale jednak WordPress ma wiele „ale”. Do tego dochodzi możliwość wysypania się czegoś na styku wtyczka-szablon-CMS-kreator. Wbrew pozorom to połączenie często sprawia trudne do zidentyfikowania problemy i warto być na nie wyczulonym.

Graficzne tworzenie stron, czyli jak najłatwiej przenieść projekt do sieci

Jeśli ktoś z Was pracuje w którymś z programów do makietowania i zależy mu na przeniesieniu tego projektu w skali 1:1 do internetu, to niestety w wielu przypadkach trzeba przygotować się na kompromisy- czy to w kontekście ilościowym, ponieważ po prostu nie zawsze wszystko da się przenieść, jak i jakościowym (po przeniesieniu elementu do projektu i późniejszej publikacji możemy utracić pierwotną jakość lub ustawioną wcześniej funkcjonalność) oraz czasowym.

Żeby przeprowadzić skutecznie cały proces graficznego tworzenia stron – od projektu, do działającej strony – musimy zwrócić uwagę, czy konkretne narzędzie do tworzenia stron pozwala na:

• pracę z grafikami wektorowymi (i ich umieszczenie na stronie, zwłaszcza formatu .svg);
• pracę w warstwach (dużo łatwiejsze komponowanie strony i przenoszenie obiektów);
• ułatwia optymalizację strony.

Wiele kreatorów stron pozwala na wykorzystanie plików wektorowych, jednak praca w warstwach jest wciąż wyjątkiem. To wygląda jeszcze mniej ciekawie, gdy zależy nam na kwestiach związanych z optymalizacją strony czy jej przyśpieszeniem. Wiele narzędzi, które pozwalają na wrzucenie projektu graficznego strony, w dalszej perspektywie potrafi utrudnić życie.

Co mam na myśli? Chociażby konieczność ciągłych aktualizacji (żeby mieć pewność, że wszystko jest okay z wtyczkami. Nie ukrywam mówię też tutaj o kreatorach stron na WordPressie) lub tak drobnym problemem jak nagła podwyżka po roku (niestety „słynie” z tego kilak narzędzi, które znajdziemy na rynku). Na koniec jeszcze wrócę do WebWave, ponieważ pozwala on na pracę na warstwach oraz z wcześniej wspomnianymi przeze mnie plikami wektorowymi, co jest sporą zaletą! Naprawdę. Na przykład Wix daje tylko możliwość pracy z formatami wektorowymi.

Podsumowanie

Graficzne tworzenie stron internetowych to zarówno nie lada wyzwanie, jak i jednocześnie konieczność. Teraz nie wystarczy, żeby strona tylko i wyłącznie „działała”. Ma ona jeszcze wyglądać i być wygodna w obsłudze. Tworząc projekt wizualny jesteśmy to znacznie łatwiej osiągnąć.