Dzień I
- 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
- 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
- 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
- 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
- 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
- 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)
- 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
- 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
- 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
- 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
- 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
- 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