Adobe XD: Tworzenie Style Guide

CC 2020+

0:00W kolejnej lekcji jesteśmy po dość męczące

0:02części która sprowadzała się do organizacji naszego

0:05projektu i zmiany nazwy warstw ale uważam że bardzo dobrze że jednak zrobiliśmy to

0:09na końcu ponieważ zachowaliśmy przez cały czas projektowania taką kreatywną

0:13twórczość kreatywną dowolność w rozmieszczeniu różnych elementów nie

0:17musieliśmy klikać za głęboko w strukturach żeby coś skopiować i tak dalej więc

0:21naprawdę warto to zrobić na przykład na takim etapie.

0:24Teraz naszym zadaniem jest przejście do

0:26panelu asset czyli Command Shift y i w tych setach znajdują się

0:29można powiedzieć media style tekstu komponenty kolory które tu mamy.

0:33Przypominam że możemy kupować to po różnym

0:36typie setów albo przeszukiwać taki zbiór jak również przypominam że jest tutaj GRID

0:40View który pozwoli nam trochę lepiej zdiagnozować to co znajduje się np.

0:44w krajach pisma i trochę lepiej zobaczyć komponenty.

0:47Na razie pracujemy w dwu i upewnij się

0:51że to co znajduje się w projekcie będziemy mogli teraz u wspólników i np.

0:57w przypadku projektowania kolejnych jego

0:58stron będzie to ułatwione dzięki wykorzystaniu stylu w którym się znajdują.

1:03Czyli w dużym skrócie tworzymy taki prosty Still Guide Still Guide to jest coś co

1:09zawiera kolorystykę tekstu jakieś główne komponenty dla naszych widoków dzięki

1:13czemu tworzenie każdej kolejnej strony będzie proste bo będziemy mogli te

1:17elementy Re używać a w momencie gdy zdecydujemy się na jedną zmianę np.

1:21komponenty czy w stylu tekstu zostanie ona

1:23globalnie zastosowana na wszystkich naszych stronach.

1:26Można powiedzieć że to dopiero początek takiej pracy która

1:31służy przygotowaniu obszernej dokumentacji i przekazaniu tego wszystkiego dla

1:35deweloperów a także pracy zespołowej gdzie np.

1:38wiele osób zespole może pracować nad jednym projektem i utrzymywać ten sam

1:42standard który stopniowo ewoluuje w coś takiego co nazywa się systemem.

1:47To jednak część którą przygotowałem w osobnym kursie w kursie poświęconym

1:51właśnie współpracy w Adobe xD i tworzeniu tych systemów można powiedzieć dosyć

1:56uproszczony sposób ale postanowiłem to eksportować do innego materiału ponieważ

2:01wiem że nie wszyscy będziecie z tego korzystać ale myślę że absolutnie każdy

2:05powinien zapoznać się z tym jak działa taki prosty Stargard który możemy

2:09przygotować sobie nawet nie na osobnym jakimś Art porcie tylko po prostu w panelu

2:13setów musimy się upewnić że mamy wspólnie one

2:18to co się da w projekcie czyli przykładowo wspomniane rozmiary frontów.

2:22Mamy tutaj DM Sans

2:24serwy display czyli nasz HDR drugi też HDR pierwszy wielkości 54.

2:30Jeśli klikamy sobie np.

2:31na tym nagłówku widzimy że on tak naprawdę dziedziczy z tego stylu i w Adobe xD Nie

2:36ma jakiegoś oznaczenia że on akurat jest powiązany z tym stylem po prostu jeżeli

2:39coś spełnia kryteria takie jakie są tutaj w charakterystyce to jest powiązane z tym

2:44stylem jest to serie DC 54 no ale może się okazać że w naszym

2:49projekcie zwłaszcza jeżeli nie kupowaliśmy tylko otworzyliśmy sobie jakąś kreatywnie

2:53różne rozwiązania a pojawią się też takie rzeczy które np.

2:57są dziełem Self Display.

2:59Ale zamiast 54 52 tymczasem można to sprowadzić do jednego wspólnego

3:03mianownika czyli do tego jednego stylu tekstu.

3:06I teraz to co trzeba zrobić no to właśnie zaznaczyć sobie wystarczy zaznaczyć ten

