Softver i hardver za dizajn i programiranje Internet sajtova (kraj 2018, početak 2019.)
Pošto su određeni pretplatnici moje Facebook stranice pitali koje programe koristim za posao, navešću vam redom one koje smatram najbitnijim. Članak sam proširio i sa savetima za hardver koji je dobar za ove poslove.
Operativni sistem
Ovo može biti bitna stavka za većinu, jer upravo od operativnog sistema zavisi koje programe možete da koristite. Iako sam veliki poštovalac Linuxa, na veliku žalost, programi koje koristim za grafički dizajn ne postoje tamo. Volim da igram video igre i dan danas, što opet nije moguće na Meku, tako da je jedini moguć izbor — Windows 10 Pro 64-bit.
Ne dozvolite da vas Mek fanboji obeshrabre (pod tim mislim na ekstremnu grupu zagriženih korisnika Meka koji ne vide ništa sem tog računara, a ne i na normalne korisnike) kako je Windows loš za dizajn ili da je Linux bolji za programiranje. Često će se desiti da vam prodaju priče kako mora da se koristi samo jedan program pisan isključivo za XY platformu i ništa više. To jednostavno nije istina jer kvalitetne alternative uvek postoje i sjajni rezultati mogu da se postignu sa Windows-om. Nije problem do alata, već do majstora koji pravi nešto tim alatom.
Dodatno mišljenje o izboru softvera za rad
Prilikom izbora softvera za dizajn, rukovodio sam se time da potencijalni budući članovi tima koji rade na drugim operativnim sistemima takođe mogu da menjaju razvojne resurse. Smatram da je izbor softvera koji postoji samo za jednu platformu veoma loš i da ograničava poslovne i kreativne domete, a da ne treba da namećem svoje mišljenje oko toga šta saradnici treba da koriste, dok god mogu kvalitetno i brzo da urade šta je traženo od njih. Isto očekujem i za sebe ili saradnja neće biti moguća.
U svom radu sam se dosta susretao sa dizajnerskim programima pisanim samo za jednu platformu, pa i NPM pluginima koji rade kako treba isključivo na OSXu, bez kvalitetne podrške za Linux i Windows. Često sam kontaktirao i autore tih programa sa upitom da li planiraju da naprave i Windows / Linux verzije, što je često nailazilo na negativan odgovor.
To je po meni ono što spada u domen “fanbojizma” i takve programe i autore treba izbegavati, koliko god da su im programi dobri za tu platformu, jer dugoročno ograničavaju vaše poslovne domete. Kada se desi da neko ne bude mogao da izmeni radne fajlove ili da postavi NPM plugine u produkciju na Linux serveru recimo, onda se stvara problem koji često može da bude veoma skup za rešavanje.
Naravno, ukoliko ne želite da sarađujete sa bilo kim, možete da koristite uvek šta god poželite, ali će vas to ograničiti prilikom budućih prilika koje se mogu stvoriti.
Programi za dizajn
Za dizajn koristim više programa. Nekada sam koristio isključivo Adobe kolekciju programa, sa Photoshopom i Illustratorom kao najbitnijima, ali sam od 2016. godine prešao na programe kompanije Serif. Photoshop i Illustrator su ostali instalirani čisto ako zatrebaju za neke specijalne slučajeve, kojih vremenom ima sve manje.
Affinity Designer
Danas mi je najbitniji program za dizajn Affinity Designer. Sa njim mogu da postignem skoro sve što sam nekada mogao sa Illustratorom i iskreno mogu da kažem da ga je ovaj program u nekim aspektima i prevazišao.
Jedan od bitnih faktora zašto sam prešao na ovaj program je i cena — za 50$ dobijate trajnu licencu za ovaj program. Da li to može da se poredi sa mesečnom pretplatom za Adobe koja je u Srbiji maltene isto toliko?
Korisničko okruženje i prečice su jako slične Ilustratorovim, opcije za izvoz u različite formate su odlične, doduše, ima malo problema sa SVG formatom, ali je to minorni problem koji se lako rešava.
Pravljenje resursa za responzivni veb dizajn je pravo uživanje. Čak možete da napravite dizajn tako da ima kvazi-responzivno ponašanje, sa čim možete da pravite veoma napredne šablone za sajtove i aplikacije. Te šablone možete da snimite i posle koristite za kreiranje vaših dizajn sistema.
Jedna od mogućnosti koja mi se veoma sviđa je i detaljno podešavanje tipografije gde možete da napravite sistem nasleđivanja opcija koji je sličan CSS-u. Za veb dizajnere koji i kodiraju, ovo je veoma korisna opcija.
Affinity Photo
Affinity Photo je drugi program kompanije Serif koji sam kupio da mi bude zamena za Adobe Photoshop. Ne koristim ga mnogo, jer je Affinity Designer zadovoljio većinu mojih dizajnerskih potreba. Ono što sam ranije kreirao u Photoshop-u i Ilustratoru, danas je dovoljan uglavnom samo Designer.
U svakom slučaju je i ovo fantastičan program za obradu i retuširanje fotografija.
Alati za programiranje
Alatke za programiranje koje koristim su skoro sve besplatne.
Tekst editori
Danas je najbolji besplatan alat za programiranje Visual Studio Code. Titulu “najbolji” je odneo zbog velike open source zajednice koja pravi najrazličitije dodatke kojima možete obogatiti sam program.
Ranije sam koristio dosta Adobe Brackets i Github Atom, jer su oba u početku imala veliku zajednicu koja je pravila dodatke za njih, ali ih je VSCode vremenom pregazio. Brackets je potpuno zamro, a dalje postojanje Atom-a je upitno, s obzirom da je Microsoft preuzeo Github.
Gulp
GulpJS je alatka pisana u NodeJS-u i služi za pokretanje mnoštva najrazličitijih zadataka uz pomoć kojih možete u velikoj meri da automatizujete izradu vaših projekata.
Ova alatka meni služi za prebacivanje SCSS fajlova u CSS, optimizaciju, kompresiju i potom prebacivanje u produkcioni direktorijum. Pored ovog zadatka, koristim i zadatke kojima obrađujem Javascript ES6+ i Vue fajlove, potom ih pakujem sa Webpack-om, itd. Sa gulpom pravim i svoje Biticons fontove i još mnogo toga.
U toku samog rada koristim `watch` proces koji uživo prati sve izmene koje pravim u svojim fajlovima, potom ih obrađuje na zadati način i na kraju ih servira uživo na razvojni lokalni server, gulp-connect, kad god se izmene dese.
Danas mi je ova alatka postala nezamenljiva u radu upravo zbog svoje svestranosti.
Često čujem argument da većinu stvari koje može da uradi Gulp danas može da uradi i Webpack, ali se sa tim ne bih složio. Webpack je dobar za pakovanje JS-a, ali za sve ostalo što može da vam padne na pamet, jednostavno nema dovoljnu podršku. Gulp ekosistem je ogroman i ostaje i dalje moja preporuka.
Lokalni serveri
Za servere koristim dve opcije — XAMPP za projekate sa backend podrškom i NodeJS Live servere koje aktiviram prilikom izrade i testiranja statičkih sajtova i korisničkih okruženja. Iako rade slične stvari, njihova namena je drugačija.
Za izradu statičkih sajtova je dovoljno koristiti Gulp Connect i uživo gledati promene, dok je za izradu backend podrške potrebno imati i ozbiljniji paket serverskih programa.
Za PHP programiranje je XAMPP odličan, jer u paketu dolazi sa Apache serverom, MariaDB-om, skoro poslednjom verzijom PHPa i još nekim sitnim dodacima. Odličan je za učenje Apache servera, jer sa tim znanjem kasnije možete i sami da podešavate svoj hosting i virtuelne domene.
Alternativa XAMPP-u je WinNMP, koji umesto Apache servera koristi Nginx.
Verzioniranje koda
Sav kod koji pišete negde mora i da se čuva. Kao najbolje rešenje danas koristim isključivo Git. Softver otvorenog koda čuvam na GitHub-u, dok za privatne projekte preporučujem Bitbucket ili Gitlab. Github takođe ima opciju za čuvanje privatnih projekata, ali zahteva mesečnu pretplatu. U tom slučaju je dobar za timove kojima je potreban i pristup opcijama za vođenje projekata.
Git-om možete da manipulišete na više načina — preko komandne linije ili preko programa sa grafičkim okruženjem. Komandna linija se preporučuje naprednim korisnicima i to preporučujem svima da nauče ako se upuštaju u programerske vode.
Kada sam lenj da kucam sve u terminalu, odličan program je i SourceTree, koji preporučujem i početnicima.
Pregledači
Jedna od najvažnijih alatki za programiranje su pregledači, jer se za njih sve pravi. Kao glavni pregledač koristim Mozilla Firefox, jer najbolje podržava donete veb standarde. On je postao zlatno merilo za uspešnost projekata i ako u njemu nešto ne radi, onda definitivno ne programirate dobro.
Pored Firefox-a, na žalost kao programeri korisničkih okruženja, moramo da koristimo i sve ostale popularne pregledače, kao što su Chrome i Edge, koji dolazi uz Windows 10. Da se stvari još više komplikuju, tu je i Internet Explorer, retardirani brat Edge-a, za koji većina programera i danas mora da prilagođava sajtove. Siguran sam da će svi programeri slaviti penzionisanje Windows-a 7, a samim tim i poslednjeg Internet Explorera. ;)
Chrome varijante su opcije koje bih preporučio pre samog Chrome pregledača, najpre zbog poznatog Google špijuniranja. Po kvalitetu bih ih poređao ovako:
- Yandex browser — najbrži chromium pregledač, sa odličnim multimedijalnim opcijama.
- Vivaldi browser — Ono što je Opera nekad bila
- Opera — ovde samo zbog imena i istorijata
Tu su naravno i razvojne verzije:
Ostali korisni programi
Među ostale korisne programe bih uvrstio sledeće:
- Koala App — brzo kompajliranje SASS/LESS/JS fajlova
- GhostLab — odličan razvojni alat za različite uređaje i pregledače
- Adobe XD — besplatan program za UI dizajn, što da ne
- Putty — SSH terminal za Windows
- Total Commander — i dalje najbolji File Manager za Windows
- WinSCP — još jedan dobar File Manager za Windows, sa odličnom SSH podrškom
- Cmder — odličan terminal za Windows
- Slack — odličan program za komunikaciju sa timom
- ShareX — odličan program za pravljenje screenshot-ova
Programski jezici
Veb dizajn danas je mnogo više nego što je nekada bio. Danas su zahtevi posla daleko veći i u ogromnoj oblasti dizajniranja, ali i u oblasti programiranja. Ni slučajno ne pomišljajte da su veb dizajneri isključivo dizajneri i da nemaju dodirnih tačaka sa programiranjem. To će vam reći ili početnici koji pokušavaju da se prodaju u IT-u kao nešto što nisu ili suvi programeri koji se ne razumeju u veb dizajn.
Šta je onda veb dizajn?
To je spoj UI/UX dizajnera i front-end programera — već tri zanimanja u jednom, ali na malo drugačiji način. U članku Web design in 2018 sam opisao detaljnije šta je šta.
Za opširniji uvid u to šta front-end programer treba da zna, pogledajte i priručnik Front-end developer handbook 2018.
Hardver
Šta je potrebno od hardvera za uspešan rad u veb dizajnu i programiranju korisničkih okruženja?
Za programiranje zahtevi nisu veliki i tu vam je dovoljan i računar koji može da pokrene Ubuntu Linux, ali s obzirom da je u pitanju i dizajn, zahtevi skaču značajno.
Ekrani za rad
Ubedljivo najvažniji komad hardvera koji vam je potreban je dobar monitor sa kvalitetnim IPS ekranom. NI SLUČAJNO ne radite na TN/Film ili VA ekranima, jer oni ne prikazuju pun spektar boja, a pritom menjaju boje u zavisnosti od ugla gledanja! Sa takvim monitorima mi se često dešavalo da se pastelne boje prikazuju kao bela, tamne nijanse kao crna, a ceo spektar između je bio stopljen u velikim koracima između različitih nijansi boja.
U daljoj podeli desktop monitora, bitno je da li je u pitanju Full HD ekran ili 4K+. Posao možete bez problema da uradite i na Full HD monitoru, ali je za veb dizajn takođe veoma bitna gustina piksela ekrana za grafičke elemente koji se prilagođavaju toj velikoj gustini.
Ukoliko imate Full HD ili neki monitor manji od 4K, problem možete da rešite na dva načina — ili kupovinom 4K monitora ili kupovinom iPad-a na kom ćete testirati sajtove. iPad je bolja opcija za početnu investiciju i zbog velike gustine piksela na retina ekranu, ali i zbog toga što sa njim dobijate pristup i iOS-u, na čijim se pregledačima sajtovi opet drugačije prikazuju nego na Windowsu. Sajt na iOS Chrome-u ili Firefox-u neće uvek izgledati isto kao u Chrome-u ili Firefox-u na Windowsu.
Ovde ću dodati i sledeće — nisam Apple fan, ali im je iPad jedan od najboljih uređaja koji su napravili i meni je postao nezamenljiv prilikom provere sajtova za iOS. S obzirom da Android nema kvalitetnih tableta, a probao sam i najskuplje, iPad i dalje ostaje moja preporuka.
Kod mobilnih telefona je bitno da imate telefon takođe sa veoma kvalitetnim ekranom, na kome nema prezasićenih boja. Prezasićene boje su bile zaštitni znak ranijih Samsung telefona sa OLED ekranima, kao što je bio S2. Tamo su sve boje bile drečave i kao takve su neupotrebljive za dizajn. Kod najnovijih modela nisam primetio taj problem.
Ukoliko uzimate iPad za tablet i proveru vaših sajtova za iOS, mobilni telefon je preporuka da bude Android jer i tu važe slični problemi kao i na iOS-u — sajtovi se u određenim slučajevima drugačije prikazuju u odnosu na iste pregledače u Windowsu.
Grafičke kartice
Izbor grafičkih karti zavisi od namene posla i tipa monitora koji koristite. Za 2D grafiku nije toliko bitno koja grafička se koristi, dok je za 3D preporučljivo što bolju karticu. ATI kartice su se pokazale bolje od nVidia za 3D modelovanje, dok u high-end segmentu nVidia Quadro nemaju konkurenciju.
Za veb dizajn možete da prođete sa nižim (nVidia 1050) ili srednjim nivoom kartica (nVidia 1060 6GB ili neki ATI sličnih performansi), bez neke razlike u izboru. Dovoljno je samo da nije integrisana Intel kartica jer te nisu dovoljne za ovaj posao.
Ako prelazite na dizajn na 4K monitoru, izbor kartica je veoma bitan, a pogotovo količina video RAM-a. Minimum za rad je 4GB VRAM-a, dok je optimalno 8GB. To izbor prebacuje već u rang srednje-jakih i veoma jakih kartica. Jedan od bitnih razloga je taj što pregledači koriste i dosta VRAM-a za iscrtavanje sadržaja u svojim prozorima, što se posebno odnosi na Firefox, koji zna pošteno da uspori računar sa grafičkom od 3GB ili manje RAM-a.
Hard diskovi
U Front-end programiranju se radi sa velikim brojem sitnih fajlova, pogotovo prilikom pokretanja Gulp procesa, dok se u dizajnu radi sa ogromnim fajlovima teških i po nekoliko gigabajta. Ovde je izbor jedino SSD disk, dok klasični hard diskovi mogu da posluže samo za skladištenje podataka, ali ne i za komforan rad.
Nije potrebno da imate najnoviji PCIe M.2 SSD direktno na ploči, jer nema razlike u praktičnom radu u odnosu na klasične SATA SSD diskove.
Procesor
Zbog brzine obrada fotografija, ali i rada sa fajl sistemom, može da se prođe sa bilo kojim procesorom od i3/r3 pa na gore. Naravno, što brže to bolje. Moja preporuka su novi AMD Ryzen procesori 2600x i 2700x i zbog cene ali i odličnog kvaliteta.
Miš
Jedna od najvažnijih periferija za dizajnere je miš, naravno ako ne koristite tablete za crtanje. Moj izbor su Logitech miševi na kojima može po potrebi brzo da se menja osetljivost senzora, za brz skok sa preciznih i sporih poteza i na široke i brze u programima za dizajn. Sa hardverom za igrače ne možete da pogrešite i kada je dizajn u pitanju. ;)
Za kraj
Sve šta sam nabrojao ovde su programi i hardver koji trenutno koristim. Naravno, to ne treba da vas obeshrabri jer ima i dosta da se uči, a hardver nije jeftin. Svoj rad sam počeo na veoma lošem računaru gde je svaka operacija trajala od jutra do sutra, a znanje sam proširivao redovnim učenjem. Sa svakim završenim projektom, deo prihoda sam ulagao u bolja sredstva za rad, u šta ubrajam i originalni softver i hardver, a znanje se neminovno proširivalo.
Ovaj posao može da bude divan, pogotovo ako volite da radite sami i van klasičnih firmi, kao što ja volim da radim. Kancelarija ne mora da bude kao sa stock fotografija, ne moram da držim kaktuse, bambuse i egzotične čajeve u kadru za slikanje. Važno je da je udobno za rad. ;)
Vladimir Jovanović,
Dizajner i programer od 1998.
