+48 57 356 89 98
+48 57 356 89 98

Arateg TMS sp. z o.o. | Numer identyfikacyjny: 402207045

Przegląd narzędzi dla UX/UI designera

Kim w końcu jest ten designer UX/UI?


Krótko mówiąc jest to specjalista, który projektuje i tworzy interfejsy użytkownika. To znaczy, robi wszystko aby Twoje korzystanie z aplikacji, stron internetowych i innych serwisów było zrozumiałe i przyjemne. Na przykład nie marnujesz swój czas szukając koszyka w sklepie internetowym, czy przechodząc na dowolną stronę po raz pierwszy rozumiesz gdzie szukać potrzebnych informacji.

Bez względu na to że UX (User Experience czyli każda interakcja użytkownika ze stroną ) i UI (User Interface lub projektowanie graficznych interfejsów użytkownika) to są różne obszary, są jednak ze sobą mocno powiązane.

Zawód jest bardzo ciekawy i kreatywny. Ale wymaga ciągłego uczenia się i rozwoju. W tym artykule porozmawiamy o programach i aplikacjach, które ułatwiają tworzenie nowych interfejsów.

Zacznijmy od wireframe'ów. Wśród designerów istnieje wyraźny podział ról i wireframe pełni rolę zaprezentowania struktury strony, układu czy architektury. Tradycyjnie składa się z białych, szarych, czarnych bloków, prezentuje strukturę kontentu, jego główne bloki.

Balsamiq będzie dobrym narzędziem do prototypowania z naciskiem na strukturę i treść projektu. Jest responsywny i pasuje do pracy zespołowej.

Mockflow będzie bardziej funkcjonalny ze względu na arsenał wtyczek, ale jednocześnie nie będzie zbyt skomplikowany w porównaniu z Balsamiq.

Just in mind oferuje dostosowanie stylizacji, bezpłatne zestawy UI (gotowe rozwiązanie) i jest dostępny do integracji ze Sketch i Photoshop.



A teraz przejdźmy do bardziej funkcjonalnych serwisów online do tworzenia interfejsów:

Figma

Świetne narzędzie do współpracy zespołowej. Możesz skorzystać z wersji webowej lub pobrać aplikację niezależnie od platformy (Windows, Mac, Linux).

Co więcej, to nic nie kosztuje. Przynajmniej większość narzędzi będzie dostępna za darmo i tego wystarczy aby wygodnie pracować.

Wszystkie projekty i układy żyją w chmurach. Opcja współpracy nad projektem w czasie rzeczywistym jest bardzo atrakcyjna. Na przykład, gdy designer kończy footer, inna osoba może pracować na gotowych blokach, a copywriter może dodawać tekst we właściwych miejscach.

Wskazówka: warto mieć pod ręką skróty klawiszowe, znacznie ułatwią Ci one życie, oszczędzając czas na szukanie referencji i inspiracji.

Adobe XD

Robi ​​proces prototypowania szybkim z możliwością testowania i tworzenia animacji. Twórcy zwracają uwagę na jego intuicyjny interfejs, który nie może się nie spodobać UX/UI specjalistom.

Warto również wskazać na łatwość obsługi online i offline, przekształcenia 3D, powtarzającą się siatkę, integrację z Creative Cloud oraz prototypowanie głosu.

Adobe Illustrator

Rodzaj klasycznego edytora grafiki wektorowej, potężne narzędzie do prototypowania, tworzenia ilustracji i pracy z typografią. Tu możesz pracować w dowolnej skali projektu, a jakość obrazu pozostanie wysoką.

Kluczową zaletą jest jednolite środowisko Adobe, tzn Twój plik może swobodnie funkcjonować w innych programach (Photoshop, Flash) bez zbędnej konwersji.

Sketch

Wąskoprofilowe narzędzie z ogromnym arsenałem pluginów, które rozwiążą każde zadanie w drodze projektowania interfejsów. Ponadto eksport kodu i ustawień wstępnych jest tutaj dość prosty.

Ten edytor jest często porównuje się z Figmą i zachęcam wypróbować oba narzędzia. Pamiętaj jednak, że Sketch jest wyłącznie na Mac'a.

Invision

Tutaj rozwiązują się problemy interaktywnego prototypowania i animacji, łączy się wiele przydatnych funkcji do tworzenia interfejsów internetowych (UX/UI). Do systemu można podłączyć zewnętrzne pliki graficzne (możliwość importu ze Sketcha), wiele podstawowych rzeczy tworzy się za pomocą kilku kliknięć.

Oczywiście kluczową zaletą jest praca z animacją. Różne rodzaje interakcji i edycji dają duże pole do popisu dla Twojej kreatywności. A zaawansowane funkcje InVision Cloud będą dobrym dodatkiem.

I jeszcze kilka narzędzi do tworzenia prototypów interaktywnych:

Principle świetnie nadaje się do tworzenia ładnych animacji i przejść. Chociaż działa tylko na Mac'u jest możliwość importu projektów z Figmy i Sketch'a - poznaliśmy je powyżej.

UXPin pomoże dodać animację do twojego interfejsu, a także stworzyć realistyczne prototypy. Ogromna biblioteka komponentów, tryb multi-user, szybki sposób tworzenia aplikacji webowych.

Adobe After Effects zostanie Twoim przyjacielem nie tylko w trakcie tworzenia prototypów interaktywnych, ale także przy obróbce treści wideo (jeśli to Cię interesuje). Pamiętaj jednak, że tutaj musisz nauczyć się które narzędzie jak działa - do jakościowej realizacji Twoich pomysłów.

Oczywiście wybór platform do tworzenia fajnych interfejsów, ich prototypów i animacji jest dość duży. Wszystkie mają swoje wady i zalety. A skoro nikt nam nie płaci za reklamę, nie będziemy w stanie wyróżnić jednej :)
A jeśli serio, aby lepiej zrozumieć perspektywę zachęcamy spróbować wszystkie dostępne opcje: pobrać, stworzyć prototyp, dodać animacje itp. Być może niektóre spodobają Ci się bardziej lub w przyszłej pracy ekipa będzie korzystała z rozwiązania z którym właśnie się zapoznasz. To doświadczenie na pewno nie będzie marnym. Na naszym kursie pomagamy opanować zarówno Figmę, jak i inne nowoczesne narzędzia.

Na koniec chcielibyśmy udzielić parę przydatnych wskazówek, które poszerzą Twoją wiedzę i pozwolą stać czujnym obserwatorem:

Regularnie czytać najnowsze badania nt. User Experience, takie jak Nielsen Norman Group. Firma jest światowym liderem w badaniach UX designu. Artykuły są w języku angielskim, więc jest to również fajna praktyka dla niezbędnych umiejętności miękkich.

Inspirować się pracą utalentowanych designerów, można śledzić międzynarodowe konkursy m.in. CSS Design Awards i Awwwards. Można tu się uczyć jak w przyszłości chwalić się własnymi projektami :)

Wywiad przeprowadziła: Karolina Emelianenko

Zostań zapotrzebowanym specjalistą IT

Zgłoś się już dziś i zdobądź wiedzę i doświadczenie wystarczające do zatrudnienia w największych firmach IT już na koniec kursu!