Adobe XD: Tworzymy sekcje strony

CC 2020+

0:00Część tej kolejnej lekcji jak mawiają praktyka czyni mistrza.

0:02W związku z tym zabieramy się do pracy aby

0:04ułożyć tutaj elementy i przygotować coraz więcej naszego landing page przechodzę

0:09deskę a tutaj mam ten set module grafik Module.

0:12Grafiki mają tę zaletę że mogę wstawić teraz dowolny obiekt mogę go np.

0:17obrócić i zakładamy że np.

0:19ten pan będzie coś tłumaczył.

0:21Może sobie notować

0:22umieszczamy te obiekty obok siebie w tło jeszcze przydałoby się coś wrzucić.

0:26Czyli może skorzystamy z tego tła przeglądarki Command zawiasy laserowe.

0:33Pozwoli nam to odpowiednio umieścić na

0:34warstwach Zauważ że ja się wcale nie przejmuję teraz warstwami po prostu jestem

0:38w jakiejś fazie prototypu projektowania dużo jeszcze przestawia.

0:42Dużo oglądam jak

0:44wygląda i czy mi się podoba w związku z tym ten panel warstw nawet mam nieaktywne

0:48wezma sobie tło z tego kafelki a następnie to tło umieszczone pod

0:55standard gdzieś mniej więcej tak znowu nawias klamrą.

0:59Po to żeby odzyskać tekst pod spodem no i zobaczmy teraz będzie trzeba to

1:03przesunąć na dół i zacząć dopasowywać ten obszar.

1:07Teraz jak dobrze zarządzać przestrzenią na

1:10początku wypełni ją wszystkimi elementami które są potrzebne czyli wrócę tu jeszcze.

1:14Przycisk ten przycisk chciałbym zmienić na

1:16takiej zasadzie że mamy w sobie kliknąć na tle.

1:20Następnie wybiorę dla niego to pomarańczowe tło i jeszcze jeden napis po

1:24pierwsze wpisze Ride the story on your blog.

1:27A poza tym będę chciał wypełnić to kolorem granatowym.

1:31W ten sposób no i teraz mamy do dyspozycji leje out Grid który pozwoli nam w miarę

1:39dobrze zaznaczyć to wszystko i osadzić je w ten sposób.

1:43Jeśli chodzi o tą krawędź wydaje mi się że moglibyśmy zostawić to

1:48na razie zostawmy to tutaj a przesunięty całość

1:53w to miejsce staramy się żeby grała górna część tej grafiki z górą kafelki.

1:58Ale tak naprawdę główna praca która jest

2:01tutaj do wykonania to jest praca na mikro na makro czyli włączam ten lay out Grid

2:06i dbam o to żeby po pierwsze te elementy były produkowane pod sobą.

2:12A jeśli już mam oba zaznaczone to mogę je zgrupowań zaraz pokażę ci dlaczego znów

2:16wyrównuje i grupuje i to mogę sobie wyrównać i zgrupowań.

2:21Teraz mam trzy grupy które mogę Ci w tym

2:23zaznaczyć i upewnić się że mają równe odstępy między sobą to jest OK.

2:27Chyba tutaj jeszcze powinien być nagłówek zaraz go odzyskałem.

2:29OK teraz to na czym mi najbardziej zależy

2:33to jest to aby może nie tyle te elementy były idealnie ułożone na tej siatce co po

2:37pierwsze żeby były wyrównane do lewej strony czyli żeby były wyrównane do Guide

2:42w ten sposób super to też powinno być rzeczywiście.

2:46Te liczby też powinny być wyrównane

2:49idealnie do tego gnida i jeśli tutaj mamy około czterdziestu punktów odstępu to

2:54chciałbym zadbać o to aby od górnej krawędzi też było około 40 punktów

2:59przynajmniej tyle pozwoli nam zachować te optyczne odległości od każdej krawędzi.

3:06I tutaj też w takim razie od dolnej krawędzi tego tekstu zróbmy około 40.

3:12Wydaje mi się że tak będzie ok ale teraz jeżeli przyjrzymy

3:17się temu w większej skali to co możemy zrobić.

3:20Włącza GRID to np.

3:23przez to w całości czyli All Time Shift eskalować to w ten sposób wyłączyć.

3:29Jeżeli chcemy żeby tu było więcej oddechu

3:31włączyć teraz leje out GRID zaznaczyć i przesunąć w odpowiednie miejsce na play

3:35out gdzie moim zdaniem nie musisz się jakoś szczególnie przejmować tym układem

3:39gry dlatego że on tak czy inaczej traci na znaczeniu.

3:42W momencie kiedy będziemy zaraz musieli

3:44obsłużyć dziesiątki różnych rozdzielczości i zadbać o to żeby te elementy po prostu

3:49prawidłowo się na te rozdzielczości skierowały także tak czy inaczej te

3:53odstępy będą się zmieniać zmniejszać powiększać.

3:55Naszym zadaniem jest tutaj zadbać żeby to wszystko miało jakiś standard wizualny i

4:00żeby tam gdzie się da struktury zachować np.

4:02Inter linię i odległości.

