Capitolul 2: Descoperim Figma
2: Descarca toate resursele aici
3: Ce este Figma și este mai bun decât alte programe de design? 4: Bun venit in Figma5: Incepem treaba in Figma
6: Cum te orientezi in Figma
7: Exercitiu: cum sa organizezi un proiect
8: Rezolvarea exercitiului si cateva sfaturi
9: Descopera interfata Figma – cu bune si rele
10: Primiul tau mini website
11: Asa se editeaza iconite
12: De ce incepatorii renunta
13: De ce nu invat programare
Capitolul 3: Tehnici esentiale in Figma
1: Cea mai mare diferență în Figma față de alte programe
2: Cum creezi butoane in Figma
3: Notiuni esentiale despre culori in Figma
4: Notiuni avansate despre culori in Figma
5: Cum adaugi imagini: frames sau dreptunghiuri?
6: Exercitiu: Galerie de imagini (Colaj)
7: Cum functioneaza mastile in Figma
8: Descopera cele 3 tipuri de texte in Figma
9: Proprietatile textelor in Figma
10: Cum sa lucrezi cu texte ca un profesionist
11: Efecte in Figma: blur, shadow si altele
12: Tot ce trebuie sa stii despre grids
13: Components la prima vedere
14: Limitarile planului gratuit si Drafts
15: Asta te face un web designer bun!
16: Concluziile capitolului
Capitolul 4: Primul proiect de web design
1: Introducerea proiectului
2: Setarile corecte pentru versiunea desktop
3: Lucram la header
4: Facem meniul principal
5: Bara de cautare
6: Functia de sortare
7: Card – cel mai important element
8: Imbunatatim cardul
9: Navigatia secundara
10: Paginatie
11: Fundatia footerului
12: Adaugam continut in footer
13: Imperfectiuni vizuale
14: Ce trebuie sa retii
Capitolul 5: Baza oricarui web designer
1: Elementul de baza al oricarui web designer
2: Structuri non-standard
3: Creeaza o structura standard
4: Cum determini marimea ideala pentru elemente
5: 2 informatii cheie despre fonturi
6: Formatarea textului si alte reguli esentiale
7: Contrast in web design
8: Contrast – studiu de caz 1
9: Contrast – studiu de caz 2
10: Tot ce trebuie sa stii despre codurile de culoare
11: Cum aranjezi elementele in hero area
12: Cum aranjezi iconite cu texte
13: Reguli esentiale pentru iconitele in web design
14: Cum redimensionezi iconite de forme diferite
15: Dezechilibru vizual
16: Greseli de executie la foc automat
Capitolul 6: Ce trebuie sa faci pentru client ca sa fie multumit
1: Introducere
2: Obiectivul afacerii
3: Vizitatori versus patroni
4: Site-uri mari fara sens
5: Statistica in web design
6: Wix, SquareSpace si Shopify
7: Studiu de caz: 4 variante pentru aceeasi afacere
8: Prima pagina a unui magazin online
9: Iata de ce designul tau e implementat stangaci
10: Pagina produsului a unui magazin online
11: Procesul de checkout
12: Care este diferenta dintre un landing page si un website?
13: Nu toate site-urile vor sa vanda imediat
14: De ce landing page-urile sunt considerate dubioase?
15: SaaS – noua mina de aur?
16: Studiu de caz: obiectivele clientului
17: Teste A/B
18: Un logo nou – abordarea mea
19: Concluziile capitolului
Capitolul 7: Urmatorul nivel de rafinament in web design
1: Introducere UX si atentie la detaliu
2: UX explicat cat mai clar
3: Cum am dublat cifra de afaceri: de la 5 la 10.000 de euro/luna
4: Cum am imbunatatit pagina de checkout
5: Varianta mobila a magazinului online
6: Varianta mobila – pagina produsului
7: Detalii care fac diferenta
8: Iata cum lucrezi cu un programator
9: Low fidelity, heatmaps si documentatie
10: Concluziile capitolului
Capitolul 8: Proiect complet e-commerce (magazin online)
1: Cea mai importanta intrebare
2: Cum incepi corect orice proiect
3: Construim top bar
4: Finisam top bar
5: Cum faci un header modern
6: Cea mai importanta zona
7: Navigatia secundara
8: Cardul – acolo unde trebuie sa fii foarte atent
9: Detalii importante in card
10: Zona de intrebari frecvente
11: Aboneaza-te la newsletter
12: Construim footerul
13: Variatii pe care le poti face rapid
14: Pagina produsului – baza
15: Pagina produsului – partea de sus
16: Terminam pagina produsului
12 Comments
https://www.figma.com/file/XdowH0hg5v8AgNkFTN8osr/Untitled?type=design&node-id=1%3A2&mode=design&t=5VogLrHctsNwZ6Em-1
Va rog sa mai aruncati o privire peste proiect. Sunt multicele greseli evidente. Dupa ce le rezolvati, astept vesti. Multumesc.
Ok, multumesc !
https://www.figma.com/file/XdowH0hg5v8AgNkFTN8osr/Untitled?type=design&node-id=0%3A1&mode=design&t=4mNZuv5GcDiL0VfR-1
E un inceput bun, dar sunt cateva probleme esentiale:
– griul de pe fundal e prea inchis asa incat textele gri nu arata deloc bine;
– contrastul trebuie sa fie spre maxim ori “search” din bara de cautare e un contraexemplu perfect
– distanta dintre header si search nu este deloc potrivita
– in card, descrierea are line-height lasat pe auto
– una din iconitele din social media are o alta culaore, nu e ok
Per total e un inceput bun si daca il finisati, o sa fie ok!
Ok, multumesc frumos !
https://www.figma.com/file/XdowH0hg5v8AgNkFTN8osr/TLG?type=design&node-id=0%3A1&mode=design&t=ue6JXel66dTUVZv6-1
Ce va rog:
1) sa nu va grabiti cand postati – aici tot nu ati reparat textul negru pe fundal rosu din butonul de search;
2) sa mentionati cateva lucruri despre proces, despre ce ati facut, ce ati schimbat, etc, nu doar linkul propriu zis.
Multumesc.
Ok, am retinut.
Multumesc frumos.
https://www.figma.com/file/XdowH0hg5v8AgNkFTN8osr/TLG?type=design&node-id=0%3A1&mode=design&t=ue6JXel66dTUVZv6-1
Am corectat cateva nereguli:
-am schimbat la fundal- nuanta de gri, in gri F2F2F2;
-am marit contrastul in butonul de search printr-un font alb;
-am optimizat proportiile in partea sup. a site-ului:
-am lasat o dist.optima intre meniu principal si title;
-am micsorat dist. intre title si bara de “search’;
-am introdus un line intre bara de search si meniu secund.(n-am putut gasi un gri mai subtil);
-am introdus un line height =21px.;
-am retusat culoarea la o iconita din footer;
Nu am reusit sa adaug cul. galben la “.net”-ul din adresa de mail din footer,am incercat in mai multe feluri prin ‘selectare’ si nu a “raspuns”,nu stiu ce nu fac bine?
Multumesc tare mult ptr feedback !
E mult mai ok. Butonul de deasupra footer-ului ar trebui centrat pe verticala cu acea banda orizontala. Felicitari pentru un prim design reusit.
Am rezolvat.
Multumesc cu recunostiinta ptr. feed back si incurajari !