14 programów graficznych dla front-end developera

Link do posta

Jakie programy graficzne powinien znać front-end deweloper? W tym artykule przedstawiam listę programów graficznych, o których front-end deweloper (i nie tylko on) powinien wiedzieć.

Jakie programy graficzne są używane przez front-end dewelopera?

Ankieta

Przeprowadziłem ankietę na grupie facebookowej HTML/CSS/Javascript – Front-end PL, w której poprosiłem o oddanie głosu na program obecnie używany w codziennej pracy – link do posta z ankietą. Pozwoliło to na dodanie nowych propozycji do listy oraz ustalenie, które programy są w tej chwili najbardziej popularne.

Zasady ankiety

Każda osoba w ankiecie mogła oddać wiele głosów (przecież można korzystać z wielu programów 😊) oraz dodać własną propozycję.

Analiza wyników

Poniżej prezentuję wyniki przeprowadzonej ankiety.

Programy graficzne używane przez front-end deweloperów - wyniki ankiety. Na pierwszym miejscu Adobe Photoshop, kolejny Adobe XD i Figma.
Programy graficzne używane przez front-end deweloperów – wyniki ankiety
NazwaGłosy
Adobe Photoshop62
Adobe XD51
Figma31
Zeplin17
Adobe Illustrator10
Sketch9
GIMP8
Avocode7
Affinity Designer6
InVision Studio6
Framer X1
CorelDraw1
Nie używam żadnego4

Adobe Photoshop wciąż najpopularniejszy

Zgodnie z przypuszczeniami Adobe Photoshop to wciąż najczęściej używany program. Tuż za nim jest Adobe XD, który pomaga rodzinie Adobe w utrzymaniu pozycji również w kategorii prototypowania UI.

W sieci słychać coraz więcej głosów na temat chęci zmiany pakietu Adobe na oprogramowanie alternatywne. Prawdopodobnie to chęć uniezależnienia się od jednej firmy lub chęć poznania nowego podejścia z innym oprogramowaniem. Osobiście polecam programy Affinity Designer i Photo jako zamiennik. Figma natomiast może zastąpić Adobe XD.

Figma idzie naprzód

Figma, która została wydana w sierpniu 2016 roku (a więc to młody produkt) zdobywa coraz większą popularność. Wynik całkiem niezły!

Jak widać istnieje wiele programów, dzięki którym można tworzyć wiele wspaniałych pomysłów i współpracować z innymi ludźmi nad projektami.

Coraz więcej prototypowania UI i Design System

Można zauważyć, że coraz częściej używa się takich zagadnień jak: prototypowanie UI, Design System – to kierunek, w którym aktualnie dąży branża IT. Zwiększa się jakość aplikacji pod względem UI oraz szybkość ich tworzenia, dzięki nowym narzędziom (jest potrzeba – pojawiają się narzędzia). Warto zapoznać się z powyższymi zagadnieniami.

Czy front-end deweloper musi znać programy graficzne (lub potrafić obsługiwać)?

Tak – według mnie oraz zgodnie z wynikami ankiety. Programy graficzne przede wszystkim służą do cięcia grafiki czy odczytywania wymiarów z projektu graficznego. Projekty określają co jest do wykonania, a front-end deweloper musi umieć to odczytać.

Komunikacja pomiędzy projektantami jak i deweloperami jest bardzo istotna – w szczególności jeśli chodzi o interfejs użytkownika aplikacji.

Oczywiście są przypadki, w których nie ma potrzeby używania programów graficznych przez programistę. Cztery osoby w ankiecie zagłosowały, że nie używają żadnego programu.

Który program graficzny wybrać?

To już każdy sam powinien zdecydować, co najbardziej mu pasuje.

Warto kierować się wymaganiami pracodawcy – tutaj najczęściej wybór padnie na Adobe Photoshop, Adobe XD lub Figmę.

Powinno się znać w stopniu podstawowym – średnim kilka najpopularniejszych propozycji (2-3), a o reszcie przynajmniej wiedzieć, że istnieją.

Lista programów graficznych

Adobe Photoshop

Licencja: płatny (cyklicznie) / trial
System: Windows / macOS
Link: https://www.adobe.com/products/photoshop.html

Jeden z najpopularniejszych programów graficznych do edycji grafiki rastrowej. Bardzo rozbudowane narzędzie używane do projektowania stron internetowych oraz edycji fotografii.

Adobe Illustrator

Licencja: płatny (cyklicznie) / trial
System: Windows / macOS
Link: https://www.adobe.com/products/illustrator.html

