Szkolenie Podstawy projektowania User Experience: Adobe XD

Usługa zdalna w czasie rzeczywistym, realizowana jest w godzinach dydaktycznych 45 min

Przerwy nie są wliczone w czas trwania usługi

Metody pracy: wykłady, dyskusje z uczestnikami i case study uczestników, ćwiczenia indywidualne, videorozmowa, współdzielenie ekranu, interaktywny chat za pomocą, którego będą przesyłane linki do podstron i omawianych tematów.

Aby realizacja usługi pozwoliła osiągnąć cel główny, warunkiem jest zaangażowanie uczestnika w różnorodne formy pracy podczas szkolenia. 

Aby wziąć udział w szkoleniu nie jest wymagana żadna wiedza z zakresu omawianych pojęć.

Trener: Krzysztof Bernardyn

DZIEŃ I

Przeprowadzenie testu wiedzy (pre-test w ramach walidacji)

BLOK I Wprowadzenie do Adobe XD- (teoria)-rozmowa na żywo

• Rozpoczęcie pracy z projektem w programie Adobe XD.
• Do czego służy Adobe XD – czy tylko projekt czy też kod?
• Jaka jest różnica między UI a UX w programie Adobe XD?
• Czego się nauczymy na tym kursie Adobe XD?
• Czym jest persona & task flow w projektowaniu UX?
• Projekt roboczy, etap 01 – tworzymy swój własny brief projektowy

BLOK II Makiety projektu / Wireframing Lo-Fi-teoria(videorozmowa)

• Czym jest Lo Fi Wireframe oraz High Fidelity w Adobe XD
• Obszary robocze i jak szeroka powinna być moja witryna lub aplikacja w Adobe XD
• Projekt roboczy, etap 02 – obszary robocze

BLOK III Czcionki, kolory i ikonki oraz wstęp do prototypowania-ćwiczenia(współdzielenie ekranu)

• Praca z tekstem w makietach Adobe XD
• Prostokąty, koła, przyciski i zaokrąglone rogi w programie Adobe XD
• Jak używać kolorów w Adobe XD
• Obrysy, kopiowanie i wklejanie w programie Adobe XD
• Projekt roboczy, etap 02 – makieta
• Darmowe ikony do projektów – skąd je wziąć?
• Jak znaleźć i używać istniejących zestawów interfejsu użytkownika w programie Adobe XD
• Grupy i problemy z edytowaniem ikon w programie Adobe XD
• Projekt roboczy, etap 04 – ikonki
• Jak dodać interakcję do swojego prototypu w Adobe XD?
• Prototypowa animacja i wygładzanie w Adobe XD
• Jak zobaczyć swój projekt w aplikacji XD na iPhone’a i Androida
• Projekt roboczy, etap 05 – testowanie na telefonie

BLOK IV Animacje- ćwiczenia(współdzielenie ekranu)

• Pierwsze kroki z automatycznymi animacjami w programie Adobe XD
• Więcej informacji na temat animacji w programie Adobe XD
• Projekt roboczy, etap 06 – pierwsza animacja
• Publikowanie makiet i wysyłanie ich do zaopiniowania

DZIEŃ II

BLOK I Moodboard – Projekt UI wysokiej jakości (Hi-Fi UI Design)-(praktyka)-ćwiczenia

• Moodboardy i inne zasoby używane w projektowaniu Hi Fidelity UI
• Jak stworzyć własny moodboard w Adobe XD
• Projekt roboczy, etap 07 – tworzenie własnego moodboardu

BLOK II Kolumny, siatki i kolory- praktyka(współdzielenie ekranu)

• Jak pracować z kolumnami i siatkami w programie Adobe XD
• Viewport (pole widzenia), czyli linie przerywane na obszarach roboczych
• Jak dodawać i usuwać linie pomocnicze

• Gdzie i jak szukać inspiracji kolorystycznych; narzędzie próbnik
• Jak stworzyć paletę kolorów?
• Jak interpretować gradienty?
• Jak zapisać i ponownie używać zapisanych kolorów
• Projekt roboczy, etap 07 – kolory i motywy (palety)

BLOK III Tekst i czcionki – opcje zaawansowane-(praktyka)-ćwiczenia

• Jak Jakich czcionek mogę używać w projektach stron internetowych lub aplikacji w programie Adobe XD?
• Jak sprawdzić, jakich czcionek użyto w innych, publicznie dostępnych projektach
• Jaka powinna być wielkość czcionek w projektowaniu stron internetowych?
• Jak tworzyć style (presety) znaków w Adobe XD
• Wtyczka – dodanie naszej pierwszej wtyczki Lorem Ipsum do Adobe XD
• Projekt roboczy, etap 09 – zaawansowana praca z tekstem

BLOK IV Rysowanie- praktyka(współdzielenie ekranu)

• Rysowanie i edytowanie kształtów w programie Adobe XD
• Co możemy zrobić z kształtami w XD?
• Nauka rysowania za pomocą narzędzia Pióro w programie Adobe XD
• Praca z pociągnięciami i liniami
• Czy potrzebuję zewnętrznych programów – Adobe Illustrator, Inkscape itd.?
• Projekt roboczy, etap 10 – Ikonki i przyciski

DZIEŃ III

BLOK I Zdjęcia i grafiki rastrowe w Adobe XD, praca z programem Photoshop- (praktyka)-ćwiczenia

