Nardzędzia do tworzenia stron www dla grafików

Projektowanie stron internetowych to naprawdę fajna praca! Wykorzystujesz poczucie estetyki, wiedzę i doświadczenie z zakresu user experience. Mając to wszystko zaprojektujesz stronę, która zrealizuje cel Twojego klienta. Takie strony internetowe są najlepsze! Szukasz praktycznych narzędzi, z którymi zaczniesz przygodę z projektowaniem stron internetowych? A może chcesz to usprawnić? Jesteś w dobrym miejscu – mamy dla Ciebie 13 narzędzi, które sprawią, że poza byciem grafikiem, szybko staniesz się webmasterem!

Nardzędzia do tworzenia stron www dla grafików
Narzędzia, dzięki którym oprócz grafika zostaniesz także webmasterem

Każdy projekt strony internetowej zaczyna się od… pomysłu. Gdy znasz cel, który ma spełniać strona, to wiesz, jak tworzyć jej strukturę. W końcu zadowolony klient, który dostaje stronę, która przynosi efekty, to najlepszy ambasador marki. Twojej marki.

Znasz ten proces: zlecenie i pomysł na stronę, potem wstępny projekt, akceptacja, poprawki… Kiedy klient zaakceptuje Twój projekt – to wszystko powinno być przeniesione do internetu. Wbrew pozorom – nie musi tego robić programista, ale… możesz zrobić to Ty!
Ale po kolei.

 

Projekt na papierze

Na pewno dobrze mieć pod ręką jakiś szkicownik. Ołówek i kilka kartek. Nawet takich zadrukowanych z jednej strony. Oszczędzasz, a do tego masz cały czas pod ręką papier. Wbrew pozorom projektowanie strony www na papierze jest ważne. Coś, co Ci się opatrzy na monitorze, szybko może się okazać jasne na papierze.
Dlatego kartka i ołówek są nie do zastąpienia. Chociaż do projektowania stron internetowych przydają się też bardziej… digitalowe narzędzia.

 

Projekt

To zależy od tego, co lubisz. Na pewno masz swój ulubiony ekosystem. Do niedawna Photoshop był najpopularniejszy. Teraz pojawiło się dużo alternatyw, stworzonych z myślą o projektowaniu stron www i aplikacji. Ich największą zaletą jest możliwość pracy w krzywych i generowanie plików svg, które przyspieszają działanie strony i są w pełni responsywne.

Standardem w projektowaniu stron zaczyna być Adobe Xd. To element pakietu Adobe, w którym zbudujesz projekt strony, ale nie tylko. Jest w pełni kompatybilny z pozostałymi elementami pakietu (InDesign czy Photoshop), więc przeniesiesz do niego obiekty z pozostałych programów pakietu. Adobe Xd ma masę przydatnych funkcji i znacznie usprawnia projektowanie interfejsu. Zwłaszcza gdy zależy Ci na stworzeniu czegoś przyjaznego użytkownikowi ;).

Alternatywą jest Sketch – aplikacja do projektowania i tworzenia makiet. Z powodzeniem użyjesz jej do zbudowania strony klientowi. Stworzysz w niej zarówno szkic jak i ostateczną wersję projektu. Dużym minusem tej aplikacji jest to, że użyjesz jej tylko na Macu. Ale jeśli pracujesz w tym ekosystemie – to doskonały wybór.

Oba te narzędzia są płatne – Xd jest elementem pakietu Adobe, a Sketch też jest płatny. Fajną alternatywą, w modelu freemium, jest Figma. To narzędzie SaaS-owe, czyli takie, z którego korzystasz w przeglądarce. W dużym skrócie – bardzo przypomina skrzyżowanie Sketcha i Xd, a do tego możesz w nim pracować za darmo. Na początek przygody z projektowaniem stron – jak znalazł! Figma – podobnie jak inne narzędzia – wspiera grafiki wektorowe.
Skoro już teraz wiesz, czego możesz użyć do zrobienia projektu strony, to zobacz, co pomoże Ci go uzupełnić treścią.

 

Kolory, placeholdery i stocki

Na początku projektowania strony masz jakieś wytyczne, strukturę, ale materiałów… najczęściej nie masz. Oznacza to sporo niedogodności, bo musisz się wykazać pomysłowością. Możesz wykorzystać jeden z wielu darmowych stocków, ale oznacza to też zabawę z doborem zdjęć i tak dalej.

Darmowe stocki mają wadę – wszyscy znają te najpopularniejsze. Te zdjęcia mogą się opatrzyć. Jeśli zależy Ci na unikalnych zdjęciach w projekcie, to poszukaj tych mniej popularnych zbiorów (darmowych). Unplash, Kaboompics czy Avopix to dobre miejsca, żeby znaleźć fajne i darmowe zdjęcia.

