Jaka jest przyszłość projektowania UI i UX?

Czy design system jest fundamentem pracy projektanta/projektantki? Jak wygląda współpraca osób projektujących z programist(k)ami? Czy kreatywność powinna być na pierwszym miejscu? Przeanalizujmy obecny stan projektowania UI i zastanówmy się, jak będzie wyglądać przyszłość i gdzie trzymać rękę na pulsie, żeby nie wypaść z gry.
Zachęcam do dyskusji na ten temat na specjalnym kanale naszej społeczności, gdzie znajdziesz archiwum wszystkich wydań (dostępny dla osób subskrybujących Ahoy Pro).

Podejście, które odejdzie w zapomnienie

Poświęćmy chwilę na analizę obecnego stanu projektowania UI i problemów, jakie generuje. Przede wszystkim, proces nadal wydaje się być mocno oderwany od tego, jak finalnie aplikacja – webowa czy mobilna – będzie wyglądać i działać. Można powiedzieć, że koncepcja w której projektant tworzy w jednym narzędziu a następnie wyniki jego pracy są od podstaw odtwarzane w procesie developmentu jest bez sensu. Ma on jedynie uzasadnienie w przypadku wczesnych prototypów i ogólnie pracy low-fidelity, gdzie znaczenie dla projektanta ma szybkość iteracji i możliwość wygenerowania wielu pomysłów. W fazie wdrożeniowej oderwanie projektu od wdrożenia ma jednak mnóstwo negatywnych konsekwencji. Przede wszystkim trzeba przygotować materiały dla developmentu. Kiedyś – w postaci obszernej dokumentacji, teraz – w procesie handoff, który wspierają nowoczesne narzędzia. Dalej jednak ten scenariusz nie jest idealny i wymaga przepisania wartości z projektu na kod CSS. Poza powtarzaniem tej samej pracy, mnóstwo czasu poświęcamy na to, aby dopracować szczegóły, często odbijamy konkretne rozmiary, nieścisłości w wielkościach itp. Wielokrotnie spotkałem się z tym, że co innego jest w narzędziu UI np. w Sketchu, to samo inaczej wygląda w Zeplin, jeszcze inaczej w Storybooku a już w ogóle nie tak na produkcji. Po prostu, jest zbyt wiele miejsc, w których projekt może się, kolokwialnie mówiąc, rozjechać. Jak w związku z tym adresowane są te problemy?

Kreatywność a UI Design

Wbrew pozorom jest to zagadnienie, które ma sens w kontekście naszej dyskusji. Okazuje się, że praca UI designera w przyszłości prawdopodobnie będzie mniej kreatywna, a bardziej związana z implementacją założeń stworzonego design systemu. Podobnie praca w narzędziach do projektowania zmieni się w ten sposób, że nie będziemy mieli do dyspozycji typowych opcji „freeform”, gdzie obiekt można ułożyć w dowolnym miejscu i przesunąć co do piksela. Taki scenariusz już teraz jest realizowany w Figmie, która pod wieloma względami wyznacza przyszłość tego, jak będziemy projektować. Mowa tu o narzędziu Aut Layout, które jest przyczyną frustracji wielu projektantów, którzy nie do końca rozumieją, że tworzenie UI nie zostawia ogromnej przestrzeni dla kreatywności. Przesunąć elementy dobrze opisane Auto Layoutem można jedynie zgodnie z pewną konwencją. Pogódźmy się z tym, że tak będzie wyglądała przyszłość a my dużo więcej czasu będziemy poświęcać na określenie reguł zachowania layoutu, niż na projektowanie samego layoutu. Tak jak wspomniałem, wiele osób nie jest zadowolonych z tego powodu. Jednak w mojej ocenie, będą one musiały dostosować się do takiego schematu i jak dla mnie, jest on dużo lepszy dla końcowego użytkownika, niż freestyle i wymyślanie koła na nowo. Przygotujmy się na to, że podobnie jak to już ma miejsce w aplikacjach mobilnych, gdzie reguły dotyczące komponentów czy nawigacji narzucają wytyczne jak Material Design, w aplikacjach webowych także będziemy budować z gotowych klocków, którymi staną się design systemy i schematy komponentów a treści dostosowywać z wykorzystaniem narzędzi mocno związanych ze strukturą HTML i CSS.

Ścisła współpraca Designer ⬅️➡️ Developer

