Specjalizacja projektowania UX/UI: od badań po dostępność

Inspiracja / Patricia Reiners

W tej lekcji podzielę się z wami moimi głównymi inspiracjami. Są one wszystkie bardzo różne i zróżnicowane, od projektantów po innowatorów i ludzi wokół mnie.

Inspiracja / Pablo Stanley

Tutaj dowiesz się o artystach i ilustratorach, którzy wywarli największy wpływ na moją twórczość.

Inspiracja / Chiara Aliotta

Kiedy zaczynałem swoją podróż jako projektant, opowiadanie historii nie było słowem stosowanym do projektowania. Nawet dzisiaj niektórzy projektanci błędnie stosują to słowo, aby wyjaśnić koncepcje takie jak „myślenie projektowe”. Dlatego powiem wam, kto pomógł mi wykuć sposób opowiadania historii stosowany do produktów projektowych.

Inspiracja / Margot Gabel

Lekcja ta powinna zainspirować Cię do poszukiwania źródeł inspiracji w obrębie obszaru projektowania cyfrowego i poza nim.

W tej lekcji poznasz podstawy UX i projektowania zorientowanego na człowieka. Poznasz również wiele różnych ról, które są częścią projektowania UX. Na koniec porozmawiamy o wartości biznesowej UX i dlaczego firmy powinny traktować ją poważnie.

Moduł 2

Dołącz do Ethana Parry'ego, który zanurzy się w ekscytującym świecie projektowania UX z Adobe XD. W tym pierwszym module poznasz podstawy UX i zrozumiesz, dlaczego jest to tak potężna i rozwijająca się dziedzina. Dzięki doświadczeniu zdobytemu w świecie rzeczywistym w najlepszych markach Ethan dzieli się swoim podejściem do strategii, badań i metodologii — wszystkim, czego potrzebujesz, aby zacząć projektować z zamysłem.

liczba lekcji: 19 (2 h 55 min)

Czym jest UX?

W tej lekcji podzielę się z Wami początkami UX. Porozmawiamy o Feng Shui w 4000 r. p.n.e., Walcie Disneyu i jego pragnieniu tworzenia idealnych magicznych doświadczeń oraz o Donie Normanie, człowieku, który ukuł termin „user experience”. Podzielę się również z Wami tym, w jakim kierunku moim zdaniem zmierza branża.

Krótka historia UX

Zasady dostępności i heurystyki

W tej lekcji otrzymasz wprowadzenie do świata projektowania inkluzywnego i dowiesz się, jak możesz uczynić swoje produkty i usługi bardziej dostępnymi. Nauczę Cię również innych najlepszych praktyk, znanych również jako heurystyki, jeśli chodzi o projektowanie interfejsów użytkownika.

Wprowadzenie do procesu UX

W tej lekcji zostaniesz wprowadzony do procesu projektowania UX. Przedstawię Ci dwa najczęstsze przedstawienia: model podwójnego diamentu i myślenie projektowe. Proces projektowania UX składa się z 5 głównych kroków: Empatia, Definiowanie, Ideacja, Prototyp i Test.

W tej lekcji nauczę Cię o wartości badań UX i o tym, co może pójść nie tak, jeśli ich w ogóle nie zrobisz. Poznasz również różnicę między metodami „Attitudinal vs. Behavioral” i „Qualitative vs. Quantitative”.

Wprowadzenie do badań UX

Desk Research, benchmark, wywiady

W tej lekcji skupimy się na trzech podstawowych metodach, które każdy projektant UX, badacz czy nie, powinien znać: analiza biurkowa, benchmarking i wywiady. Dowiesz się, kiedy stosować te metody i jakie są najlepsze praktyki dla każdej z nich.

Wykrywanie i definiowanie problemu

Jedną z kluczowych umiejętności projektanta UX jest umiejętność dostrzegania problemów. W tej lekcji nauczysz się, jak wykorzystać swoje ustalenia i techniki, takie jak mapowanie powinowactwa, aby lepiej zdefiniować problem, który próbujesz rozwiązać.

Persony są powszechnie używanym narzędziem w UX. W tej lekcji dowiesz się, dlaczego są ważne, jakie są cechy dobrej persony, jak ją stworzyć i kiedy w procesie projektowania UX są używane.

Tworzenie person

12 min

Mapowanie podróży

Gdy już masz personę (lub persony), zaleca się utworzenie mapy podróży. W tej lekcji poznasz kluczowe komponenty jednej z nich, różne typy, które istnieją, i dlaczego powinieneś ich używać.

