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.
| Nazwa | Głosy |
| Adobe Photoshop | 62 |
| Adobe XD | 51 |
| Figma | 31 |
| Zeplin | 17 |
| Adobe Illustrator | 10 |
| Sketch | 9 |
| GIMP | 8 |
| Avocode | 7 |
| Affinity Designer | 6 |
| InVision Studio | 6 |
| Framer X | 1 |
| CorelDraw | 1 |
| Nie używam żadnego | 4 |
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ć!
Dodaj komentarz