Schitarea de la A la Z: Devino designer UI

Tutorial de schițare - devino designer de interfață și experiență utilizator.

Limba: Germană

Tutorial de schițe - devino designer de UI și UX

Sketch este o unealtă eficientă și intuitivă cu ajutorul căreia poți crea prototype pentru proiecte web. Utilizând software-ul de UI și UX, poți crea interfețe de utilizator dinamice pentru site-uri web și aplicații. Un avantaj esențial: deoarece design-urile respectă regulile de design web, oferi o soluție direct implementabilă pentru dezvoltare. Învață despre Sketch în acest tutorial de peste cinci ore prezentat de Luca Kiedrowski, care te va ghida practic de la concept la un prototip și până la o interfață web complet proiectată.

Fii designer UI și UX: Creează interfețe de utilizator pentru site-uri web și aplicații folosind Sketch.
Pentru un început rapid: Învață elementele de bază ale Sketch, UI design și UX design.
Pentru progresul tău: Învață tehnici avansate de design, cum ar fi operatorii booleani.
Tutorial practic: Creează o interfață de utilizator modernă folosind ca exemplu o aplicație.
O mai bună colaborare în echipă cu dezvoltatorii: Oferă-le direct prototipuri către dezvoltare.
Înțelegeți în 5 ore conceptul de UI și UX: Trainerul Luca Kiedrowski prezintă exemple de practici excelente.
Așa rămâne ce s-a învățat în minte: Inclusive materialele de lucru pentru implicare.

Și Google și Apple folosesc Sketch – fă ca marii și învață acum cum să creezi design-uri UI simple, frumoase, user-friendly și, în plus, gata pentru dezvoltare.

detalii

Compatibil cu:
Conținut: 5 h Instruire video
Licență: privată și comercială Drepturi de utilizare
Bonus: inclusiv materiale de lucru

Categorii

Design (ilustrație, machetare și tipar)

Creat cu dragoste de:

Luca Kiedrowski

Exemple de aplicare

Deschide galeria

Exemplu: În tutorial, vei crea o aplicație dezvoltabilă folosind Sketch.
Deschide galeria

Exemplu: Antrenorul tău îți oferă sfaturi și trucuri referitoare la design-ul modern de UX și UI pentru a merge pe drumul cel bun.

Introducere

Gratuit

Tutorial schiță: 1.1 Introducere

Bun venit la tutorialul de desen: Află cum poți să-ți proiectezi propriile aplicații folosind programul. Iată o prezentare generală a cursului.

Descărcați fișierul de proiect

Gratuit

Tutorial schiță: 1.2 Ce este schița?

O scurtă introducere în programul „Sketch” și cum poți obține acces la acest program.

Tutorial de desen: Interfață de program 1.3

Tutorial desen: Interfața programului 1.3.

Aici vei învăța să cunoști mai bine Sketch. Îți voi arăta întregul program și vei învăța cum să lucrezi eficient cu el.

Tutorial de desen: 1.4 Instrumente de lucru

Tutorial de schițare: 1.4 Instrumente de lucru

Sketch nu ar fi un program atât de grozav dacă nu ai putea folosi instrumentele de asistență. Aici afli cum să adaugi aceste instrumente.

Tutorial de schițe: 1.5 Cele mai importante modulele extensii

Tutorial de schiță: 1.5 Cele mai importante module/plugin-uri.

Plugin-urile te ajută să lucrezi și mai bine și mai rapid cu Sketch. O să îți arăt care plugin-uri te pot ajuta cel mai bine.

Tutorial de schițare: 1.6 Instalarea bibliotecilor

Tutorial de schițe: 1.6 Instalarea bibliotecilor

Cu bibliotecile MIT, poți integra design-urile standardizate de la Apple sau Android direct în proiectul tău.

Tutorial de desen: 1.7 InVision

InVision este o unealtă care îți usurează semnificativ proiectul tău Sketch. Acolo poți crea "Wireframes" pentru a-ți structura proiectul.

