W branży IT dziedzin związanych z projektowaniem jest całkiem sporo. Najczęstszymi z nich są projektanci, kryjący się za akronimami UX i UI. Cóż, niektórym udaje się nawet włączyć programistów front-end do roli projektantów. Spróbujmy dowiedzieć się, kim są projektanci w świecie IT, jaka jest różnica między UI a UX oraz jakie relacje muszą projektować inżynierowie front-endu.
Projektanci
Tworzenie interfejsu aplikacji, stron internetowych czy gier jest procesem dość złożonym i wymaga zastosowania wiedzy z różnych dziedzin: inżynierii, psychologii i projektowania. Projektanci interfejsów użytkownika (w języku angielskim - User Interface lub UI) skupiają się na sposobie wyświetlania funkcjonalności serwisu (wyszukiwanie, zakładki, menu) oraz szczegółach interakcji pomiędzy klientem a interfejsem. Celem projektanta interfejsu użytkownika jest akceptowalny estetycznie, nowoczesny projekt produktu . UX oznacza User Experience, co oznacza „doświadczenie użytkownika”. Projektant UX bardziej skupia się na użyteczności i zrozumieniu interfejsu przez potencjalnego użytkownika. Taki specjalista często będzie prowadził badania i ankiety, które będą podstawą do stworzenia koncepcji projektowej, a także testuje koncepcje w trakcie i po opracowaniu. Zwykle koncentruje się na strukturze, treści, nawigacji i sposobie interakcji użytkownika z tymi elementami.
Tworzy mapy witryn, prototypy, które stanowią podstawową strukturę przy tworzeniu oprogramowania. Celem pracy projektanta UX jest to, aby użytkownik szybko i bezboleśnie wyciągnął ze strony to, po co tu przyszedł . Jednak obecnie bardzo często spotyka się te dwie specjalizacje pisane ukośnikiem. Oznacza to, że zadania obu kierunków wykonuje jeden specjalista. Projektant UX/UI projektuje interakcję użytkownika z interfejsem, decyduje, co dokładnie ma on zrobić i jest odpowiedzialny za to, jak ten interfejs będzie w rezultacie wyglądał.
Co powinien wiedzieć projektant UX/UI
Edytor graficzny . Najpopularniejsze narzędzia na rynku to Adobe Photoshop, Adobe Illustrator, a także Sketch, Figma. Wybierz wygodny dla siebie edytor i najpierw spróbuj narysować zrzuty ekranu strony lub aplikacji, nieco je unowocześniając.
Narzędzia do prototypowania (Mockplus, Axure) . Narzędzie do prototypowania jest łącznikiem pomiędzy pomysłem a jego realizacją. Nie ma znaczenia, jakiego narzędzia użyjesz. Możesz wypróbować kilka i wybrać ten, który odpowiada Twojemu stylowi i preferencjom.
Psychologia użytkownika. Już na etapie projektowania powinieneś zastanowić się, czy korzystanie z tego interfejsu będzie wygodne dla Ciebie lub kogoś innego. Postaw się w sytuacji klienta, zbuduj z nim silną więź i zwracaj uwagę na jego potrzeby. W końcu produkt odniesie sukces, jeśli będzie na niego popyt.
Będziesz także potrzebować wiedzy z teorii koloru . Pewne rzeczy znamy z dzieciństwa, szczególnie ci, którzy chodzili do szkoły plastycznej. Istnieją jednak pewne specyfiki dotyczące pracy projektantów. Podstawową wiedzę można zdobyć z książek lub artykułów w Internecie.
W zależności od specyfiki pracy może być konieczna znajomość HTML i CSS lub (niektórych) języków programowania (linki do zasobów znajdziesz poniżej, w dziale „Co powinien wiedzieć programista front-end”).
Programista front-endowy
Głównym zadaniem front-end developera jest opracowanie klienckiej części interfejsu. Oznacza to, że taki specjalista „rewitalizuje” to, co zaprojektowali projektanci. Odpowiada za obsługę i obsługę interfejsu, a mniej za treść wizualną. Frontend developer często musi znaleźć dobre rozwiązanie dla interfejsu użytkownika już na etapie jego rozwoju, dlatego często współpracuje z projektantem UX/UI. Kod napisany przez front-end developera uruchamia się w przeglądarce użytkownika (jak to się mówi „po stronie klienta”). Ponadto jednym z najważniejszych zadań jest zadbanie o to, aby witryna lub aplikacja internetowa wyglądała tak samo na wszystkich platformach i przeglądarkach.
Co powinien wiedzieć programista front-end
Z reguły front-end opiera się na trzech filarach: języku znaczników stron HTML, arkuszach stylów CSS i języku programowania JavaScript. Dodatkowo front-end developer musi rozumieć zasady działania protokołu HTTP, serwerów i przeglądarek oraz możliwości wyświetlania interfejsu na różnych urządzeniach, które są aktualnie dostępne na rynku. Narzędzia i metody tworzenia interfejsów internetowych stale się rozwijają i zmieniają, dlatego programista musi to stale monitorować.
HTML i CSS (układ)
To jest układ, same cegły, z których zbudowana jest strona. Język znaczników HTML określa organizację witryny, zawartość i wszystkie interakcje między nimi. Pozwala na wyznaczenie góry strony, dołu, bloków bocznych z treścią, nagłówków, sposobu wyświetlania tekstu i elementów multimedialnych. Arkusze stylów CSS służą do ozdabiania elementów HTML. Określają dokładnie, w jaki sposób będzie wyświetlany każdy element graficzny, który znajduje się na stronie. Korzystając z najnowszych wersji HTML5 i CSS3, możesz umieszczać komponenty wideo i audio na stronie, tworzyć obrazy 2D i animacje, a nawet pisać proste gry. Nie ma potrzeby zapamiętywania wszystkich tagów i stylów na raz. Pomocne będzie poznanie podstaw i od razu wprowadzenie ich w życie. Bardzo dobrą stroną, na której można nauczyć się podstaw HTML i CSS jest W3School. Ale tylko jeśli masz przynajmniej podstawową znajomość języka angielskiego.
Ponadto programista front-end musi rozumieć rozwój w różnych przeglądarkach i na wielu platformach, a także adaptacyjny i responsywny układ.
Bootstrap
Jest to framework dla HTML, CSS i JavaScript. Oznacza to, że pewne szablony, z których niczym z konstruktora można składać witryny znacznie szybciej niż bez nich. Ale oczywiście musisz sam dostosować go do swoich potrzeb. Jeśli znasz angielski, polecamy stronę getbootstrap i tę samą w3schools .
JavaScript
Javascript jest podstawą programowania front-end. Jest to pierwszy i najbardziej rozpowszechniony język programowania interfejsów. Może dodać wiele funkcji do witryny. Na podstawowym poziomie język ten umożliwia dodawanie elementów interaktywnych do strony. Służy do tworzenia aktualizowanych w czasie rzeczywistym map, interaktywnych gier i filmów online. Na naszych starszych kursach JavaRush uczymy się trochę JavaScriptu. Można się go także uczyć w tej samej szkole W3School lub przeczytać o nim w języku rosyjskim na stronie javascript.ru .
jQuery
jQuery to biblioteka Javascript zawierająca wtyczki i rozszerzenia, które mogą jeszcze bardziej ułatwić i przyspieszyć programowanie. Zamiast pisać kod od zera, biblioteki pozwalają na dodanie gotowych komponentów, które następnie można dostosować pod konkretny projekt. Możesz korzystać z funkcji automatycznego wypełniania formularzy wyszukiwania, zmiany układu i rozmiaru siatki oraz ustawiania liczników czasu. Praktyczny kurs jQuery w w3school
Frameworki JavaScript
Istnieją różne rodzaje frameworków, ale możesz wybrać taki, który jest dla Ciebie wygodny w użyciu. Najbardziej znane to Angular, Backbone, Ember i React. Reprezentują gotową strukturę kodu. Pomagają przyspieszyć rozwój. A w połączeniu z bibliotekami mogą zminimalizować rozwój strony internetowej lub aplikacji od zera. Przegląd 5 najpopularniejszych frameworków i bibliotek JavaScript w 2017 roku
System kontroli wersji Git
Systemy kontroli wersji mogą śledzić zmiany wprowadzane w kodzie w czasie. Umożliwiają także powrót do poprzedniej wersji projektu. Git jest najpopularniejszym systemem kontroli wersji. Umiejętność pracy z Gitem jest ważną umiejętnością każdego programisty. Samouczek Git w języku rosyjskim
Krótkie wnioski
UI oznacza interfejs użytkownika, co oznacza „interfejs użytkownika”. Oznacza to, że projektant interfejsu użytkownika jest przede wszystkim odpowiedzialny za sposób prezentacji produktu użytkownikowi. Opracowuje przyciski, ikony, dobiera czcionki, przygotowuje układ. UX oznacza doświadczenie użytkownika. Zatem projektant UX projektuje projekt strony internetowej, aplikacji - czy czegokolwiek innego - tak, aby użytkownik czuł się komfortowo i rozumiał, co jest co, a przy minimalnym wysiłku mógł uzyskać z witryny to, czego potrzebuje. Bardzo często oba rodzaje pracy wykonuje jednoosobowa orkiestra: projektant UI/UX. Frontend developer ożywia pracę projektantów wprowadzając do niej dynamikę: zaczynają się naciskać przyciski i obraz zaczyna się zmieniać. Musi znać języki programowania, zaprawiony w frameworkach, preprocesorach i bibliotekach.
GO TO FULL VERSION