Tutorial Adobe XD – Designul experienței și prototipizarea.

Bine ați venit la marele tutorial Adobe XD. În această introducere, mă prezint ca antrenorul tău.

Care este diferența între Experiența Utilizatorului (UX) și Interfața Utilizatorului (UI)? Ce tipuri de design de nivel există și pentru ce este cel mai bine folosit Adobe XD? Răspunsul îl găsiți aici!

Prima dată deschis Adobe XD - și deja se oferă numeroase posibilități pe care le puteți selecta. În acest videoclip, există un mic exercițiu pentru Adobe XD, o prezentare generală a programului și o introducere în ecranul de pornire al XD și funcțiile sale.

Plăcile de bază (Tablouri) pot fi create într-o clipă în Adobe XD pentru diferite rezoluții și dispozitive. Ce particularități trebuie luate în considerare le vei afla din acest tutorial.

Diferite setări de raster facilitează aranjarea curată a elementelor și obiectelor între ele. Pentru aceasta, avem la dispoziție o grilă rectangulară și o împărțire în coloane pentru coloane.

Google, Apple și Microsoft pun la dispoziție kituri UI practice pentru un început rapid. Aceste artboards gata făcute ne ajută enorm în dezvoltarea ulterioară a prototipurilor pentru diferite platforme.

Culorile joacă un rol extrem de important în aproape orice design - în acest videoclip vei învăța cum să lucrezi cu culorile în Adobe XD, cum să le importanți și ce surse practice există pentru a colecta armonii de culori gata făcute.

Există numeroase metode de importare a activelor cum ar fi imagini, fișiere, documente text etc. în Adobe XD. În acest videoclip, voi prezenta câteva metode. Cu toate acestea, deoarece XD face parte din Creative Cloud de la Adobe, se poate lucra extrem de confortabil și comod cu bibliotecile.

Tema tipografiilor și fonturilor este unul dintre pilonii principali pe parcursul călătoriei noastre prin Adobe XD. În acest video vei învăța cum să gestionezi corect și eficient fonturile.

Formele pot fi fie importate foarte ușor în Adobe XD, fie create chiar cu instrumentul de trasare a traiectoriei. Dacă un obiect este folosit de mai mult de două ori, se recomandă de asemenea să fie adăugat ca simbol în lista de caracteristici (assets).

Proiectarea are mult de-a face cu inspirația și cu sursele exterioare de informație. Acest lucru include atât mediul analogic, cât și mediul digital. Aș dori să vă prezint câteva portaluri pe care le vizitez cu plăcere.

Să începem cu un mic și elegant proiect practic. În acest tutorial și în cele două videoclipuri imediate, vom crea un Onepager.

Grila de repetare este una dintre cele mai importante caracteristici ale Adobe XD. Acesta ne ajută să scalăm și să umplem în mod individual grupurile de obiecte create o singură dată.

În ultima parte a realizării paginii web, ne vom ocupa de zona footer și a unei secțiuni pentru referințe. Aici vom folosi fișiere SVG practice și vom învăța alte tehnici de design.

În această lecție ne vom ocupa de întrebarea cum pot fi conectate interactiv diferite panouri de artă. Ce opțiuni pentru alegerea tranziției și ce alte modificări putem face la prototip, le vom clarifica aici.

Fiecare site web are nevoie de un punct de ancorare pentru navigare. În acest videoclip ne ocupăm exclusiv de crearea unei navigații principale în zona antetului și de conexiunea interactivă între ele.

Acest antrenament se bazează pe capitolul anterior și arată cum putem adapta meniul desktop creat pentru un smartphone. Iconul hamburger și punctele de meniu vor fi puse în valoare cu animații interesante.

Unul dintre cele mai puternice instrumente pentru o vizualizare optimă este funcția de Auto-Animate de la Adobe XD. În acest exemplu, explic cum puteți adapta principiul funcției de Auto-Animate pentru orice scenariu posibil.

În următoarele videoclipuri învățăm cum să creăm un prototip pentru un magazin online. Aici vom învăța cum să creăm prototipuri high-fidelity vizual atractive, pornind de la simple artboards. Partea 1 din 4.

În partea a doua ne vom ocupa de prezentarea descrierilor detaliate, vom adăuga slider-e pentru imaginile și vom conecta panourile de artă între ele.

Funcția de suprapunere pentru prototipuri interactive ne oferă posibilități interesante, cum ar fi faptul că informațiile pot fi afișate și ascunse direct.

Un design bun al utilizabilității oferă utilizatorului întotdeauna feedback cu privire la starea sistemului. Acest feedback îl vom integra într-o animație frumoasă la finalul proiectului.

Adobe XD stăpânește în procesul său de prototipizare și interacția prin comenzi vocale. Astfel, comenzile verbale duc la acțiuni de sistem pe care le putem defini noi înșine. Cum funcționează acest lucru, voi arăta în acest tutorial.

În colaborarea cu alte departamente și persoane implicate, comentariul audio este o caracteristică valoroasă pentru a explica clar starea proiectului.

A testa un prototip într-un mediu virtual este o sarcină - să îl prezentați pe un dispozitiv live este un lucru cu totul diferit. Și tocmai acest lucru poate fi rezolvat comod prin intermediul conexiunii Adobe XD, fie prin USB, fie prin intermediul Creative Cloud. Pentru acest lucru, folosim aplicația Adobe XD din App Store.

În timpul colaborării, este imperativ să te consulți cu alte departamente cu privire la stadiul proiectului. Prin intermediul funcției de publicare, prototipul poate fi pus la dispoziție pentru ca evaluatori, dezvoltatori și beneficiari să primească impresii vizuale asupra proiectului. În acest moment începe ciclul de editare între departamentele de specialitate, pentru a aduce proiectul la maturitate.

Adobe XD se schimbă ca program încă foarte tânăr cu fiecare actualizare: În acest videoclip explic ce noutăți au apărut la saltul de la versiunea 18 la versiunea 19, cum se utilizează funcțiile și în ce situații sunt utile. Acestea includ: componente în loc de simboluri, redimensionare responsivă, linii de ajutor, instrument poligonal, mai multe opțiuni de formatare a textului și multe altele. Distracție plăcută!