Lekce 1 - Adobe XD - Úvod

Vítejte u první lekce z online kurzu Adobe XD, který je určen především pro úplné začátečníky. Kromě základů se však v průběhu kurzu budeme učit využívat mnoho pokročilých funkcí, a tak tento kurz, zejména jeho druhá polovina, může být přínosný i pro středně pokročilé uživatele. V dnešní lekci si Adobe XD nejprve představíme, dále provedeme instalaci aplikace a v poslední části lekce se podíváme na jeho alternativy.

Motivace

Po absolvování celého kurzu budete schopni navrhovat a prototypovat webové či mobilní aplikace a mnohé další produkty.

O Adobe XD

Adobe XD (Experience Design) je multiplatformní vektorový editor určený UX/UI designérům k navrhování a prototypování webových stránek, mobilních aplikací a mnohých dalších produktů. Aplikace je velmi jednoduchá na ovládání a zároveň nabízí velké množství užitečných funkcí, které umožňují vytvářet profesionální návrhy velmi rychle a efektivně. Adobe XD byl vyvinut společností Adobe Inc. jako odpověď na velmi podobnou aplikaci Sketch, která je dostupná pouze pro operační systém macOS.

Další produkty od Adobe

Kromě aplikace Adobe XD nabízí Adobe ještě několik dalších souvisejících produktů.

Adobe Photoshop

Pravděpodobně nejznámějším produktem je Adobe Photoshop. Jedná se o grafický editor, který je již dlouhá léta vyvíjen a publikován již zmíněnou americkou společností. Adobe Photoshop se stal světovým standardem v oblasti zpracování digitální grafiky, který nabízí svým uživatelům neomezené možnosti díky množství nástrojů a stažitelných pluginů. Na tento program z balíčku Adobe na webu rovněž existuje online kurz a najdete ho pod následujícím odkazem.

Adobe Illustrator

Dalším velmi důležitým produktem, a to především pro práci s vektorovou grafikou, je Adobe Illustrator. Ten obsahuje velmi propracované kreslící nástroje, díky kterým jste schopni vytvářet nádherné vektorové kresby. Adobe Illustrator je tak skvělým pomocníkem při vytváření knižních ilustrací, firemních log, obalů produktů, bannerů či návrhu webových stránek. Základní kurz pro Illustrator je pak k dispozici zde.

Získání a instalace Adobe XD

Oproti jiným produktům od Adobe je Adobe XD dostupný zdarma, a to v rámci plánu Starter. Bohužel jsme zde limitováni pouze na jeden aktivní sdílený návrh a jeden sdílený prototyp. Pro tento kurz nám však tento bezplatný plán bude stačit. Pokud bychom ale nechtěli být limitováni, můžeme přejít na plán Single App, který nás bude stát přibližně 300 Kč měsíčně, a kromě neomezeného přístupu získáme také 100 GB cloudového úložiště pro naše projekty. Další možností, jak získat neomezený přístup ke všem funkcím, je členství ve službě Creative Cloud, které je už o něco dražší, ale mimo Adobe XD získáme přístup také k dalším 20 aplikacím od Adobe, jako například Photoshop, Illustrator a tak dále.

Systémové požadavky

Pro bezproblémový běh aplikace Adobe XD musíte splňovat alespoň následující minimální systémové požadavky:

• Vícejádrový procesor Intel nebo AMD s rychlostí 2 GHz nebo vyšší
• Microsoft Windows 10 s aktualizací Fall Creators Update (64 bit)
• 4 GB paměti RAM nebo více
• 2 GB volného místa na pevném disku
• Displej s minimálním rozlišením 1280x800
• Podpora Direct 3 DDI 11 nebo 12

Instalace

Na oficiálních stránkách produktu Adobe XD si vybereme plán Starter a následně provedeme stažení aplikace. Po spuštění instalátoru se vedle instalace aplikace Adobe XD provede i instalace aplikace Creative Cloud, do které se po sléze přihlásíme. Pokud svůj Adobe účet ještě nemáte vytvořený, můžete tak v této aplikace bezplatně učinit.

Alternativy Adobe XD

Tento kurz je psaný pro Adobe XD, nicméně můžete použít jednu z alternativ uvedených níže a měli byste jej být schopní bez větších obtíží absolvovat úplně stejně.

Figma

Jednou z alternativ Adobe XD může být například Figma. Jedná se o primárně webový, vektorový editor a prototypovací nástroj velmi podobný Adobe XD. Figma se však zaměřuje zejména na spolupráci v reálném čase v cloudu, čímž nám odpadá nutnost komplikovaně sdílet jednotlivé soubory projektu mezi členy týmu. K dispozici ke stažení je i aplikace pro Windows a macOS, která obsahuje mnoho funkcí z webové verze a umožňuje tak na projektech pracovat i bez připojení k internetu. Figma v současnosti rovněž nabízí plán Starter, který má jistá omezení, ale je zcela zdarma. Podobně jako u Adobe XD si pak můžeme zakoupit plán Proffesional za 300 Kč měsíčně, který nás nebude nijak limitovat.

Sketch

Další alternativou je vektorový grafický editor Sketch, který je však dostupný pouze pro zařízení s operačním systémem macOS. Sketch má velmi intuitivní rozhraní a rovněž nám nabízí mnoho funkcí pro navrhování, prototypování a spolupráci na projektech. Doživotní licence této aplikace stojí bezmála 2 400 Kč. Možnost ukládat projekty do cloudu a získávat aktualizace máme však jen po dobu jednoho roku od zakoupení. Poté si musíme licenci za 1 900 Kč obnovit na další rok, jelikož v opačném případě o tyto funkce přijedeme.

První spuštění a domovská obrazovka

Při spuštění aplikace se ocitneme na domovské obrazovce. Ta nám nabídne informace o nových funkcích, tipy a triky, výukový program či seznam dostupných pluginů a UI kitů, které si můžeme stáhnout a nainstalovat. Dále zde nalezneme dokumenty uložené v cloudu, dokumenty sdílené jinými uživateli s námi a v neposlední řadě také seznam našich nedávných dokumentů. Uprostřed domovské obrazovky si můžeme vybrat velikost naší artboard, která představuje webovou stránku nebo obrazovku aplikace, kterou chceme navrhovat. Domovská obrazovka se nám zobrazí vždy při vytváření nového dokumentu nebo při kliknutí na tlačítko, které se nachází v levém horním rohu okna aplikace.

V příští lekci, Adobe XD - Rozhraní aplikace, se budeme věnovat pracovní ploše, režimům Design a Prototype. Také si představíme vybrané panely a nástroje.