Adobe XD: Wireframes i gotowe UI Kity

CC 2020+

0:00Cześć WITAJ W kolejnym dziale i w kolejnej

0:02lekcji nareszcie jesteśmy w miejscu gdzie możemy zacząć projektowanie rzecz jasna xD

0:06jeszcze milion funkcji które mógłbym wytłumaczyć ale uważam że zdecydowanie

0:11lepiej jest to zrobić na praktycznych przykładach.

0:13No i będzie przynajmniej odrobinę ciekawiej.

0:15Natomiast te funkcje które omawialiśmy

0:18czyli te niezbędne podstawy trzeba było po prostu wytłumaczyć.

0:21Jestem teraz w Jałcie naszej stronie choć mam stronę główną będziemy projektować.

0:26Na razie łapię play out and play i zrobimy sobie od podstaw od początku do końca.

0:32Z tym że nie będę omawiał fazy inspiracji fazy przygotowań to możesz

0:36znaleźć w innych materiałach na edukację jak przygotować sobie fajne

0:39szkice jakieś funkcjonalne jak zebrać inspiracje i przy okazji jeden fajny moim

0:45zdaniem xD naprawdę świetnie się nadaje do prototypowe dania.

0:49Jeżeli chodzi o takie wideo i prototypy to z czego możemy skorzystać.

0:54Są to tzw.

0:54biblioteki i chciałem pokazać na razie tę funkcję.

0:57Jeżeli jesteś na tym etapie koncepcyjnych

0:59i chcesz puszki to sobie różne rzeczy xD warto skierować się do opcji VR następnie

1:04Get i weekend i stąd możesz pobrać sobie taki weekend jak np.

1:08Apple iOS czy Material Design.

1:10Zdecydowanie polecam ale fajną opcją jest

1:13zamontowanie frejmów pobranie i łatki tu z reformami której zresztą postaram się

1:17dołączyć do plików źródłowych do tej lekcji.

1:19Zawiera folder z dwoma plikami.

1:22Mamy mobilne i nowe Frame.

1:25Jeżeli otworzymy sobie Frame above

1:28w nowej instancji Adobe xD otworzy nam się plik z którego możemy wykorzystać mamy

1:33tutaj mnóstwo jakichś elementów ikon gotowych °C nagłówków i innych rzeczy

1:39które możemy wykorzystać szyszki cofanie koncepcji naszej witryny.

1:44Praca z tego typu bibliotek może przebiegać na dwa sposoby albo zaznaczać

1:48my i wybieramy konkretny element który chcemy umieścić u nas zwyczajnie go

1:52kupujemy a następnie przenosimy i wklej do tego dokumentu.

1:57I to jest całkiem niezły sposób z którego

1:58często korzystam zwłaszcza jeśli mam do dyspozycji dwa ekrany gdzie na jednym mogę

2:02mieć wszystkie komponenty w pliku na drugim docelowe który projektuje i po

2:06prostu łatwo przerzucać je z jednego pliku do drugiego.

2:08Jeśli masz tylko jeden monitor możesz po

2:10prostu w tym pliku gdzie są wire frame utworzyć sobie jeszcze jeden Abbott i na

2:15nim tymczasowo projektować a później cała kopiować i przenieść gdzie indziej.

2:19Jeszcze jedna alternatywna metoda którą

2:21chciałbym pokazać jeśli otworzymy sobie plik np.

2:24z zasobów Apple które też są w tym menu i możesz je pobrać z Get It.

2:29Tutaj jest Apple iOS.

2:30Tam instaluje się sporo plików i jeden z

2:32nich przykładowo jest fajnie oponentami już gotowymi dla iPada.

2:37W związku z tym to co możesz zrobić to

2:39teraz w pakiecie Asus skorzystać z tych elementów które są stylami tekstu

2:44kontrolerami i możesz one są tutaj bardzo fajnie poukładane.

2:48Możesz całą taką bibliotekę importować sobie do siebie ale warunkiem

2:53jest to do swojego pliku warunkiem jest to żeby ten plik był najpierw zapisane w

2:57twojej chmurze a więc wybieram polecenie fail.

2:59Następnie save as i zapisuje to upewnij się że Cloud dokumenty jest wybrane.

3:04Wybieram tutaj jakąś intuicję inną nazwę a

3:08juz iPad tablet wybieram polecenie sitwy czekam aż Apple oddaje do chmury.

3:13I jeśli będę miał to w chmurze będzie taka mała ikonkę.

3:16Oczywiście wszystkie rzeczy związane z chmurą.

3:18Zarządzanie plikami jeszcze będziemy osobno omawiać OK.