3:10element a następnie wybiorę dla niego ten nowy krój teraz już mam Display 54.

3:16Działa to w drugą stronę.

3:17Jeśli te dwa elementy są takie same i odpowiadają charakterystyce

3:23który jest oznaczony jako HDR 1 to jeśli ja go sytuuje

3:28a mogę też wybrać to niech on was zobaczę wszystkie mi się podświetlane czyli

3:33wybieramy Head On was i patrzymy czy rzeczywiście wszystko co chcieliśmy jest

3:37tym pierwszym gdyby to przykładowo nie było to trzeba by było się zastanowić

3:40dlaczego czyli i zobaczyć czy przykładowo rozmiar jest dobry albo kolor itd.

3:44Wygląda na to że u mnie to jest w porządku.

3:47Czyli wszystkie rzeczy które chce mieć HDR chcę żeby były liderem już są.

3:51A gdybym chciał to teraz globalnie zmienić to mogę wybrać polecenie EBIT

3:54i zobaczy że wszystkie wszystkie te rzeczy mi się adekwatnie zmieniają

4:00więc o to chodzi charakter jest i powinniśmy właśnie na tym

4:04etapie zanim zaczniemy tworzyć więcej stron bo później już naprawdę trudno

4:08będzie nad tym zapanować upewnić się że wszystkie nagłówki są

4:12oznaczone odpowiednim stylem że wszystkie nagłówki typu drugiego są też oznaczone

4:18odpowiednim stylem wszystkie przykładowo jakieś k albo Body kopii możemy

4:23potwierdzić i zobaczyć czy rzeczywiście to u nas zadziałało.

4:26Jeśli tak możemy przejść np.

4:29do kolorów gdzie my w ogóle nie przyjmowaliśmy się kolorami

4:33przez cały czas pracy z naszym dokumentem co to znaczy to znaczy że powstało mnóstwo

4:38różnych kolorów które teraz warto by było uporządkować.

4:42Gdybyśmy nawet w ogóle wcześniej nie dodawali kolorów ani charakteru do tego

4:46panelu Asad jest pewien ciekawy skrót który pozwoli nam to zrobić.

4:50Jeżeli klik i zaznacza cały Art Board to mogę z tego całego Art

4:55Board pobrać malować i wrzucić tutaj wszystkie kolory czyli.

4:59Małe ikonki Plusa teraz mając zaznaczone cokolwiek w zasadzie mogłyby zaznaczyć

5:04tylko ten obrazek i z niego wyciągnąć kolory.

5:07Ale ja chcę z całego art.

5:08Board zaznaczam Abbott i klikamy ikonę plusa i teraz zobacz co się stało.

5:12Tyle rozmaitych stylów i rozmaitych kolorów zostało dodane do setów.

5:17No jest to trochę dużo a wiele z nich jest bardzo podobnych.

5:21Jednak mamy tu pewien błąd.

5:23Błąd polega na tym i teraz tę zmianę

5:26że mamy pliki w formacie V w związku z tym to wszystko są wektory.

5:31No i teraz zobacz że ten kolor niebieski jest trochę inny od

5:35tego i to wszystko nam się dodało do tej palety kolorów.

5:38Czy rzeczywiście nas to interesuje.

5:39Nie do końca czyli w zasadzie Obrazki mogą

5:42pozostać kolorowe aczkolwiek w wielu przypadkach będziemy chcieli

5:48czasem zminimalizować ilość kolorów albo dostosować kolory do kolorów Brand.

5:52Nawet w obrazkach.

5:53No właśnie jak można to zrobić najpierw pokaże.

5:56Czyli przykładowo jeśli mielibyśmy dwa takie różne kolory niebieskie

6:01i zakładam że w naszym projekcie mogłoby być kilkadziesiąt różnych elementów które

6:04powielają ten patent moglibyśmy zaznaczyć te dwa elementy czyli wciskać Koman żeby

6:10zejść jak najniżej w strukturze i zaznaczyć to coś co jest wypełniona

6:14kolorem niebieskim Command Shift docisku i klikamy na jeszcze jeden ten element

6:21czyli wydaje mi się mam nadzieję że z zaznaczeniem odpowiednich chyba tak

6:25i teraz wybieramy ikonkę Plusa żeby dodać te dwa kolory.

