Adobe XD tutoriál – Design a prototypování zážitků

Srdečně vítáme velký tutoriál k aplikaci Adobe XD. V tomto úvodu se představuji jako tvůj trenér.

Jaký je rozdíl mezi uživatelským zážitkem (UX) a uživatelským rozhraním (UI)? Jaké druhy designu úrovní existují a na co je nejvhodnější Adobe XD používat? Odpověď naleznete zde!

Poprvé otevřen program Adobe XD - a už se nabízí mnoho možností, které lze vybrat. V tomto videu je malé úvodní cvičení k programu Adobe XD, přehled programu a úvod do Splash Screenu XD a jeho funkcí.

Artboards (Zeichenflächen) lze vytvořit v programu Adobe XD během chvilky pro různá rozlišení a zařízení. Jaké specifické vlastnosti je zapotřebí zohlednit, se dozvíte v tomto návodu.

Různé nastavení mřížky nám usnadňuje čisté uspořádání prvků a objektů mezi sebou. K dispozici máme obdélníkovou mřížku a rozdělení sloupců pro sloupce.

Google, Apple a Microsoft poskytují užitečné UI sady pro rychlý start. Tyto hotové artboardy nám nesmírně pomáhají při pozdějším navrhování prototypů pro různé platformy.

Barvy hrají v téměř každém designu velmi důležitou roli - v tomto videu se dozvíte, jak pracovat s barvami v programu Adobe XD, jak je importovat a jaké praktické zdroje existují pro sbírání hotových barevných harmonií.

Existuje mnoho způsobů, jak importovat prostředky jako jsou obrázky, soubory, textové dokumenty atd. do Adobe XD. V tomto videu vám představím několik postupů. XD je však součástí Creative Cloud od společnosti Adobe, takže s knihovnami samozřejmě můžete pracovat velmi pohodlně a pohodlně.

Téma písma a typografie jsou důležité prvky na naší cestě s Adobe XD. V tomto videu se dozvíte, jak správně a efektivně pracovat se písmy.

Tvary lze buď velmi snadno importovat do Adobe XD nebo je lze vytvořit pomocí nástroje pro tvorbu cest sami. Pokud je objekt použit více než jednou, doporučuje se ho zahrnout jako symbol do seznamu prvků.

Designování má hodně společného s inspirací a vlivem zvenčí. Sem patří analogové prostředí stejně jako digitální svět. Zde představuji některé portály, které rád navštěvuji.

Začněme s malým a pěkným projektem v praxi. V tomto tutoriálu a následujících dvou videích vytvoříme Onepager.

Opakující se mřížka je jednou z nejdůležitějších funkcí programu Adobe XD. Pomáhá nám libovolně měnit velikost a individuálně plnit jednou vytvořené skupiny objektů.

V poslední části tvorby jednostránkové prezentace se budeme starat o patičku a prostor pro reference. Zde využijeme praktické soubory SVG a dozvíme se další designové techniky.

V této lekci se budeme zabývat otázkou, jak mohou být jednotlivá artboardy interaktivně propojena. Jaké možnosti výběru přechodu (Transition) a jaké další modifikace můžeme provést u prototypu, to vysvětlíme zde.

Každá webová stránka potřebuje kotvový bod pro navigaci. V tomto videu se zaměřujeme výhradně na vytvoření hlavní navigace v hlavičce a na interaktivní propojení mezi nimi.

Toto školení navazuje na předchozí kapitolu a ukazuje, jak adaptovat vytvořené menu pro desktop na smartphone. Ikona hamburgeru a položky menu budou obohaceny zajímavými animacemi.

Jedním z nejmocnějších nástrojů pro nejlepší možnou vizualizaci je funkce Auto-Animate programu Adobe XD. V tomto příkladu vysvětlím, jak můžete adaptovat princip funkce Auto-Animate na libovolný scénář.

V následujících videích se naučíme vytvářet prototyp online obchodu. Naučíme se způsoby, jak vytvářet vizuálně atraktivní high-fidelity prototypy z jednoduchých artboardů. Část 1 z 4.

V druhé části se zaměříme na zobrazení detailních popisů, vložíme posuvníky pro obrázky a propojíme jednotlivé obrazovky.

Funkce overlay pro interaktivní prototypování nám nabízí zajímavé možnosti, jak mohou být informace přímo zobrazeny a skryty znovu.

Dobrý design použitelnosti vždy poskytuje uživateli zpětnou vazbu o stavu systému. Tuto zpětnou vazbu zakomponujeme na konci projektu do pěkné animace.

Adobe XD v procesu prototypování také podporuje interakci hlasovými příkazy. Verbální příkazy vedou k systémovým akcím, které můžeme sami definovat. Jak to funguje, ukážu v tomto tutoriálu.

Při spolupráci s jinými odděleními a zapojenými osobami je hlasový komentář cennou funkcí, která má za cíl jasně prezentovat stav projektu.

Testování prototypu v virtuálním prostředí je jedna věc - zobrazovat ho živě na koncovém zařízení je zcela jiná. A přesně to lze pohodlně vyřešit pomocí Adobe XD buď pomocí USB, nebo připojením k Creative Cloud. K tomu použijeme aplikaci Adobe XD ze Storu s aplikacemi.

Během spolupráce je nezbytné vyměňovat informace s jinými odděleními ohledně stavu projektu. Pomocí funkce Publikovat lze prototyp uvolnit k přezkoumání tak, aby recenzenti, vývojáři a objednatelé získali vizuální dojem o projektu. V tomto bodě začíná také cyklus úprav mezi odbornými odděleními, aby byl projekt doveden k dospělosti.

Adobe XD se jako stále velmi mladý program mění s každou aktualizací stále více: V tomto videu vysvětluji, jaké novinky přináší přechod z verze 18 na verzi 19, jak jsou funkce použitelné a v jakých situacích jsou užitečné. Mezi ně patří: komponenty místo symbolů, responsivní změna velikosti, vodící linky, polygonový nástroj, další možnosti formátování textu a mnoho dalšího. Užijte si to!