Bazele designului

Tutorial de schiță: 2.1 Culori

Culorile îți oferă posibilitatea de a-ți umple aplicația de viață. Aici vei găsi o scurtă introducere în lumea culorilor.

Tutorial de desen: 2.2 Fonturi

Rețeaua socială „Medium” arată cât de mult pot influența experiența utilizatorilor fonturile. Fonturile din aplicația ta pot fi foarte importante.

A crea prototipuri.

Tutorial de schiță: 3 prototipuri

Acum începem cu aplicația propriu-zisă.

Design de ecran.

Tutorial de schițe: 4.1 Ecran de start și șabloane de design

Acum ne aventurăm în proiectul nostru real și începem cu ecranul de acasă. În plus, vei învăța aici cum putem crea șabloane de design.

Tutorial de schițare: 4.2 Creare grupuri și stiluri de text

Tutorial de schițe: Creare de grupuri și stiluri de text.

În această lecție vei învăța cum să creezi grupuri și să salvezi stiluri de text pentru a economisi timp.

Tutorial de schiță: 4.3 Găsirea, crearea și adaptarea iconițelor

Icoanele sunt o parte importantă a unei aplicații. În acest video vei afla unde să găsești cele mai bune icoane și cum să le integrezi în proiectul tău.

Tutorial de schițe: 4.4 Design pentru chat, lucrul cu straturi

Tutorial de schiță: 4.4 Crearea unui design pentru chat, lucrul cu straturi.

Acum ne vom deplasa către chat-ul aplicației noastre. Acolo lucrăm cu straturi pe care ar trebui să le folosești și tu pentru a economisi timp.

Tutorial de desenare: Designul pentru iPhone X 4.5

Tutorial desen: Design iPhone X 4.5

iPhone X a schimbat multe în designul aplicațiilor. Designerii trebuie acum să lucreze cu o nouă formă de ecran. Aici vei afla elementele de bază.

Tutorial schiță: 4.6 Profil utilizator, efect de estompare

Tutorial de schiță: 4.6 Profil utilizator, efect de blur.

Cu efecte poți oferi aplicației tale un design interesant. Noi folosim efectul de blur în profilul tău de utilizator.

Tutorial de schiță: 4.7 Utilizarea design-ului ca instrument.

În acest video vei afla cum poți folosi designul ca un instrument pentru a-ți îmbunătăți aplicația.

Tutorial de schițe: Utilizarea bibliotecilor 4.8 și crearea unei foii de acțiuni

Tutorial de schiță: Utilizarea bibliotecilor 4.8 și crearea unui Action Sheet

Acum folosim biblioteca iOS pentru a construi un Action Sheet. Cu bibliotecile, poți economisi timp nu doar în design, ci și în dezvoltare.

A furniza/să furnizeze design-uri

Tutorial de schițe: 5 designuri pregătite în InVision.

Tutorial de schiță: 5 design-uri pregătite în InVision.

Dacă aplicația ta trebuie să fie dezvoltată, dezvoltatorii au nevoie de design-urile tale. În această lecție vei afla cum să îți pui design-urile la dispoziție pe InVision.

A furniza informații importante

Tutoriale de desen: 6 ajutor adăugat în aplicație.

Tutorial de schițare: 6 ajutoare de inserat în aplicație

Utilizatorii aplicației adesea nu găsesc butoanele potrivite sau au alte întrebări care nu sunt evident recunoscute. De aceea am creat o secțiune de întrebări și răspunsuri.

Design de profesionisti

Tutorial de schițe: 7.1 Crearea de grafică în stil plat.

Tutorial desen: Crearea graficelor de tip Flat Design 7.1.

Când ai termene limită stricte pentru proiectele tale, adesea nu ai timp să proiectezi totul singur. Aici vei afla cum și de unde poți primi ajutor.

Tutorial desen: 7.2 Redesenare casă