W tej lekcji poznasz różne techniki tworzenia pomysłów – burza mózgów, burza mózgów i mapowanie myśli, żeby wymienić tylko kilka – które pomogą Ci znaleźć możliwe rozwiązania problemów wykrytych w trakcie badań użytkowników.

Techniki pomysłów

Jeśli chodzi o tworzenie aplikacji lub witryny internetowej, ważne jest, aby miała ona czysty, dobrze zaprojektowany interfejs użytkownika. W tej lekcji dowiesz się o architekturze informacji i o tym, jak skutecznie organizować treści.

Architektura informacji

Po wymyśleniu kilku pomysłów nadszedł czas, aby uczynić je namacalnymi. W tej lekcji dowiesz się o tym, co, dlaczego i kiedy prototypować.

Wartość prototypowania

Rodzaje prototypów i narzędzia do prototypowania

W tej lekcji dowiesz się o różnych typach prototypów, które istnieją. Podzielę się również kilkoma narzędziami, których można użyć do tworzenia wspomnianych prototypów.

Po utworzeniu prototypu nadszedł czas, aby inni ludzie go wypróbowali. W tej lekcji dowiesz się, jak przygotować się do skutecznych testów użytkowników i przeprowadzić je. Podzielę się również kilkoma najlepszymi praktykami w zakresie dokumentowania i ustalania priorytetów ustaleń.

Testowanie użytkownika

Współpraca z programistami

Nawet jeśli nie chcesz zostać programistą, będziesz musiał ściśle z nimi współpracować. W tej lekcji dowiesz się, jak zapewnić płynne przekazanie projektu i rozwoju.

Prezentowanie interesariuszom/klientom

W tej lekcji dowiesz się, jak mierzyć UX i jak przedstawiać swoje ustalenia w kreatywny sposób interesariuszom/klientom. Podzielę się również kilkoma wskazówkami, jak ewangelizować UX Design w firmie.

10 min

Studium przypadku

W tej lekcji dowiesz się, jak stworzyć studium przypadku, dzięki któremu będziesz w stanie udokumentować proces projektowania UX od początku do końca.

W tej lekcji dowiesz się o różnych platformach, na których możesz zaprezentować swoją pracę i jak stworzyć portfolio. Omawiając, jak stworzyć portfolio, omówimy również zalety i wady konkretnych formatów.

Prezentacja swojej pracy

Rozmowy kwalifikacyjne UX

W tej lekcji podzielę się kilkoma wskazówkami dotyczącymi rozmów kwalifikacyjnych na stanowiska UX i rodzajów ćwiczeń projektowych, z którymi się zetkniesz.

W tej lekcji dowiemy się, czym są badania UX i kiedy należy je uwzględniać.

Moduł 3

Odkryj, jak tworzyć znaczące doświadczenia cyfrowe z Patricią Reiners, która wnosi swoje doświadczenie z pracy z Google i Adobe. Tutaj rozpakowuje ona zasadniczą rolę badań UX i pokazuje, jak zbudować spersonalizowany plan badań. Zdobędziesz narzędzia, aby lepiej zrozumieć potrzeby użytkowników i zaprojektować rozwiązania, które naprawdę zrobią wrażenie.

liczba lekcji: 13 (1 h 47 min)

Czym są badania UX?

Jakie są najczęstsze metodologie?

Wybór właściwej metody stawiania pytań pozwala na wyciągnięcie właściwych wniosków. W tej lekcji przyjrzymy się różnicom między badaniami ewaluacyjnymi i generatywnymi oraz temu, kiedy stosować każdą z nich.

Ilościowe badania użytkowników

Ilościowe badania użytkowników dotyczą ilości. Potrzeba dużej ilości danych, aby móc uzyskać prawdziwe spostrzeżenia. Te spostrzeżenia odpowiadają na pytanie „co”. Pokazuje, jakich urządzeń używają użytkownicy, ale nie dlaczego używają konkretnego urządzenia. W tej lekcji omówimy różne metody ilościowe

Jakościowe badania użytkowników

Jakościowe badania użytkowników dotyczą jakości. Dzięki tym metodom będziesz w stanie odkryć swoje „dlaczego”. W tej lekcji przejdziemy przez różne metody jakościowe.

Utworzenie planu badań pozwala uporządkować myślenie wokół działalności badawczej.

Planowanie badań

W tej lekcji napiszemy plan badań dla projektu badawczego. Przejdziemy przez wszystko krok po kroku.

Pisanie planu badawczego

Wybór uczestników jest ważny, niezależnie od wybranej metody. W tej lekcji zobaczymy, jak to zrobić.

Jak wybrać uczestników