3:21Plik został zapisany w chmurze ja teraz mogę przejść do mojego dokumentu i tutaj

3:25też przenieść się do panelu a skorzystać z Budzika link Asset albo z

3:29tego małego plusa to robi to samo czyli przenosi nas do biblioteki setów.

3:33Muszę wybrać plan dokumenty czyli

3:34dokumenty które są w chmurze i wybieram sobie ten iPad Temple.

3:38I teraz co się dzieje teraz ten plik a raczej wszystkie symbole które się w nim

3:43znajdowały dołączają się do mojego pliku XD Właśnie jako biblioteka.

3:48I teraz mogę łatwo przeszukiwać te pliki

3:50przykładowo jeśli chce skorzystać z jakiegoś kompleksowego menu

3:53mogę sobie to wybrać jeśli chce status Bar to też mam go do dyspozycji i mogę po

3:58prostu taki element przeciągnąć bezpośrednio na ekran jak

4:03widzisz jest on publikowany połączony z tym komponentu.

4:06O tym będziemy jeszcze dużo mówić ale w

4:07skrócie to jest praktycznie to samo co w bibliotekach które

4:12omawialiśmy ten aspekt jest linkiem do jakiejś biblioteki więc mamy ograniczone

4:16możliwości jego edycji ale ponieważ jest to biblioteka Adobe

4:20xD to mamy zdecydowanie większe możliwości edycji niż wcześniej.

4:23Natomiast jeżeli byśmy zmienili w tym dokumencie chmurę ten konkretny element to

4:28wtedy będziemy mieli szansę go zaktualizować do

4:32najnowszej wersji tak jak wspomniałem o tym jeszcze porozmawiamy ale chciałbym

4:35żebyś wiedział już na etapie frejmów że możesz właśnie podpiąć sobie tutaj do ASP

4:40bibliotekę pod warunkiem że jest w chmurze i często na etapie prototypu.

4:43Jeśli znajdziesz jakiś fajny weekend do

4:45obrotu typowanie będziesz mógł w ten sposób korzystać z rozmaitych kontrolę

4:49setów i jeśli będziesz chciał importować sobie różne pliki różne biblioteki też

4:52możesz to zrobić i możesz przeglądać je z pomocą tej małej strzałki to ja mam

4:56tablet jak również możesz przełączać się po nich tutaj jak również.

5:00W X czyli wyłączyć

5:03drukowanie tej biblioteki i teraz komponenty już nam zniknęły.

5:06Natomiast gdybyś z któregoś z tych

5:08komponentów korzystał wcześniej w pliku X i on znajdował by się na bazie to rzecz

5:11jasna pozostaje na tym jedynie zostanie od linku odcięty od tej biblioteki.

5:17O samych bibliotekach jeszcze można sporo mówić i będziemy o nich mówić o tym jak

5:20aktualizuje się pliki jak wpływa praca jednej osoby na bibliotekę którą ma inna

5:25osoba za importowany i tak dalej będziemy mówić o pracy zespołowej a także przy

5:28okazji tworzenia takiego małego Stargardu czy systemu więc teraz szczegółowo tego

5:33nie omawiamy ale wiem że już teraz wielu z was na tym etapie będzie chciał skorzystać

5:36z jakichś dodatkowych gotowych zasobów takich jak ławki.

5:41Ja osobiście rzadko korzystam z gotowki.

5:43Raczej projektuje wszystko od podstaw ale z drugiej strony te które zawierają np.

5:49moje filmy często mi się przydają podrzuca

5:52w komentarzu szereg już gotowych piłek z których możecie skorzystać.

5:56Natomiast to jak zazwyczaj ja z tym pracuje to np.

5:59mogę z pomocą takiego kitu szybko wybrać elementy które mi odpowiadają czyli np.

6:04umieścić je sobie tutaj na mojej.

6:08W ramach mojej strony czyli przykładowo jakiś Hero a następnie mogę wziąć sobie

6:12jakiś fragment z treścią i też go tutaj umieścić

6:18a następnie mogę bardzo łatwo sterować jeśli już mam gotowy jakiś szkic z tymi

6:23elementami które według specyfikacji powinny się na danym np.

6:27znaleźć czyli mam już te wszystkie elementy gotowe.

6:30Mogę teraz np.

6:31powiesić sobie Art Board i spróbować coś zmieniać.

6:34Czyli nie mogę przenieść np.

6:37to z Chin i spróbować zaznaczyć taką

6:40sekcję jedną usunąć to umieścić w tym miejscu to umieścić trochę wyżej zobaczyć