Program z rodziny Adobe przeznaczony do grafiki wektorowej. Podobnie jak Photoshop to bardzo potężne narzędzie.

Adobe XD

Licencja: darmowy / płatny (cyklicznie) – w zależności od planu
System: Windows / macOS
Link: https://www.adobe.com/products/xd.html

Kolejny program od Adobe. Bazuje na grafice wektorowej i służy do projektowania interfejsu użytkownika (UI) aplikacji internetowych – zarówno przeglądarkowych, jak i mobilnych.

Figma

Licencja: darmowy / płatny (cyklicznie) – w zależności od planu
System: Windows / macOS / przeglądarka internetowa
Link: https://www.figma.com/

Figma służy do tworzenia i prototypowania projektów. Pozwala również na współpracę ze wszystkimi zainteresowanymi nad projektem w czasie rzeczywistym.

Sketch

Licencja: płatny (urządzenie) – aktualizacje / chmura 1 rok
System: macOS
Link: https://www.sketch.com/

Sketch to program do tworzenia i prototypowania projektów. Umożliwia współpracę wielu osób nad koncepcjami.

Lunacy

Licencja: darmowy
System: Windows
Link: https://icons8.com/lunacy

Lunacy tak jak Sketch to oprogramowanie do projektowania prototypów. Umożliwia otwieranie plików .sketch w systemie Windows. Według autorów jest to Sketch dla Windowsa.

Zeplin

Licencja: darmowy / płatny (cyklicznie) – w zależności od planu
System: Windows / macOS / przeglądarka internetowa
Link: https://zeplin.io/

Zeplin to program do współpracy pomiędzy projektantami oraz front-end deweloperami nad interfejsem użytkownika.

It’s all about the details. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically.

https://zeplin.io/

Avocode

Licencja: trial / płatny (cyklicznie) – w zależności od planu
System: Windows / macOS / Linux
Link: https://avocode.com/

Avocode to narzędzie do tworzenia i współpracy nad projektem. Umożliwia kreowanie klikalnych prototypów i dzielenia się nim z innymi.

Affinity Photo

Licencja: płatny / trial
System: Windows / macOs / iPad
Link: https://affinity.serif.com/en-gb/photo/

Affinity Photo to program stworzony do grafiki rastrowej. Posiada wiele funkcjonalności i jest to godna alternatywa dla Adobe Photoshop (a może nie tylko?). Niewątpliwym plusem jest cena – to jednorazowa płatność (bez abonamentu).

Affinity Designer

Licencja: płatny / trial
System: Windows / macOs / iPad
Link: https://affinity.serif.com/en-gb/designer/

Affinity Designer to odpowiednik Adobe Illustrator. Pozwala na pracę nad grafiką wektorową. Tak jak w przypadku Affinity Photo płatność jest jednorazowa.

InVision Studio

Licencja: darmowy / płatny (cyklicznie) – w zależności od planu
System: Windows / macOS
Link: https://www.invisionapp.com/studio

InVision Studio to kolejny program do prototypowania projektów interfejsu użytkownika z możliwością współpracy wielu osób oraz animacji.

GIMP

Licencja: darmowy
System: Windows / macOS / Linux
Link: https://www.gimp.org/

GIMP to darmowy program do grafiki rastrowej. Posiada otwarty kod źródłowy, dzięki temu każdy może przyczynić się do jego rozwoju.

Inkscape

Licencja: darmowy
System: Windows / macOS / Linux
Link: https://inkscape.org/

Inkscape tak jak GIMP jest darmowy i posiada otwarty kod źródłowy. Służy do pracy nad grafiką wektorową.

Framer X

Licencja: trial / płatny (cyklicznie)
System: macOS
Link: https://www.framer.com/

Framer X to narzędzie do pracy nad interaktywnymi prototypami interfejsu użytkownika.

CorelDraw

Licencja: trial / płatny
System: Windows / macOS
Link: https://www.coreldraw.com/en/

CorelDraw to program graficzny do grafiki rastrowej jak i grafiki wektorowej.


Aktualizacja 05.10.2019: Dodanie Lunacy do listy programów graficznych


Wyraź opinię w komentarzu lub na facebooku na temat artykułu. Jeśli uważasz, że brakuje jakiegoś programu w spisie to koniecznie daj znać!

Jakie programy graficzne powinien znać front-end deweloper? W tym artykule przedstawiam listę programów graficznych, o…

Opublikowany przez Devpebe Piątek, 4 października 2019

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *