Początkujący webdesigner: 10+ najlepszych darmowych narzędzi

Wśród początkujących freelancerów panuje przekonanie, że jedyna branża, jaka na początek musi sporo zainwestować w pracę zdalną, to projektanci i graficy komputerowi. Tymczasem jeśli chcesz projektować layouty stron www, również potrzebne ci będzie kilka narzędzi, bez których trudno wyobrazić sobie pracę zdalną i nie wszystkie zaliczają się do tanich. Programy graficzne, zintegrowane środowiska programistyczne czy narzędzia do zarządzania projektami to tylko początek listy.

Jako początkujący webdesigner możesz jednak korzystać z ich darmowych odpowiedników lub postawić na narzędzia, które zawsze były za darmo, ale jakością nie ustępują komercyjnym programom.

Tych ostatnich jest zresztą całkiem sporo: od narzędzi do kodowania aż po zintegrowane środowiska programistyczne; od liczników czasu pracy po narzędzi do zarządzania projektami dla bardziej zaawansowanych użytkowników. Każdy, kto chce zostać programistą, może znaleźć optymalny zestaw narzędzi, niemal skrojony pod swoje potrzeby. Jedynym wyzwaniem okazuje się… przetestowanie każdego i wybór najlepszych.

Część tej pracy wykonaliśmy za ciebie: tak powstała nasza lista darmowych narzędzi dla początkujących webdesignerów o ograniczonym budżecie. Gwarantujemy, że dzięki niej bez dodatkowych nakładów wykonasz pierwsze projekty i zarobisz pierwsze pieniądze na pracy zdalnej.

 

10+ najlepszych darmowych narzędzi dla początkujących webdesignerów

Podstawą twojej pracy będzie… przeglądarka, ale te domyślnie i zawsze są darmowe. Obecnie każda przeglądarka ma wbudowany zestaw narzędzi dla programistów, które umożliwiają „podejrzenie” kodu lub zbadanie elementu.

Mimo to wciąż jako najlepszy wybór polecany jest Chrome – jest szybki, ma przejrzysty layout, a jako dodatkowy plus można wymienić szeroką gamę wtyczek i dodatków dla programistów.

 

1. Edytor kodu: Notepad++

To jedno z tych narzędzi, na które nie powinieneś wydać ani grosza, ponieważ wybór darmowych edytorów jest tak duży, że na pewno znajdziesz coś dla siebie. Jednym z zasłużenie najpopularniejszych jest Notepad++: jest banalnie prosty w obsłudze i nie wymaga wtyczek, dodatków ani żadnych czasochłonnych operacji do wykorzystania pełni jego możliwości.

 

2. IDE Netbeans

Jeśli sam edytor kodu to za mało, możesz skorzystać z jego bardziej rozbudowanej wersji: zintegrowanego środowiska programistycznego – narzędzia do tworzenia, testowania i modyfikowania oprogramowania.

Netbeans obsługuje między innymi HTML5 i JavaScript, co może mieć dla ciebie znaczenie podczas kodowania strony. Jeśli z czasem rozszerzysz swoje pole działania lub zaczniesz pracować w takich językach, jak PHP, Java lub C/C++, nie będziesz musiał zmieniać IDE: Netbean obsługuje również te języki.

 

3. SFTP: FireFTP

FTP będzie ci potrzebne do przenoszenia plików między hostami za pomocą sieci, np., między twoim komputerem a stroną www twojego klienta. Naszym typem jest FireFTP: dodatek Mozilli, który instaluje klienta FTP/SFTP w przeglądarce. Dzięki temu możesz szybko i bezpiecznie przesłać pliki między wszystkimi platformami, które obsługują Firefoxa. FireFTP jest dostępny na Windows, Linux i Mac OS.

 

4a. Grafika rastrowa: GIMP, Krita lub Canva

Otrzymujesz od klienta paczkę zdjęć, która wymaga delikatnej obróbki, zanim umieścisz grafiki na stronie? Zapewne pierwszy program, jaki przychodzi ci na myśl, to Photoshop – i słusznie, ponieważ możliwości techniczne tego narzędzia pozostawiają konkurencję w tyle.

Do prostych poprawek wystarczą ci jednak mniej rozbudowane aplikacje. Twoje potrzeby spełnią mniej kosztowne narzędzie o bardzo podobnych funkcjach, na przykład darmowe, open-source’owe GIMP lub Krita. Jeśli wolisz obrabiać zdjęcia i grafiki online, ciekawą alternatywą będzie Canva.

 

4b. Grafika wektorowa: Inkscape

