Capitolul 1: Informatii esentiale de web design
3: Primul tau miniproiect – cat de bun esti?
4: Iata cum trebuie sa abordezi proiectul
5: De la design la un site functional
6: De ce e absolut necesar un design?
7: Structura unui website
8: Cat costa un website?
9: Diferenta de stres dintre un designer si un programator
Capitolul 2: Cel mai important concept de web design
1: Elementul de baza al oricarui web designer
2: Structuri non-standard
3: Photoshop sau Adobe XD pentru web design?
4: Creeaza o structura standard
5: Cum determini marimea ideala pentru elemente
6: 2 informatii cheie despre fonturi
7: Formatarea textului si alte reguli esentiale
8: Contrast in web design
9: Contrast – studiu de caz 1
10: Contrast – studiu de caz 2
11: Tot ce trebuie sa stii despre codurile de culoare
12: Cum aranjezi elementele in hero area
13: Cum aranjezi iconite cu texte
14: Reguli esentiale pentru iconitele in web design
15: Cum redimensionezi iconite de forme diferite
16: Dezechilibru vizual
17: Greseli de executie la foc automat
Capitolul 3: Rolul tau de designer in dezvoltarea firmei clientului
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 4: 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 5: Primul website - varianta Desktop
1: Analizam proiectul
2: Incepem proiectul desktop cu top bar
3: Construim headerul
4: Culori si fonturi pentru partea superioara
5: Ierarhia din meniul principal
6: Hero area rafinat
7: Cum listam categoriile?
8: Organizarea cardului de produs
9: Variante in web design
10: Prima varianta pentru homepage
11: A doua varianta pentru homepage
12: A treia varianta pentru homepage
13: Zona de intrebari frecvente
14: Formular pentru inscrierea in newsletter
15: Construim footerul
16: Pagina produsului
17: Detalii in pagina produsului
18: Concluziile proiectului desktop
19: Descarca proiectul XD si imaginea PNG
Capitolul 6: Responsive Design
1: Introducere responsive design
2: Varianta mobila sau aplicatie iOS/Android?
3: Adaptam headerul la varianta mobila
4: Construim meniul secundar de categorii
5: Cum afisam produsele din grid – o provocare!
6: Varianta a doua pentru afisarea produselor
7: Zona de intrebari frecvente pentru mobil
8: Ajustam formularul pentru newsletter pentru mobil
9: Reorganizam footer-ul
Capitolul 7: Pagina produsului - varianta mobile
1: Obiectivele redesignului
2: Elementele zonei principale
3: Primele doua variante
4: A treia variatie a paginii produsului
5: Ultima varianta a paginii produsului
6: Construim sistemul de taburi
7: Exercitiu de viteza – recenzii si valori nutritionale
8: Verificam designul in aplicatia Adobe XD de pe mobil
9: Ultimele modificari
10: Concluzii si varianta ta
Capitolul 8: Pregatirea designului pentru implementare (programare)
1: Ce trebuie sa ii dam programatorului?
2: Primul mod de a preda proiectul pentru programare
3: Ce resurse trebuie pregatite in mod special pentru programator?
4: Ce facem cu fonturile speciale?
5: Cum instalam Zeplin in Adobe XD?
6: Cum instalam Zeplin in Photoshop?
7: Pregatirea finala pentru programator
Capitolul 9: Despre bani, freelancing si cum sa incepi
1: Fa asta inainte sa ceri bani!
2: De unde iei primele proiecte?
3: Experienta mea pe 99designs
4: Tot ce trebuie sa stii despre 99designs
5: Freelancer, upwork sau fiverr?
6: Cati bani sa ceri pe munca ta?
7: PFA sau SRL?
8: Nu lucra pana nu intrebi asta:
49 Comments
Nu gasesc locul dedescarcare a resurselor pentru curs. Se poate da o indrumare?
Rog refresh la lectie. Multumesc.
Aici link-ul catre miniproiectul meu. Mentionez ca nu am schimbat dimeniunile elementelor (cu toate ca am fost tentat sa o fac la unele :)) ):
https://imgur.com/DiWITwG
E un punct de plecare bun. Doar 2 greseli evidente – butonul roz nu e ok de folosit, iar marginile goale stanga-dreapta trebuiau sa fie mai generoase. Un 8/10. Bun!
Salutari!
Aici este link-ul cu varianta creata de mine pentru acest exercitiu.
https://imgur.com/xNovmpw
Foarte ok mai putin butoanele alese – ambele sunt descentrate pe verticala, dar totodata au si rotunjimi diferite (0px fata de 5px).
https://imgur.com/a/auGpROG
Bine ati venit la curs. Din pacate ati ales butoane mai putin fericite. Cat despre linia violet, nu e ok deoarece nu acopera intreaga latime. Dar cursul o sa va ajute cu toate aceste detalii. Spor la invatat!
Atasez linkul cu varianta mea: https://imgur.com/ddzRpZX
Felicitari! E un inceput foarte bun. Nu fix cum l-as fi vazut eu, dar este corect si bine realizat. Spor in continuare!
Multumesc! Am observat la urmatoarea lectie ca nu am fost destul de atenta in alegerea Logo-ului, dar voi fi pe viitor🤔
Da, dar nu este propriu-zis o greseala. E o alegere… mai putin buna :). Butoanele descentrate sunt o problema reala.
Acesta este link-ul cu varianta mea
https://i.imgur.com/bBCxiQ1.png
Din pacate sunt multe probleme in design-ul dumneavoastra, dar tocmai de aceea cred ca acest curs o sa va ajute mult.
https://imgur.com/OPPcS3S
Bun! Tot inainte!
https://imgur.com/g7sLIsx
Din pacate nu este ceea ce trebuie. Va rog sa urmariti instructiunile. Nu aveti voie sa modificati elementele sub nici o forma. Trebuie sa alegeti din cele existente. Astept varianta corecta. Multumesc.
Am inteles, am schimbat cu aceasta versiune fara alte modificari de elemente : https://imgur.com/w9mjhHd
In regula! Spor in continuare.
Buna ziua, aici este link-ul meu:
https://imgur.com/70HVKuG
Butoanele ar trebui sa fie asezate in linie, iar butonul rosu nu este bine ales (textul din interior este descentrat pe verticala). Restul alegerilor sunt bune.
Buna dimineata ! Acesta este link-ul meu: https://imgur.com/Q5pvILE
Aproape perfect – erau necesare 2 butoane. Ati inceput bine!
https://imgur.com/a/1iACbVG
Majoritatea deciziilor sunt foarte bune. 2 probleme:
– butonul roz are corner radius 0, celalalt 5px; astfel nu e potrivit;
– ambele butoanele au texte descentrate pe verticala; nu e ok.
Per total e foarte bine!
https://imgur.com/VBd4r7q
Excelent. O mica greseala: meniul nu este centrat pe verticala in interiorul dreptunghiului. Pare ca si logo-ul e in aceeasi situatie. Dar per total e foarte bine!
Bună seara!
Acesta este link-ul către miniproiectul meu: https://imgur.com/a/VcuWb2E
Mulțumesc!
E un inceput excelent! Fara probleme!
Salutare
https://imgur.com/kDEFWu1
Bine ati venit la curs! Inceputul nu este perfect, dar de aceea suntem aici – ca sa invatam. Titlul trebuia aliniat la stanga cu descrierea de 3 randuri si unul din butoane. Vad ca ati adaugat si o linie sub titlu – nu aveti voie sa faceti asta. Continuati si veti invata multe. Spor!
salut, imi puteti spune ce greseli am facut, si eventual sa mi dati o nota https://imgur.com/a/qF2mgPf
E foarte bine, insa dreptunghiul de la header trebuia sa fie top aligned. Acel spatiu de deasupra nu este util si nici estetic. In rest, foarte ok!
multumesc!
Buna ziua cu respect! aveti aici atasat
https://i.imgur.com/rjd9abE.jpg
Arata foarte ok, felicitari! E fix ce trebuie.
Salut, las si eu asta aici
https://imgur.com/pm8Tng1
Trebuie o distanta mai mare intre ‘this is my title’ si logo. De obicei butonul plin se aseaza in stanga. Trebuie un spatiu de cel putin 50 de pixeli stanga-dreapta. Spor in continuare! Veti invata pas cu pas aceste lucruri.
https://imgur.com/a/rZSG5Fg
https://imgur.com/a/qCVjMI2
Ambele variante sunt foarte ok
De unde ati descarcat resursele (exercitiu.psd)
https://imgur.com/a/MKlyvJz
Lipseste logoul, iar elementele din stanga ar trebui sa fie “left aligned”, adica sa formeze o linie verticala imaginara frumoasa. Spor in continuare!
https://imgur.com/a/kzx3Kku
E un inceput foarte bun.
Buna ziua!
Aceasta este rezolvarea mea: https://imgur.com/sdZQQlZ.
Bine ati venit la curs. Este foarte bine rezolvat, felicitari!