6:29Jak widzisz są one różne więc zostały

6:31dodane jako dwa osobne kolory w panelu setów.

6:34Natomiast to co możemy zrobić teraz to możemy zdecydować się na jeden z nich

6:37przykładowo na ten kolor trochę jaśniejszy.

6:40Jeśli teraz klikamy prawym przyciskiem

6:41myszy na tym kolorze i wybiorę polecenie kopii po prostu kopiuje jego wartość 16.

6:46Mogę tę samą wartość w klawisze tutaj czyli wybieram prawym przyciskiem myszy.

6:50Teraz będę musiał przejść do jego edycji

6:53i po prostu wklej trochę inny kolor delikatnie się to zmieniło.

6:57W momencie gdy w Cisnej zobaczę te dwa kolory zostały wspólnie.

7:01Co się stanie na paletę kolorów.

7:03Jeżeli wyjdę to automatycznie zostanie to sprowadzone do jednego.

7:07Przypominam także że tak jak w przypadku

7:10charakter jest tak samo w przypadku kolorów.

7:12Jeśli chcemy edytować ten kolor to on

7:16zostanie cytowany we wszystkich elementach które na K2 go zawierają.

7:20Chciałem by zaznaczyć i uruchomić twój proces myślenia w kierunku

7:25takim że jeżeli chcesz zmienić wiele kolorów na raz albo wiele stylów

7:30frontów naraz to po prostu dodaj do charakterystyce dodaj to do koloru.

7:34Następnie wejdę albo połączy w ten sposób co pokazałem.

7:38Jest to niezwykle przydatne.

7:39Wspominałem już o tym na początku kursu

7:41przy gotowych hitach które chcemy dostosować pod kolor

7:45brandu albo pod jakiś fon to jest związane z takimi które nam bardziej pasują.

7:50No dobra to skoro to już wiemy to teraz

7:52dalej stoi przed nami zadanie dodania tutaj tych kolorów ja usunac ten który

7:56dodałem ale z pominięciem kolorów obrazków.

8:00W zasadzie prosty sposób na wykonanie tego komendy ds.

8:03publikowanie takiego Art mordu.

8:05Pamiętasz że xD działa naprawdę bardzo

8:07szybko więc możemy tutaj sobie pozwolić na to że my po prostu elementy których

8:13nie chcemy dodawać czyli usunięte te elementy które mogą być

8:17tak jak w tym przypadku plikami które zawierają jakieś dodatkowe kolory w

8:20zasadzie możemy usunąć sobie to wszystko to nie w całości tylko tę część.

8:26No i w sumie tych kolorów chyba też nie potrzebujemy

8:30bo one były wcześniej już wspólnie a więc teraz gdyby kliknąć a home 1 następnie

8:34kliknąć na dodanie kolorów już tych kolorów jest zdecydowanie mniej.

8:39Natomiast dalej jest ich sporo z góry

8:41jeszcze mogę usunąć te ikonki stąd też zawierają różne kolory które nie są mi

8:48koniecznie potrzebne ani nie będę chciał ich za moment zmieniać.

8:51No i można powiedzieć że te kolory sobie wybrałem świadomie więc to jest OK.

8:55Wybieramy Home 1 jako art World i dodajemy

8:57wszystkie kolory do palety i teraz widzisz że tych kolorów już jest znacznie mniej.

9:02Nadal jednak możemy znaleźć kolory które

9:04są niemal identyczne i połączyć je ze sobą.

9:07Przykładowo kupujemy sobie to bierzemy edycję i integruje z tym kolorem.

9:13Pewnie kiedyś grałeś w bambus więc teraz możemy podbijać ze sobą kolory np.

9:17ten jest bardzo podobny do tego

9:19rzecz jasna ale czasem nam coś tutaj nie do końca pójdzie zgodnie z planem i

9:22zobaczymy że jakiś kolor nie jest idealnie taki jak byśmy chcieli.

9:25Ale wydaje mi się że spokojnie możemy większość tych kolorów np.

9:29te dwa kolory ciemne do siebie sprowadzić.

9:32I bardzo łatwo można zminimalizować ilość tych kolorów które występują w Jałcie te

9:37mamy delikatnie szare i białe ale te dwa kolory niebieskie takie bardzo stalowe.