6:46jak to wygląda i sterować po różnych wersjach takiego różnych wariantach RAMu.

6:51Nie są to oczywiście docelowe wielkości rozmiary found itd.

6:54Ale pozwala mi to w pewien sposób

6:56przybliżyć sobie koncepcję tego jak mogłoby się ułożyć na stronie w wariancie

7:00bardzo likwidacji i później można to trzeba mówić zespołem

7:03czy zastanowić się który z wariantów byłby dla osiągnięcia jakichś konkretnych celów

7:08najlepsze nie jest to kurs prototypowy dlatego też nie będziemy zaczynać od

7:11prototypu jest osobny materiał o tym całym procesie.

7:16Wymyślanie otworzenia tworzenie prototypu puszki cofanie różne

7:20narzędzia są omówione w związku z tym my nie będziemy się tym zajmować ale wiem że

7:24wielu z Was zresztą ja też tak pracuję więc chciałem

7:27pokazać to w jednej z lekcji jak Adobe xD może nam ułatwić tworzenie tego typu

7:32wstępnych szkiców jest gotowych i pakietów listę i ławki też Zamiast zamieszczać w

7:36komentarzu z których możecie spróbować skorzystać.

7:38Może czasem jak ktoś jest początkujący warto sobie po prostu zacząć na czymś

7:42gotowym zobaczyć też rozłożyć to na czynniki pierwsze jak to było zrobione i

7:46zainspirować się trochę pracą jakiegoś dobrego wizjonera.

7:49My nie będziemy w ten sposób w kolejnych

7:51lekcjach pracować dlatego że dlatego już usuwamy sobie dodatkowe Abbott.

7:54Ale mam jeszcze jeden praktyczny klip na

7:56koniec gdybyś chciał pracować też z kotami bo taki jest masa np.

8:01na AIDS są naprawdę świetnej jakości i już niemalże gotowe składane rzeczy z których

8:06możesz zrobić Landing czy stronę to mam jedną wskazówkę w Adobe xD mimo że nie

8:11omawiamy dokładnie tych aspektów to zobacz że w ankietach po przejrzeniu elementów z

8:15innego pliku te komponenty które były w innym pliku zostały przeniesione do

8:19naszego pliku i teraz możemy z tego w pewien sposób skorzystać.

8:23Najczęściej jest tak że jeśli chcemy dostosować ją do naszych potrzeb.

8:26Tak czy inaczej musimy zmienić kolorystykę i topografii.

8:30No i jak można to łatwo zrobić z pomocą xD Jeśli zaznacza teraz przykładowo

8:35nagłówek a następnie spojrzy na jego właściwości to ma on kolor niebieski

8:39wypełnienia i oczywiście jakieś właściwości tekstu czyli Georgia część 8.

8:44To co mogę zrobić to skorzystać z panelu as i dodać taki kolor za pomocą ikonki

8:48plusa za ten kolor już wylądował tutaj ma on jakąś wartość jednostkową

8:53i mogę teraz prawym przyciskiem myszy wybrać polecenie edycji i edytować ten

8:57kolor co spowoduje że zmiana tego koloru będzie zastosowana globalnie do całego

9:03dokumentu czyli tam ten kolor niebieski zmieni się wszędzie tam gdzie występuje na

9:08kolor różowy które teraz zmieniłem to samo mogę zrobić przykładowo Oscara 400 s jeśli

9:14chcę zmienić front globalnie to mogę dodać tutaj że 38 punktów.

9:19Następnie wybrać polecenie edycji i mam do dyspozycji możliwość zmiany a ta

9:26zmiana zostanie zastosowana do wszystkich tego typu treści zobaczę.

9:31Gdybym przykładowo zmienił tą ramkę tekstową czyli dodaję ją i aria 14

9:37i zmieniam to na przykład na inne found czyli b.

9:42Został on zastosowany też dla innej ramki tekstowej czyli w ten sposób możemy

9:46zakładać globalne modyfikacje na style które np.

9:50są za importowane z kina lub je ręcznie dodamy.

9:53No i w zasadzie to wszystko co chciałem Ci pokazać w tej lekcji.

9:57Teraz przechodzę do czystej kartki.

10:00Jeżeli jesteśmy bogaci w wiedzę o to jak z

10:02pomocą Adobe xD możemy to typować i że ten wariant prototypu lo fi jaki możemy

10:08wykonać również xD co zdecydowanie później przyspieszy prace.

10:11Teraz wszystkie symbole które są mi tutaj niepotrzebne i style po prostu po usuwa.

10:16No i w kolejnej lekcji możemy już zacząć projektować nasz.