FIGMA

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

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

DESPRE CURS

Figma. Mai mult decât grafică.

Nu poți vorbi despre design web și mobile fără să vorbești despre Figma.

Învață mai multe despre funcțiile de bază și avansate ale celui mai utilizat tool de design. Află cum să creezi rapid tehnici avansate de prototyping și cum să colaborezi cu echipe pentru o muncă mai optimizată.

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
Fondator & Designer al brand-ului fashion Sacochero

Portofoliul lectorului

CUI RECOMANDĂM CURSUL?

Graphic Designer

Învață cum să introduci optimizarea în procesele tale creative și extinde-ți cunoștințele de design web și UI

Designer (UX/UI, Product)

Folosește Figma pentru a integra rezultatele cercetării utilizatorilor în design-urile tale și creează produse mai atrăgătoare

Product Manager

Planifică și optimizează etapele de marketing a produselor cu ajutorul prototipurilor și vizualurilor create în Figma

Specialist de Marketing

Învață cum poți colabora eficient cu designerii pentru a crea materiale de marketing și produse cu o identitate vizuală

PROGRAMUL

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.

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.

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.

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.

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.

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

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.

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

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.

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

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.

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

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.

Construirea portofoliului și proiectul final

Prezentarea proiectelor finale
Cele mai bune practici pentru prezentarea materialelor create
QnA final

DUPĂ CURS:

Creșterea eficienței

Vei știi cum să utilizezi stiluri, componente și constrângerile creative pentru a realiza prototipuri impresionante și cum să proiectezi optim pentru mobile & web

Update în cunoștințe

Vei putea să folosești plugin-uri pentru automatizarea proceselor de design și și vei știi ce tehnici să folosești pentru a crea interfețe grafice plăcute pentru utilizatori și ușor de prezentat dezvoltatorilor și altor designeri

Portofoliu îmbunătățit

Vei învăța metode pentru construirea unui portofoliu competitiv, la care vei adăuga proiectul finalizat la curs

ÎNREGIST REAZĂ-TE AICI

Odată cu completarea acestui formular sunt de acord cu termenii și condițiile menționate în politica de confidențialitate și politica de prelucrare a datelor cu caracter personal