Projektując stronę www będziesz potrzebował grafik wektorowych, „odpornych” na skalowanie, które nie będą traciły na jakości nawet w dużym powiększeniu. Możesz korzystać z banków i stocków wektorów i grafik SVG, jednak jest to popularne źródło. Przy niewielkich elementach, jak ikonki, podobieństwo między różnymi stronami www jest akceptowalne, ale większe i bardziej charakterystyczne elementy możesz chcieć zaprojektować sam.

Twoim narzędziem nie musi być kosztowny i niełatwy w obsłudze Adobe Illustrator – na początek możesz wykorzystać jego darmowy odpowiednik, Inkscape.

 

5. Fonty: Nexus Font

O znaczeniu grafiki na stronie www nie trzeba nikogo przekonywać, ale typografia jest często niedoceniana. Tymczasem to właśnie ten szczegół potrafi przesądzić o komforcie korzystania ze strony i jej czytelności, nie wspominając o tym, co komunikuje sam wybór kroju.

Google Fonts zawiera kolekcję fontów „lubianych” przez internetowego giganta, które dobrze sprawdzają się w medium, jakim jest sieć i urządzenia mobilne. Jeśli oprócz tego posiadasz wielką kolekcję fontów na dysku twardym swojego komputera, w jej przeglądaniu pomoże ci Nexus Font.

Program wyświetla wszystkie twoje fonty, sortuje je według rodzin lub tagów i jednocześnie pozwala na wprowadzenie tekstu, aby jak który font zachowa się w praktyce. Wygodne, jeśli chcesz sprawdzić, który krój z twojej kolekcji ma wszystkie polskie znaki…

 

6. Dokumenty: LibreOffice

Nie jesteś skazany na Microsoft Office: LibreOffice to open-source’owy edytor tekstu, który w niczym nie ustępuje komercyjnemu odpowiednikowi. Oprócz typowych dokumentów tekstowych stworzysz w nim także arkusze kalkulacyjne i prezentacje multimedialne. Libre umożliwia także tworzenie prostych rysunków oraz posiada wbudowany edytor HTML, XML i arkusze do tworzenia baz danych.

 

7. Notatki, pomysły, produktywność: Evernote

Pomysły, prośby od klientów, nowe ustalenia, poprawki, jeszcze więcej nowych pomysłów… Evernote pomoże ci zapanować nad tym chaosem. W darmowej wersji możesz zainstalować program/aplikację na dwóch urządzeniach – to dość, żeby mieć dostęp do swoich notatek zawsze i wszędzie.

Dla większej przejrzystości posortujesz je w notatniki i oznaczysz tagami. Bez kłopotu umieścisz również w notatce linki, video oraz dodatkowe pliki.

 

8. Przechwytywanie obrazu: Screenrec

Obraz mówi więcej niż tysiąc słów, a dobre video może być jeszcze lepsze niż obraz. Do robienia zrzutów ekranu lub nagrywania krótkich (do 5 minut) video wraz ze ścieżką audio do pliku mp4. Oprócz tego na przechowanie filmów dostajesz 2Gb przestrzeni. Narzędzie współpracuje ze wszystkimi platformami (Windows, Linux, Mac OS).

 

9. Zarządzanie projektami: Trello

Przy jednym projekcie dasz radę zapanować nad etapami pracy i terminami, ale przy ich większej ilości lub kilku klientach z podobnymi zleceniami warto mieć narzędzie, które będzie śledzić postępy prac za ciebie.

Trello ma jeszcze jedną zaletę: każde zlecenie rozbijesz w nim na mniejsze, łatwiejsze do realizacji części. Zadania przenosisz między tablicami (do zrobienia, w trakcie, zakończone), co pozwoli ci szybko zorientować się, ile jeszcze zostało do zrobienia. Projekty możesz współdzielić z innymi użytkownikami – na przykład grafikiem, z którym współpracujesz lub klientem.

 

10. Blokowanie przeszkadzaczy: Waste no Time i StayFocusd dla Chrome  lub LeechBlock dla Firefox

Jasne, że internet jest potrzebny w pracy (StackOverflow to ekstremalny przykład, ale rozumiesz, w czym rzecz), jednak są strony, które wcale nie pomagają ci w kodowaniu. Zamiast tego sprawiają, że kwadranse uciekają nie wiadomo jak i kiedy.

Duża pokusa obejrzenia jeszcze kilku śmiesznych filmików na YT nie daje ci się skupić? Skorzystaj z blokad stron dla popularnych przeglądarek oraz aplikacji zwiększających produktywność.

 

