5 programów do UI / web designu

5 programów do UI / web designu

Dzisiaj wracam do Was z programową piątką. Mówiłam już o programach do prototypowania i animacji UI, wypadałoby więc wspomnieć jeszcze o programach do samego projektowania elementów interfejsów. Programy, które Wam dzisiaj przedstawią sprawdzą się w projektowaniu interfejsów aplikacji mobilnych i stron internetowych, tak więc zaczynamy.

Co rozumiem przez programy do UI – tak żeby było jasne skąd wzięła się ta lista. Mam na myśli takie programy graficzne, w których od zera zrobimy projekt interfejsu. Muszą przede wszystkim dawać możliwość tworzenia własnych komponentów – a nie tylko układania gotowych z biblioteki (a z tym możemy spotkać się w przypadku programów do prototypowania).

Sketch

To w tej chwili chyba najpopularniejsze narzędzie do projektowania interfejsów. Niestety ma potężny minus – dostępny jest wyłącznie na maci i nie zapowiada się, by cokolwiek w dostępie do innych systemów miało się zmienić. Co jest takiego magicznego w Sketchu, że pobił konkurencję? Przede wszystkim jest dedykowany projektowaniu interfejsów – to bardzo ważne, gdy porównamy go choćby do Photoshopa. No bo wiecie, możecie mieć narzędzie do wszystkiego z milionem opcji… ale w sumie po co, skoro i tak z 90% tych opcji korzystać nie musicie? W Sketchu opcji mamy więc dużo, dużo mniej, ale wszystkie skupione są na tym by usprawniać naszą codzienną pracę.

