Adobe XD: Tworzenie Artboardu

CC 2020+

0:00Witaj w kolejnej lekcji, w której chciałbym najpierw zarządzić przestrzenią.

0:03Mamy tutaj Adobe XD oraz pasek, który wyświetla się na górze.

0:06Ponieważ tego z paska będę korzystał w trakcie kursu niezwykle rzadko,

0:10to przejdę na Mac'u do sekcji "General" i włączę jego autoukrywanie. Możesz na PC również wyłączyć sobie

0:14czy włączyć auto ukrywanie tego paska z ikonami.

0:18I teraz mam trochę więcej miejsca, mogę powiększyć XD na całą wysokość.

0:22Mogę to też zrobić najeżdżając na Mac'u na te przyciski i wciskając dodatkowo Alt "Option".

0:28I teraz mogę kliknąć na plus,

0:30wtedy okno powiększy mi się do całych dostępnych rozmiarów pulpitu.

0:33Nie chcę przechodzić w tryb pełnoekranowy, który jest też dostępny, wygląda trochę inaczej,

0:36dlatego że nie do końca lubię pracować w trybie pełnoekranowym w Adobe XD.

0:40Dlaczego tak jest?

0:42A otóż dlatego, że w trybie pełnoekranowym nie mam na Mac'u możliwości zmiany szerokości okna,

0:48a co za tym idzie również np.

0:50przesunięcia czegoś z pulpitu bezpośrednio na XD.

0:53Często korzystam z dodatkowych zasobów, plików tekstowych czy grafik

0:56i taki układ zdecydowanie bardziej mi odpowiada

0:58a różni się on w zasadzie od trybu pełnoekranowego tylko tym,

1:02że mamy dostępne te przyciski, więc myślę, że jest i tak bardzo czysto i schludnie.

1:06Pierwszą rzeczą, którą musimy zrobić w nowym pliku będzie stworzenie artboardu.

1:09Wybieram narzędzie "Artboard Tool",

1:11które znajduje się tutaj, albo wciskam A na klawiaturze, ważny skrót

1:15i teraz mogę zrobić na dwa sposoby artboard: albo po prostu go narysować

1:18i później ewentualnie dostosować jeszcze jego rozmiary,

1:22albo mogę cofnąć tę operację

1:23i mając zaznaczone narzędzia "Artboard Tool", mam też do dyspozycji listę urządzeń z prawej strony.

1:28Rzecz jasna to nie jest tak że projektujemy pod jakieś konkretne urządzenie,

1:30chociaż czasem tak jest, ale bardzo rzadko,

1:34raczej projekt, który chcemy przygotować dla sieci, będziemy projektować ogólnie,

1:38pod wszystkie rozdzielczości i będziemy się starali zapewnić mu responsywność

1:42od telefonu, aż po największy ekran desktopowy.

1:45O tym jak to zrobić,

1:46powiem ci jeszcze w jednej z ostatnich lekcji tego kursu.

1:49Natomiast, no, musimy od czegoś zacząć.

1:50Nie ma wyjścia, musimy wybrać jakiś projekt, jakieś urządzenie,

1:54no i my będziemy koncentrowali się w pierwszej kolejności na webie.

1:57Jest takie podejście "Mobile first", które mówi o tym,

2:00że projektujemy zawsze od najmniejszego ekranu,

2:02aczkolwiek nasz kurs jest tutaj trochę wyjątkowy.

2:04My chcemy skupić się konkretnie na webie zrobić landing page taki webowy.

2:08Większość użytkowników będzie oglądało go,

2:10tak zakładamy,

2:10na przeglądarkach, na urządzeniach takich jak:

2:14laptopy, czy komputery stacjonarne,

2:16aczkolwiek gdy dorobimy sobie później też wersje mobilne.

2:17No i teraz który projekt webowy wybrać?

2:21W zasadzie, tak naprawdę,

2:23w nowoczesnym projektowaniu UI nie ma aż tak dużego znaczenia od czego zaczniemy,

2:27ponieważ nasz projekt powinien być w pełni skalowalny.

2:30Powinniśmy korzystać z wektorów

2:31i wtedy, nawet jeśli będziemy chcieli coś przeskalować, będziemy mogli to zrobić.

2:35A wszystkie te projekty są raczej w tych samych proporcjach.

2:37Czyli powinniśmy przede wszystkim upewnić się, że nasz projekt jest w proporcjach 16:9,

2:41bo to jest najbardziej popularna proporcja współczesnych ekranów.

