Ta strona wykorzystuje pliki cookie w celu prezentacji dopasowanych dla Ciebie treści. Możesz włączyć/wyłączyć obsługę plików cookies w swojej przeglądarce.

Dowiedz się więcej
Niezbędnik Web Developera: Jeszcze więcej przydatnych narzędzi [cz. II]

Niezbędnik Web Developera: Jeszcze więcej przydatnych narzędzi [cz. II]

Opublikowano  przez Marek Zoellner

Tworzenie stron internetowych czasami balansuje na granicy między technologią a sztuką. Jeśli chcesz wyróżnić się w tej dziedzinie, musisz być zatem nie tylko sprawnym programistą ale i po części kreatywnym artystą. Pomoże Ci w tym druga część naszego poradnika.

Jeśli jeszcze nie przeczytałeś pierwszej części tego artykułu, zachęcamy do lektury już teraz. Zanim więc zaczniesz głębiej nurkować w zasobach wiedzy dotyczących Web Developmentu, sprawdź, jakie narzędzia już omówiliśmy:

Niezbędnik Web Developera: 17 przydatnych narzędzi

W tej odsłonie poradnika skupimy się natomiast na warstwie wizualnej, opowiemy o kolorach, ikonach czy edytorach grafiki. Dowiesz się również, jak efektywnie zarządzać zadaniami oraz jak komunikować się i współpracować w zespole.

Paleta barw

Dawniej, jakieś 30-40 lat temu nie było z tym większych problemów. Liczba barw możliwych do uzyskania na ówczesnych monitorach była bardzo uboga. Początkowo były to zaledwie 2 kolory, potem doszło do 4, 8, 16 aż do 256. Jednak wraz z rozwojem technologii także i te wartości coraz szybciej ewoluowały i w efekcie dziś liczymy je w milionach. Z jednej strony dostajesz do rąk niesamowite możliwości, ale jak się w tej feerii barw nie zgubić?

Jako początkujący twórca stron internetowych powinieneś stale rozwijać własne poczucie estetyki, ale musisz też nauczyć się rozmawiać o tym z innymi tak, aby dobrze porozumieć się z przyszłymi klientami, zrozumieć ich potrzeby i stworzyć atrakcyjny i profesjonalny projekt. Aby ułatwić realizację tego celu, powstało wiele ciekawych narzędzi. Pozwolą Ci one m.in. na dobór odpowiedniego tła czy kolorów czcionek. Pamiętaj, że nawet wprawne oko nie jest w stanie dostrzec tego, co widzi komputer, dlatego nie bój się korzystać z pomocy technologii.

web developer tools

Jednym z przykładów takich narzędzi jest Adobe Color, w którym po wybraniu danej barwy możesz zobaczyć jak zmieniają się inne pasujące do niej kolory w zależności od tego, jak zmienisz jej odcień. Dzięki temu na projektowanej stronie kolory nie będą się gryzły, a przy okazji możesz odkryć też inne, ciekawe połączenia, które wcześniej nie wpadły Ci do głowy.

Pobierz bezpłatny e-book

Więcej o narzędziach przydatnych podczas wyboru idealnej palety barw przeczytasz w naszym bezpłatnym e-booku.

Darmowe zdjęcia

Skąd je wziąć? Jeśli potrafisz robić profesjonalne fotografie i masz odpowiedni sprzęt, wyprzedzisz konkurencję już na starcie. Wielu Web Developerów nie ma jednak takich możliwości i korzysta z obrazów dostępnych w internecie. Istnieje wiele stron oferujących zdjęcia nawet do użytku komercyjnego bez żadnych opłat.

Bardzo popularne w ostatnim czasie są np. takie portale jak Pexels czy Unsplash. Wystarczy wyszukać interesujące nas obrazy i pobrać je na swój komputer.

Unsplash

Pamiętaj jednak, by dokładnie sprawdzić opisy każdego z wybranych zdjęć ze szczególnym uwzględnieniem przypisanej do niego licencji. Niektórych można bowiem używać wyłącznie do użytku prywatnego, inne wymagają przypisania autora, dodania linków, bądź dotyczą ich dodatkowe, opisane wymagania. Naruszenie licencji może narazić Cię na konsekwencje finansowe.

Listę dostępnych portali znajdziesz poniżej:

Ikony i czcionki

Aby uatrakcyjnić projektowaną stronę z pewnością będziesz szukał także idealnego kroju czcionki oraz ikonek, które urozmaicą bloki tekstu i zwrócą uwagę na wybrane elementy. Na tym etapie możesz sprawdzić, co oferują takie portale jak Font Awesome, Flaticon czy Devicon.

Pamiętaj, że podobnie jak w przypadku fotografii także i tutaj należy dokładnie zapoznać się z licencją, bowiem tylko część tego typu elementów jest dostępna bez żadnych reguł. Wspomniane strony, jak i wiele innych, pozwolą Ci korzystać z dostępnych pomysłów lub stworzyć i wyeksportować własne kolekcje, a następnie używać ich we własnych projektach.

Devicon

Bezpłatne edytory grafiki

Na pewno wiesz, czym jest Photoshop, pewnie słyszałeś też o Illustratorze. Bez znajomości programów do obróbki grafiki sam niewiele zdziałasz i będziesz musiał szukać wsparcia wśród specjalistów w tej dziedzinie.

Osoby początkujące, które dopiero uczą się na mniej rozbudowanych projektach, mogą sobie jednak poradzić również samodzielnie. I wcale nie trzeba w tym celu wykupować dostępu do płatnych platform, jakie oferuje np. Adobe. Istnieją darmowe alternatywy, które na początku drogi Web Developera na pewno warto poznać.

