Łukasz Kościelniak, UX/UI designer po teleinformatyce na Politechnice Śląskiej, wyjaśnia różnicę między UI (warstwa wizualna) a UX (psychologia i logika działania produktu) oraz opisuje, jak wygląda współpraca programisty z designerem — od makiet i prototypów w Figmie, przez style guide, po design QA gotowej aplikacji. Radzi programistom, którzy projektują samodzielnie, oprzeć się na heurystykach Nielsena, spójności i dostępności, pokazywać klientowi jedną–dwie dopracowane koncepcje i włączać go już na etapie wireframe'ów. Poleca też narzędzia (Miro, UXPin, Axure, Figma), profil T-shaped dla osób wahających się między front-endem a designem oraz książki Steve'a Kruga i Dona Normana.
Łukasz Kościelniak
Łukasz Kościelniak jest designerem pracującym w obszarze UX i UI. Projektowaniem interesował się od szkoły średniej, a po studiach teleinformatyki na Politechnice Śląskiej, uznawszy że twarde programowanie nie jest dla niego, rozwija się zawodowo w UX i UI. Na co dzień pracuje w Figmie, a swoje koncepcje publikuje w portfolio na Behance.
Łukasz rekomenduje:
- Steve Krug, „Nie każ mi myśleć” („Don't Make Me Think”)
- Don Norman, „Design of Everyday Things”
Skrót rozmowy: UX & UI Design
Dziś moim gościem jest Łukasz Kościelniak. Łukasz jest designerem pracującym w obszarze UX i UI. Łukaszu, dziękuję, że przyjąłeś moje zaproszenie na rozmowę!
Cześć wszystkim i cześć Mateuszu. Bardzo dziękuję za zaproszenie, miło mi być tutaj dzisiaj z wami.
Jak zostać UI i UX designerem? Początki w branży
Moje zainteresowanie projektowaniem zaczęło się już w szkole średniej. Na początku zajmowałem się grafiką głównie dla własnej satysfakcji, tworząc różnego rodzaju banery i plakaty na szkolne imprezy. Fascynowało mnie to, że mogę zbudować coś atrakcyjnego wizualnie od absolutnych podstaw. Później zacząłem pomagać w tworzeniu prostych projektów dla rodzinnej firmy. Naturalnym krokiem wydawały się studia techniczne, więc poszedłem na Politechnikę Śląską, gdzie studiowałem teleinformatykę. Dość szybko jednak zorientowałem się, że twarde programowanie nie daje mi tyle radości i to zupełnie nie moja bajka. Skierowałem swoje zainteresowania w stronę obszaru UX i UI, i to właśnie tam postanowiłem rozwijać się zawodowo.
Czym różni się UI od UX?
Najprościej mówiąc, UI, czyli User Interface, odnosi się do estetyki i wizualnej warstwy produktu. Obejmuje wszystko to, co użytkownik bezpośrednio widzi – kolory, wygląd przycisków, typografię czy kompozycję elementów na ekranie. Z kolei UX, czyli User Experience, to dziedzina skupiona na psychologii, logice działania i ogólnych odczuciach użytkownika w trakcie korzystania z aplikacji. Zadaniem UX jest sprawienie, aby produkt był intuicyjny i realnie rozwiązywał konkretny problem, natomiast rolą UI jest zadbanie o to, aby to rozwiązanie było atrakcyjne i estetyczne.
Jaki wpływ na UX ma programista współpracujący z designerem?
Rola programisty na etapie projektowania doświadczeń jest nie do przecenienia. UX designer może zaprojektować wspaniałą i rozbudowaną ścieżkę, ale to programista najlepiej zna ograniczenia technologiczne i specyfikę wybranego frameworka. Właśnie on może w porę podpowiedzieć, że dane rozwiązanie będzie niezwykle trudne lub bardzo kosztowne we wdrożeniu, a następnie zaproponować szybszą alternatywę, która zrealizuje dokładnie ten sam cel biznesowy.
Jak wygląda współpraca programisty i designera przy projektowaniu interfejsu?
Tutaj współpracujemy bardzo ściśle, aby mieć pewność, że to, co zostanie narysowane, da się płynnie zakodować. Programista na bieżąco opiniuje powstające makiety i ocenia, czy stworzenie konkretnych, często niestandardowych animacji lub skomplikowanych komponentów wizualnych zmieści się w czasie przeznaczonym na dany sprint lub projekt.
Co programista dostaje od designera przed kodowaniem?
Programista dostaje gotowe makiety, interaktywne prototypy pokazujące przejścia, a także szczegółową specyfikację. Otrzymuje również tak zwany style guide, który jest zbiorem wytycznych dotyczących użytych fontów, palety kolorów i siatki marginesów. Dziś te wszystkie elementy są zazwyczaj zebrane i przekazywane za pomocą programu Figma.
Czy współpraca kończy się po przekazaniu projektu? Design QA
Zdecydowanie nie, nasza praca nie kończy się na przekazaniu plików. Gdy programista wdraża projekt w życie, przechodzimy do etapu zwanego design QA. W tym czasie UX/UI designer weryfikuje już zakodowaną aplikację, sprawdzając, czy wdrożenie jest wizualnie zgodne z przygotowanym projektem oraz czy zostały zachowane wszystkie kluczowe założenia dotyczące użyteczności.
Czy programista powinien znać Figmę lub inny program graficzny?
Tak, podstawowa wiedza z zakresu obsługi narzędzi takich jak Figma jest dzisiaj dla programisty po prostu kluczowa. Dzięki temu potrafi on samodzielnie poruszać się po pliku projektowym, by sprawdzić dokładne odległości między elementami, wyeksportować na własną rękę grafiki i ikony SVG, a także podejrzeć gotowe wartości CSS dla danego komponentu.
Czy podejście „mobile first” ma zastosowanie już w fazie projektowania?
Jak najbardziej, to absolutny standard naszej pracy. Proces projektowania zawsze zaczynamy od ekranów urządzeń mobilnych, ponieważ oferują one najmniej dostępnego miejsca. Wymusza to odrzucenie zbędnych ozdobników i skupienie się wyłącznie na najważniejszych, kluczowych funkcjach aplikacji, co doskonale porządkuje i ułatwia późniejsze projektowanie widoków na ekrany desktopowe.
Najważniejsze elementy UX przy samodzielnym projektowaniu
W projektowaniu UX najistotniejsze jest dogłębne zrozumienie samego użytkownika i zmapowanie problemów, z którymi się mierzy. Należy zadbać o prostą i czytelną architekturę informacji. Fundamentalną rzeczą, o której trzeba pamiętać, jest opieranie się na heurystykach Nielsena, które pomagają uniknąć najpopularniejszych błędów i zapewniają wysoką użyteczność.
Najważniejsze elementy UI przy samodzielnym projektowaniu
W przypadku projektowania UI, głównym filarem jest zachowanie odpowiedniej hierarchii wizualnej. Należy dbać o spójność projektu (consistency), wykorzystując powtarzalne komponenty interfejsu, dzięki czemu użytkownik nie musi ciągle uczyć się na nowo działania aplikacji. Równie krytyczna jest dostępność (accessibility), czyli odpowiedni kontrast i rozmiary fontów, a także opieranie interfejsu na znanych i sprawdzonych rynkowo wzorcach projektowych.
Ile propozycji designu pokazać klientowi?
Najgorszym możliwym scenariuszem jest przytłoczenie klienta zbyt wieloma opcjami, z których nie potrafi wybrać. Najlepszą i najbardziej profesjonalną praktyką jest przedstawienie jednej lub maksymalnie dwóch bardzo dopracowanych koncepcji wizualnych. Kluczowe jest, aby każdą naszą decyzję projektową potrafić w pełni uargumentować z perspektywy biznesowej.
Kiedy włączyć klienta w proces projektowania?
Klienta należy włączać w proces najwcześniej jak to tylko możliwe, idealnie już na etapie tworzenia prostych, czarno-białych makiet o niskiej wierności (wireframes). Wszelkie poprawki i zmiany na poziomie szkiców nic nie kosztują i są szybkie do naniesienia. Jeśli klient zobaczy projekt dopiero na etapie zaawansowanego interfejsu lub zakodowanej aplikacji, wprowadzanie jakichkolwiek zmian będzie bardzo czasochłonne i kosztowne.
Jakie narzędzia usprawniają pracę nad UX?
Na samym starcie najlepszym, niezawodnym narzędziem jest po prostu czysta kartka papieru i długopis. Następnie, do prowadzenia warsztatów i mapowania pomysłów, doskonale sprawdza się cyfrowa tablica Miro. Z kolei do budowania złożonych i wysoce interaktywnych prototypów używam narzędzi takich jak UXPin czy Axure.
Jakie narzędzia usprawniają projektowanie interfejsu?
Kiedyś rynek korzystał głównie ze Sketch'a oraz Adobe XD, jednak obecnie niekwestionowanym liderem i standardem branżowym, na którym pracuję każdego dnia, jest program Figma.
UI/UX design czy front-end development? Jak wybrać
Zdecydowanie można łączyć oba te światy, i tutaj warto celować w profil T-shaped. Oznacza to, że najlepiej wybrać jedną ścieżkę, w której staniemy się ekspertami – na przykład programowanie we front-endzie – a z drugiej dziedziny, czyli projektowania UI/UX, posiadać szeroką wiedzę ogólną i mocne podstawy. Dążenie do bycia ekspertem najwyższej klasy na obu tych płaszczyznach jest niezwykle trudne i może skutkować tym, że w niczym nie będziemy wystarczająco dobrzy.
Jak zadbać o dobry design projektów do portfolio?
Jeśli design nie jest naszą najmocniejszą stroną, najmądrzej jest polegać na sprawdzonych rozwiązaniach i wykorzystywać gotowe design systemy, takie jak ch chociażby Material Design czy Bootstrap. Warto stawiać na totalny minimalizm – pilnować dużej ilości białej przestrzeni (white space) i trzymać się jednej, sprawdzonej palety kolorów. Dzięki temu projekt będzie wyglądał estetycznie, czysto i profesjonalnie.
Jakie dziedziny wiedzy warto poszerzać, by tworzyć lepszy UX?
Bardzo polecam rozwijanie wiedzy z dziedzin takich jak kognitywistyka, psychologia oraz socjologia. Ogromnym atutem są również podstawy analizy biznesowej. Taka wiedza pozwala znacznie lepiej zrozumieć prawdziwe motywacje, nawyki i zachowania ludzi, którzy będą końcowymi użytkownikami naszych cyfrowych produktów.
Jakie książki o UX i UI warto przeczytać?
Książką, od której absolutnie każdy powinien rozpocząć swoją przygodę, jest branżowy klasyk "Nie każ mi myśleć" (Don't Make Me Think) autorstwa Steve'a Kruga. Świetnie i w przystępny sposób tłumaczy ona fundamenty użyteczności. Równie mocno polecam książkę Dona Normana pod tytułem "Design of Everyday Things".
Gdzie znaleźć Łukasza w sieci?
Można mnie znaleźć na portalu LinkedIn, wyszukując moje imię i nazwisko: Łukasz Kościelniak. Poza tym regularnie wrzucam swoje koncepcje i projekty do portfolio na platformie Behance.
Łukaszu, bardzo dziękuję za tę rozmowę i podzielenie się ogromem wiedzy z naszego podwórka.
Dziękuję serdecznie za zaproszenie, do usłyszenia!
