FIGMA este un curs online live despre cum să utilizați designul UI/UX | SKVOT

FIGMA

 

Casandra Crețu
Head of Design
cu +9 ani experiență

În cadrul cursului vei crea un landing page complet în Figma și vei primi feedback constant

DESPRE CURS

Figma. Mai mult decât grafică.

Învață cel mai utilizat tool de design și funcțiile sale în 14 lecții live online.

După curs, vei rămâne cu o serie de materiale utile, create cu suportul lectorului: LinkedIn banner, wireframe, logo, moodboard și un landing page complet.

06 FEBRUARIE
-
21 MARTIE 2024
Înscrie-te

Casandra Crețu

Head of Product Design
@CGArtefacts
  • Head of Product Design pentru distrikt.app, o platformă cu peste 140.000 de utilizatori după primul an
  • 10 ani de experiență în web design,UI/UX și Product Design
  • A lucrat atât cu agenții, cât și cu start-ups și corporații. Diversitatea în proiecte i-a oferit o experiență holistică și cuprinzătoare în Product Design și UX/UI Design
  • Proiectele ei acoperă industrii precum FinTech, CleanTech, blockchain, real estate, fashion, white goods, VR/AR
  • Consultant pentru VR/AR User Experience, cu skill-uri de 3D modelling & animation
CUI RECOMANDĂM CURSUL?
Graphic Designer

Evoluează în carieră și obține proiecte mai complexe, învățând Figma. Vei ști să creezi vizualuri și layouturi de website, să colaborezi mai bine cu echipa de design și să înveți un nou skill din aria de grafică

Designer

Folosește Figma pentru a integra rezultatele din user research în design-urile tale și creează produse mai atrăgătoare. Învață să folosești Auto-Layout pentru a-ți aduce pagina în mid-fidelity

Product Manager

Înțelege cum sunt create proiectele în Figma pentru a le descrie mai bine în prezentările tale. Vei colabora mai bine cu echipa de design și vei oferi feedback competent

Specialist de Marketing

Planifică și optimizează etapele de marketing a produselor cu ajutorul prototipurilor și vizualurilor create în Figma și colaborează mult mai eficient cu echipa de design

PROGRAMUL
01
Interfața Figma
  • Ce este Figma și ce putem realiza cu Figma
  • Figma Community & FigJam
  • Interfața Figma (Toolbar, Layers, Pages, Assets, Design panel, Inspect)
  • Aplicația nativă vs Figma Web
  • Tool-urile principale
  • Plugins
  • Crearea și manipularea formelor și obiectelor
  • Proprietățile unice ale fiecărui obiect
  • Redenumirea, gruparea, alinierea și spațierea obiectelor
  • Exercițiu Icebreaker cu StickyNotes
Temă 1:
Descoperă Figma prin explorarea diverselor tool-uri și funcții. Repetă exercițiul de la curs.
02
Principalele funcționalități
  • Tool-uri de creație: text, vector, paths, shapes, pen & pencil tool
  • Adăugarea și Editarea Imaginilor
  • Vector vs Raster
  • Blending Modes
  • Alegerea fonturilor și prelucrarea lor
  • Operațiuni Booleene
  • Proprietatile layerelor (Stroke, Fill)
  • Efecte layer: Blur, Layer Blur, Shadows, Layer Blend
  • Masking
  • Exercițiu in-class: creating an instagram-ready visual
Temă 2:
Creează un banner pentru LinkedIn folosind tool-urile învățate.
03
Web Design & Wireframes
  • Tipuri de ecrane: Desktop, Tableta, Mobile
  • Publicul țintă și proiectarea interfețelor accesibile
  • Alinieri, Spatieri si Layout, Griduri
  • Construirea unui Wireframe
  • Wireframe vs Low-fidelity / High-fidelity Mock-ups
  • Elementele unei pagini web: Header, meniu, sectiuni, footer
  • Ierarhia elementelor și a textului în pagini web
Temă 3:
Folosind goodbrief.io, generează un brief pentru un landing page și crează wireframe-ul paginii.
04
Culori, Palete & Stiluri
  • Cum folosim culorile într-un design
  • Crearea unei palete de culori
  • Culori și stiluri de culori (Hue, Saturation, Luminosity)
  • Utilizarea plugin-urilor
  • Organizarea și gestionarea tonurilor de culoare într-o documentație
  • Light Theme/Dark Theme