4:04No i tutaj wydaje mi się że jeszcze warto

4:05by było rysować ten tekst który się pojawia i umieścić go to ok.

4:1225 pikseli od tego tekstu.

4:16Ponieważ w tym momencie wygląda ten tekst tak rzeczywiście że należy do

4:21tego główka a guzik jest trochę osobno oczywiście ciężar przeniesienie ciężaru

4:27tak żeby głośnik należał do tekstu też jest możliwe ale w naszym przypadku

4:30chciałbym żeby bardziej tekst należał do główka.

4:33Jeśli chodzi o odległość tych 20 pikseli od tego sam Herrera to już zrobiliśmy to

4:37wcześniej i jest to spójne zarówno tutaj jak i tutaj.

4:40Natomiast w przypadku tego tekstu

4:42powinniśmy jeszcze zadbać o jego przesunięcie do góry żeby było to spójne

4:47no i teraz jest wszędzie tak samo jak dziś.

4:49Kolejny eksperyment jeśli chodzi o tą

4:51hierarchii wizualną mógłby dotyczyć przesunięcia tego ciężaru np.

4:55w ten sposób żeby zachować tutaj te odstępy.

4:58Margines jednego.

5:00Fragmentu leja Grada natomiast wypadałoby

5:03trochę rozstrzelać te grupy które znajdują się tutaj.

5:05Czyli ułożyć je w ten sposób i w mojej

5:08ocenie to też jest w porządku to też wygląda ok.

5:11. Musimy na pewno dostosować odstęp między

5:15akcjami poszczególnymi tą pierwszą sekcją drugą i trzecią czyli możemy na przykład

5:21ustawić sobie odstęp w ten sposób teraz zaznaczyć te wszystkie elementy i usunąć

5:25go tak daleko aż nie pomoże nam tutaj te odległości pomiędzy sobą pasować.

5:31Proszę zapamiętać jednak jedną moim

5:33zdaniem ważną rzecz na tym etapie pracy z tego typu projektami żeby jeszcze teraz

5:38nie przejmować się aż tak mocno tymi występami odległość mile out Guide itd.

5:43Czyli możemy w zasadzie kliknąć na jakimś elemencie i sprawdzić jakie są odstępy od

5:48lewej krawędzi prawa i zobaczyć czy są równe okazuje się że nie.

5:51Co z tym zrobić.

5:52Moim zdaniem to nie jest jeszcze ten czas teraz powinniśmy raczej zadbać żeby

5:56wszystko zgadzało się wizualnie i w miarę jak będzie dochodziło nam

6:00komponentów pokaże ci to po skończeniu całego tego Landing Page'a będziemy

6:04struktury zdawać sobie to właśnie komponenty które już postaramy się

6:08w środku ułożyć jakąś bardziej sensownie przemyśleć też pod kątem ekspansji w łeb.

6:13Na razie jeszcze pracujemy w trybie gdzie nie jest to aż tak kluczowe aczkolwiek tak

6:18jak widzisz tam gdzie staramy się powielać elementy no to wcześniej jakoś Widuję je

6:23pod kątem tego czy rzeczywiście ten rozkład na siatce mi odpowiada.

6:26W mojej ocenie właśnie teraz warto

6:28postawić na szybkość czyli szybkość sterowania po kolejnych pomysłach po

6:31kolejnych sekcjach i tak jeśli chcielibyśmy przygotować sobie teraz jakąś

6:35następną sekcję proszę bardzo możemy zacząć od jakiegoś tekstu.

6:39Zawsze warto to robić w skali 1 więc Command 1 skala 100 proc.

6:42.

6:43Teraz chciałbym żeby to była jedna linia tekstu np.

6:46piszę sobie indywidualnie.

6:49Zmienię to na tekst typu point tekst

6:50natomiast chciałbym żeby jednak było to serio

6:55i chciałbym powiększyć ten tekst możemy eksperymentować z tą malutką kulkę w

6:59momencie gdy jesteśmy w tekście typu point tekst wystarczy na nią kliknąć

7:03i powiększyć tekst do określonego rozmiaru przykładowo 30 punktów teraz umieszczamy

7:08to w odpowiednim miejscu Command R czyli Rapid GRID chciałbym mieć cztery kopie.

7:12Spróbuję zarządzać wstępem to będzie taki lider który pozwoli mi

7:18przełączać różne typy klientów które ma nasza firma.

7:21Zresztą typy klientów mam już przygotowane

7:23więc teraz mogę to sobie zgrupowań zaznaczyć wszystkie ramki tekstowe przejdź

7:27przejść do Platinum i znów skorzystaj z naszego Shields tutaj

7:31mam link już wklej One a następnie wybieram sobie klient.

7:34I proszę bardzo mamy wszystkie sekcje klientów z którymi współpracujemy.

7:38Teraz może tylko trochę pomogę od gry 7 ustawy to mniej więcej do lewej natomiast

7:43jako kolejny element przygotuje prostokąt który będzie zawierał opis takiego typu

7:48klienta możemy zaokrąglony narożnik i spróbujmy użyć 12

7:53bez obramowanie jako wypełnienie wybiorę na razie może zobaczymy jakiś kolor stąd

