Interfejsy Stron WWW
6 godz. 4 min · Adobe XD · UI, UX i Webdesign
Grzegorz RógIdea ArchitectJedną z ogromnych zalet Adobe XD jest fakt, że znajduje się w popularnym pakiecie Adobe, co znaczy że możesz z niego korzystać w ramach subskrypcji CC, jak również współpracuje z innymi aplikacjami, takimi jak Photoshop czy Illustrator. Kurs, który masz przed sobą to kompleksowe omówienie technik pracy w Adobe XD, jak również praktyczny projekt strony internetowej. Na tej samej zasadzie jesteś w stanie wykonać projekty mobilnych aplikacji.
Szereg pomysłów zastosowanych w Adobe XD sprawia, że projektowanie interfejsów z jego pomocą jest niezwykle wydajne. Jednymi z ciekawszych narzędzi jest przykładowo Repeat Grid, który pozwala Ci łatwo powielić powtarzalne elementy interfejsów, takie jak tabelki czy listy. Możesz także łatwo umieścić grafiki w każdym z elementów tak stworzonego grida, a nawet gotowy tekst, przeciągając obrazy czy pliki tekstowe do aplikacji!
W tym Kursie skoncentrujemy się od początku na tworzeniu praktycznego projektu witryny, którą przełożymy na działający projekt w jednym z kolejnych kursów. Zaczniemy mniej typowo, bo od widoku desktopowego, a następnie dorobimy widok responsywny i przetestujemy go na telefonie. Po drodze przekażę Ci szereg wskazówek, tipów i skrótów po to, aby pracować w Adobe XD jeszcze wydajniej.
Materiały z XD celowo podzieliliśmy na kilka kursów. Ten, który masz przed sobą jest fundamentem wiedzy o tym, jak tworzyć layouty w XD i zawiera szereg wskazówek związanych z samym projektowaniem UI. Nie obejmuje natomiast części pracy zespołowej, handoff (czyli przekazania do developmentu), ani prototypowania - do tego przewidzieliśmy osobne materiały. Zdajemy sobie sprawę, że nie wszyscy będą potrzebowali omówienia tych specyficznych funkcji, stąd taki podział kursów.
Kurs przygotowałem dla wszystkich osób, które chcą zająć się - lub już się zajmują - projektowaniem interfejsów użytkownika i chcą tworzyć nowoczesne strony WWW oraz aplikacje. Nieważne, czy korzystasz już z innych aplikacji - uzupełnienie swojego zasobnika o XD, zwłaszcza, jeśli jesteś użytkownikiem Adobe CC, pozwoli Ci wykorzystać jego unikalne funkcje w niektórych projektach. Jeżeli zależy Ci na szybkości w projektowaniu UI, wielu iteracjach, a także szybkim prototypowaniu - zdecydowanie warto poznać XD. Z drugiej strony, jeśli potrzebujesz prostej aplikacji, która pozwoli Ci zaprojektować stronę dla siebie lub Twojego klienta - ten kurs również jest dobrym rozwiązaniem!
CC 2020+
Cześć! Witaj w lekcji, w której chciałbym
pokazać Ci, jak możesz zarządzać swoim Adobe XD oraz jego wersjami.
Czasem będzie to przydatne.
Zakładam że masz już zainstalowany Adobe XD,
natomiast jeśli otworzysz aplikację Creative Cloud, to jest właśnie to miejsce,
z poziomu którego możesz również zarządzać wszystkimi innymi aplikacjami Adobe.
Ja przeniosłem się teraz do sekcji UI i UX.
Możesz też zobaczyć, czy masz jakieś aktualizacje do XD i polecam je wykonać.
Mimo tego, że w kursie będziemy pracowali na jakiejś konkretnej wersji XD, wydaje mi
się, że nie ma problemu abyś miał zupełnie nową wersję. Te wersje bardzo często się
zmieniają, no, ale w razie czego możesz tymi wersjami zarządzać.
Jeżeli przykładowo, chciałbyś mieć dokładnie taką samą wersję jak ja w kursie,
co też może być niezłym pomysłem, bo wtedy na pewno się nie zgubisz,
możesz to zrobić, przechodząc do sekcji UI i UX, następnie obok Adobe XD,
tutaj znajduje się w kafelku takie trzy kropki a następnie informacja o wersjach.
Masz tutaj sekcję "Other versions" i ja jestem aktualnie na wersji 28.2.12.
Możesz sobie taką wersję zainstalować
z tych historycznych wersji "Older versions", które się tutaj znajdują.
W związku z tym możesz pracować dokładnie na tej wersji, którą ja mam.
Uwaga, Adobe XD instaluje się w nowej wersji automatycznie.
Czyli można powiedzieć, że te update'y nawet
możesz nie zauważyć, że Adobe XD się zaktualizuje. Możesz tym zarządzać w preferencjach,
tutaj, w Adobe Creative Cloud, wyłączając opcję "Settings", tutaj "Always keep Creative Cloud up to date".
Jeżeli to wyłączysz, to te aplikacje nie będą automatycznie aktualizowane.
W zasadzie zalecam automatyczną aktualizację tych aplikacji,
no, chyba że na potrzeby kursu chcesz pracować ze starszą wersją,
albo że coś pójdzie nie tak po aktualizacji.
Jeśli przykładowo coś Ci nie działa.
Czasem jest jakaś wypuszczona trochę zbugowana wersja oprogramowania Adobe.
Możesz, pamiętaj zawsze, odznaczyć sobie to,
a następnie przejść do tej odpowiedniej aplikacji i wybrać inną wersję
i zainstalować sobie wersję oczko wcześniejszą.
Myślę że to jest ważny tip również dla Adobe xD, ponieważ update'y wychodzą bardzo często.
Sporo rzeczy się zmienia i czasem nie wszystko działa tak jak powinno.
Będziemy jeszcze zaglądać do aplikacji Adobe Creative Cloud, przy okazji omawiania
funkcji współpracy w zespole i tego gdzie lądują twoje pliki w chmurze.
Ale na teraz chciałem powiedzieć właśnie o tych update'ach.
Jeśli chcesz zobaczyć jeszcze inne informacje
na temat Adobe wystarczy kliknąć w tę ikonkę.
Masz tutaj informacje o wersjach językowych.
Na razie nie ma języka polskiego, ale tak, czy inaczej, dla nas język angielski
będzie tym językiem podstawowym, z którego polecam korzystać.
Taka jest nomenklatura w UI i UX'ie, więc warto ten angielski jednak znać.
Dlatego my takiej wersji będziemy korzystać.
Będziemy też tworzyli interfejs, który jest po angielsku
ale jeszcze pokazuje ci też opcje, które się tutaj znajdują w Creative Cloud,
ponieważ znajdują się tu też inne kursy,
które być może będziesz chciał/chciała przerobić,
jak również show case projektów zrobionych z pomocą Adobe XD.
Więc warto tutaj czasem zajrzeć.
Możesz też stąd przejść do sekcji "Community" i "Fora",
więc, być może, przydadzą Ci się te opcje samej aplikacji Creative Cloud.
Ja tymczasem wybieram "Open", czyli otwieram sobie Adobe XD i chciałbym jeszcze pokazać Ci
to okienko powitalne. Tutaj w okienku powitalnym mamy kilka sekcji:
sekcja "Recent" obejmuje te ostatnio używane pliki, stąd można po prostu kliknąć po to,
aby przenieść się do ostatniego pliku z którym pracowaliśmy.
Można tę sekcję "Recent" wyczyścić,
jeśli przejdę do ustawień plików "File", tutaj mam coś takiego jak "Open recent".
Mam tutaj wszystkie pliki, które otwierałem poprzednio, ale mogę też wybrać polecenie "Clear menu"
po to, żeby to menu wyczyścić.
No i teraz mamy wersję tego welcome screen'u, która jest wersją taką zaraz po zainstalowaniu Adobe XD.
Pojawia się tutaj tutorial. Jestem teraz w sekcji Home,
więc jeżeli chciałbyś taką wersję, to po prostu usuń sobie te ostatnie dokumenty.
Mamy tutaj też sekcję z dodatkami, to są plugin'y. Do XD można instalować fajne plugin'y,
z których będziemy zresztą korzystać.
Więc o tym jeszcze opowiem później.
A tu znajduje się cała sekcja chmurowa, czyli znajdują się wszystkie dokumenty,
które są używane w chmurze, zostały tam zapisane. O tym też sobie dokładnie porozmawiamy.
Również dokumenty, które zostały Tobie udostępnione.
No i możesz też zarządzać dokumentami, linkami, które udostępniasz innym.
Ważna sekcja tutaj, to sekcja "Deleted".
Jeśli przez przypadek usuniemy jakiś dokument,
a był on wcześniej zapisany w chmurze, czyli w Creative Cloud,
możesz go odzyskać właśnie z tej sekcji.
To jest sekcja która uratowała mi wiele razy już skórę,
więc polecam zapamiętać, że tutaj właśnie ona też się znajduje.
No i w końcu można otworzyć plik z naszego komputera.
Jeśli przejdę do sekcji Home,
poniżej znajduje się jeszcze sekcja z nowościami z nauką oraz support'em,
również support'em do Adobe, który możemy wysłać jako feedback.
Natomiast ja polecam sekcję "What's new". Adobe XD jest bardzo często aktualizowane.
Co miesiąc wychodzą jakieś nowe fajne feature'y i z pomocą tego linku możemy dostać się
właśnie do takiego ekranu, który pokazuje co się zmieniło każdego kolejnego miesiąca.
Warto pozostawać na bieżąco.
Oczywiście, na Eduweb'ie postaramy się też dostarczać Ci te informacje w przystępnej,
fajnej formie tutoriali, ale polecam też korzystać czasem sobie z tego linku.
Teraz, jeśli chcemy stworzyć nowy dokument, będziemy korzystali z jednej z opcji tutaj.
Możemy wybrać predefiniowany layout dla telefonu, tabletu lub desktop'owy
albo swój własny.
Jeśli wybierzemy któryś z tych, od razu zostanie stworzony artboard o określonej wielkości,
czyli tutaj określonych rozmiarach, które są podane na dole.
Klikając na strzałkę, można wybrać sobie właściwe urządzenie, które chcemy zaadresować
i wtedy ten artboard, oczywiście, zmieni rozmiar, dostosuje się do tego urządzenia.
Natomiast opcja "Custom Size" pozwala Ci wpisać dowolną szerokość i wysokość.
Ja zwykle klikam po prostu w tę ikonkę i wtedy tworzy się nowy dokument,
który jest bez żadnego artboardu i dopiero na takim dokumencie tworzę sobie artboard.
Natomiast teraz kliknę Command W albo Control W na PC'ie.
I teraz ważna informacja na cały kurs.
Jeżeli będę mówił Command, bo ja korzystam akurat z MacOS'a,
to na PC'ie jest Control, więc proszę zapamiętać, jak mówię "Command",
to po prostu korzystaj z Controla na PC'ie. I już nie będę tego powtarzał.
To co warto tutaj jeszcze podkreślić, to to, że możesz tworzyć sobie od razu artboard o konkretnych rozmiarach.
Czyli szerokość "Width" i wysokość "High".
Jeśli je wpiszesz i klikniesz na tę małą ikonkę,
zostanie utworzony nowy dokument od razu z artboard'em
o tych konkretnych rozmiarach.
Natomiast gdybyś chciał się cofnąć i teraz zrezygnować z tej opcji artboard'u,
wystarczy, że zostawisz tutaj opcje 0:0 i, po kliknięciu w tę małą ikonkę, zostanie stworzony nowy dokument,
który nie zawiera żadnych artboard'ów.
Od takiej czystej kartki w Adobe XD zacznijmy i przejdźmy do kolejnej lekcji.