2:45Natomiast ja będę korzystał z web 13 66 -1366 na 768.

2:50To jest obecnie jedna z najbardziej popularnych rozdzielczości.

2:54Mógłbyś pomyśleć, że jest to Full HD, ale jednak nie,

2:57bo dużo osób korzysta z laptopów,

2:59dużo laptopów ma też dosyć bogate matryce, jeśli chodzi o piksele,

3:02ale korzystają one ze skalowania i wyglądają mniej więcej tak jak około 1366.

3:08O tym jeszcze będę mówił

3:09lub możesz sprawdzić dedykowany materiał na ten temat:

3:12"Jak projektować dla ekranów".

3:15No a ja zacznę sobie od rozmiaru 1366 x 768.

3:19On też będzie ładnie wyglądał nam w 100% na video.

3:21W związku z tym teraz warto zmienić jego nazwę.

3:24Możemy to zrobić dwa razy klikając albo na nazwę tutaj,

3:27albo dwa razy klikając w panelu warstw na nazwę tego artboardu

3:30i zmieńmy ją, przykładowo na Home.

3:32Teraz jedna ciekawostka,

3:34gdybyś teraz zmienił trochę widok, kliknął jeden raz

3:38tym samym narzędziem artboardu w dowolnym innym miejscu,

3:40zauważ, że zostaną utworzone tej samej wielkości artboardy.

3:44To jest fajny tip.

3:45Często potrzebujemy np. na potrzeby prototypu stworzyć kilka artboardów naraz.

3:49I to jest właśnie dobra droga do tego,

3:51aby stworzyć je jednakowego rozmiaru.

3:53Jeśli chodzi o właściwości takiego artboardu,

3:55są one dostępne zawsze po zaznaczeniu artboardu.

3:58Czyli, jeśli mamy zaznaczony jakiś element w środku albo odklikniemy się z tego artboardu

4:02i nie ma on niebieskiej ramki, napis nie jest na niebiesko, nie mamy dostępu do tych opcji.

4:07Najłatwiej jest kliknąć, po prostu, na nazwę artboardu

4:10i wtedy możemy przenieść się do jego właściwości w tym miejscu.

4:13To samo można osiągnąć klikając na nazwę artboardu w panelu warstw.

4:16Teraz mając zaznaczony ten artboard, co mamy tutaj do dyspozycji?

4:20Możemy go obracać, czyli przejść do trybu "Landscape" albo "Portret"

4:23i zauważ, że zostały odwrócone też wymiary, czyli width - szerokość i high - wysokość.

4:27Te rozmiary możemy zmieniać, to jest po prostu położenie na całym canvas'ie.

4:32Możemy je sobie ewentualnie wyzerwować

4:34i później przybliżyć się do tego naszego artboardu z pomocą Control+0, czy Command+0,

4:40ale nie ma to jakiegoś większego znaczenia.

4:42Jeżeli chodzi o jego rozmiar, to najczęściej będziemy chcieli od razu zmienić wysokość tego artboardu.

4:47To jest tak, że projektując jakiś landing page,

4:49w naszym przypadku będzie on dużo dłuższy niż jeden ekran,

4:53w związku z tym, tę wartość 768 będziemy chcieli zmienić.

4:56Gdybym zaznaczył kłódkę oczywiście będę naraz, proporcjonalnie zmieniał szerokość i wysokość.

5:01Nie chcę w związku z tym tego robić.

5:02Chcę zmienić tylko wysokość i w każdym

5:05takim polu, w którym wpisujemy jednostki wartości w Adobe XD,

5:08można stosować operacje arytmetyczne.

5:10Przykładowo mogę od tego odjąć jeden piksel i mam 767 pikseli.

5:16Ale to co ja chciałbym zrobić,

5:18to raczej pomnożyć to razy kilka wysokości,

5:20czyli przykładowo chciałbym zrobić 5 czy 6 ekranów.

5:23Mogę to zrobić razy 5 i zobacz,

5:26że teraz powstał nam jeden, długi artboard,

5:29który jest na wysokość 3840 pikseli.

5:32No i XD przeliczyło to za nas.

5:34Teraz wciskam Command 0, żeby wycentrować sobie widok i widzę,

5:38że mam tutaj jakąś linię przerywaną,

5:40to jest linia, która sygnalizuje nam pierwszy ekran.

5:43W zasadzie, to, co powinno być widoczne dla użytkownika mniej więcej,

5:47bo, oczywiście, zależy od konkretnej rozdzielczości,