7:58ok możemy wybrać ten kolor różowe Command Shift cudzysłów żeby wyłączyć lay out GRID

8:04teraz przełączać się na narzędziu tekstu i szkicu je sobie taką ramkę tekstową która

8:08jest mniej więcej na wielkość całego tego pola do tej ramki tekstowej na razie

8:12wstawia cokolwiek a następnie będę chciał importować do niej znów z tekstów które

8:17tutaj mam zmarnować sektor miesiąc w ten sposób.

8:22Teraz wejdziemy do wielkości strzałki w

8:24górę powiększa ten tekst myślę że 23 24 jest OK.

8:29Natomiast linie chciałbym znacznie zwiększyć.

8:32Może wybierzemy tekst 24 i Inter linie rzędu 35 sześciu siedmiu wygląda OK.

8:39W ten sposób umieszcza to teraz w centrum ramki czyli zaznaczam te dwa elementy.

8:45I upewnić się że jest to wygenerowane w tej ramce a następnie użyje jakiegoś

8:49elementu graficznego znowu z tych gotowych grafik które mamy mogę coś wybrać np.

8:53jakiś stolik.

8:54Będę chciał te elementy zresztą jakoś zgrabnie odmienić.

8:57W momencie kiedy użytkownicy będą klikać

9:00na konkretne sekcje i przykładowo Education zaznacza jako

9:05aktywne chociaż to jest chyba opis Biznes możemy tak zrobić.

9:08Znaczy my jako aktywna sekcja a dodatkowo jeszcze wrócimy tutaj np.

9:14jakąś Eclipse która sygnalizuje kolorem

9:17wypełnienia też że jest to aktywna sekcja OK w porządku.

9:22I tu i w założeniu będzie się po prostu poruszać pomiędzy lekcjami a dodatkowo

9:27będą one jeszcze zmieniać swój kolor i będzie zmieniany ten kolor wypełnienia.

9:31Więc to jest jakiś prosty pomysł na taki

9:34lider trochę mi brakuje jeszcze tutaj grafiki znów możemy eksperymentować możemy

9:39wyrzucić na przykład jakiś kwiatek na stół.

9:43Znów zaleta takiej grafiki modowej.

9:46Myślę że teraz jest OK będziemy mogli np.

9:49taki element sobie zgrupowań publikować bo

9:53teraz na parkiecie warstw ukryje tą poprzednią grupę czyli no i np.

9:59.

9:59Zmieni tę grupę w taki sposób że zmieni kolor.

10:03Jaki niebieski możemy zmienić rozmieszczenie tych elementów.

10:08Zrezygnować z tej grafiki i przykładowo

10:11użyć sobie jakiejś innej z kolei szafkę postawimy tutaj a na szafce postawimy.

10:17Może wybiorę jakąś ramkę Command V i umieścił ją tutaj.

10:21No i w ten sposób zrobiliśmy jakąś terapię

10:23jakąś odmianę tej grupy zamkniemy to wszystko i możemy teraz sobie ją ukrywać i

10:27odkrywać odpowiednie grupę i naturalnie będziemy też mogli

10:31zmieniać stany tych rozmaitych przycisków które się tutaj znajdują.

10:35Na razie nie przejmuje się spójność

10:37kolorów nie przejmuje się za bardzo układem tym jak jest w środku.

10:42Przyjdzie jeszcze na to czas żebyśmy te

10:43wszystkie rzeczy wspólnie w ramach Stargardu później a na razie staram się

10:47kierować jak najwięcej pomysłów w jak najszybszy sposób.

10:50W związku z tym to jest dla mnie naprawdę wartościowe że mogę sobie po prostu coś

10:54zaznaczyć i przeciągnąć opuścić i zobaczę jak to wygląda przesunąć w różne miejsca

10:59a nie skupiam się na tym żeby to naprawdę jakoś idealnie pozycjonowanie i idealnie

11:04zrobić pod kątem jakiejś odległości marginesu wielkości.

11:07To wszystko jeszcze sobie pracujemy.

11:09O ile oczywiście nie zacznie się robić nadmiernie skomplikowane.

11:12Co próbuję przekazać na to że dopóki nie

11:14masz pewności czy dana sekcja będzie finalnie tak wyglądała nie ma sensu

11:19opracowywać jej co do każdego detalu i lepiej podarować sobie na

11:25różnych wariantach takiej sekcji albo nawet zaznaczyć całe Art Board Command

11:29publikować go i spróbować przykładowo zamknąć grupę zamienić kolejnością z tą

11:35sekcją zobaczyć co będzie wyglądało lepiej w którym miejscu i takie eksperymenty

11:40możesz bardzo łatwo prowadzić nie przejmując się na razie za bardzo tą

11:44strukturą i tym żeby wszystko było adresowane jako Dymitr.

11:48W związku z tym w kolejnej lekcji jeszcze robimy sobie kilka sekcji do tego landing

11:51page a dopiero później będziemy wszystko porządkować i układać.

11:54Zobaczysz że z wykorzystaniem również

11:56komponentów Adobe xD jest to naprawdę bardzo proste i przyjemne do usłyszenia.