Jak napisać przewodnik do dyskusji

Podczas prowadzenia badań terenowych, badań kontekstowych, wywiadów indywidualnych lub jakiegokolwiek innego rodzaju wywiadu potrzebny jest przewodnik do dyskusji. W tej lekcji wymyślimy pytania, które pozwolą nam je właściwie sformułować.

Twoim celem w wywiadzie jest dowiedzieć się jak najwięcej o tym, jak myślą i zachowują się Twoi użytkownicy. W tej lekcji nauczymy się, jak formułować pytania i jakich materiałów będziemy potrzebować do wywiadu.

Jak przygotować sesję

Jak wygląda sesja jakościowa

W tej lekcji omówimy strukturę wywiadu: wstęp, część główną (pytania) i zakończenie.

Wizualizuj swoje jakościowe badania użytkowników

W tej lekcji podsumujemy wnioski i przedstawimy je wizualnie, aby zaprezentować je Twoim interesariuszom i członkom zespołu.

Mapa podróży użytkownika i minimotywy 1

W tej lekcji nauczymy się, jak tworzyć artefakty, którymi można dzielić się ze wszystkimi członkami zespołu i interesariuszami: persony i mapy podróży użytkowników.

Mapa podróży użytkownika i minimotywy 2

Kończymy tę lekcję na mapach podróży użytkowników i personach.

13 min

Moduł 4

Odkryj, jak projektowanie wizualne może stać się narzędziem do opowiadania historii, a Pablo Stanley będzie Twoim przewodnikiem. W tym module dzieli się kluczowymi zasadami stojącymi za mocnymi kompozycjami i tym, jak używać Figmy, aby ożywić swoje pomysły. Niezależnie od tego, czy dopiero zaczynasz projektować, czy chcesz wyostrzyć swoje umiejętności, znajdziesz praktyczne wskazówki, które podniosą poziom Twojej kreatywnej pracy. Gotowy na nurkowanie?

liczba lekcji: 18 (2 h 35 min)

Zasady kompozycji i projektowania wizualnego

Teraz przeanalizujemy elementy, które tworzą dobrą kompozycję.

Zasady Gestalt stosowane w projektowaniu

Przyjrzymy się, w jaki sposób zasady Gestalt wpływają na sposób, w jaki interpretujemy informacje wizualne.

Określenie, które części kompozycji są bardziej istotne niż inne, jest kluczowe dla skupienia uwagi obserwatora. Tutaj zobaczymy, jak ustalić hierarchię w naszym projekcie.

Hierarchia wizualna

Afordancje w interfejsie użytkownika

W tej lekcji omówię pojęcie „afordancji” i sposób ich implementacji w naszych interfejsach.

Wprowadzenie do elementów wizualnych i zrozumienie briefu

Brief kreatywny to ujednolicony dokument, który identyfikuje krytyczne korzyści kampanii lub produktu. Opowiada historię i wyjaśnia, dlaczego jest ona kluczowa dla odbiorców, służąc jako przewodnik do tworzenia czegoś.

Podstawowa kompozycja w Figma

W tej lekcji wykonamy kilka ćwiczeń w Figmie, aby zrozumieć, jak używać niektórych funkcji, aby zastosować to, czego się nauczyliśmy. Wiedza, jak używać tych narzędzi i stosować te umiejętności, pomoże Ci odblokować następny poziom umiejętności projektowania w Figmie.

Typografia jest jednym z najpotężniejszych elementów projektu. Podnosi treść i odzwierciedla ton i potrzeby projektu. Jej celem jest nie tylko estetyka, ale także funkcjonalność i technika.

Typografia

Kolory mają znaczenie. Komunikują ton i emocje, co czyni je potężnym narzędziem projektowym. Ale masz praktycznie nieskończone możliwości pracy — kiedy zaczynasz łączyć kolory, aby utworzyć paletę, twoje opcje są nieograniczone. Więc od czego w ogóle zacząć? W tej lekcji dowiemy się trochę o tym, jak łączyć kolory.

Tworzenie palety kolorów

Obrazy pozwalają zrobić więcej za mniej. Mówią, że obraz jest wart tysiąca słów. Dlatego obrazy i grafiki są potężnymi narzędziami wizualnymi, które mogą pomóc przekazać wiadomość i ustanowić wizualną tożsamość produktu. Możesz używać zdjęć, ilustracji i ikon. Dowiedzmy się, kiedy używać których.

Grafika i ikony

W tej lekcji po prostu otworzymy Figmę i przetestujemy różne style wizualne, a także zobaczymy, jak je wypróbować i dlaczego działają. Jeden po drugim.