Jedną z nich jest Pixlr Editor. To uproszczona wersja Photoshopa, w której możemy znaleźć wiele podobnych a nawet identycznych narzędzi, by obrobić swoje zdjęcie czy grafikę.

Bardzo podobnie działa Photopea - kolejny naśladowca Photoshopa - i ona także jest darmowa. Oba narzędzia są nieco prymitywne w porównaniu z oryginałem, ale można z nich korzystać online. Dodatkowo Photopea pozwala na otwieranie i edytowanie plików PSD czy rozszerzeń takich jak Gimp i Sketch.

Dodajmy do tego jeszcze Avocode. Jego zaletą jest możliwość współpracy w zespole pracującym nad tym samym projektem. Poza typowymi udogodnieniami, takimi jak otwieranie plików PSD oraz Illustrator bez konieczności posiadania oryginalnego oprogramowania, pozwala również przekształcić niektóre elementy graficzne w gotowy kod.

Niestety Avocode jest darmowy jedynie w wersji testowej i to tylko przez 14 dni, ale i tak zachęcamy do zapoznania się z trialem, zwłaszcza, jeśli dojdziesz do wniosku, że proste, darmowe programy są dla Ciebie niewystarczające.

Prototypy i wizualizacje

Każdy pomysł trzeba w końcu zaprezentować. W branży IT zazwyczaj robi się to na długo zanim projekt zostanie w pełni ukończony. Pozwoli to wykluczyć błędy i przekonać się, czy na pewno o tym samym myślą pozostali członkowie zespołu oraz czy właśnie tego oczekuje klient. W takich chwilach przydają się narzędzia pozwalające przygotować wizualizacje na wstępnym etapie, gdy jeszcze nie działają wszystkie rozwiązania techniczne.

Jednym z nich jest aplikacja InVision. Pozwala ona przesłać projekt i poddać go pod dyskusję, przeanalizować, czy grafika oraz wszelkie funkcjonalności zostały odpowiednio zaplanowane, czy jest coś, co wymaga ulepszenia, poprawek. Można też dodawać swoje komentarze i swoje wersje kodu. Z tego rozwiązania InVision korzystają między innymi takie firmy jak Visa, Shopify, Evernote, Twitter, Mailchimp czy Netflix - czytamy w recenzji na blogu designalley.pl poświęconemu projektowaniu graficznemu.

Obejrzyj też krótki film pokazujący, jak działa InVision:

Innym rozwiązaniem może być np. platforma Zeplin, która pozwala m.in. na pobranie plików graficznych, fragmentów kodu CSS czy sprawdzenie odległości pomiędzy poszczególnymi elementami.

Oba narzędzia są darmowe przy jednym prototypie/projekcie. Za szersze wykorzystanie trzeba już zapłacić kilkanaście dolarów miesięcznie. Innym, bardzo popularnym narzędziem służącym do przygotowywania makiet i projektowania interfejsów jest Sketch. Niestety jest płatny (99 USD za rok).

Zarządzanie zadaniami i komunikacja

Na pewno zdajesz sobie sprawę z tego, że praca w branży IT to przede wszystkim praca zespołowa. Możesz oczywiście próbować działać w pojedynkę, ale prędzej czy później będziesz potrzebował wsparcia, bądź sam zaczniesz kogoś wspierać. Żeby taka współpraca przebiegała efektywnie i bezkonfliktowo, warto korzystać z narzędzi ułatwiających komunikację.

W wielu firmach IT programiści nie mogą się obyć bez Slacka. Jest to rodzaj rozbudowanego komunikatora, w którym można wyodrębnić dedykowane kanały tematyczne poświęcone konkretnym problemom. Jeżeli rozpoczniesz swoją przygodę w branży i na początku będziesz miał wrażenie, że w Twoim biurze nikt ze sobą nie rozmawia, zapytaj, czy firma używa Slacka. Wtedy szybko zmienisz zdanie :)

slack

Innym, chętnie używanym zestawem narzędzi jest GSuite, ułatwiający komunikację i współpracę w zespołach za pośrednictwem Gmaila, Hangoutsa czy Google Docs.

Natomiast jeśli mowa o zarządzaniu zadaniami i współpracy przy realizowaniu projektów, zwróć uwagę na takie narzędzia jak Trello, szczególnie przydatne dla mniejszych firm. Trello jest darmowe, ale zawiera podstawowe funkcje służące do wyznaczania terminów, przypisywania zadań i oznaczania ich jako zadania “do zrobienia”, “w trakcie” lub jako “zakończonych”.

Znacznie bardziej zaawansowana jest Asana, która umożliwia monitorowanie całej ścieżki rozwoju projektów. Z kolei większe firmy i korporacje to przede wszystkim w pełni profesjonalna Jira, którą można zintegrować ze Slackiem.

To wyzwanie jest dla Ciebie

Po lekturze dwóch obszernych artykułów masz już długą listę wskazówek, które pomogą Ci w pokonaniu kolejnych kroków na ścieżce do kariery w IT. Jeśli jednak nadal zastanawiasz się, czy programowanie jest dla Ciebie, zmierz się z naszym Wyzwaniem. Z naszą pomocą zbudujesz w pełni funkcjonalną stronę z własnymi treściami, wyglądem i wczujesz się w rolę zawodowego Web Developera.

Darmowe wyzwanie Kodilli w nauce programowania

Zachęcamy również do rozwiązania krótkiego, darmowego testu predyspozycji:

Rozwiąż test predyspozycji

Umów się na rozmowę z doradcą Kodilli