• Maskowanie i przycinanie obrazów w programie Adobe XD
• Darmowe obrazy do wykorzystania w makietach XD – Unsplash, Pexels, Freeimage, Freepik
• Przyciemnianie obrazów tła z przezroczystością w XD
• Rozmycie tła i obiektów w programie Adobe XD

• Czy muszę znać Adobe Photoshop, aby tworzyć profesjonalny projekt w Adobe XD?
• Bar z przekąskami Banery Toast z zamaskowanym obrazem w programie Adobe XD
• Projekt roboczy, etap 11 – Dodawanie obrazów

BLOK II Komponenty, instancje oraz siatka modułowa- powtarzalność elementów-teoria (videorozmowa)

• Jak tworzyć i używać komponentów w Adobe XD
• Różnica między komponentami głównymi i instancyjnymi w programie Adobe XD
• Jak tworzyć stany najechania (hover) komponentu w Adobe XD
• Projekt roboczy, etap 12 – przyciski interaktywne
• Jak korzystać z siatki powtórzeń w programie Adobe XD
• Aktualizacja i problemy z powtarzającymi się siatkami krawędzi
• Projekt roboczy, etap 13 – powtarzająca się siatka

BLOK III Stosy (stacks) w Adobe XD, Mikrointerakcje i animacje-praktyka(współdzielenie ekranu)

• Czym są i jak używać stosów w Adobe XD
• Projekt roboczy, etap 14 – tworzymy formularz kontaktowy

• Różnice między animacją a mikrointerakcjami
• Projekt roboczy, etap 15 – druga animacja
• Przełącznik mikrointerakcji w programie Adobe XD
• Mikroanimacja menu typu hamburger – zamiana w krzyżyk
• Projekt roboczy, etap 16 – mikrointerakcja

BLOK IV Nawigacja wewnątrz obszarów roboczych i eksportowanie prac- praktyka(współdzielenie ekranu)

• Jak przypiąć nawigację do góry obszaru roboczego w Adobe XD
• Jak dodać wyskakujące okienko (pop-up) w Adobe XD
• Jak stworzyć wysuwaną nakładkę w menu nawigacji mobilnej?
• Czym są przepływy (Flows) w programie Adobe XD?
• Projekt roboczy, etap 17 – wyskakujące okienka i nawigacja
• Jak udostępnić dokument klientom, interesariuszom i testerom użytkowników
• Jak rozmawiać z programistą na wczesnym etapie procesu projektowania
• Eksportowanie do odpowiednich formatów plików graficznych z Adobe XD
• Eksportowanie obrazów wsadowo za pomocą opcji „Oznacz do eksportu” (Mark for export) w programie XD
• Jak wyeksportować kod w programie XD dla osób korzystających ze specyfikacji projektu
• Co to jest przewodnik po stylach w programie Adobe XD
• Projekt roboczy, etap 18 – finalna wersja projektu

Przeprowadzenie testu wiedzy (post-test w ramach walidacji).

Uczestnicy otrzymują skrypt z materiałami do samodzielnego utrwalenia materiału, prezentację ze szkolenia, a także certyfikat szkolenia.

• Warunkiem uzyskania zaświadczenia jest uczestnictwo w co najmniej 80% zajęć usługi rozwojowej oraz zaliczenie zajęć w formie ćwiczeń.
• Zapisując się na usługę wyrażasz zgodę na rejestrowanie/nagrywanie swojego wizerunku na potrzeby monitoringu, kontroli oraz w celu utrwalenia efektów uczenia się. 

Szkolenie podzielone jest na blok teoretyczno-warsztatowy według ustalonego harmonogramu. Użytkownicy, w ramach ćwiczeń praktycznych, będą proszeni o zbudowanie własnych segmentacji i grup klientów, person, oszacowanie punktów styku z klientem, opracowanie lejków sprzedażowych a także zaplanowanie podstawowej kampanii reklamowej. Wymagane będzie posiadanie konta mailowego Google -@gmail.

Wymagania techniczno-sprzętowe:

Każdy uczestnik szkolenia powinien mieć możliwość korzystania z komputera z dostępem do Internetu. Konieczne jest posiadanie dostępu do Adobe Creative Cloud z aktywnym programem Adobe XD w wersji 2022 lub nowszej. Zalecane jest posiadanie aktywnego dostępu do programów Adobe Photoshop oraz Adobe Illustrator.

Wymagania techniczne w przypadku webinarów / szkoleń online:

Dla aktywnego uczestnictwa w warsztatach, każdy jego uczestnik powinien posiadać komputer z dostępem do Internetu oraz z zainstalowanym programem Acrobat Reader.

• Procesor dwurdzeniowy 2GHz lub lepszy (zalecany czterordzeniowy)
• 4 GB pamięci RAM (zalecane 8 GB lub więcej)
• System operacyjny Windows 10/11, Mac OS wersja 10.13 (zalecana najnowsza wersja)

Ponieważ szkolenie prowadzone będzie na platformie clickmeeting lub google meets- przed szkoleniem uczestnicy dostaną link,  opartej na przeglądarce, wymagane jest korzystanie z ich najaktualniejszych oficjalnych wersji, takich jak Google Chrome, Mozilla Firefox, Safari, Edge, Opera.

Będzie to webinar realizowany w trybie dyskusji – umożliwia on uczestnikom rozmowę wideo w czasie rzeczywistym zarówno z prowadzącym, jak też z innymi uczestnikami. Dzięki temu uczestnicy mają wrażenie osobistego udziału w szkoleniu z prowadzącym i innymi uczestnikami.