Graficzne tworzenie stron internetowych? Na pewno znasz wiele programów do robienia grafik i projektowania. Wielu UX designerów korzysta z narzędzi do makietowania – zarówno on-line, jak i na dyskach komputerów.

Narzędzia do makietowania pozwalają między innymi na stworzenie projektu strony internetowej – bez konieczności robienia go w sieci.
Taka makieta porządkuje treści na stronie i ogółem jej zawartość oraz wygląd.

Taki projekt strony to jednak tylko początek drogi do stworzenia własnej strony internetowej. Między innymi dlatego graficy i projektanci najczęściej współpracują blisko z programistami.
W końcu ktoś musi wytyczyć drogę od projektu do działającej strony w sieci.

Za wygląd odpowiadają projektanci. Za pojawienie się strony w sieci: programiści (nie należy ich nazywać informatykami, bo się obrażają).

Ale da się inaczej. Bo – między innymi dzięki kreatorom stron – graficzne tworzenie stron jest jeszcze prostsze.
A patrząc nawet na nowe wytyczne Google dotyczące wpływu zachowania użytkowników na stronie na jej pozycję w wynikach wyszukiwania – coraz ważniejsze staje się zrobienie dobrej strony.

Więc: jak grafik może zrobić (skuteczną) i dobrze działającą stronę www?

Graficzne tworzenie stron, czyli UX designer siada do pracy

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.

UX designerzy pracują najczęściej w narzędziach do szkicowania i/lub makietowania. To 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. Oraz jego przedyskutowanie.

Wiele agencji marketingowych czy interaktywnych działa w ten sposób.

Najpierw szkicują strukturę treści. Potem ogarniają zagadnienia związane 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, bo pozwalał na łatwe zrobienie projektu strony lub przeniesienie go z papieru na ekran komputera.

Największą wadą tego narzędzia okazuje się jednak 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 projektach, w których jest sporo obiektów, a mało zdjęć.

Między innymi dlatego w środowisku UX designerów dużą popularnością cieszą się programy do szkicowania i makietowania działającego w oparciu o obiekty wektorowe. Wśród nich można wymienić Sketcha (tylko na Maca), Adobe XD czy open source’owy Pencil Project.

Pozwalają one na tworzenie makiet opartych o grafiki wektorowe, które można potem przenieść do sieci (o tym za chwilę).

Dlaczego warto zabierać się za graficzne tworzenie stron przy użyciu narzędzi do makietowania (wektorowych)?

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

Te trzy powody mocno przemawiają za wykorzystaniem obiektów wektorowych, stworzonych w procesie graficznego tworzenia stron, na stronie internetowej.

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ę bezsensowna, zwłaszcza że format .svg nie jest niczym egzotycznym (chociaż WordPress dalej nie obsługuje go natywnie i trzeba posiłkować się wtyczkami, które niekiedy nie działają).

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

Do tego 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 ogarnięciu ładnej strony www.

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

Wspomniałem już o duetach projektant (UX designer) – 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 i mówię to z własnego doświadczenia.

Jednak wielu grafików działa w odosobnieniu. Czasem opierają się o znane ścieżki, które oferują im znane i dobrze rozgryzione narzędzia. Na przykład WordPress i Elementor czy inny kreator stron dla WordPressa.

To rozwiązanie pozostawia sporo do życzenia, zwłaszcza jeśli chodzi o późniejszą pracę nad optymalizacją strony. Również interfejs jest… no taki sobie. Niby da się zrobić super dużo, pracować w blokach, dociągać obiekty i tak dalej, ale jednak to dalej WordPress, razem ze swoimi wadami. Do tego dochodzi możliwość wysypania się na styku wtyczka-szablon-CMS-kreator. Wbrew pozorom to połączenie często sprawia trudne do zidentyfikowania problemy i warto być na nie wyczulonym.

Pisałem już wcześniej o idealnych kreatorach stron dla grafików. Jednak trzeba dodać coś jeszcze.

Graficzne tworzenie stron, czyli jak najłatwiej przenieść projekt do sieci (nawet bez kodowania i dbania o serwery FTP)

Jeśli pracujesz w którymś z programów do makietowania i zależy Ci na przeniesieniu tego projektu w skali 1:1 do internetu, to często musisz przygotować się na kompromisy.

Ilościowe (nie zawsze wszystko da się przenieść), jakościowe (nie zawsze w tej jakości/z zachowaniem funkcjonalności) i czasowe.

Oczywiście: idealnie byłoby gdyby taki projekt dało się, jak za dotknięciem czarodziejskiej różdżki, przenieść pod wybrany adres www.

No… nie da się tak.

Co wcale nie oznacza, że nie ma takiej możliwości (lub zbliżonej funkcjonalnie).

Żeby przeprowadzić skutecznie cały proces graficznego tworzenia stron – od projektu, do działającej strony – musisz 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.

Wbrew pozorom takie trzy rzeczy skutecznie mogą odstraszyć jeśli chcesz przenieść projekt graficzny do sieci.

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 Ci 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.

Na przykład koniecznością ciągłych aktualizacji (żeby mieć pewność, że wszystko jest OK z wtyczkami; tak mówię o kreatorach stron na WordPressie) lub tak drobnym problemem jak nagła podwyżka (po roku „słynie” z tego ClickWeb od home.pl). Z kolei WebWave pozwala na pracę w warstwach i z plikami wektorowymi, co jest naprawdę sporą zaletą! Na przykład Wix daje tylko możliwość pracy z formatami wektorowymi.

 

Zobacz jak wygląda ranking najlepszych kreatorów stron.