DESIGNER UX/UI — Curs online | SKVOT
[email protected]
+40 733 600 042

Curs live online

DESIGNER UX/UI

Cristian Doiu

SENIOR UI/UX DESIGNER @ ORACLE
ÎN CURÂND!

DESPRE 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.

 
Înscrie-te

LECTORUL ACESTUI CURS

CRISTIAN DOIU

SENIOR UI/UX DESIGNER @ ORACLE
Senior UX/UI Designer și Senior Solution Engineer cu peste 10 ani de experiență în programare și design, inclusiv la companii precum IBM & Oracle
Este Full Stack Web Designer și urmărește întregul proces creativ de la etapa de Design Thinking, BA și cercetare până la materialele de UX, UI și CX
În prezent deține propria agenție de programare și design - UXR, fiind în același timp și Senior Solution Engineer la Oracle USA
Are peste 20 de certificări în Design Thinking, Programare, AI & ML
În 2017 a fost invitat la TechTalks pentru a susține o prezentare despre UX și UI

Rezultatele?

Vei lucra cu aplicații pentru schițe, wireframes, prototipuri și mockups
Vei învăța cu ajutorul temelor practice care te vor ajuta să finalizezi propriul site web
Te vei familiariza cu termeni și limbajul de cod precum HTML/CSS, jQuery, C, C#, .NET și Java

Pentru cine este acest curs:

Graphic Designer Vei dobândi o înțelegere profundă a principiilor de design și vei învăța să creezi interfețe user friendly, împreună cu o experiență unică pentru utilizatori.
UX Designer Îmbunătățește-ți abilitățile în UX/UI design printr-o explorare detaliată a principiilor de design, a soft-urilor standard din industrie și instrumentelor esențiale.
Web Designer Dezvoltă-ți cunoștințele cu noul curs UX/UI. Învață tot ce trebuie să cunoști pentru a realiza site-uri captivante.

Program

Introducere

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 (Partea 1)
  • 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.

Etapele unui proiect (Partea 2)
  • Cum să analizezi o nișă de afaceri
  • Cum se efectuează analiza concurenței
  • Importanța user personas și cum să le creezi
Etapele procesului de proiectare
  • Prezentare generală a procesului de proiectare
  • POC, MVP și prototipare
  • Testare UX și finalizare
  • Prezentarea proiectului
  • Transferul spre dezvoltare
Introducere în Figma

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.

Schițe și Wireframes
  • 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.

Metodologii de proiectare

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.

Fundamentele designului vizual
  • 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.

Responsive Design în Figma

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.

Design Systems, UI KITs & Figma Auto-Layout
  • 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.

Niveluri de complexitate și Atomic Design
  • 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.

Widgeturi, Plugins & AI
  • 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.

Construirea unui wireframe (Partea 1)

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.

Workshop: construirea unui wireframe (Partea 2)
  • 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.

Construirea unei machete (Partea 1)
  • 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.

Atelier: construirea unei machete (Partea 2)
  • 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.

Crearea unui prototip (Partea 1)
  • 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.

Crearea unui prototip (Partea 2)
  • 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.

Handoff

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.

Cum se generează cod
  • Î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.

Cunoștințe de bază HTML/CSS
  • 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.

Pregătirea și prezentarea POC-ului perfect

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.

Testare de utilizare și colectare de feedback
  • 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.

Recapitulare și perspective de carieră în industrie
  • 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.

MAI MULT

PORTOFOLIUL LECTORULUI

01. Portfolio
02. Portfolio
03. Portfolio
04. Portfolio
DESIGNER UX/UI
Înregistrează-te aici
Înregistrează-te aici
Cămp obligatoriu
Pentru cunoștințe noi - în SKVOT. Pentru mai multe informații despre curs și taxa de participare, te rugăm să te înregistrezi.