11. Prokrastynacja: Pomodoto lub Forest

Tak, wiemy, jak trudno jest zabrać się do pracy. Jeśli ciebie też przerasta czasem ilość rzeczy do zrobienia lub wszystko jest lepsze od napisania pierwszej linijki kodu, skorzystaj z techniki Pomodoro – najskuteczniejszej, jeśli chodzi o walkę z prokrastynacją.

W technice Pomodoro dzielisz pracę na zadania, które wykonujesz w odcinkach po 20 minut plus 5 minut przerwy. Aby oszczędzić ci kłopotu z szukaniem kuchennego minutnika w kształcie pomidora, od którego technika wzięła nazwę, skorzystaj z aplikacji Pomodoto – to poręczny timer i lista rzeczy do zrobienia w jednym.

Bardziej ambitnie? Forest liczy czas, w którym nie dotykasz telefonu i tabletu (i który spędzasz na produktywnej pracy). Im dłużej wytrzymasz bez internetowych przeszkadzaczy, tym bardziej urośnie twój las.

 

12. Zliczanie czasu pracy: PomoDone App

Rozliczenie w oparciu o godzinę nie jest popularne wśród webdesignerów, jednak możesz natrafić na klienta, który będzie nalegał właśnie na taką stawkę. W tej sytuacji będzie ci potrzebne narzędzie do śledzenia czasu pracy – większość z nich jest płatna, ale PomoDone App to jedno z najtańszych na rynku, które umożliwia także rozliczenie w złotówkach.

Po zalogowaniu do aplikacji będzie ona zliczać czas poświęcony na realizację zadań, wykorzystując do tego znaną i lubianą technikę organizacji pracy: Pomodore.

 

13. Fakturowanie: Useme

Rozliczenie godzinowe nie należy do najpopularniejszych, ale już rozliczenie na fakturę należy do standardu. Dla twojego klienta na ogół wygodniej będzie zawrzeć z tobą umowę na wykonanie usługi jak z firmą i otrzymać od ciebie fakturę za wykonaną pracę, niż rozliczać się w oparciu o umowę o dzieło lub zlecenia, jak z osobą fizyczną. A jeśli nie prowadzisz własnej działalności?

Jako freelancer nie musisz zakładać firmy, co w Polsce łączy się z raczej wysokimi kosztami (ZUS). Jeśli twoją jedyną motywacją do zakładania działalności jest wystawianie faktur, skorzystaj z serwisu Useme.eu.
To profesjonalna platforma dla freelancerów, na której znajdziesz zlecenia pracy zdalnej, zabezpieczysz płatności i wystawisz fakturę dla klienta. Część usług jest bezpłatna, za inne serwis pobiera niewielką prowizję. Przy pierwszych zleceniach niewątpliwie jest to jednak tańsze niż prowadzenie własnej działalności gospodarczej.

 

14. Muzyka do koncentracji: MyNoise Generator  lub Focus@Will

Muzyka o stałym, niezbyt szybkim rytmie wzmaga koncentrację. Nie zawsze jednak ulubione piosenki sprawdzają się w tej roli: jeśli masz dzień, w którym teksty piosenek za bardzo cię rozpraszają, skorzystaj z generatora szumów i odgłosów MyNoise Generator.
Jest całkowicie darmowy, ale daje dostęp do ponad 200 różnych rodzajów szumów, odgłosów tła i efektów dźwiękowych. Pociąg, kawiarnia, deszcz bębniący o namiot, szum morza? W MyNoise znajdziesz każdy dźwięk, przy którym lubisz pracować.

W wersji „na bogato” możesz także rozważyć zakup członkostwa w Focus@Will – specjalnej aplikacji muzycznej, w której ścieżki dźwiękowe autentycznie pomagają się skoncentrować. Muzyka została przygotowana w oparciu o badania naukowe, a jej rodzaj możesz wybrać na podstawie twojego „typu myślenia” (logiczne, kreatywne, student, przedsiębiorca).

 

Najlepsze narzędzia dla początkujących webdesignerów

W porównaniu do grafików lub filmowców, programiści na start nie potrzebują kosztownych narzędzi i wysokich nakładów. Najważniejsze narzędzia, czyli przeglądarka i edytor kodu, są darmowe.
Wszystkie inne narzędzia, które ułatwiają pracę – takie jak aplikacje do zarządzania fontami, zbieranie notatek, zarządzanie projektami czy organizowanie czasu pracy znajdziesz w wersjach darmowych lub „budget”.

Z jakich narzędzi wy korzystacie? Które możecie polecić innym?