Temă 4:
Creați o paletă de culori pentru LP-ul de la tema 2, și creează un moodboard în baza ei. Dacă e nevoie, ajustează paleta de culori în funcție de moodboard.
05
Text & Tipografie
  • Instalarea fonturilor
  • Lucrul cu Text și Stilizarea Textului
  • Typography, Fonturi și editarea fonturilor vectoriale
  • Ierarhia textelor în design
  • Crearea stilurilor de text cu ajutorul plugin-urilor
  • Utilizarea lor într-un design
  • Rigle, griduri și coloane. Utilizarea lor în design
Temă 5:
Creează un logo pentru LP-ul tău folosind tool-urile de manipulare fonts și plugin-uri care te pot ajuta la stilizarea textului.
06
Componente si Constrângeri
  • Utilizarea constrângerilor
  • Webpage design utilizând constrângeri
  • Lucrul cu Componente și Grupuri de Componente
  • Componente Dinamice
  • Denumirea și Gruparea componentelor
  • Introducere în Auto-layout
07
Auto-Layout
  • Auto-Layout cu Componente și Constrângeri
  • Crearea elementelor auto-layout și utilizarea lor
  • Tipuri de Frame-uri în Auto-Layout
  • Redimensionarea relativă și poziționările absolute
Temă 6:
Folosind AutoLayout, adu LP-ul tău în stadiul de mid-fidelity: aplică paleta de culori, adaugă logo-ul și imagini care corespund cu moodboard-ul creat.
08
Design System
  • Cum folosim Design Systems
  • Beneficiile unui Design System
  • Exemple de Design System cunoscute: Ex Carbon Design, Material UI, etc
  • Best Practices în folosirea Design Systems
  • Cum construiesti un Design System custom
  • Publicarea componentelor ca Librarie
Temă 7:
Transformă header-ul, footer-ul și butoanele paginii tale web într-o componentă.
09
Workshop - Teamwork în Figma (possibly 2H)
  • Access de edit și Lucru în Echipă în Figma
  • Colaborarea în crearea unui design
  • Distribuirea și prezentarea designului
  • Exercițiu la clasă: creăm infographics și bannere pentru LP-uri
Temă 8:
Implementează vizualul rezultat de la workshop în LP-ul tău.
10
Responsive Design
  • Design pentru web, tableta si mobil
  • Breakpoints si layouts
  • Design cross-platform: reguli și best practices
  • Documentare si testare
  • Auto-layout pentru ecrane responsive
Temă 9:
Optimizează design-ul LP-ului tău pentru mobil și desktop
11
Design Optimization
  • Realizarea de componente complexe: formulare, grafice, meniuri de tip dropdowns
  • Realizarea de interacțiuni complexe pentru prototipare
  • Înțelegerea standardelor de accesibilitate web
  • Testarea și verificarea accesibilității în Figma
  • AI în Figma
  • Plugins
  • Fișierele folositoare din Figma Community
Temă 10:
Creează un slider de tip carusel sau benefit cards pentru LP-ul tău.
12
Tehnici de prototipare
  • Legarea frame-urilor și crearea de interacțiuni
  • Pre-populare a proiectului cu imagini sau texte de tip placeholder
  • Adaugarea de tranzitii intre ecrane & animații
  • Overflow scrolling
  • Adaugarea de interactiuni intre elementele din pagini
  • Prezentarea unui proiect cu tranzitii
  • Folosirea componentelor în prototipare
Temă 11:
Finalizează LP-ul tău, creând interacțiuni pentru pagină.
13
Prezentarea Materialelor create
  • Review pe prototipurile create
  • TIpuri de Mockups
  • Realizarea de Mockups
  • Plugins folositoare
  • Cum prezinți ierarhic un proiect
Temă 12:
Pregătește prezentarea finală a proiectului tău.
14
Construirea portofoliului și proiectul final
  • Prezentarea proiectelor finale
  • Cele mai bune practici pentru prezentarea materialelor create
  • QnA final
DUPĂ CURS
Website-uri creative și interactive

Creează layout-uri și website-uri care surprind clienții, dar și userii care ajung pe pagină prin design și interactivitate

Cross-platform Design

Vei ști cum să construiești un website adaptat și optimizat pentru desktop și mobile

Figma Features

Vei ști să folosești orice feature din Figma pentru a-ți îmbunătăți calitatea proiectelor și a te diferenția în industrie

ÎNREGIST REAZĂ-TE AICI