Oczywiście projekt, w którym klient zadeklarował, że zdjęcia będą za jakiś czas i to on je podeśle, jest wyjątkiem. Nie musisz się martwić o grafiki, wystarczy, że użyjesz placeholderów. W większości przypadków to wystarczy.
Fajnym patentem jest wykorzystanie loga klienta, wyciągnięcie z niego kolorów i stworzenie osobnej, związanej z nią palety. To dobre rozwiązanie, gdy robisz projekt firmie, która nie ma jasnej księgi znaku.

Użyjesz to tego Pictaculous.com. Ta aplikacja wyciąga kolory ze zdjęcia i tworzy na ich podstawie harmonijną paletę kolorów. To świetny początek do stworzenia identyfikacji graficznej strony. Zwłaszcza gdy klient ma już logo ;).
Mając taką paletę kolorów możesz stworzyć unikalne placeholdery w formie grafik wektorowych, na przykład w Trianglify.io. To naprawdę fajne narzędzie, które pozwoli Ci urozmaicić wygląd surowego projektu lub dodać charakteru wielu jego elementom.

Wisienką na torcie dobrego projektu jest typografia. Pewnie wiesz, że ładne fonty na stronie potrafią zrobić ogromną różnicę. Prostym narzędziem są Google Fonts – dopasujesz w nich kroje do siebie w kilka sekund. Potem wystarczy tylko dodać je do projektu i gotowe. Dużym plusem Google Fonts jest to, że szybko dodasz je do strony www.

 

Poprawki

Na każdym etapie projektu jest taki moment, w którym trzeba go skonsultować z klientem; nanieść poprawki i odpowiedzieć na komentarze. Możesz się bawić w maile, ale często trudno jest powiedzieć o jakie poprawki chodzi.
Bardzo przydatnym narzędziem do wymiany uwag jest Notism.io. To aplikacja, w której klient szybko naniesie swoje uwagi, a Ty się do nich odniesiesz. Łatwo dodać komentarz i podzielić się spostrzeżeniami. Oczywiście jest też chmura Adobe, ale jest powiązana z pakietem. Więc jeśli korzystasz z Xd do projektowania stron, to może być narzędzie do wymiany uwag.

Jestem pewien, że to znacznie ułatwi Ci pracę z klientem przy projekcie. Takie profesjonalne podejście do tematu na pewno sprawi dobre wrażenie. Od tego już tylko krok do zdobycia klienta, który będzie ambasadorem Twojej marki. Innymi słowy: zacznie Cię polecać innym.

Do porządkowania pracy warto użyć Trello. Na początku podpisujecie pewnie jakąś umowę lub ustalacie rozkład prac. Wprowadzasz to do Trello, ustalasz ramy projektu, kolejne kroki, terminy. Dzięki temu łatwiej ustalić i egzekwować limit poprawek lub terminy. A Tobie – trzymać się rytmu pracy. Takie granie w otwarte karty z klientem jest zawsze w cenie.

 

Kiedy projekt strony jest gotowy

Możesz go przekazać klientowi, żeby jego programiści przenieśli go do internetu. Możesz też to zrobić samodzielnie. Nawet jeśli nie masz doświadczenia w programowaniu, w WebWave przeniesiesz zaakceptowany projekt do sieci w kilka minut. Gotowe grafiki, animacje, układ czy kolory z łatwością przeniesiesz do gotowej strony internetowej.

Do tego interfejs graficzny z prowadnicami i praca na warstwach sprawią, że poczujesz się jak w domu. Ułożysz elementy dokładnie tak, jak w programach graficznych – co do piksela. Bez programowania przeniesiesz swój projekt do internetu.
Dopniesz do takiej strony w kilka chwil wszystkie narzędzia niezbędne do dobrego działania – domenę, Google Search Console czy Google Analytics. A jeśli brakuje Ci jakiegoś elementu, to możesz go dodać w formie kodu HTML.

To wszystko pozwoli Ci to na jeszcze jedno – świadczenie kompleksowych usług. Czyli klient, który zgłosi się do Ciebie otrzyma komplet: od projektu, do działającej strony internetowej w sieci. Dzięki temu nie musisz uzależniać efektu końcowego swojej pracy od tego, czy masz zaufanego człowieka od programowania lub czy programiści klienta zrobią wszystko dobrze. Całość przygotujesz samodzielnie.

Wielu klientów ceni takie rozwiązania. Gdy jedna osoba robi jakiś projekt od początku do końca, to zmniejsza szansę na to, że coś się przeciągnie. Znasz swój projekt, wiesz jakie efekty mają być na stronie – zostaje to tylko wdrożyć :).

Jak widzisz, zrobienie kroku od grafika do webmastera jest jeszcze łatwiejsze! Nie musisz się ograniczać do jednej profesji, zwłaszcza że rozszerzenie działalności jest prostsze, niż się spodziewasz!

Artykuł powstał we współpracy z WebWave – polskim kreatorem stron internetowych. Pozwala przenieść w kilka minut kompletny projekt strony www z pliku graficznego do internetu.