Wygodnie pracuje się na samych wektorach – możemy spokojnie zaprojektować wszystkie ikony w jednym programie, a potem zbudować z nich biblioteki, które wykorzystamy w różnych miejscach projektu. Zarządzanie symbolami w programie również daje radę. O samym Sketchu zresztą już Wam kiedyś opowiadałam na blogu i po prostu odeślę Was do tego wpisu (o tu: http://zebza.net/ui-tools-sketch/). Nowością jest możliwość prostego prototypowania – do tej pory dostępna jedynie przy użyciu wtyczek, teraz jest wbudowana w program, co czyni Sketch naprawdę solidnym narzędziem w codziennej pracy.

Platformy: tylko macOS
Cena: $99 za rok

UXPin

O UXPinie wspominałam Wam przy okazji programów do prototypowania. Bo oprócz tego, że zrobicie w nim projekt interfejsu, możecie dodać również do ekranów interakcje. UXPin to solidne narzędzie przeglądarkowe do UI – tzn. do jego działania potrzebujemy dostępu do sieci i przeglądarki, która będzie obsługiwała tę aplikację. Nic nie musimy pobierać – po prostu logujemy się i działamy. Nie musimy więc martwić się takimi sprawami jak system operacyjny, bo to w gruncie rzeczy nie ma znaczenia. Oczywiście takie rozwiązanie ma również swoje minusy – chociażby fakt, że połączenie z internetem musi być na tyle dobre, żeby swobodnie pracować i dotrzeć do swoich plików. Te przechowywane są bowiem w chmurze, więc jeśli jedziecie gdzieś akurat pociągiem i chcecie się do nich dostać, to jest ryzyko, że dopóki połączenie nie będzie stabilne, pojawią się problemy z dotarciem do plików.

Mimo to, UXPin jest dość popularną aplikacją. Spotykam się na co dzień z wieloma zespołami, które na UXPinie pracują – niezależnie czy są to małe firmy czy duże korporacje – tu każdy znajdzie coś dla siebie. Narzędzie jest płatne w systemie abonamentowym – tzn. wykupujecie subskrypcję miesięczną, analogicznie do produktów Adobe. Za podstawową wersję zapłacicie w granicach $30 za miesiąc, ale warto zapisać się do newslettera, bo raz na jakiś czas pojawiają się atrakcyjne promocje.

Platformy: aplikacja przeglądarkowa
Cena: $29 za miesiąc

Figma

Figma jest jednym z moich ulubionych narzędzi, niestety nie za często mam okazję z niej korzystać. To naprawdę solidna aplikacja przeglądarkowa do projektowania. W związku z tym, nieważne jest z jakiego systemu operacyjnego korzystacie – jak długo macie dostęp do internetu możecie skorzystać z tego rozwiązania. To, co spodobało mi się najbardziej to rozbudowane opcje gridów – narzędzie do tworzenia własnych siatek jest szalenie proste, co więcej siatki można narzucić na cały projekt lub poszczególne komponenty. I wcale nie muszą to być te same siatki. Do tego warto wspomnieć o ciekawym podejściu do tworzenia wektorów – Figma korzysta z tzw. vector networks czyli ulepszonej wersji klasycznego pen toola. To świetna opcja dla osób, które do tej pory nie miały do czynienia z grafiką wektorową – tworzenie wektorów w Figmie jest proste i intuicyjne.

W dodatku – nie jest też narzędziem widmo. Ma całkiem sporą grupę użytkowników, więc z powodzeniem znajdziecie tutoriale i kursy, które pomogą Wam stawiać pierwsze kroki w tym programie.

Platformy: aplikacja przeglądarkowa
Cena: darmowa w wersji podstawowej

rodzinka Adobe

Celowo nie podałam konkretnego programu w tytule, bo tych od Adobiego jest w sumie kilka. I choć sama przez długie lata pracowałam głównie w Photoshopie, spotkałam się z wieloma osobami projektującymi UI w Illustratorze. Odkąd do projektowego obiegu wszedł również Adobe XD, coraz więcej projektantów decyduje się dać mu szansę. Mnie Adobe XD jeszcze nie kupił, ale też ani razu jeszcze nie musiałam z niego korzystać. Nie wykluczam jednak jakiegoś mini streama z Adobe XD w niedalekim czasie (co Wy na to?).

Dla tych, którzy XD nie znają – to nowy produkt Adobe, który skupia się na prototypowaniu – możemy więc zaprojektować interfejs i w prosty sposób sprawić, że będzie interaktywny. Program jest wciąż na początkowym etapie rozwoju, więc z czasem na pewno dojdzie do niego więcej ciekawszych funkcji. Jest jednak na tyle rozbudowany żeby poradzić sobie z pierwszymi projektami. No i jest dostępny za darmo, na pecety (od Windowsa 10) i maci.

Wspomniany Photoshop czy Illustrator to nieidealne rozwiązania – nie są to bowiem programy dedykowane projektowaniu pod web. Ale jeżeli macie do nich dostęp, z powodzeniem takie projekty wykonacie. W wielu firmach wciąż oczekuje się znajomości tego softu, w sieci znajdziecie ogromną społeczność użytkowników, a co za tym idzie – całą masę kursów i tutoriali dostępnych za darmo.

Platformy: Windows, macOS
Cena: ok. 12,29 € za miesiąc (zależnie od planu)

Affinity Designer

Od razu mówię – z tym programem nie miałam jeszcze do czynienia. Ale jak tylko znajdę chwilę to do niego siądę, bo zapowiada się naprawdę obiecująco. Program okrzyknięty mocną konkurencją Photoshopa zyskuje coraz większą popularność. Dostępny jest i na maci i na pecety, wyszła również wersja na iPada. I choć wiosen ma niewiele, słyszą ciągle powtarzające się pozytywne opinie. Jego największą przewagą jest cena – 240 zł, które zapłacimy raz, jest dużo atrakcyjniejszą ofertą dla początkujących projektantów, niż płatności abonamentowe od Adobe.

Affinity Designer nie jest narzędziem dedykowanym stronom internetowym czy interfejsom w ogóle, dlatego traktuję go trochę na równi ze wspomnianym Photoshopem. Zresztą zobaczcie: https://affinity.serif.com/en-gb/designer/desktop/full-feature-list/ – lista dostępnych funkcji robi wrażenie, zostaje mi tylko przetestować ją w praktyce.

Platformy: Windows, macOS, iOS
Cena: 240 zł

Podsumowując

Programów powstaje coraz więcej – na horyzoncie widać już kolejne ciekawostki jak InVision Studio czy Phase, na którego czekam z niecierpliwością. Wybór jest naprawdę sensowny – można wybierać między aplikacjami lub narzędziami przeglądarkowymi, są opcje płatne i darmowe, jeżeli więc szukacie programu, w którym UI stworzyć można, to nic nie stoi Wam na przeszkodzie żeby taki znaleźć.

kanal na youtube