Szkolenie Podstawy projektowania User Experience: Adobe XD

Usługa stacjonarna, szkolenie realizowane jest w godzinach dydaktycznych 45 min.

Przerwy nie są wliczone w czas trwania usługi

Liczba godzin praktycznych: 18

Liczna godzin teoretycznych: 6

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ą prezentację ze szkolenia, a także certyfikat szkolenia.

Wymogi unijne związane z realizacją szkolenia z dofinansowaniem:

• Warunkiem uzyskania zaświadczenia jest uczestnictwo w co najmniej 80%- 100% (w zależności od programu dofinansowania i podpisanej umowy z Operatorem) zajęć usługi rozwojowej

Regulamin świadczenia usług szkoleniowych znajduje się na stronie:

https://digitalbrand.com.pl/

Rekomendowane warunki techniczne:

• Założone konto Canva (może być wersja bezpłatna)
• Procesor dwurdzeniowy 2GHz lub lepszy (zalecany czterordzeniowy);
• 2GB pamięci RAM (zalecane 4GB lub więcej);
• System operacyjny taki jak Windows 8 (zalecany Windows 11), Mac OS wersja 10.13 (zalecana najnowsza wersja), Linux, Chrome OS.
• Korzystanie z Google Chrome, Mozilla Firefox, Safari, Edge (Chromium), Yandex lub Opera. Należy korzystać z najaktualniejszej oficjalnej wersji wybranej przeglądarki.

Należy zabrać:

• laptopa, myszkę, ładowarkę
• telefon i ładowarkę

• Szkolenie prowadzone jest w godzinach dydaktycznych (24 godziny dydaktyczne = 18 godzin zegarowych)

Jak przygotować się do szkolenia aby było jeszcze bardziej efektywne?

• 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.