Adobe XD-Tutorial – Návod na Vytváranie zážitkov a prototypovanie.

Srdečne Vás vítam na veľkom tutoriáli k programu Adobe XD. V tomto úvode sa predstavím ako váš tréner.

Aký je rozdiel medzi používateľským zážitkom (UX) a užívateľským rozhraním (UI)? Aké druhy úrovňového dizajnu existujú a na čo je najlepšie používať Adobe XD? Odpoveď nájdete tu!

Prvýkrát otvorený Adobe XD - a už ponúka množstvo možností, ktoré môžete vybrať. V tomto videu je malé rozohriatie pre Adobe XD, prehľad o programe a úvod do úvodného obrazovky XD a jeho funkcií.

Obrázkové tabule (Zeichenflächen) v programe Adobe XD môžete vytvoriť rýchlo a jednoducho pre rôzne rozlíšenia a zariadenia. Aké špecifiká treba pri tom zohľadniť, sa dozviete v tomto tutoriáli.

Rôzne nastavenia mriežky nám uľahčujú čisté usporiadanie prvkov a objektov medzi sebou. Na to máme k dispozícii obdĺžnikovú mriežku a rozdelenie stĺpcov pre stĺpce.

Google, Apple a Microsoft poskytujú praktické UI kity pre rýchle začatie. Tieto hotové artboardy nám veľmi pomáhajú pri neskoršom vytváraní prototypov pre rôzne platformy.

Farby hrajú vo väčšine dizajnov veľmi dôležitú úlohu - v tomto videu sa dozvieš, ako pracovať s farbami v Adobe XD, ako ich importovať a aké praktické zdroje existujú na získanie hotových farebných harmónií.

Existuje mnoho spôsobov, ako importovať aktíva ako obrázky, súbory, textové dokumenty atď. do Adobe XD. V tomto videu predstavím niektoré postupy. No keďže XD je súčasťou Creative Cloud od Adobe, samozrejme je veľmi pohodlné a jednoduché pracovať s knižnicami.

Téma písma a typografie je dôležitou súčasťou našej cesty cez Adobe XD. V tomto videu sa naučíte, ako správne a efektívne pracovať s písmami.

Tvary môžu byť buď veľmi jednoducho importované do Adobe XD, alebo môžu byť vytvorené samostatne pomocou nástroja na tvary. Ak sa objekt použije viac ako dvakrát, odporúča sa tiež pridať ho ako symbol do zoznamu aktívov.

Navrhovanie má veľa spoločného s inšpiráciou a vplyvom zvonku. Sem patrí analógové prostredie, ale aj digitálny svet. Tu vám predstavím niektoré portály, ktoré rád navštevujem.

Začnime s malým a pekným projektom v praxi. V tomto návode a v ďalších dvoch videách vytvoríme Onepager.

Siatka opakovania je jednou z najdôležitejších funkcií programu Adobe XD. Pomáha nám ľubovoľne škálovať a individuálne plniť raz vytvorené skupiny objektov.

V poslednej časti tvorby Onepageru sa postaráme o pätu a o sekciu pre referencie. Tu využívame praktické súbory SVG a zoznámime sa s ďalšími technikami dizajnu.

V tejto lekcii sa zaoberáme otázkou, ako môžu byť jednotlivé artboardy interaktívne prepojené. Ktoré možnosti pre výber prechodu (Transition) a aké ďalšie modifikácie môžeme vykonať pri prototypovaní, objasníme tu.

Každá webová stránka potrebuje kotvu na navigáciu. V tomto videu sa zameriavame výlučne na vytvorenie hlavnej navigácie v hlavičke a interaktívne pripojenie k sebe.

Toto cvičenie sa opiera o predchádzajúcu kapitolu a ukazuje, ako prispôsobíme vytvorené desktopové menu pre smartfón. Ikona hamburgeru a položky v menu budú obohatené zaujímavými animáciami.

Jedným z najmocnejších nástrojov pre najlepšiu vizualizáciu je funkcia Auto-Animate od Adobe XD. V tomto príklade vysvetľujem, ako môžete adaptovať princíp funkcie Auto-Animate adaptívne pre akékoľvek scenáre.

V nasledujúcich videách sa naučíme vytvárať prototyp pre online obchod. Tu sa naučíme, ako vytvoriť vizuálne atraktívne prototypy s vysokou vernosťou z jednoduchých návrhových panelov. Časť 1 zo 4.

V druhej časti sa zaoberáme zobrazením detailných popisov, vkladáme posuvníky pre obrázky a navzájom prepojujeme artboardy.

Funkcia "overlay" pre interaktívne prototypovanie nám poskytuje vzrušujúce možnosti, ako môžu byť informácie priamo zobrazené a skryté.

Dobre navrhnutý používateľský dizajn vždy poskytuje používateľovi spätnú väzbu o stave systému. Túto spätnú väzbu do projektu zakomponujeme ako peknú animáciu na záver.

Adobe XD ovláda v svojom prototypovacom procese aj interakciu cez hlasový príkaz. Verbálne príkazy vedú k systémovým akciám, ktoré môžeme sami definovať. Ako to funguje, ukážem v tomto návode.

Pri spolupráci s inými oddeleniami a zainteresovanými osobami je audio komentárovanie cennou funkciou na jasné vysvetlenie stavu projektu.

Testovať prototyp v virtuálnom prostredí je jedna vec - prezentovať ho živo na koncovom zariadení je úplne iná. A presne to je možné pohodlne riešiť cez Adobe XD buď prostredníctvom USB, alebo pripojením k Creative Cloudu. Na to využívame aplikáciu Adobe XD z App Store.

Počas spolupráce je nevyhnutné vymieňať si informácie o priebehu projektu s inými oddeleniami. Prostredníctvom funkcie zverejnenia môže byť prototyp uvoľnený, aby recenzenti, vývojári a objednávatelia získali vizuálne dojmy o projekte. V tomto bode sa začína cyklus úprav medzi odbornými oddeleniami na dovŕšenie projektu.

Adobe XD sa ako veľmi mladý program neustále mení s každou aktualizáciou: V tomto videu vysvetľujem, aké novinky priniesol skok z verzie 18 na verziu 19, ako sa používajú funkcie a v akých situáciách sú užitočné. Medzi ne patria: komponenty namiesto symbolov, responsívne zmenšovanie, vodítka, polygónový nástroj, ďalšie možnosti formátovania textu a o niečo viac. Užite si to!