Adobe XD: Prace porządkowe
Interfejsy Stron WWW
6 godz. 4 min · Adobe XD · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Praktyczny projekt strony w XD
- Omówienie narzędzi do tworzenia UI
- Szereg tipów i skrótów klawiaturowych
- Wskazówki do projektowania na różne ekrany
- Formaty plików i eksport zasobów
- I wiele więcej!
Narzędzie do pracy z UI w Adobe CC
Jedną 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.
Magia Adobe XD
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!
Praktyczny projekt strony WWW
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.
Czego nie znajdziesz w tym kursie?
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.
Dla kogo jest ten kurs?
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+
Część bitew kolejnej lekcji przychodzi
taki moment w życiu każdego projektu i ich projektanta że trzeba po sobie posprzątać.
A my staraliśmy się zachować jakieś pozory porządku w ten sposób że
tworzyliśmy rozmaite aspekty i tworzyliśmy też osobno komponenty.
Myślę że jest to dobry pomysł.
To jest raczej taka struktura mojej pracy
którą wykonuję zawsze w ten sposób gdy podchodzę do nowego projektu pozwalam
sobie na wiele eksperymentów w zakresie panelu warstw.
Nie przejmuję się tym że te warstwy są tutaj nie uporządkowane i niektórych z was
może to razić ale ja dorosłym do takiego schematu pracy gdzie dla mnie liczy się
kreatywność na początku i realizacja jakichś założeń które mam
a dopiero później koncentruję się na tym aby to posprzątać.
Oczywiście tego procesu nie można zwlekać
w nieskończoność bo jest on później bardzo bolesny.
Natomiast w tym momencie możemy spokojnie to zrobić na takim
landing page mimo że jest tu sporo elementów.
Wydaje mi się że sprzątanie potrwa naprawdę bardzo szybko.
Dlaczego warto sprzątać.
Z wielu powodów główny jest taki abyśmy mogli później się w tym projekcie odnaleźć
za jakiś czas ale też taki że będziemy ten projekt w ramach tzw.
head of oddawać dla deweloperów i warto zadbać o wzajemny szacunek w tej
pracy a nie żeby ktoś odgrywał takie rzeczy jakie macie w projekcie
nie pokazywane warstwy i źle skonstruowane grupę.
Zwłaszcza że w tym trybie of deweloperzy
będą mogli sobie zmierzyć odstępy pobrać rozmiary i lepiej żeby było to poprawne.
Dlatego teraz przed nami kilka kroków do wykonania.
Pokażę ci metodologię działania a nie będę pokazywał ci wszystkiego dokładnie jak
robiłem bo pewnie z pół godzinki by to zajęło.
Ale ważne żeby za metodologię pierwsza rzecz.
Zadanie numer jeden.
Pierwsza to organizacja grup i warstw zaznaczam element od góry.
Jeśli mamy komponent to się bardzo dobrze składa bo prawdopodobnie wszystko jest
ładnie zgrupowane ale nie zmienia to faktu że w tym
komponentu znajdują się takie rzeczy jak np.
grób 4. No i teraz przydałoby się rzeczywiście
w tym przypadku skoncentrować na tym aby poprawić nazwę grup.
4.
Jeśli chodzi o 28 że jest to pod liderką AB Action czyli że jest to litera J.
Szczerze mówiąc na tak niski poziom nie
potrzebujemy wchodzić ale tutaj możemy po prostu nazwać grupę J.
Jeśli chodzi o logo mamy sprawę zamkniętą teraz to dalej
idziemy znowu lecimy od góry i patrzymy które z tych rzeczy powinniśmy zamknąć.
Atomowy komponent czyli najmniejszą rzecz jaką potrzebujemy zgrupowań.
No to jest np.
ten budzik zobacz że to jest grupa jeden numer telefonu i jakieś projekty grupuje
Command g i teraz mam zaznaczona grupa całej wspaniałe sieci Adobe nie wpadła na
to aby stworzyć skrót do zmiany nazwy grup a to by się bardzo przydało.
Trzeba kliknąć dwa razy
i trzeba powiedzieć że tak jest Fon nam na przykład
i teraz jeśli mamy do zmiany inne nazwy możemy poruszać się tabel jeżeli będziemy
wciskać Tab będziemy przechodzili w dół w strukturze warstw i nie trzeba już dwa
razy klikać jak wcisnąć Shift i TAP będę przechodził w górę.
To jest zwłaszcza przydatne wtedy kiedy rzeczywiście
wiemy co jest pod spodem i jak chcemy to nazwać w tym momencie nie do końca wiemy.
Kolejno mogę wejść do tej grupy do środka i tutaj już ewentualnie pracować z pomocą
wspomnianego skrótu czyli grupa pierwszą klikamy dwa razy i jest to Fon a ikon.
Następnie Tab numer telefonu może zostać i to możemy nazwać BG.
Zwykle tak nazywam tła
jakieś mniej znaczące elementy i tyle mamy to czy interesuje się tym gdzie w tym
momencie jest grupa o strukturze warstwy na razie się tym nie interesuje.
Na razie to co robię to grupuje sobie dalej tą rzecz też powinienem zgrupowania
czyli serwisy razem ze strzałą prawda i nazwę tę grupę Services.
Pozostałe elementy menu grupuje ze sobą w całość czyli całą sekcję menu.
Zaznacza to wszystko Command gdzie próbujemy i nazywamy to menu.
Teraz próbujemy to z logo do dziś po
prostu Shift czyli jeszcze raz szkoła zaznaczenia.
Klikamy na coś następnie mogę z wciśnięty Shift coś znaczyć.
Jeżeli chciałbym zaznaczyć samą literę J a
nie całą cały komponent plus logo to musiałbym tym razem nacisnąć Command.
Jeśli Shift Command to widzisz że mogę to pojedyncze elementy wewnątrz takich
czy to komponentów czy grup zaznaczyć i oznaczać do mojej selekcji w tym przypadku
tego nie chcę po prostu z Shift tam zobaczyłem te dwie rzeczy komentuje.
I to będzie nasz top bar czyli cała góra.
I teraz mam całą górę już zamkniętą.
To teraz właśnie jest dobry czas na to żeby przerzucić ją na górę w stosunku bo
powinniśmy strukturę warstw utrzymać w takim porządku jak z góry na dół.
Jak nie te rzeczy się pojawiają na ekranie więc kolejna rzecz która się pojawia na
ekranie czyli to teraz to zamknęła w jakąś grupę.
Ale najpierw zobaczę jak wygląda środek
dobra mamy tak baton Big klikamy na baton JPG i super.
Moja strategia działa.
Następnie mamy HDR i następnie mamy co mamy.
Innovation in tak jeśli chodzi o warstwę tekstową.
Jestem zwolennikiem tego żeby zostawiać
ich nazwę które pochodzą od tego co się w nich znajduje.
W większości przypadków łatwiej jest się wtedy odnaleźć.
Więc zaznaczam to znowu od klik miałem się jak foldery w Windowsie zaznaczam Command
G grupuje grupę 358 nazywam Hero text i przerzucają zgadnij gdzie.
Na samą górę ale pod bar dokładnie tutaj
kolejno mamy obrazek poniżej 1 to zła nazwa Hero.
Mecz to dobra nazwa.
Teraz wchodzimy do środka patrzymy co to jest buda młot i patrzymy co tam jest 3.
Patrzymy co to jest 4.
To tam w środku jest gruby 29 7.
No właśnie sytuacja niezbyt pożądana.
To co robimy to grupowo jemy klikamy młoda
mówi Command Shift g i już mamy jedną grupę mniej Command czyli
już drugą grupę mniej Command czyli g trzecią grupę mniej.
Jeśli chciałbym to wszystko roz grupa
G i już mam wszystkie warstwy z wszystkimi freskami.
Teraz moim zadaniem jest zmienić nazwy tych wszystkich warstw.
żartuje.
Nie jest moim zadaniem zmienić nazwy tych wszystkich warstw.
Co więcej cofnęły mi się o jedną operację
i zostawił po prostu tę grupę tak jak tutaj są.
Następnie klikamy na tym i przerzuca rzucałem zgadnij gdzie przerzuca.
Czyli najpierw od góry do dołu później od
lewej do prawej tak wygląda dobrze ułożona struktura warstw.
I tę operację powtórzę dla wszystkich
elementów które się tu znajdują nazwy odpowiednio wszystkie rzeczy w środku do
jakiegoś poziomu jeżdżenia który jest odpowiada poziomowi rozsądku oraz temu ile
masz aktualnie czasu ale głównie chodzi o poziom pewien poziom rozsądku.
Jeżeli zadaj sobie pytanie jeżeli
programista wydział widziałby korzyść w wyeksploatowane na przykład jakiegoś
pojedynczego elementu to zadbaj o to aby miał on dobrą nazwę i strukturę grupy.
Jeśli programista przykładowo miałby
eksportować całą tą ikonkę to zadba o to żeby ona miała nazwę np.
komputer.
I wtedy bardzo fajnie bo można sobie to całe pobrać.
Natomiast już wiesz pewnie że programista
nie miałby potrzeby eksportować tych wszystkich 38 i 37 jako osobne elementy.
Więc jeśli programista nie musi tego robić
to Ty nie musisz zmieniać nazw i pakować ich w odpowiedniej podgrupy itd.
To jest taka naczelna zasada którą warto pamiętać i warto się jej trzymać.
No a ja teraz zmienię nazwy warstw i
pakuje to wszystko w foldery zobaczymy ile mi to zajmie.
Tutaj może zwolni na chwilę nagranie bo chciałem pokazać Ci że tak.
Najpierw zaznaczyła wszystkie te elementy logo czyli logo i jego tło.
Zaznaczyła to i zgrupowania.
Teraz moim drugim zadaniem jest
zdecydowanie na jaki poziom głębokości zejść i teraz zobacz że nazwałem to
ogólnie Fox hub ale wiem że developer nie będzie całego kafelki takiego eksportować
tylko eksportuje sobie ten obrazek a resztę zrobi chce się
w związku z tym muszę zadbać o to żeby to też się dobrze nazywało.
Czyli przykładowo mogę nazwać jedno
faux hub logo a ogólnie grupa będzie nazywała się Fox Hub.
I tutaj mamy jeszcze BG więc muszę zejść niżej.
Kolejno mam muzykę
i muzyka też zrobimy najlepiej Musica muzyka logo
trzeba mieć pisać jeszcze a później TAP i robimy BG a następnie mamy fosa.
I tutaj będzie po prostu fosa a jak
wejdziemy do środka to zrobimy i potwierdzam.
Teraz te grupy będą takie sprytne żeby sobie ułatwić pracę.
Czyli mamy fosa logo
a następnie BG kolejno no i mamy jako logo znowu można ją uprościć skopiować.
A tutaj mamy BG.
Kolejna grupa to przechodzimy niżej literę S.
I tutaj robimy literę logo to robimy.
Znowu ta miara
i tutaj będzie Mara logo a tu dobra no to chyba już wszystko jasne prawda.
Zostało nam do zrobienia Libia i Libia.
Logo BG i mamy zrobione wszystko wbrew pozorom nie zajęło to zbyt dużo czasu.
Teraz zobaczysz że wszystkie te grupy mnie zaznaczył.
To oczywiście możemy je teraz dopiero
zgrupowane w jedną ogólną grupę Logos i tak będzie w porządku ale staram się
jeszcze dodatkowo trzymać zawsze porządek tutaj czyli Foxa żeby był na górze.
Później chciałem żeby było Amaro.
Następnie możemy zrobić.
Libia idąc później muzyka.
I co będzie dalej szeroko
czyli w miarę się staram po prostu tak to poukładać żeby też
te rzeczy były ułożone w kolejności od lewej do prawej od góry do dołu.
Wszystkie te logo razem z tym światem to zaznaczam schedę będą tworzyć dla nas
kolejną grupę i będzie to sekcja Section 4.
Czy trzeba to tak nazywać Sekcja 1 2 3 4.
Ja akurat lubię jakiekolwiek zgrupowanie tego w ten sposób aby każdy kolejny ekran
czyli sekcja trzecia Sekcja druga miał swoją jakąś dodatkową grupę.
Czy to będzie na ekranie pierwszy ekran
drugi ekran trzeci w ten sposób łatwiej zdecydowanie się to później jakoś układa.
No i jeszcze jedna rzecz którą o którą dbam przy okazji.
W momencie gdy to wszystko grupuje to
staram się zadbać o GRID i ułożenie również mikro.
Czyli to już jest bardzo dobry moment żeby zadbać o to żeby te odstępy były
rzeczywiście równe żeby odstępy pomiędzy Inter linia była dobra odstęp między
nagłówku ami żeby one się zgadzały we wszystkich elementach które są podobne
dlatego że bardzo łatwo jest nam to zrobić gdy mamy wszystkie warstwy zgrupowane
sprawdzic a odstępy jakie są i po prostu to uporządkować.
Dużo trudniej kiedy mamy już grupę bo
wtedy trzeba klik klik klik klik dziesięć razy klikać żeby wejść w ogóle do
jakiegokolwiek elementu i teraz trochę go przestawić na przykład na 2 3 piksele.
Więc jeszcze przed zamknięciem ale w
momencie gdy zamykamy ustawiamy ładnie na grę tak żeby zgadzało się z naszymi
Robinem no i tak żeby we wszystkich komponentów np.
typu nagłówek jeśli wcześniej nie
zrobiliśmy z tego komponentu można technicznie.
Technicznie to nie jest komponent ale żeby we wszystkich np.
.
Gdzie mamy na górze tytuł później mamy tytuł później mamy opis i wszędzie gdzie
mamy coś takiego lub podobnego powinniśmy zadbać o to aby ten odstęp był
identyczny ja częściowo zadałem o to właśnie nie grupujący wcześniej tych
wszystkich elementów a po prostu zaznaczając je kopiuj i wklej.
Dzięki temu wszystko jest w jak najlepszym
porządku ale miejsce w którym jesteśmy teraz to jest właśnie ten czas w którym
trzeba by było jeszcze zobaczyć czy wszystko jest idealnie dobrze i np.
idealnie wyrównane względem siebie.
Czyli jeśli mamy przykładowo lidera a tutaj mamy menu które zrobiłem i widzę że
menu nie jest równo ze Slide no to warto by było rzeczywiście te dwie
rzeczy do siebie dopasować i zaznaczyć je ze sobą i umieścić równo w ten sposób że
teraz dbamy też o to odstępy teraz dbamy o dopasowanie tego możesz posługiwać się
mikro bolidem możesz Command Shift cudzysłów posługiwać się tym większym
Green level GRID też żeby te elementy trochę ze sobą pasować możesz Command
średnich się posługiwać liniami pomocniczymi cokolwiek Ci pomoże w tym
aby nie zrobić tysiąca różnych odstępu od tysiąca różnych magnesów albo np.
każdego. Jesus innego z różnej strony chodzi mi
tutaj o ramkę tekstową nawet jak tekst nie wygląda że jest równo od lewej do prawej
to ramka testowa jest ułożona idealnie równo i gdybyś
chciał to jeszcze sobie dopracować to warto jest to wyrównać upewnić się że
rzeczywiście jest ok a także z Artem sprawdzić czy te odstępy są odpowiednie.
Deweloper będzie interpretował swój projekt bardzo
literalnie to znaczy że będzie patrzył dokładnie na odstęp który jest tu i jaką
będzie inny niż tutaj od tej ramki tekstowej.
No to po prostu nałoży na to inny parking.
Oczywiście tak nie powinno być.
Oczywiście mają deweloperzy jakąś intuicję
co zrobić w taki sposób by elity realne a gdzie tutaj nasze błędy miały poprawić.
Więc jak to jest 1 2 piksele no to wiadomo nie przejmujemy się tym znacznie bo
wiadomo że deweloper to łapie ale jeśli to będzie duża różnica to on zrobi tak jak
grafik kazał i to bardzo dobrze i chwała mu za to.
No dobra to lecimy dalej.
Tutaj też zatrzymamy się na chwilę bo wyszedł mi taki mały problem z tymi
oponentami moimi że tutaj znajduje się lęk mężczyzn.
Zamknąłem to często czyli zrobiłem nogą.
Tak powinno być natomiast wszędzie
znajduje się areną HDR tango i teraz powinienem mieć.
To jest ok ale teraz Tango powinno się
nazywać BG i teraz mogę albo poprawić sobie wszystko BIG BG BG tutaj
ale przecież to jest komponent więc ja mogę przejść do Elite Master komponent
Command Shift k z prawego przycisku myszy jestem tyle że muszę przejść do The Old
State w zasadzie chyba nie muszę nawet mogę sobie tam po prostu rozwinąć.
I teraz mogę zmienić nazwę na BG.
Więc kolejna zaleta posiadania komponentów
to możliwość łatwej zmiany nazwy każdego z elementów mamy teraz Bg BG Bg BG.
Więc jak masz coś co się powtarza wiele
razy i to ma skupioną strukturę mówiąc kolokwialnie to po prostu zamknij to w
komponent i w ten sposób będziesz mógł łatwo tę strukturę zmienić.
Zwłaszcza gdy się złapie na poprawieniu jakiejś nazwy w kółko tej samej Bg BG itd.
Może warto właśnie rozważyć zrobienie tego inaczej.
Dobra no to lecimy dalej.
Tutaj mamy wszystkie pytania już dobrze zrobione i zamknięte Ostatnia sekcja to a
os i najpierw grupuje sobie to a powinienem jeszcze spróbować to wszystko
w jedną całość czyli Command g i będzie to moja sekcja piąta.
Sprawdziłem po drodze również odległości.
Czy wszystkie się zgadzają. Wszystko jest OK.
Odległość pomiędzy nagłówki em a pomiędzy
tą częścią też powinna być równa więc powinniśmy teraz właśnie o nią zadbać.
Zatem przypominam że można to sprawdzać
czyli klikamy na tą grupę zatem klikamy tu i wychodzi mi.
79 zrobiłem 80 równo wszędzie więc o 1 piksel w dół to muszę przesunąć.
I w przypadku kolejnej sekcji którą tworzę muszę zaznaczyć te elementy.
I tutaj mam odległość.
Sprawdźmy zatem.
66 no to muszę zrobić.
76 86.
Raz dwa trzy cztery pięć sześć. 80.
Dobra i to wtedy jest ustawione równe jeśli chodzi o odstęp.
Teraz to będzie moja grupa nr.
Nie przejmuje się tym że wszystkie grupy
nazywają HDR we wszystkich sekcjach że mam HDR HDR HDR bo to o to chodzi bo po to
nazwałem sekcję żeby mógł wyróżnić to będzie z seksem 4 HDR CKM 6 itd.
Następnie mamy kartki kardiolog i tutaj
nie za fajnie się nazywają te wszystkie elementy więc już wiesz co zrobić.
Command czyli fotka przechodzi do edycji Master elementu.
Najpierw dba o to żeby ten Master element był dobrze uporządkowany czyli tutaj
link zanim system jest wyżej w hierarchii więc zamykam To wyżej to będzie to.
Następnie mamy kategorię I to jest
wyżej w hierarchii a tak to jest ok zobaczmy leasing y Tango
zmienimy na b g no i później mamy tak Sims 2 Sin 2 i Tango 24.
Ta scena chyba mi jest potrzebna bo to jest bez tej sceny
a to jest mecz na przykład możemy to tak nazwać roboczo.
A następnie tutaj jeszcze mamy gruba warstwa bagien no i teraz mamy załatwione
znowu sprawa z wszystkimi tymi elementami już nie musimy zmieniać struktury Command
G grupuje tylko to sekcje kart i razem z tym grupuje to w Section 6.
Wygląda na to że moja praca jest skończona.
Na tym etapie zająłem się w związku z tym kilkoma elementami.
Po pierwsze składałem w odpowiedniej
kolejności i po drugie kupowałem tam gdzie było potrzebne.
Po trzecie myślałem o tym jak deweloperzy
będą to eksportować i w związku z tym które aspekty odpowiednio nazwać.
Po czwarte zadbały o odpowiednie odstępy i pozycję na mikro gdy idzie
o odpowiednie odstępy od tych samych elementów w aucie np.
tutaj o te 80 pikseli i odpowiednie budynki aby wszędzie było równo.
Kolejno zadbała też o to aby zgrupowanie to wszystko.
Poszczególne sekcje dla łatwości nawigacji
i w każdej takiej sekcji mogły się powtarzać nazwy typu HDR Hero itd ponieważ
były one właściwe dla tych kolejnych sekcji ostatnia rzecz którą
brałem pod uwagę to to czy przypadkiem nie stworzyć większej ilości komponentów.
Już wcześniej zastanawialiśmy się nad
komponentu ami co powinno być komponent a nie powinno być.
Ale jeśli teraz uzna że np.
taki guzik sklep powinien być z jakiegoś powodu komponent bo możesz go wykorzystać
później no to to jest dobry moment na zrobienie z niego komponentu.
Tak samo z impulsów które są tutaj i tutaj.
A jeżeli uzna że jednak to jest jednostkowe zastosowanie takiego elementu
graficznego to nie będziesz robił po prostu z tego komponentu.
Zajęło mi to 12 minut dokładnie.
Więc myślę że jak na tyle pracy co włożyliśmy wcześniej i tak rozbudowany
projekt jeśli chodzi o 1 jedną stronę to nie jest to wcale dużo roboty z tym
żeby sobie wszystko dokładnie pokazywać a my dzięki temu mamy w projekcie porządek i
obok porządkowania warstw możemy przejść teraz do porządkowania tej sekcji setów.
Ale to już w kolejnej lekcji. Do usłyszenia.