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:
22 Comments
Am terminat Dupa o zi aproape de organizare a produselor..
Sper sa fie ok. Stiu ca aveti ochii de vultur si gasiti o greseala ceva ce nu am observat. 😀
Cum e idee de a aranja produsele si fontul ales…
Link : https://imgur.com/9kbxWBN
Ma voi concentra pe aspectele negative asa incat sa stiti pe ce sa va concentrati. Totul e constructiv, desigur, deci sa nu va speriati de sumedenia de puncte.
– register in header – contrast insuficient, greseala de executie;
– drop shadow header – nu e necesar, dar chiar daca ar fi, e prea puternic
– cele 5 stele sunt imense raportat la importanta lor; prin marimea lor transmiteti ca sunt mai importante fata de: pret, adauga in cos, vezi detalii, gramaj, ceea ce nu are cum sa fie corect;
– cam mult all caps in titluri – discutabil, dar nu sunt incantat;
– contrast slab intre baza cardului si main bg
– stroke-ul din card de la imagine nu este necesar, nu ajuta
– design-ul pare mai rece si mai masculin fata de cel existent (vechi)
– adauga rapid in cos – contrast slab, greseala de executie
– vezi detalii e prea inghesuit in buton
– ati folosit acelasi stil pentru pret ca la vezi detalii – unul e un text simplu, altul e o actiune; astfel e o greseala mare sa folositi acelasi design
– prea mare distanta dintre categorii si grid – nu par legate; pare ca titlul si subtitlu sunt legat cu elementul de categorii, ceea ce nu e ok.
– nu imi place rotunjimea la inregistreaza-te din header. am zis 0, 5 sau max la butoane; doar cardurile fac exceptie fiindca sunt foarte mari
– prea mult spatiu intre FAQ si newsletter si intre newsletter si footer.
– prea putin line-height in footer la coloane – este auto! grrr
Va sugerez sa nu va grabiti. Cursul este relativ scurt si poate fi parcurs in 1-2 zile, dar principiile mentionate in primele capitole trebuie “digerate”.
Buna ziua,
Am impresia ca rezolutia imaginii in JPG sau PNG nu iese foarta buna dupa salvarea proiectului. In schimb am salvat PDF sau WEB si e mult mai clara(dar dupa cum se stie IMGUR nu accepta formatul). Sper ca e ok.
https://imgur.com/LQCsGoP
Multumesc!
E o problema veche cauzata de Adobe XD, nu ati gresit nimic. E foarte neplacuta situatia. E unul dintre multele motive pentru care inca lucrez in Photoshop pentru anumite proiecte de UI ce ar trebuie de fapt executate in XD. Revenind la design:
– fontul principal e prea sec, nu are suficienta personalitate, e “Arial”
– fontul script – e bun, imi place, desi am mici rezerve … ma duce cu gandul la caligrafie la scoala primara;
– iconitele din categorii nu sunt executate bine – sunt prea subtiri. asa cum ziceam in curs, la o marime mica trebuie iconite pline. Deci e o idee interesanta, dar nu e suficient de bine executata;
– grid-ul: imi place fundalul intunecat la steluta; caloriile sunt mult prea mici, add to cart nu arata bine, mai ales cu acel shadow.
– top produse – dezlegat, nu as adauga culoarea de actiune acolo
– frumusele iconitele din FAQ – super!
– in footer butonul galben nu e suficient de lat, iar linia alba e prea vizibila
– newsletter-ul merita mai multa iubire si atentie, e mare pacat de acel element.
Multumesc frumos! Voi lua in calcul.
Buna ziua,
https://imgur.com/w3CAXaB
Felicitari pentru design. Sunt cateva idei interesante aici – faptul ca ati folosit iconite pentru FAQ – super! Problema e ca stilul nu pare potrivit. Ar trebui ceva monocrom, curat, elegant.
In cardul produsului, gri-ul nu cred ca este ideal, dar e un mare semn de intrebare de ce ati adaugat inimioara pentru favorite si semnul exclamarii (nu stiu pentru ce) in situatia in care designul e deja incarcat.
Verdele nu mi se pare o alegere inspirata, dar mai mult decat atat, nu e un design standard pentru cantitate – pare un buton, nu 2 controllere separate si cantitatea in mijloc.
Nu sunt de acord cu newsletter fara bg.
Inca o data – treaba buna!
repostez link-ul cu designerul meu, la cererea unui student, din motive ca lincul de mai sus nu mai e activ.
https://imgur.com/OuIetqX
Griul din cardul produsului (defapt e un turcoaz foarte deschis) si nu e nici pe placul meu!
nu am gasit nimic mai potrivit?
singurul motiv a fost ca sa fie in evidenta produsul,
alte culori mai potrivite nu am gasit.
Pe alb arata limsit de viata, parerea mea!
findca butonul VEZI DETALII a fost inlocuit cu butonul de cantitate
am decis sa il inlocuesc cu o iconita pentru informatii / vezi detalii
Butonul favorit a fost adaugat si el pentru persoanele care deja sunt clienti si au gama lor de produse preferate.
Butonul pentru cantitate sunt deacord ca e si pe pagina de produs, insa ma gindeam ca e ok sa fie si pe pagina principala,
pentru persoanele care deja stiu produsele si pot face comanda direct de pe pagina princilapa acele cu cont cit si cele fara cont.
Fontul si multe alte parti ale proiectului nu au fost inlocuite pentru ca nu am gasit ceva mai bun, mai potrivit!
Fontul si multe alte parti ale proiectului nu au fost inlocuite pentru ca nu am gasit ceva mai bun, mai potrivit, desi stiu ca exista!
acesta e primul meu proiect, nu am mai facut asa ceva pina acuma, toate resursele ce le-am gasit mai bun pentru proiect erau cu plata,
de si nu am un abonament, am mers pe tot ce am gasit gratis.
Multumesc pentru apreciere la instructor si ma stradui sa cresc in fiecare zi!
Apropo vreau sa vad si proiectele altor studenti, doar asa putem creste inspirindune unul de la altu si a ne imparti gindurile si ideile!
E in regula ca ati repostat. Da, astept cu mare interes sa vad mai multe variante.
Super interesant Design ul. sunt impresionat de acele produse NOBG pe cardul produsului, interesanta abordare si cu informatiile de prosus, cat si FAQ. Felicitari.
Cer scuze pentru greselile facute, nu am verificat contextul!
https://imgur.com/3AkCvjh
Felicitari pentru design, e super ok. Am cateva lucruri de care nu sunt incantat:
– nuanta de rosu folosita in titlu, precum si fontul de acolo;
– lipsa de line-height la descrierea de dedesubt plus faptul ca e in format bold, iar fiecare cuvant incepe cu litera mare – nu e ok;
– vezi detalii din card este foarte putin vizibil.
Per total bun spre foarte bun! Felicitari inca o data!
Interesant design. Sunt impresionat. Good job.
https://imgur.com/a/2YowJdY
Foarte dragut designul! Imi plac modificarile. Movul vine bine, iconita de intra in cont e mai potrivita… nu mi- place nuanta de roz de la pret… pare fuzzy, nu imi dau seama de ce. De asemenea nu as folosi 0 corner radius la ‘adauga in cos’. Per total, super!
Bună ziua!
Acestea sunt variantele mele pentru tema propusă:
● varianta nr. 1: https://imgur.com/a/hdqhi28
● varianta nr. 2: https://imgur.com/a/AJsg2Qv
● varianta nr. 3: https://imgur.com/a/sGTpYng
● varianta nr. 4: https://imgur.com/a/FzY2chh
● varianta nr. 5: https://imgur.com/a/BOhgivM
Vă mulțumesc pentru toate informațiile prețioase incluse în acest curs.
Cu drag! Ma bucur ca va place cursul. Legat de propuneri, sunt interesante, insa majoritatea sunt prea reci (implicit masculine). Ar trebui ceva mai elegant, mai finut. Asta se vede si in fontu ales pentru ‘nu e un desert, e pranzul perfect’. Dvs. ati ales ceva copilaros, un scris de mana cam ascutit. Trebuie mai “curat” si rafinat.
“intrebari despre Ohvaz” nu necesita fundal precum meniul cu cele 5 categorii. Nu folositi un rectangle, e o greseala.
Cand executati variatii, faceti 5-7-10, dar prezentati maximum 3. Acelea 3 trebuie sa fie semnificativ diferite intre ele. Nu il fortati pe client sa va trieze el munca. Per total, treaba buna si se vede ca v-ati straduit.
Salutare am plasat aici exemplul meu
sper ca macar putin sa fie asa cum trebuie
https://imgur.com/NG2DlMx
Arata destul de bine, dar anumite zone sunt cam inghesuite. Trebuie sa respire mai bine. Spre exemplu la zona de intrebari.. dar per total nu e deloc rau!
Salut, mi s-a facut asa pofta de un ovaz cat am stat sa aranjez produsele 🙂
https://imgur.com/gIwDAYD
Designul arata foarte bine per total, culorile sunt excelente, fontul ales pentru headline e potrivit si simpatic. Cateva probleme:
– rotunjimea – fie e perfect rotund ca la ‘adauga in cos’ fie e semirotund gen ‘inregistreaza-te’
– in card, titlul produsului este centrat si nu arata bine, iar stanga-dreapta nu e deloc spatiu. Lipsa acelui spatiu (padding) strica foarte mult)
– in card, adauga in cos nu arata prea bine aliniat bottom right. Mai trebuie lucrat
– faq – iconita e mult prea mare
– poza cu ovaz – in stanga jos se vede un colt urat
– stroke de 1 px – trebuie evitat, nu arata bine
Per total super!