Lekce 3 - Adobe XD - Založení projektu

V minulé lekci, Adobe XD - Rozhraní aplikace, jsme se věnovali pracovní ploše, režimům Design a Prototype. Také jsme si představily vybrané panely a nástroje.

V dnešní lekci si založíme vlastní projekt, v rámci kterého budeme navrhovat jednoduchou mobilní aplikaci záznamník. Ukážeme si, jak vytvořit a spravovat cloudové dokumenty. Následně si připravíme jednotlivá kreslící plátna a naučíme se pracovat se souvisejícími nástroji a panely.

Založení projektu

Začneme tím, že si spustíme aplikaci Adobe XD a na domovské obrazovce zvolíme velikost kreslícího plátna, které bude představovat webovou stránku nebo obrazovku aplikace. Vzhledem k tomu, že v rámci tohoto kurzu budeme navrhovat aplikaci pro iPhone, klikneme na ikonu telefonu/tabletu a v rozbalovací nabídce zvolíme možnost iPhone X, XS, 11 Pro (375 x 812).

V Adobe XD najdeme artboardy (plátna) různých velikostí:
• 360x760 px pro Samsung Galaxy S10,
• 1920x1080 px pro základní webové rozhraní,
• 1366x768 px pro menší webové rozhraní,
• 768x1024 px pro verzi iPadu,
• 820x1180 px pro verzi iPadu Air,
• 800x1280 px pro Samsung Galaxy Tab10.
Ale naleznete i spoustu dalších pro Instagram story, Twitter a Facebook post, YouTube video atd. Pokud by tento výčet nestačil, je tu samozřejmě i možnost udělat si vlastní velikost artboardu.

Tímto jsme založili nový dokument, ve kterém je v současnosti pouze jedno kreslící plátno o námi zvolené velikosti. Později zde však nalezneme všechna naše kreslící plátna, předvolby/zdroje, barvy a další součásti našeho projektu. Pozornější z vás si určitě všimli ikony mraku , která se při vytváření dokumentu objevila vedle jeho názvu. Tato ikona signalizuje, že byl dokument automaticky uložen do Creative Cloudu, který máme v rámci našeho plánu zdarma. Ještě před tím, než se podíváme na výhody cloudových dokumentů, si náš dokument kliknutím na stávající název přejmenujeme.

Pokud bychom si chtěli dokument uložit na lokální zařízení, klikneme na Menu > Save As Local Document nebo tak učiníme klávesovou zkratkou Shift + Ctrl + Alt + S

Cloudové dokumenty

Ve výchozím nastavení se v Adobe XD všechny nové dokumenty automaticky ukládají jako cloudové dokumenty do služby Creative Cloud. To však neznamená, že bychom na projektu nemohli pracovat bez připojení k internetu. Adobe XD umí ukládat provedené změny na disk lokálního zařízení a ihned po opětovném připojení je automaticky synchronizovat s verzí v cloudu.

Výhody cloudových dokumentů

• Jednotlivé dokumenty můžeme přímo v aplikaci sdílet s dalšími uživateli a při zapnutí funkce on-line kolaborace dokonce i s ostatními současně upravovat.
• K dokumentům uloženým v cloudu můžeme přistupovat napříč všemi zařízeními, včetně mobilních aplikací, které slouží pro živý náhled a testování prototypu.
• Automatické ukládání, jednoduchá funkce, která se stará o průběžné ukládání dokumentu do cloudu.
• Historie verzí umožňující procházet předchozí verze návrhu a popřípadě se k nim vracet.

Vytváření kreslících pláten

Jedno kreslící plátno (obrazovku aplikace) už v projektu máme, to nám ale na celý projekt nestačí, a tak začneme s vytvářením dalších. Z panelu nástrojů si zvolíme nástroj Kreslící plátno a na panelu napravo vybereme požadovanou velikost podobně jako při vytváření nového dokumentu, čímž vytvoříme další obrazovku.

Tento způsob využíváme zejména v případě, kdy potřebujeme vytvořit kreslící plátno jiné velikosti. Tedy například v situaci, kdy bychom k návrhu obrazovky mobilního telefonu chtěli vytvořit ještě návrh webové stránky. My však budeme vytvářet všechny obrazovky stejně velké, a tak je tento způsob zbytečně komplikovaný a zdlouhavý. Namísto současného nástroje si z panelu vybereme nástroj Výběr , klikneme na již existující kreslící plátno a stiskneme klávesovou zkratku Ctrl + D, čímž kreslící plátno duplikujeme. Tento krok zopakujeme znovu ještě 2x, abychom v dokumentu měli vytvořených celkem 5 obrazovek. To nám bude prozatím stačit, pokud bychom potřebovali další, v průběhu návrhu si je můžeme kdykoli vytvořit.

Dalším způsobem, jak duplikovat existující kreslící plátno, je podržet klávesu Alt a myší ho přetáhnout, kam potřebujete.

V tuto chvíli by bylo vhodné si jednotlivé obrazovky pojmenovat. S nástrojem Výběr vždy dvakrát klikneme na stávající název a provedeme změnu. Jednotlivé obrazovky pojmenujeme Prihlaseni, Registrace, Nahravka, Seznam, Uloziste v pořadí tak, jak jdou za sebou.

Úprava kreslících pláten

Kreslící plátna máme již vytvořená, a tak si pojďme zkusit změnit jejich velikost, umístění, barvu výplně a několik dalších vlastností. Začneme tím, že si jednotlivé obrazovky přeuspořádáme. To můžeme provést buď pomocí nástroje Kreslící plátno nebo Výběr . Postupně tedy přesuneme obrazovky Nahravka, Seznam, Uloziste pod obrazovky Prihlaseni a Registrace a poté ještě změníme jejich pořadí.

Všimněte si, že ve chvíli, co se budeme snažit jednotlivá kreslící plátna zarovnat, objeví se modrá a fialová mezerová vodítka, která nám pomohou se zarovnáním a udržením stejných rozestupů mezi kreslícími plátny.

Dále provedeme změnu výšky obrazovky Seznam a Uloziste. Abychom si vyzkoušeli více způsobů, nejprve provedeme změnu velikosti přímo na panelu a poté pomocí nástroje Výběr změníme výšku druhé obrazovky ručně.

Kromě změny pozice, velikosti či orientace obrazovky, můžeme na tomto panelu jednotlivá kreslící plátna vzájemně zarovnávat. To však v tuto chvíli dělat nebudeme, jelikož se těmito nástroji budeme zabývat později u zarovnávaní objektů. Namísto toho pomocí klávesy Shift a nástroje pro Výběr označíme obrazovky Seznam a Uloziste a nastavíme hodnotu Scrolling na Vertical a Viewport Height na hodnotu 812. Následně označíme všechny obrazovky a nastavíme výplň pozadí na barvu #FCFCFC.

V dalším kroku znovu vybereme všechna kreslící plátna a na pravém panelu aktivujeme mřížku, následně v nabídce zvolíme možnost čtvercové mřížky a velikost nastavíme na hodnotu 10.

Čtvercová mřížka zobrazuje vodorovná a svislá vodítka, která využijeme zejména ve chvíli, kdy zarovnáváme náš obsah nebo určujeme rozměry jednotlivých objektů. Dále pokud vytváříme nové objekty či transformujeme stávající, obsah se automaticky přichytává k této mřížce.

Možná jste si všimli, že je v nabídce také dostupná mřížka rozložení. Ta však pro návrh mobilní aplikace není příliš vhodná. Využili bychom ji však například při návrhu webové stránky.

V následujícím kvízu, Kvíz - Základy práce s programem Adobe XD, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.