Pe ecranul de start, avem încă mult spațiu pentru îmbunătățiri. De aceea, vom face un redesign al primului nostru ecran.

Tutorial desen: Experiență utilizatorului în procesul de cumpărare 7.3

Tutorial schiță: Procesul de cumpărare a experienței utilizatorului 7.3

Procesul de achiziție al unui utilizator trebuie să decurgă fără probleme, deoarece este unul dintre cele mai sensibile momente ale fluxului utilizatorului.

Inovații în Sketch

Tutorial de schițare: 8 prototipuri în Sketch

Tutorial de schiță: 8 prototipuri în Sketch

În noua versiune a Sketch, ai posibilitatea de a crea un prototip direct în Sketch.

Detalii despre conținut

Înțelegerea designului UI și UX pentru dispozitive mobile și implementarea lor cu Sketch
Fie că este vorba de o aplicație, un site web sau un blog - adu-ți conceptul de UI și UX la viață - cu Sketch. În acest tutorial video de peste cinci ore prezentat de trainerul Luca Kiedrowski, vei învăța rapid toate noțiunile de bază despre utilizarea programului, pentru a lucra intensiv la scurt timp după la un proiect exemplu de design de aplicație interactivă.

De ce ar trebui să urmărești acest tutorial Sketch

Te bazezi direct pe o unealtă profesională în designul UI și UX, deoarece Sketch este folosit și de companii de renume precum Google, Facebook și Apple. Datorită interfeței intuitive, utilizarea programului este ușor de învățat, astfel încât să obții rezultate vizibile într-un timp scurt.

Fie că ai sau nu un background în design: Tutorialul Sketch este perfect pentru inițierea în domeniul designului UI și UX și în special pentru implementarea propriilor idei de design de aplicații cu Sketch. Fundamentele și aplicațiile, toate într-unul!

Dacă ai experiență în crearea de designuri pentru web și print (de exemplu, cu Photoshop sau Illustrator): Îți dezvolți abilitatea de a transfera designurile și elementele individuale precum pictogramele sau simbolurile în designuri UI dinamice și pregătite pentru dezvoltare. Cu cunoștințele tale în domeniul designului web, oferi un mare (și tot mai mare) avantaj CV-ului tău.

Îmbunătățește colaborarea cu dezvoltatorii web: Prin utilizarea Sketch-ului, pregătești interfețe de utilizator care respectă deja regulile designului web. Prin urmare, oferi dezvoltatorilor designuri care pot fi implementate direct. Astfel, scurtezi semnificativ distanța de la concept și design la aplicația web dezvoltată.

Designul UI și UX cu Sketch de la A la Z

Focalizarea principală a tutorialului Sketch este pe aplicarea practică a programului, disponibil gratuit într-o versiune de testare de la furnizor. Împreună cu trainerul tău, parcurgi pas cu pas toate fazele folosind un design de aplicație ca exemplu, de la crearea unui schiță până la designul UI final. Materialele de lucru sunt furnizate împreună cu tutorialul, astfel încât să poți interacționa direct:

În primul rând, schițezi aproximativ cum ar trebui să arate interfața aplicației mai târziu. Apoi, lucrezi direct la design. Creezi ecranul de pornire, lucrezi cu grupuri, straturi și stiluri de text și selectezi pictograme potrivite. Proiectezi un chat, un ajutor și un profil de utilizator, și descoperi cum să lucrezi cu biblioteci, foi de acțiune și efecte. La final, obții un design UI complet, din care, chiar în versiunea actuală 52 de Sketch, poți crea un prototip.

În prealabil, îți internalizezi cele mai importante noțiuni de bază despre Sketch și pentru designul UI. Așa că te familiarizezi rapid cu interfața, cunoști cele mai importante pluginuri și instrumente auxiliare și știi cum să utilizezi eficient fonturile și culorile. De asemenea, trainerul tău îți arată când este util să combini Sketch cu InVision, de exemplu in faza de așa-numit wireframing.