Section 1: Informatii esentiale de web design
Lesson 3: Primul tau miniproiect – cat de bun esti?
Lesson 4: Iata cum trebuie sa abordezi proiectul
Lesson 5: De la design la un site functional
Lesson 6: De ce e absolut necesar un design?
Lesson 7: Structura unui website
Lesson 8: Cat costa un website?
Lesson 9: Diferenta de stres dintre un designer si un programator
Section 2: Cel mai important concept de web design
Lesson 1: Elementul de baza al oricarui web designer
Lesson 2: Structuri non-standard
Lesson 3: Photoshop sau Adobe XD pentru web design?
Lesson 4: Creeaza o structura standard
Lesson 5: Cum determini marimea ideala pentru elemente
Lesson 6: 2 informatii cheie despre fonturi
Lesson 7: Formatarea textului si alte reguli esentiale
Lesson 8: Contrast in web design
Lesson 9: Contrast – studiu de caz 1
Lesson 10: Contrast – studiu de caz 2
Lesson 11: Tot ce trebuie sa stii despre codurile de culoare
Lesson 12: Cum aranjezi elementele in hero area
Lesson 13: Cum aranjezi iconite cu texte
Lesson 14: Reguli esentiale pentru iconitele in web design
Lesson 15: Cum redimensionezi iconite de forme diferite
Lesson 16: Dezechilibru vizual
Lesson 17: Greseli de executie la foc automat
Section 3: Rolul tau de designer in dezvoltarea firmei clientului
Lesson 1: Introducere
Lesson 2: Obiectivul afacerii
Lesson 3: Vizitatori versus patroni
Lesson 4: Site-uri mari fara sens
Lesson 5: Statistica in web design
Lesson 6: Wix, SquareSpace si Shopify
Lesson 7: Studiu de caz: 4 variante pentru aceeasi afacere
Lesson 8: Prima pagina a unui magazin online
Lesson 9: Iata de ce designul tau e implementat stangaci
Lesson 10: Pagina produsului a unui magazin online
Lesson 11: Procesul de checkout
Lesson 12: Care este diferenta dintre un landing page si un website?
Lesson 13: Nu toate site-urile vor sa vanda imediat
Lesson 14: De ce landing page-urile sunt considerate dubioase?
Lesson 15: SaaS – noua mina de aur?
Lesson 16: Studiu de caz: obiectivele clientului
Lesson 17: Teste A/B
Lesson 18: Un logo nou – abordarea mea
Lesson 19: Concluziile capitolului
Section 4: Urmatorul nivel de rafinament in web design
Lesson 1: Introducere UX si atentie la detaliu
Lesson 2: UX explicat cat mai clar
Lesson 3: Cum am dublat cifra de afaceri: de la 5 la 10.000 de euro/luna
Lesson 4: Cum am imbunatatit pagina de checkout
Lesson 5: Varianta mobila a magazinului online
Lesson 6: Varianta mobila – pagina produsului
Lesson 7: Detalii care fac diferenta
Lesson 8: Iata cum lucrezi cu un programator
Lesson 9: Low fidelity, heatmaps si documentatie
Lesson 10: Concluziile capitolului
Section 5: Primul website - varianta Desktop
Lesson 1: Analizam proiectul
Lesson 2: Incepem proiectul desktop cu top bar
Lesson 3: Construim headerul
Lesson 4: Culori si fonturi pentru partea superioara
Lesson 5: Ierarhia din meniul principal
Lesson 6: Hero area rafinat
Lesson 7: Cum listam categoriile?
Lesson 8: Organizarea cardului de produs
Lesson 9: Variante in web design
Lesson 10: Prima varianta pentru homepage
Lesson 11: A doua varianta pentru homepage
Lesson 12: A treia varianta pentru homepage
Lesson 13: Zona de intrebari frecvente
Lesson 14: Formular pentru inscrierea in newsletter
Lesson 15: Construim footerul
Lesson 16: Pagina produsului
Lesson 17: Detalii in pagina produsului
Lesson 18: Concluziile proiectului desktop
Lesson 19: Descarca proiectul XD si imaginea PNG
Section 6: Responsive Design
Lesson 1: Introducere responsive design
Lesson 2: Varianta mobila sau aplicatie iOS/Android?
Lesson 3: Adaptam headerul la varianta mobila
Lesson 4: Construim meniul secundar de categorii
Lesson 5: Cum afisam produsele din grid – o provocare!
Lesson 6: Varianta a doua pentru afisarea produselor
Lesson 7: Zona de intrebari frecvente pentru mobil
Lesson 8: Ajustam formularul pentru newsletter pentru mobil
Lesson 9: Reorganizam footer-ul
Section 7: Pagina produsului - varianta mobile
Lesson 1: Obiectivele redesignului
Lesson 2: Elementele zonei principale
Lesson 3: Primele doua variante
Lesson 4: A treia variatie a paginii produsului
Lesson 5: Ultima varianta a paginii produsului
Lesson 6: Construim sistemul de taburi
Lesson 7: Exercitiu de viteza – recenzii si valori nutritionale
Lesson 8: Verificam designul in aplicatia Adobe XD de pe mobil
Lesson 9: Ultimele modificari
Lesson 10: Concluzii si varianta ta
Section 8: Pregatirea designului pentru implementare (programare)
Lesson 1: Ce trebuie sa ii dam programatorului?
Lesson 2: Primul mod de a preda proiectul pentru programare
Lesson 3: Ce resurse trebuie pregatite in mod special pentru programator?
Lesson 4: Ce facem cu fonturile speciale?
Lesson 5: Cum instalam Zeplin in Adobe XD?
Lesson 6: Cum instalam Zeplin in Photoshop?
Lesson 7: Pregatirea finala pentru programator
Section 9: Despre bani, freelancing si cum sa incepi
Lesson 1: Fa asta inainte sa ceri bani!
Lesson 2: De unde iei primele proiecte?
Lesson 3: Experienta mea pe 99designs
Lesson 4: Tot ce trebuie sa stii despre 99designs
Lesson 5: Freelancer, upwork sau fiverr?
Lesson 6: Cati bani sa ceri pe munca ta?
Lesson 7: PFA sau SRL?
Lesson 8: Nu lucra pana nu intrebi asta:
20 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!