Aplikacje do projektowana witryn: przegląd popularnych narzędzi
- Aplikacje do projektowana witryn: jakie apliakcji?/a>
- Illustrator, Indesign, Photoshop, Affinity
- Co wybrać?
Photoshop czy Illustrator, jako aplikacje do projektowania, w których odbywa się projektowanie witryn internetowych to coś, co powoli przestaje być rzeczą odbieraną jako coś najnormalniejszego na świecie, a zaczyna być synonimem archaicznego podejścia. Powstaje coraz więcej programów dedykowanych projektowaniu stron i w związku z tym coraz większa ilość twórców decyduje się na zmianę tego, z którym pracuje na co dzień.
W związku z tym, że wiele osób nie wie, bądź po prostu nie ma czasu na rozeznanie się w rynku tych aplikacji, postanowiłam dzisiejszy tekst poświęcić na stworzenie listy tych programów, o których warto pamiętać podczas wybierania odpowiedniego dla siebie. Nie będą to rozległe recenzje, spis funkcji ani tekst, z którego dowiecie się w czym projektować. Nie chcę wprowadzać Was w błąd, bo żeby wypowiedzieć się rzetelnie na temat jakiegoś programu, musiałabym spędzić z nim dobrych kilka dni. W związku z tym pamiętajcie, że dzisiejszy tekst jest mieszanką moich doświadczeń z mini testów oraz tego co można znaleźć na stronach producentów.
Aplikacje do projektowania witryn: jakie apliakcji?
Na szczycie dzisiejszej listy znajdziecie mój wybór, czyli po prostu aplikację do projektowania, z której korzystam na co dzień w pracy zawodowej. Dlaczego zdecydowałam się na XD? Po części z lenistwa, po części z ograniczeń systemowych, które dotykały mnie w momencie, kiedy stanęłam przed wyborem programu do projektowania stron. Experience Design jest aplikacją z rodziny Adobe, która od maja ubiegłego roku w ograniczonym zakresie (ale pozwalającym na wygodne korzystanie) dostępna jest za darmo.
Z mojego doświadczenia – Adobe XD pozwala na sprawne i nieskomplikowane projektowanie małych i średnich stron oraz aplikacji, czyli tego z czym mam do czynienia w większości przypadków. Pracę usprawniają nam zmienne – symbole, style znakowe oraz kolory. Wszystkie te możliwości możemy grupować i wykorzystywać na raz, dzięki czemu zarówno drobne jak i te większe korekty wizualne przebiegają wygodnie i bez straty zbyt dużej ilości czasu.
Aplikacja wciąż ma pewne braki i nie wszystko dział tak, jakby się tego chciało (brakuje po prostu niektórych opcji znanych z innych aplikacji), jednak stale powiększająca się ilość pluginów znacznie usprawnia korzystanie z niej.
Adobe XD w wersji darmowej pozwala nam na nielimitowane korzystanie w aplikacji zainstalowanej na komputerze oraz dzielenie się jednym prototypem i jednym design spec (projektem dla programisty).
Programem, który zaczął całą projektową rewolucję i niekwestionowanym ulubieńcem mas na większości stron (szczególnie zagranicznych) jest Sketch App. Aplikacja ta zawładnęła sercami fanów projektowania interfejsów, bo jako pierwsza zmieniła podejście i zaproponowała prosty interfejs zawierający minimum potrzebnych rozwiązań, dostoswanych do możliwości przeglądarek internetowych, a więc chroniących twórców przez projektowaniem stron, których później nie da się zakodować.
Niestety jednym z największych minusów Sketcha jest jego dostępność ze względu na system operacyjny. Na chwilę obecną twórcy przygotowali jedynie wersję na MacOS i z tego co można się dowiedzieć w sieci – niewiele w tej kwestii ma się zmienić w przyszłości. W związku z tym w Polsce, gdzie użytkownicy Windowsa są wciąż zdecydowaną większością, nie jest to aplikacja należąca do najpopularniejszych.
Po zakupieniu Maca próbowałam swoich sił w Sketchu i muszę przyznać, że wszystko działało bardzo dobrze. Na ten moment możliwości jakie oferuje są spore, dużą siłą jest z pewnością bardzo rozbudowana funkcja symboli, które pozwalają na zdecydowanie prostsze i bardziej intuicyjne zarządzanie zmiennymi niż ma to miejsce w przypadku Adobe XD. Cała aplikacja działa bardziej w oparciu o CSS – tak stworzony jest też interfejs (możemy ustalać poszczególne wartości w podobny sposób w jaki kodujemy strony), co jest dużą zaletą, jeśli orientujecie się co nieco w kodowaniu.
Pomimo zadowolenia, po upływie darmowego okresu nie zdecydowałam się na korzystanie ze Sketcha – w moim odczuciu i na moje potrzeby nie dawał mi tyle, abym do swoich rocznych finansowych zobowiązań dorzuciła kolejne (99 dolarów za pierwszy rok i 69 dolarów za każdy kolejny – o ile chcemy zachować ciągłość aktualizacji). W związku z tym, że mimo wszystko wciąż korzystam z Photoshopa, Illustratora i Indesigna i w związku z tym opłacam Creative Cloud, było mi po prostu szkoda. Czy tak już zostanie – nie wiem. O Sketchu słyszy się naprawdę wiele dobrego, więc nie wykluczam, że kiedyś jeszcze rozważę korzystanie z niego.
Kolejnym programem na liście, o którym zdecydowanie warto wspomnieć jest Figma, czyli alternatywa dla Sketcha online. O Figmie wspominałam już nie raz, dyskutowaliśmy o tym także w komentarzach pod innymi artykułami.
Dla mnie Figma była poza zasięgiem do czasu, kiedy jej działanie ograniczało się jedynie do sieci. W tym momencie program oferuje zarówno wersję online (z możliwością współpracy), jak i opcję zapisu plików źródłowych na dysk i instalację oprogramowania na naszym komputerze, jest więc bardzo ciekawą alternatywą - nie tylko dla XD, ale coraz cześciej także dla Sketcha.
Już po pierwszych minutach korzystania nie mam wątpliwości, że to aplikacja, która zakresem oferowanych funkcji i łatwością pracy z pewnością góruje, albo co najmniej dorównuje konkurentom. Jej interfejs bardzo przypomina Sketcha i podobnie jak wspomniany poprzednik – także bazuje w na rozwiązaniach przeglądarkowych (HTML + CSS). Dodatkowo za pomocą panelu CODE wygodnie możemy skopiować każdy kod CSS stworzonej przez siebie grafiki, co będzie nieocenione w przypadku współpracy z programistą (szczególnie, że aplikacja dostępna jest przez Internet).
W wersji darmowej możemy mieć aktywne maksymalnie trzy projekty, a dysk na nie przeznaczony nie jest w żaden sposób ograniczony. Aplikacja w wersji Professional kosztuje od 12 do 15 dolarów miesięcznie (w zależności od czasu na jaki podpisujemy zobowiązanie). Z pewnością w wolnej chwili spędzę przy nim nieco więcej czasu.
Wraz z pojawieniem się na rynku aplikacja Studio od InVision wywołała sporo zamętu w świecie projektowania aplikacji (szczególnie w związku z tym, że zapowiedziano rychłe pojawianie się jej także w wersji na Windowsa). Niestety pomimo obietnic, od czasu ogłoszenia zmian nic się nie zmieniło, a aplikacji jak nie było, tak nie ma.
W związku z tym, że InVision Studio dostępny jest jedynie na maca, a wśród jego użytkowników wciąż króluje Sketch, aplikacja ta nie należy do najpopularniejszych. Zważając na to, że jest to program darmowy, muszę przyznać, że oferuje całkiem sporo ciekawych możliwości, sprawnie działające symbole, zmienne kolorystyczne czy możliwość tworzenia odpowiednich styli dla akapitów testu. InVision w przeciwieństwie do poprzedników wyróżnia się także ciekawymi i dość rozbudowanymi możliwościami, jeśli chodzi o tworzenie animacji UI.
Mimo wszystko korzystanie z niego jest nieco mniej intuicyjne niż wcześniej wspomnianej Figmy, a dla mnie – także Adobe XD. Pomimo wielkiej sympatii dla wszystkiego, co InVision robi ostatnio dla naszej branży (masa artykułów i poradników na ich blogu), nie rozważałam tej aplikacji jako alternatywy do komercyjnego wykorzystania.
Illustrator, Indesign, Photoshop, Affinity
W tym miejscu teoretycznie powinnam skończyć jednak, jeśli dopiero rozpoczynacie swoją przygodę z projektowaniem stron i aplikacji – w Waszych głowach może pojawić się pytanie co z Photoshopem, Illustratorem, Indesignem czy chociażby Affiity Designer. W gruncie rzeczy odpowiedź powinna brzmieć „nic”, bo tak jak książek nie powinno się składać w Illustratorze, tak stron internetowych nie powinniśmy projektować w aplikacjach do tego nieprzeznaczonych – szczególnie że opcji wyboru mamy naprawdę sporo opcji dedykowanych.
I oczywiście jak to zwykle bywa – oczywiście da się i niektórzy pewnie nawet będą to sobie chwalić, jednak po chwili przyzwyczajenia się i dopasowania podejścia – zmiana aplikacji naprawdę wyjdzie nam na dobre. Sama także miałam z tym problemy (bo faktycznie funkcji jest zdecydowanie mniej), jednak teraz – z perspektywy czasu - jest po prostu wygodniej.
Photoshopa powinniśmy odrzucić przede wszystkim dlatego, że jest to aplikacja do projektowania grafiki rastrowej, a więc korzystając z nich mówimy o siatce pikseli, a nie obiektach wektorowych. W dzisiejszym świecie, w którym już nie tylko komórki, ale i monitory mają różną gęstość pikseli, a większość małych grafik powinniśmy eksportować jako SVG, jest to po prostu duże utrudnienie i dla siebie i dla programisty.
Illustrator, Indesign i Affinity Designer teoretycznie sprawdzą się tutaj lepiej. Są to wektorowe aplikacje do projektowania, więc eksport i wielkości plików nie będą problemem, nie są to jednak aplikacje do tego dedykowane. Aplikacje do projektowania przygotowane pod projektowanie witryn internetowych posiadają możliwości korzystania symboli, stylów tekstowych czy grid, które sprawdzą się znacznie lepiej niż te wbudowane w wyżej wspomniane programy. Zdecydowanie bardziej wygodna jest w nich także praca na wielu obszarach roboczych.
Jakie aplikacje do projektowania wybrać?
Tak jak zapowiadałam na początku, wynikiem tego tekstu nie będzie jednoznaczna odpowiedź na pytanie co wybrać i co jest dla Was najlepsze, bo prawda jest taka, że świetnie projektować można w każdym programie. Kiedy weźmiemy pod uwagę cenę i szybkość – wszystkie cztery pierwsze pozycje sprawdzą się w gruncie rzeczy podobnie. Różnią się one stopniem rozwinięcia, ilością pluginów i możliwościami automatyzacji. Wszystkie są jednak dedykowane do projektowania aplikacji i stron, więc Wasz wybór powinien oprzeć się na dostępnym dla Was systemie operacyjnym, budżecie oraz przeprowadzonych samodzielnie testach (wszystkie pozwalają na korzystanie przez pierwsze 30 dni za darmo).
Dużym plusem wszystkich wymienionych programów jest także to, że przejście z jednego do drugiego czy nawet zmiana systemu operacyjnego nie jest tak problematyczna, jak przesiadka z Photoshopa do XD. Wszystkie działają na bardzo podobnej zasadzie, a co więcej – ich interfejsy są spójne i nie różnią się znacząco. Oczywiście wypracowanie sobie technik i dobrych praktyk swoje potrwa, jednak do wykonania podstawowych zadań będziecie gotowi już po godzinie-dwóch.
A jakie aplikacje do projektowania wykorzystujesz Ty? Twoja opinia będzie więc ciekawa nie tylko dla mnie, ale i dla innych czytelników, którzy trafią tutaj w przyszłości poszukując infomracji na temat projektowanie witryn internetowych
Czytaj także
Web design trendy 2020: Co będzie populane w następnym roku?
Darmowe narzędzia i przydatne serwisy webowe dla webdesignerów
W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.