5:49ale mniej więcej to, co znajduje się nad tą przerywaną linią będzie widoczne od razu

5:54np. po załadowaniu naszej strony i teraz ten Viewport Height możemy sobie zmieniać,

5:57po prostu kursorem przesuwając go w górę i w dół, ewentualnie możemy dostosować go w sekcji scroll'i

6:03czyli, przykładowo, mogę ustawić go na około 750 pikseli,

6:07pomijając górne elementy interfejsu przeglądarki takie jak pasek z adresem, czy zakładki.

6:12Mniej więcej te 730-750 pikseli typowy użytkownik, który ma taką rozdzielczość, będzie widział.

6:17I to jest dla nas jedna wskazówka.

6:20Natomiast, po drugie, ten Viewport Height ma konkretną funkcję w ramach Adobe XD.

6:25Jeśli będziemy teraz podglądać z pomocą "Preview" nasz projekt,

6:28"Desktop preview" pozwoli nam, po prostu, zobaczyć to tak, jakby to widział użytkownik,

6:33to zobacz, że jest wyświetlane tylko to,

6:36co znajduje się powyżej tej linii w Viewport Height,

6:40czyli powyżej tzw. fold'u.

6:41Tutaj będziemy widzieli teraz wszystko, aż do tej linii.

6:44Oczywiście, możemy scroll'ować i zobaczyć co jest poniżej.

6:47Gdybym jednak to wyłączył, z "Vertical" zmienił na "None"

6:49i przeszedł w tryb podglądu to mam widoczny cały projekt, on nie nie da się już, nie daje się już scroll'ować.

6:54W zależności od potrzeb będziemy to włączać lub wyłączać,

6:58ale z reguły trzymam to zawsze włączone i ustawiam sobie to na około 750 pikseli.

7:04Kolejna opcja to możliwość dodania wypełnienia do artboardu,

7:08czyli wrzucenia sobie koloru na cały artboard.

7:10Dość intuicyjna sprawa, będziemy jeszcze o kolorach sporo rozmawiać.

7:13I jeżeli chodzi o opcję artboardu, zostały nam w zasadzie dwa ustawienia:

7:17pierwsze to grid, czyli siatka

7:18będę chciał w niej porozmawiać, co prawda krótkiej, ale jednak następnej lekcji.

7:21Druga to opcja layout, o niej na razie nie będę mówił, ale proszę, zapamiętaj, że tu jest.

7:26Będziemy o niej rozmawiać później, przy omawianiu sekcji "Responsive Resize".

7:30Pozwala nam ona, w skrócie mówiąc, po włączeniu zachować rozmaite odległości

7:36czy rozmiary elementów, przy portowaniu takiego layout'u na inne ekrany

7:40np. gdybyśmy chcieli z desktopu teraz zmienić te elementy na mobile, czy na desktop,

7:44ta opcja nam w tym pomoże.

7:46I jeszcze mały tip na koniec.

7:47Jeżeli masz zaznaczony artboard i wciśniesz polecenie Command+D na klawiaturze,

7:51to ten artboard zostanie zduplikowany.

7:54I to jest dosyć pożyteczna funkcja, bardzo często z niej korzystam.

7:57Można takich artboardów sobie natworzyć bardzo dużo wciskając Command+D.

8:01Adobe XD jest niesamowicie wydajną aplikacją.

8:02Myślę, że w tym momencie najszybszą z tych aplikacji graficznych do tworzenia UI.

8:08I właśnie ta funkcja duplikowania artboard'ów wielokrotnie uratuje ci skórę.

8:12Dlaczego?

8:13Dlatego, że czasem, jeżeli chcesz przygotować sobie wariant jakiegoś ekranu,

8:18który tworzysz w ramach jednego artboard'u zamiast wykonywać zmiany bezpośrednio na tym artboardzie,

8:22po prostu zaznacz go, wciśnij Command+D.

8:25Dzięki temu zduplikujesz go z całą zawartością

8:27a potem możesz wykonywać sobie już zmiany na nowej wersji.

8:31Bardzo często, gdy się odzoomuje okazuje się,

8:34że mam z 10 czy 15 różnych wersji zrobionych tego samego artboardu.

8:38Nie wpływa to znacząco na wydajność.

8:40Adobe XD działa bardzo szybko a dzięki temu ja mogę szybciutko porównać sobie,

8:44która wersja bardziej mi odpowiada albo przeiterować takie propozycje z zespołem.

8:48To już wszystko na teraz.

8:50I do usłyszenia w kolejnej lekcji.