Curs live online
DESIGNER UX/UI
Cristian Doiu
SENIOR UI/UX DESIGNER @ ORACLEDESPRE CURS
Înscrie-te la cursul care își propune să îți arate tot ce trebuie să cunoască un UX/UI Designer. Învață cu ajutorul a 7 module complete care sunt skill-urile necesare pentru o astfel de poziție: Proiect, Figma (două module), UX Design, UI Design, Code și Client.
Acest curs te va învăța să realizezi un proiect de cel puțin 2-5 pagini web, vei învăța cum să identifici problemele acestuia, dar și cum să îți construiești portofoliul pe lângă multe alte beneficii. Cursul se va desfășura integral în Figma.
LECTORUL ACESTUI CURS
CRISTIAN DOIU
SENIOR UI/UX DESIGNER @ ORACLERezultatele?
Pentru cine este acest curs:
Program
PREZENTARE GENERALĂ A PROIECTULUI (BA)
- Prezentare generală a planului de curs
- Ce face un designer UX/UI?
- Colaborări cheie în fiecare proiect: Business Analyst, Front End Developer și Web Designer
- Perspectiva carierei ca designer UX/UI
- Crearea portofoliului
- Instrumente pe care le vom folosi
- Etapele unui proiect
- Tipuri de proiecte: nativ, hibrid și web
- Cum să identifici problemele, sarcinile și obiectivele proiectului
- Cum să faci cercetare primară și secundară: descoperă nevoi, a colectează feedback, testează gradul de utilizare și evaluează satisfacția utilizatorilor
Activitate practica: Alegeți un proiect la care doriți să lucrați.
Teme pentru acasă:
1. Efectuați cercetări secundare pentru a extrage nevoile utilizatorilor, preferințele și tendințele din industrie legate de tipul de site web/aplicație pe care l-ați ales.
2. Pe baza cercetărilor tale, notează principalele obiective și punctele dure ale proiectului tău.
- Cum să analizezi o nișă de afaceri
- Cum se efectuează analiza concurenței
- Importanța user personas și cum să le creezi
- Prezentare generală a procesului de proiectare
- POC, MVP și prototipare
- Testare UX și finalizare
- Prezentarea proiectului
- Transferul spre dezvoltare
FIGMA (PARTEA 1)
- Prezentare generală a Figma:
- Crearea unui fișier și redenumirea acestuia
- Panoul de instrumente Figma
- Crearea, copierea, inserarea și partajarea
- Fundamentele Figma
Activitate practica: Creați un nou fișier Figma, redenumiți-l, adăugați material și partajați linkul.
- Cum se creează o schiță și de ce este relevantă?
- Cum să traduci o schiță într-un wireframe
- CCrearea unei schițe, wireframe și a design-ului pentru un modul
Activitate practica: Decodificați o machetă într-un wireframe.
DESIGN (UX)
- Principii UX: emoție, comoditate, încărcare cognitivă, rezolvarea de probleme
- Cele mai utilizate metodologii
- Aprofundare principiilor metodologiei Design Thinking
Activitate practica: Creați un scenariu așa cum este și o grilă de prioritizare pentru site-ul/aplicația dvs.
- Teoria culorilor și relevanța sa în UI/UX
- Crearea de scheme de culori și palete în Figma
- Tipografie și fonturi Google
- Rolul mood board-ului în procesul creativ
Activitate practica: Creează un moodboard și generează modelul de culoare pentru viitorul tău site web / aplicație.
FIGMA (PARTEA 2)
- Cum se creează frame-uri pentru 3 dispozitive (mobil, tabletă, desktop)
- Mobile First vs Desktop First
- Cum creăm elemente plutitoare
Activitate practica: Creați cadre pentru 3 dispozitive.
- Crearea elementelor cu Auto Layout
- Constrângeri și poziție absolută
- Crearea unui panou cu Auto Layout
- Ce este un Design System?
- Cum putem crea un UI KIT?
- Diferențele dintre un Design System și un UI KIT
Activitate practica: Creați un set de componente folosind aspectul automat.
- Principiile Atomic Design
- Nivelurile de complexitate și de ce sunt importante
- Cum să-ți structurezi site-ul pe mai multe niveluri de complexitate
Activitate practica: Creați o componentă inteligentă pe 3 sau mai multe niveluri de complexitate.
- Cum ne poate veni AI-ul în ajutor
- Cum să folosești AI pentru a genera conținut
- Cum să instalezi și să rulezi pluginuri în Figma
- Aportul AI-ului în creșterea eficienței
Activitate practica: Folosind OpenAI și ChatGPT, creați un text pe care îl veți utiliza pe site-ul web / aplicație.
UI
- Structura și arhitectura unui wireframe
- Cum să împărți wireframe-ul în atomi și molecule
- Puzzle thinking: cum să analizezi și să înțelegi site-ul/aplicația
Activitate practica: Construiește-ți propriul wireframe pentru o pagină de destinație.
- Feedback despre tema de acasă și troubleshooting
- Sesiune ghidată de construire a unui wireframe
Activitate practica: Construiește-ți propriul wireframe pentru o pagină despre.
- Transformarea wireframe-urilor în machete high-fi în Figma
- Rafinarea designului vizual al paginilor de destinație
- Adăugarea de interacțiuni și animații la prototip
Activitate practica: Creați o reprezentare vizuală a uneia dintre paginile de destinație a site-ului / aplicației dvs.
- Feedback despre tema de acasă și troubleshooting
- Sesiune ghidată de construire a unei machete
Activitate practica: Creați o reprezentare vizuală a uneia dintre paginile despre site-ul/aplicația dvs.
- De ce este importantă prototiparea pentru un POC
- Cum vă poate ajuta prototipul să înțelegeți ideea
- Cum poate prototipul ajuta un client să înțeleagă conceptul
- Aspecte cheie de reținut atunci când creați un prototip clickable
Activitate practica: Creați o componentă interactivă pe care urmează să o plasați pe site-ul web / aplicație.
- Explorarea instrumentului de prototipare Figma
- Cum se leagă paginile
- Interacțiuni și animații standard
Activitate practica: Conectați cele două pagini pe care le-ați creat.
COD
- Cum să livrezi prototipul
- Cum îți va înțelege un dezvoltator front-end designul?
- Cum putem folosi funcția inspect în Figma?
- Pregătire pentru asamblare/dezvoltare
Activitate practica: Joacă-te cu instrumentul de inspectare și înțelegeți proprietățile pe care le generați.
- Înțelegerea pluginurilor HTML/CSS pentru Figma
- Selectarea celui mai bun plugin HTML/CSS
- Generarea codului
- Descărcarea codului
- Livrarea unui prototip perfect
Activitate practica: Generați codul HTML/CSS pentru paginile dvs.
- Ce înseamnă HTML/CSS?
- Cum înțelegem codul?
- Cum va interpreta un dezvoltator Frond-End codul nostru?
- Cele mai bune practici
- Tips & Tricks
Activitate practica: Decodificați codul împreună. Să înțelegem panoul de straturi față de codul generat.
PREZENTARE CLIENTULUI
- Abilități eficiente de prezentare pentru web designeri
- Comunicarea deciziilor de proiectare clienților și părților interesate
- Gestionarea feedback-ului clienților și a așteptărilor
Activitate practica: Întrebări și răspunsuri.
- Efectuarea testelor de utilizare a designului
- Colectarea feedback-ului și iterarea design-urilor bazată pe teste de utilizabilitate
- Colectarea feedback-ului folosind Figma
- Îmbunătățirea designului bazat pe feedback
Activitate practica: Întrebări și răspunsuri.
- Revizuirea conceptelor cheie și a abilităților învățate pe parcursul cursului
- Perspective de carieră în UX/UI
- Mentori
- Resurse de dezvoltare
- Rezumat cerințele zilnice
Activitate practica: Întrebări și răspunsuri. Adresarea tuturor întrebărilor și preocupărilor rămase.