Style wizualne

19 min

Szkicowanie modelu szkieletowego

Szkicowanie szkieletu pozwala nam szybko identyfikować problemy z użytecznością na wczesnym etapie procesu projektowania. Zachęca również różnych interesariuszy do dzielenia się swoimi uwagami i pomysłami. I daje nam wgląd w to, jak może wyglądać ostateczny projekt.

Definiowanie przewodnika po stylach wizualnych 1

Zanim umieścimy nasze szkice w wysokiej wierności, zdefiniujmy styl niektórych niezbędnych elementów. Posiadanie tego podstawowego systemu pozwoli nam poruszać się szybciej podczas składania naszego układu i kompozycji w makiecie wysokiej wierności.

Definiowanie przewodnika po stylach wizualnych 2

W tej drugiej części lekcji skupimy się na stylu ilustracji, które pojawią się w Twoim projekcie.

Tworzenie wysokiej jakości makiety 1

Teraz wykorzystajmy nasz przewodnik stylistyczny i szkic szkieletowy, aby stworzyć wersję wysokiej jakości naszej strony w serwisie Figma.

15 min

Tworzenie wysokiej jakości makiety 2

Tutaj będę kontynuował kształtowanie i finalizowanie mojego makiety o wysokiej wierności, zawsze dbając o to, aby jego żywy i dynamiczny wygląd.

Nauczymy się, jak dodawać proste interakcje komponentów, aby nasze przyciski i inne komponenty animowały się przy użyciu różnych wyzwalaczy.

Interakcje przycisków

Łączenie do stron i modali

Istotne jest tworzenie linków między różnymi stronami i innymi stanami naszego prototypu, aby czuć się bardziej naturalnie. W tej lekcji nauczymy się, jak połączyć się z nową stroną i otworzyć okno modalne.

Udostępnianie swojego prototypu

Teraz, gdy już wszystko mamy zebrane, możemy podzielić się tym ze światem!

2 min

Moduł 5

Z Chiarą Aliottą jako przewodnikiem zanurz się w mocy opowiadania historii jako narzędzia do tworzenia emocjonalnych, zorientowanych na użytkownika projektów. Odkryj, w jaki sposób elementy narracji — takie jak odbiorcy, cel i charakter — mogą kształtować wciągające doświadczenia cyfrowe. Dowiesz się, jak przekształcać briefingi UX w fascynujące historie, które łączą, angażują i pozostawiają trwałe wrażenie.

liczba lekcji: 11 (2 h 22 min)

Storytelling dla UX i UI Design

Jak w przypadku każdej podróży, uważam, że istotne jest zrozumienie, dokąd się zmierza. W tej lekcji przedstawiam kurs, jego strukturę i to, czego się wspólnie nauczymy. Opowiem również o różnicy między projektowaniem doświadczenia użytkownika (UX) a projektowaniem interfejsu użytkownika (UI).

Elementy opowiadania historii: publiczność, cel, postacie i kontekst

Jeszcze przed napisaniem historii, pierwszymi elementami definiującymi ją są odbiorcy, motywacja/cel, kontekst i zrozumienie, że historia musi mieć rytm.

17 min

Elementy opowiadania historii: struktura

Od czasów Arystotelesa do naszych czasów struktura opowieści nie zmieniła się zbytnio. Odkryjmy, jak tworzy się opowiadanie historii i jak można zastosować te same zasady w projektowaniu UX.

Siła opowiadania historii: emocje

Emocje odgrywają dużą rolę w naszym zachowaniu. Świetne historie wywołują emocje i mogą nawiązać kontakt z odbiorcami. W tej lekcji odkryjesz, jak możesz opanować moc opowiadania historii, wykorzystując emocje do osiągnięcia swoich celów.

Znajdowanie elementów opowieści 1

Biorąc pod uwagę fikcyjną markę, wykorzystam akty, sekwencje i sceny, aby zmapować doświadczenie i dogłębniej przeanalizować, w jaki sposób projektowanie UX wspomaga tradycyjne opowiadanie historii.

13 min

Znalezienie elementów opowieści 2

W tej drugiej części lekcji będę kontynuował prezentowanie sposobu tworzenia mapy elementów opowieści.

13 min

Wizualna inspiracja wyzwalająca wyobraźnię

W tej lekcji dowiesz się, jak czerpać wizualną inspirację z różnych źródeł, zanim przejdziesz do ostatniego kroku zadania, czyli stworzenia szkieletu strony docelowej.

Budowanie narracji i szkieletu 1

