Wprowadzenie do Figma

Narzędzia pracy

UI/UX designer do swojej pracy tak jak każdy inny pracownik potrzebuje odpowiednich narzędzi. Są to oczywiście programy do projektowania interfejsów aplikacji/stron www ale także plakatów i innych dzieł. Wyróżnimy i opiszemy tutaj 4 popularne programy które są przeznaczone właśnie do takich celów.

Figma

Pierwsze z narzędzi jest dostępną za darmo aplikacją webową Figma. Służy ona przede wszystkim do projektowania interfejsów, jednak już po stworzeniu pierwszego projektu zauważamy, że możemy w niej zaprojektować tak na prawdę wszystko - począwszy od UI dla smartfonów od Apple czy urządzeń pracujących na systemie Android przez tablety, urządzenia desktopowe, zegarki aż w końcu po kartki papieru czy też obrazy dołączane do postów w social mediach.

Figma, nawet w darmowym planie wyróżnia się też możliwością udostępniania projektu innym użytkownikom, aby Ci mogli zobaczyć nasz projekt w wersji "live". Możemy też dać im uprawnienie do edycji naszego projektu. W tym miejscu warto wspomnieć o bardzo fajnej funkcjonalności jaką jest możliwość komentowania na żywo w małym, zgrabnym dymku danego elementu przez grupę użytkowników. W praktycznej części kursu będziemy posługiwać się właśnie tym narzędziem, a wprowadzenie do programu znajdować się będzie w ostatniej lekcji tego rozdziału.figma-website

InVision Studio

Drugim narzędziem jest program InVision Studio, którego możliwości są bardzo podobne do wcześniej opisywanej Figmy. Zaraz po uruchomieniu aplikacji oraz dodania nowego projektu dostajemy możliwość wyboru urządzenia na którego ekran chcemy zacząć projektować. Możemy również sami zdefiniować wysokość oraz szerokość ekranu i od razu zacząć projektowanie. Program InVision udostępnia projektantowi możliwość podglądu na żywo na swoim urządzeniu mobilnym postępów pracy jednak tak samo jak w przypadku Figmy musimy mieć zainstalowaną aplikację mobilną. Rozwiązanie to jest bardzo wygodne jednak we wcześniej wymienionej aplikacji działa dużo sprawniej.

Przykładowy projekt wykonany Vision Studio

invision-studio-example-project

Adobe XD

Adobe XD jest ostatnim - trzecim narzędziem stricte przeznaczonym do projektowania UI/UX. Funkcje programu odzwierciedlają w dużym stopniu swoich poprzedników. W tym przypadku po utworzeniu projektu sidebar z potrzebnymi funkcjami znajdziemy po lewej stronie ekranu. Na ogół mogą wydawać się jako bardzo podstawowe, jednak program pozwala na ich szeroką customizację.

Projekt postu Instagram w Adobe XD

adobe-xd-example-project

Adobe Photoshop

Popularny Photoshop również może nadać się do zaprojektowania każdego rodzaju interfejsu użytkownika, jednak nie jest aż tak zautomatyzowany pod projekty UI/UX. Narzędzie jest programem stricte graficznym, pracuje się w nim na warstwach i wszystkie elementy musimy własnoręcznie dostosowywać, podczas gdy wyżej wymienione programy oferują dużą ilość przydatnych skrótów klawiszowych.


© 2020 CodeHub.pl