Samouczek Adobe XD – projektowanie i prototypowanie użytkowanych doświadczeń.

Zapraszam serdecznie do wielkiego samouczka Adobe XD. W tym wstępie przedstawię się jako twój trener.

Jaka jest różnica między User Experience (UX) a User Interface (UI)? Jakie rodzaje projektowania poziomów istnieją i do czego najlepiej używa się programu Adobe XD? Odpowiedź znajdziesz tutaj!

Pierwszy raz otworzyłem/lam Adobe XD - i od razu pojawia się wiele możliwości, które można wybrać. W tym filmie jest małe wprowadzenie do Adobe XD, przegląd programu oraz prezentacja ekranu powitalnego XD i jego funkcji.

Artboards (Powierzchnie robocze) można w Adobe XD szybko tworzyć dla różnych rozdzielczości i urządzeń. Jakie szczególne cechy trzeba wziąć pod uwagę, dowiesz się z tego samouczka.

Różne ustawienia siatki ułatwiają nam czyste ustawienie elementów i obiektów między sobą. Do tego celu mamy do dyspozycji prostokątną siatkę oraz podział kolumn na kolumny.

Google, Apple i Microsoft udostępniają praktyczne zestawy interfejsów użytkownika na szybki start. Gotowe artboardy bardzo nam pomagają przy późniejszym kształtowaniu prototypów dla różnych platform.

Kolory odgrywają niezwykle ważną rolę praktycznie we wszystkim projektowaniu - w tym filmie dowiesz się, jak pracować z kolorami w programie Adobe XD, jak je importować oraz jakie praktyczne źródła istnieją, aby zbierać gotowe harmonie kolorów.

Istnieje wiele metod importowania zasobów, takich jak obrazy, pliki, dokumenty tekstowe, itp., do programu Adobe XD. W tym filmie przedstawiam kilka sposobów. Jako że XD jest częścią Creative Cloud firmy Adobe, korzystanie z bibliotek jest oczywiście bardzo wygodne i wygodne.

Temat czcionek i typografii jest ważnym elementem naszej podróży przez Adobe XD. W tym filmie dowiesz się, jak prawidłowo i efektywnie zarządzać czcionkami.

Formy można importować do programu Adobe XD w bardzo prosty sposób lub tworzyć je samodzielnie za pomocą narzędzia ścieżki. Jeśli obiekt jest używany więcej niż dwa razy, zaleca się również dodanie go jako symbol do listy zasobów.

Projektowanie ma wiele wspólnego z inspiracją i wpływem z zewnątrz. Obejmuje to otoczenie analogowe, a także świat cyfrowy. Tutaj przedstawiam kilka portali, które lubię odwiedzać.

Zaczynamy od małego, świetnego projektu praktycznego. W tym samouczku i dwóch nadchodzących filmach stworzymy stronę jednej strony.

Siatka powtarzalności jest jedną z najważniejszych funkcji programu Adobe XD. Pomaga nam dowolnie skalować i wypełniać grupy obiektów utworzone raz.

W ostatniej części projektowania Onepagera zajmiemy się stopką i obszarem dla referencji. Tutaj wykorzystamy praktyczne pliki SVG i poznajemy dodatkowe techniki projektowania.

W tej lekcji zajmiemy się pytaniem, jak można interaktywnie powiązać ze sobą poszczególne tablice przekrojów. Tutkamy tutaj, jakie możliwości wyboru przejścia (Transition) oraz jakie dodatkowe modyfikacje możemy wprowadzić w prototypie.

Każda strona internetowa potrzebuje punktu kotwiczenia do nawigacji. W tym filmie skupiamy się wyłącznie na tworzeniu głównej nawigacji w nagłówku strony oraz interaktywnym połączeniu między nimi.

To szkolenie opiera się na poprzednim rozdziale i pokazuje, jak dostosować stworzone menu desktopowe do smartfona. Ikona hamburgera i punkty menu zostaną urozmaicone ciekawymi animacjami.

Jednym z najpotężniejszych narzędzi do jak najlepszej wizualizacji jest funkcja Auto-Animate w programie Adobe XD. W tym przykładzie wyjaśniam, jak możecie dostosować zasadę funkcji Auto-Animate do każdego możliwego scenariusza adaptacyjnie.

W kolejnych filmach uczymy się tworzenia prototypu sklepu internetowego. Tutaj uczymy się, jak z prostych artboardów tworzyć wizualnie atrakcyjne prototypy o wysokiej wierności. Część 1 z 4.

W drugiej części zajmiemy się prezentacją szczegółowych opisów, dodamy suwak dla obrazów i połączymy ze sobą szablony.

Funkcja nakładki do interaktywnego prototypowania oferuje nam ekscytujące możliwości, takie jak bezpośrednie wyświetlanie i ukrywanie informacji. 🇵🇱

Dobry design użyteczności zawsze dostarcza użytkownikowi informacji zwrotnej dotyczącej statusu systemu. Tę informację zwrotną zamierzamy umieścić na zakończenie projektu w ładnej animacji.

Adobe XD w swoim procesie prototypowania obsługuje także interakcje za pomocą poleceń głosowych. Polecenia werbalne prowadzą do akcji systemowych, które możemy zdefiniować sami. Jak to działa, pokażę w tym samouczku.

Podczas współpracy z innymi działami i zaangażowanymi osobami, komentarz dźwiękowy jest cenną funkcją, umożliwiającą zrozumiałe przedstawienie statusu projektu.

Testowanie prototypu w środowisku wirtualnym to jedno - wyświetlenie go na żywo na końcowym urządzeniu to zupełnie inna sprawa. I dokładnie to można wygodnie rozwiązać za pomocą Adobe XD, zarówno poprzez kabel USB, jak i połączenie z Creative Cloud. Aby to zrobić, używamy aplikacji Adobe XD ze sklepu z aplikacjami.

Podczas współpracy niezbędne jest wymienianie się informacjami o postępie projektu z innymi działami. Za pomocą funkcji Publikuj prototyp może zostać udostępniony, aby recenzenci, programiści i zamawiający mogli uzyskać wizualne wrażenia z projektu. W tym momencie rozpoczyna się cykl edycji między działami specjalistycznymi, aby doprowadzić projekt do dojrzałości.

Adobe XD zmienia się jako bardzo młody program z każdą aktualizacją coraz bardziej: W tym filmie wyjaśniam, jakie nowości przynosi skok z wersji 18 do wersji 19, jak korzystać z funkcji oraz w jakich sytuacjach są one pomocne. Do tego należą: komponenty zamiast symboli, responsywne dostosowywanie wielkości, linie pomocnicze, narzędzie wielokątowe, dodatkowe możliwości formatowania tekstu i wiele więcej. Miłego oglądania!