Punktem wyjścia jest kierunek, w którym zmierza współczesny front-end aplikacji webowych i mobilnych. Mnogość frameworków i stopień złożoności rozwiązań opartych o HTML/CSS i JavaScript sprawia, że projektując UI warto wziąć pod uwagę to, jakie technologie zostaną wykorzystane w procesie jego wdrożenia. Jest bowiem prawdopodobne, że już na etapie projektowania jesteśmy w stanie wspomóc się ustaleniami z zespołem wdrożeniowym i podjąć decyzje, które ułatwią późniejsze przekazanie projektu. W dłuższej perspektywie proces projektowania będzie bardzo ściśle związany z developmentem, a projektanci i UX designerzy będą pracować na gotowych komponentach, które pod spodem zawierają produkcyjny kod. To znaczy, że w idealnym świecie zmiana wykonana z pomocą narzędzia do projektowania będzie mogła zostać od razu wdrożona do produkcji. Jak współczesne narzędzia próbują to osiągnąć? Przykładowo, jest już wiele pluginów do Figmy, jak Figma to React, które całkiem nieźle radzą sobie z eksportem zaprojektowanych komponentów do kodu. Mimo, że działają coraz lepiej, nadal jest to rozwiązanie które nie umożliwia pracy w obie strony i równoległej współpracy na linii fron-end <-> projektant UI/UX. Obietnicę takiej współpracy, częściowo realizuje Framer Web w połączeniu z technologią React, gdzie gotowe, reactowe komponenty jesteśmy w stanie zaimportować do narzędzia, w ramach którego możemy później na komponencie nadpisywać zmiany. Jest to o tyle dobre podejście, że developer może zaprojektować strukturę komponentu, który importujemy, a wystawione propsy da się edytować z pomocą narzędzia przyjaznego dla projektanta. Na pewno jest to krok w kierunku przyszłości projektowania, jednak mimo, że Framer jest już dość długo na rynku, na razie cały czas to narzędzie wykorzystywane jest głównie w procesie prototypowania, po to, aby po przetestowaniu taki prototyp odtworzyć od podstaw w wersji produkcyjnej. Podobne podejście, możliwe, że nieco bliższe ideału oferuje narzędzie Modulz, które polecam Wam sprawdzić – od dawna jest w prywatnej becie, ale można powiedzieć, że oferuje połączenie możliwości Framer'a, Figmy i Storybook'a – dzięki czemu ma szansę zamazać granice pomiędzy projektem a developmentem.

Design Sytem jako fundament pracy projektanta

Jak widzisz, dużą rolę w projektowaniu przejmie design system, który stanie się podstawowym zestawem narzędzi do projektowania. Moim zdaniem ma to mnóstwo zalet i dobrze zaprojektowany design system, w powiązaniu z gotową biblioteką komponentów opartych o kod, które można modyfikować z poziomu narzędzia do UI designu to obecnie Święty Graal w procesie produktowym. UI/UX Designerzy w dużej mierze przerzucą się na projektowanie systemów i komponentów oraz zasad, które nimi rządzą. Takie ograniczenia są dobre, nie złe, dla produktów. Stronom, które ingerują w proces projektowania łatwiej także wytłumaczyć dane rozwiązanie lub brak możliwości jego wprowadzenia spójnością systemu.

UI Designer, który dowozi swoje projekty

Wszystkie podniesione wyżej argumenty w pewnym sensie popierają tezę, że projektanci będą wykonywać zadania zdecydowanie bardziej techniczne a mniej kreatywne. Za pewien czas będzie zacierać się granica między narzędziami do projektowania i developmentu. Prekursorem jest tutaj b, czyli wizualny edytor kodu HTML/CSS, który pozwala na projektowanie gotowych stron internetowych w środowisku przyjaznym dla designera. Webflow to nie droga na skróty do tworzenia stron. To narzędzie, które wykorzysta osoba z multidyscyplinarną wiedzą z zakresu projektowania i kodowania, dowożąc w ten sposób swój projekt w postaci gotowej strony. W przyszłości w Webflow znajdziesz bibliotekę pluginów a także gotowe elementy design systemu o który możesz oprzeć się projektując. Można powiedzieć, że to przyszłość projektowania z której możesz skorzystać już teraz aby dowozić swoje projekty. Nie wszystkie wymagają bowiem złożonych design systemów czy współpracy z developerami. Większość stron, które tworzymy mogłaby powstać w oderwaniu od tego skomplikowanego procesu i Webflow daje taką alternatywę. W przyszłości będzie jednym z prekursorów nowego trendu nie tylko w tworzeniu produktów, ale też w redukcji stacku technologicznego, który jest konieczny do wdrożenia i utrzymania serwisów internetowych. Z czasem, może okazać się alternatywą dla większych projektów, zwłaszcza z wykorzystaniem możliwości design systemów, które natywnie zostaną zaimplementowane do Webflow a obecnie dostępne są w ramach rozwiązań takich jak systemflow.co.

Podsumowanie

Rola UI designerów będzie zdecydowanie bardziej techniczna, niż kreatywna. Ich wiedza zostanie rozszerzona o elementy takie jak HTML/CSS i rozumienie kodu. UX i UI designerzy skoncentrują się na zaprojektowaniu odpowiedniego fundamentu pod powstanie design systemu, który stanie się źródłem prawdy dla kolejnych, tworzonych projektów. Granice między designem a developmentem zostaną zatarte, proces handoff i dokumentacja inna niż żyjący design system przestanie istnieć. Będziemy korzystać z narzędzi jak Webflow, do tego by tworzyć i utrzymywać bardziej złożone prototypy lub proste serwisy, oraz Modulz do rozwijania i wdrażania skomplikowanych systemów. Rola front-end developerów nie będzie sprowadzać się już do pisania HTML/CSS i zostanie z niej wyłączony wygląd serwisu, a będą bardziej koncentrować się na podejściu full-stack i serverless. Wiele elementów serwisów które projektujemy zostanie ustandaryzowanych oraz przełożonych na systemy, działające responsywnie i w wielu środowiskach.Lista linków z Newslettera:Dobre źródło ebooków o UI/UX
Rzadko zdarza się że materiały marketingowe firmy są aż tak dobre. W przypadku UXPin opracowane przez nich e-booki zawierają wiele bardzo praktycznej wiedzy i są dostępne za darmo.Szybkie projektowanie w oparciu o design system
Obecnie większość aplikacji posiada wspólne komponenty i projektowanie od podstaw np. formularza czy nawigacji, rzadko ma jakiś sens. Prime to rozbudowany zestaw komponentów umożliwiający bardzo szybkie tworzenie interfejsów i stron www.