Kurs Adobe XD część 2 – prototypowanie, projektowanie, animacja

89

Odkryj techniki prototypowania, projektowania, animowania aplikacji.

Poziom: podstawy
Data wydania: 2022
Czas trwania: 13 godzin

Czego się nauczysz?

Dzięki temu kursowi wykonasz kolejny krok w nauce Adobe XD. Zobaczysz jak wykorzystać narzędzia programu podczas tworzenia kompletnych projektów. Utworzysz prototyp oraz projekt aplikacji. Ponadto dowiesz się jak korzystać z Ui Kits, animować elementy i ekrany oraz wizualizować projekt za pomocą mockupu.

Kurs jest rozwinięciem pierwszej części szkolenia, w której możesz poznać podstawy narzędzi oraz programu.

  • przypomnisz sobie podstawy narzędzi oraz interfejsu
  • przypomnisz sobie stosowanie siatek oraz artboardów
  • dowiesz się jak pracować z UI Kits oraz Blokk Font
  • nauczysz się tworzyć animowane przejścia między ekranami
  • zaprojektujesz widoki kompletnej aplikacji
  • przetestujesz aplikację tworząc prototyp
  • zwizualizujesz aplikację za pomocą mockupu

Dla kogo jest ten kurs?

  • Ten kurs jest skierowany dla osób, które chcą rozwinąć wiedzę o narzędziach programu, o praktyczne prototypowanie, projektowanie oraz animowanie.
  • Do udziału w tym kursie mile widziane jest przerobienie pierwszej części kursu Adobe XD.

Jak tworzyć szkice i korzystać z UI kits?

W tym rozdziale dowiesz się jak korzystać z blokk Neue Font, który ułatwia szkicowanie aplikacji. Zobaczysz jak wypełnić prototyp przykładowymi elementami, danymi, tekstem. Utworzysz przykładowe formularze oraz przyciski na poszczególnych ekranach. Pobierzesz i nauczysz się korzystać z Ui kits, które przyśpieszą proces tworzenia szkicu. W następnym kroku, wypełnisz przykładowe bloki aplikacji danymi, zdjęciami, tekstem i grafiką.

  • utworzysz zarys aplikacji z użyciem Blokk Neue Font
  • wykorzystasz Ui Kits tworząc detale szkicu

Jak prototypować w Adobe XD?

Prototypowanie pozwala utworzyć wstępny zarys aplikacji, bez konieczności kodowania, co daje możliwość przetestowania pomysłu i naniesienie poprawek, zanim programista zacznie swoją pracę. W kursie zobaczysz jak stworzyć prototyp na podstawie makiet oraz szkiców. Prototyp ma odwzorować gotową aplikację, tworząc przykładowe treści, interakcje oraz animacje. Dzięki niemu możesz szybko przedstawić zarys pomysłu oraz przetestować użyteczność aplikacji.

  • przetestujesz powiązania między ekranami
  • zobaczysz jak będzie zachowywać się aplikacja
  • sprawdzisz całą ścieżkę zakupu w aplikacji
  • wychwycisz błędy w połączeniach

Jak stworzyć kompletny projekt aplikacji?

Podczas trwania kursu, korzystając ze zdobytej wiedzy, utworzysz kompletną aplikację do rezerwowania biletów i wycieczek. Pracę zaczniesz od ustalenia palety kolorów, a następnie utworzysz kolejne widoki aplikacji jak ekran rejestracji, logowania, powitalny, ładowania, powiadomień, główny oraz ekrany zakupu biletu czy mojego konta.

Dzięki utworzeniu wszystkich widoków aplikacji, przećwiczysz swoje umiejętności korzystania z fundamentalnych narzędzi programu Adobe XD. Zrozumiesz jak działa podział na widoki oraz jak łączyć ekrany między sobą.

Jak animować w Adobe XD?

W tej części kursu, dowiesz się jak stworzyć tworzyć ruch poszczególnych elementów, jak przyciski, przełączniki, elementy ładowania, suwaki, wykresy. Dodasz płynne przejścia między widokami, sprawisz, że karty w aplikacji zaczną się poruszać w momencie, gdy użytkownik wykona jakieś działanie. Dzięki umiejętności animowania elementów, umożliwisz przyciskom reagować, w zależności od tego, w co kliknie użytkownik.

  •  animacja z kartami
  • animacja ładowania
  • animacja tekstu
  • animacja slidera
  • animacja przycisku

Jak utworzyć mockup dla aplikacji?

Ostatnią częścią kursu jest przeskalowanie aplikacji i nałożenie ekranów na mockupy. Dzięki nim zwizualizujesz widoki projektu, by na przykład pokazać je w portfolio czy przedstawić klientowi.Zobaczysz jak poprawnie wyeksportować projekt i zapisać go pod wymiar ekranu Twojego telefonu.

Podstawowe wiadomości
Informacja o lekcjach
Instalacja Adobe XD
Interface na ekranie startowym
Interface w programie cz 1
Interface w programie cz 2
Interface w programie sekcja prototype
Interface w programie sekcja share
Interface w programie sekcja właściwości
Narzędzia w Adobe XD cz 1
Narzędzie Pen
Narzędzie tekst
Narzędzie tekst ciągły
Narzędzie Artboard
Rodzaje siatek
Dodawanie i korzystanie z pluginów
Wyrównywanie obiektów
Kolor, gradient
Tworzenie i wykorzystywanie component

Korzystanie z UI KITS oraz Blokk Font
Blokk Neue Font, rozpoczęcie szkicu
Szkic aplikacji z użyciem Blokk Neue Font
Szkic aplikacji cz 2
Czym są UI Kits?
Dodawanie detali do szkicu aplikacji
Dodawanie detali do szkicu aplikacji cz 2

Animacja w Adobe XD
Zaproszenie
Elipsa
Elipsa cz 2
Loading bar
Elipsa oraz bar przesuwanie
Proces tworzenia ekranu wraz z animacją przewijania
Animowanie liczb
Animowane karty
Fundamenty karuzeli
Interaktywna karuzela cz 1
Interaktywna karuzela cz 2
Hover button
Hover list
Lottie plugin
Przełącznik (Toggle Button)

Projektowanie Aplikacji
Omówienie koloru, projektu
Login screen cz 1
Login screen cz 2
Dane logowanie oraz rejestracji
Wypełnienie ekranu rejestracji oraz logowania
Zapomniałem hasła
Tworzenie ekranu głównego cz 1
Tworzenie ekranu głównego cz 2
Tworzenie ekranu głównego cz 3
Tworzenie ekranu głównego cz 4
Tworzenie działu Moje Konto
Tworzenie ekranu kup bilet
Tworzenie ekranu atrakcje
Omówienie stworzonych ekranów
Rezerwacje
Powiadomienia

Prototyp
Ekran startowy
Ekran główny cz 1
Ekran główny cz 2
Sprawdzanie oraz poprawianie błędów w całej aplikacji cz 1
Sprawdzanie oraz poprawianie błędów w całej aplikacji cz 2

Mockup
Idea działania 1x,2x,3x
Omówienie zmiany wymiarów dla własnego telefonu
Jak działa mockup w Photoshopie?

Dodaj ocenę