9:44Możemy sprowadzić do jednego różniły się w zasadzie tylko końcówką tak samo T2 kopiuj

9:51wklej tutaj i w ten sposób mógłbym jeszcze nawet chwilę pewnie z tym popracować żeby

9:56zminimalizować ilość tych kolorów do powiedzmy 10 głównych czy pięciu głównych.

10:01A efektem pobocznych tego co teraz robię

10:03jest to że również na tym Home się zmieniają wszystkie kolory na

10:07takie które ja tutaj wspólnie a w związku z tym zaraz będę musiał po prostu pozbyć

10:12tego dodatkowego Harbor do Home 1 i już te moje kolory zostały w większości wspólnie

10:17Pokazałem Ci tylko sposób bo oczywiście mógłbym tutaj spędzić jeszcze dodatkowo 15

10:22czy 20 minut na poprawieniu tych kolorów być może będę chciał wspólnie kolory ikon

10:26tak żeby były również w innych miejscach przykładowo ilustracje.

10:30Ale nie chciałbym mówić nie chciałem tego szczegółowo pokazywać jedynie pokazać Ci

10:34metodę zgodnie z którą powinniśmy teraz pracować.

10:37Naszym końcowym celem po przygotowaniu tego typu wstępnego Stargardu jest to

10:42abyśmy mieli jak najmniej kolorów jak najmniej stylów tekstu i komponentów.

10:47W zasadzie tyle ile chcemy bo komponentów.

10:50Im więcej tym lepiej będziemy mogli je później używać.

10:53Natomiast te rzeczy warto żebyśmy trzymali

10:56w stosunkowo małej liczbie i są przynajmniej trzy argumenty za tym

10:59dlaczego powinniśmy tak zrobić po pierwsze będzie nam łatwiej ten projekt w ogóle

11:02utrzymać bo zarządza mniejszą liczbą elementów po drugie będzie nam go łatwiej

11:06zakodowane bo nie będziemy musieli pisać zbędnego kodu CSS np.

11:10na te wszystkie kolory i wszystkie style tekstu.

11:12No a po trzecie nasz projekt będzie bardziej spójny wizualnie nie będzie

11:16zawierał wielu oderwanych od siebie elementów i będzie panował tam taki

11:20wizualny chaos dzięki czemu będzie lepiej po prostu odebrane przez odwiedzających.

11:24Naturalnie pracując kolorami my się w ogóle nie zajmowaliśmy ich doborem od tego

11:28jest zupełnie inny materiał który możemy zobaczyć na niebie jak sobie dobrać

11:31odpowiednie kroju pisma odpowiednie kolory.

11:34Ja nie chciałbym poświęcać w ogóle na to czasu w tym kursie jest to bardziej kurs

11:38techniczny xD więc nie będziemy się zastanawiać dlaczego ten

11:41kolor jest lepszy od tego czy może ze sobą wspólnik nie o to tutaj chodzi.

11:45Natomiast ważne jest dla mnie że ty już wiesz że jeśli teraz wybrał byś i pracował

11:49z odpowiednimi kolorami i wprowadził większość kolorów np.

11:53niebieskich do jednego to jedna edycja

11:57panelu a setów pozwoli ci zmienić to ma lepszy kolor dla twojego projektu albo

12:01zgodny z Brand bokiem albo cokolwiek innego.

12:03Pokazałem tutaj Jak narysować prosty stan jak i do czego powinniśmy dążyć a także

12:07jakie są po optymalizacji tego Stargardu i na tym się zatrzymać.

12:11Zachęcam do obejrzenia kolejnej części.

12:13O pracy zespołowej.

12:15Jeżeli chcesz dowiedzieć się więcej na tym

12:16o tym jak wspólnie z zespołem utrzymywać taki stan GRID jak powinien on przerodzić

12:22się w kompletny system i czy w ogóle powinien oraz ewentualnie jak przekazać

12:27specyfikację takiego projektu dla deweloperów.

12:30Zdaję sobie jednak sprawę że nie wszyscy z was będą potrzebowali takiej wiedzy.

12:33W związku z tym zostawiłem ją poza tym kursem.

12:36To wszystko na teraz do usłyszenia w kolejnej.