Do tej pory używałem aktów, sekwencji i scen, aby mapować podróż użytkownika. Siatka, którą stworzyłem za pomocą post, będzie planem i pomoże mi upewnić się, że projektowany przeze mnie produkt cyfrowy zapewni właściwe doświadczenie użytkownika.

Budowanie narracji i modelu szkieletowego 2

Na zakończenie tej jednostki nauczysz się, jak zagłębić się w narrację poprzez analizę ujęć i projektowanie szkieletu.

15 min

Wspieranie narracji: model szkieletowy a makieta o wysokiej wierności

W tej lekcji przedstawię wysokiej jakości makietę zainspirowaną modelem szkieletowym zaprojektowanym w poprzedniej jednostce. Faza dekonstrukcji jest niezbędna, ponieważ pomaga nam zrozumieć, czy jesteśmy spójni z naszą historią (znaną również jako spójność z modelem szkieletowym i wyborami podjętymi podczas analizy briefu).

Zaangażowanie widza w narrację

Storytelling to potężne narzędzie, które należy wykorzystywać mądrze. Dlatego nauczysz się odkrywać, jak możesz go używać, aby motywować, przekonywać i inspirować odbiorców.

Wprowadzenie do dostępności cyfrowej

Moduł 6

Wkrocz do świata inkluzywnego projektowania z Margot Gabel i dowiedz się, jak dostępność może przekształcić cyfrowe doświadczenia dla każdego. Margot dzieli się praktycznymi sposobami, aby uczynić Twoją stronę internetową bardziej przyjazną dla użytkownika — od kontrastu kolorów po tekst alternatywny. Odkryjesz, jak inkluzywny design nie tylko promuje równość, ale także poprawia SEO i ogólną użyteczność.

liczba lekcji: 14 (1 h 53 min)

Na początek zapoznasz się ze standardami dostępności i korzyściami, jakie ze sobą niosą.

Korzyści z dostępności cyfrowej

Teraz opowiem, dlaczego tak ważne jest, aby w projektowaniu uwzględnić dostępność cyfrową.

2 min

Dostępność w prawdziwym życiu

Czas zbadać, jak odtworzyć pewne sytuacje przeglądania, w których dostępność cyfrowa jest kluczowa. Pomoże Ci to się z nią utożsamić i zrozumieć, dlaczego jest ważna.

Najpierw dowiesz się o „słynnym” współczynniku kontrastu i jak go stosować do tekstu i wizualizacji. Następnie nauczę Cię, jak wybrać parę kolorów.

Kolory i kontrast

Teraz przyjrzysz się wyborom typografii i temu, jak mogą być dostępne. Zobaczysz również, jak wybrać parę.

Kroje pisma i hierarchia

Tekst alternatywny i mikrokopia

W tej lekcji nauczę Cię bardzo ważnego elementu dostępności cyfrowej i tego, jak może on wpłynąć na Twoje myślenie projektowe.

Pozwól, że pomogę Ci zrozumieć, w jaki sposób użytkownicy mogą różnie korzystać z klawiatury/głosu/dotyku i jak musisz się do tego dostosować/pomyśleć o tym w kontekście wyborów projektowych i UX.

Stany

Animacje i sterowanie multimediami

Przyjrzyjmy się różnym sposobom oddania kontroli i podejmowania odpowiedzialnych decyzji dotyczących animacji.

Wireframing dla dostępności

W tej lekcji dowiesz się, jak stworzyć projekt o niskiej wierności, a także wykorzystasz w tym ważnym kroku zdobytą dotychczas wiedzę.

10 min

Podstawowy i dostępny system projektowania

Pokażę Ci, jak skonfigurować podstawowe elementy: paletę kolorów, podstawową skalę czcionek, utworzyć kilka przycisków i pól tekstowych oraz zastanowić się nad ich różnymi stanami.

17 min

Projektowanie

Na koniec pokażę Ci, jak budować swoje projekty ze wszystkimi elementami, o których mówiłem wcześniej. Następnie nauczysz się korzystać z systemu projektowania.

W tej lekcji pokażemy Ci, jak sprawić, by projekt Figmy był interaktywny i jak najbardziej zbliżony do rzeczywistości, z uwzględnieniem różnych stanów umysłu.

Interaktywny prototyp

12 min

Testowanie, testowanie, testowanie

W tej lekcji przyjrzymy się projektowi z perspektywy użytkowników.

Poza stroną internetową, jak istniejesz na świecie? Może masz sklep fizyczny, konto na Instagramie lub miesięczny newsletter? Czy zastanawiałeś się nad tym, jak dostępne mogą być te punkty styku?

Myślenie wielokanałowe