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:
9 Comments
Am modificat varianta Desktop in unele locuri.
Varianta Desktop: https://imgur.com/Q7Tobsz
Varianta Mobilă: https://imgur.com/aPP7Q1s
Multumesc!
Mi-a scapat alinierea la Stanga pt Ce alergeni contin produsele Ohvaz? si Cine face livrarea? in rubrica de intrebari. Am observat dupa
E in regula.
Pe desktop,
– la newsletter, nu e ok cu 2 titluri cu fonturi diferite. Face zona prea inalta. Trebuie sa fie mai compact. Idem inauntru cu all caps in zona stanga din formular. Nu arata ok, e prea ingramadit.
– culoarea caramizie e interesanta;
– fontul e un pic nepotrivit, e prea caligrafic pentru gustul meu;
– top produse fara pret nu cred ca e ok, iar faptul ca e un stroke puternic, nu e in linie cu alte elemente
– galbenul din footer e asa si asa. nu sunt incantat;
Pe mobil,
– fontul din main menu arata foarte ok
– headline-ul e greu de citit
– gramajul cred ca e la limita ca marime
Per total e un design bunicel, interesant. Avand in vedere experienta dumneavoastra, ar trebui sa fiti incantata!
https://imgur.com/HiuORJD
Fontul din footer mi se pare un pic prea mare. Cat despre top bar, pare dezechilibrat din cauza iconitelor de social media aranjate la stanga. De asemenea ati folosit iconite colorate si per total mi se par prea multe culori in zona superioara. E un design ok, dar cred ca se poate un pic mai ok.
Bună seara!
Atașez varianta mobilă:
https://imgur.com/a/Y0ujBdU
https://imgur.com/a/xcZBWcd
Mulțumesc!
Imi pare rau dar feedback-ul nu e pozitiv. In prima varianta nu stiu ce ati facut legat de iconite dar sunt foarte slabe calitativ. Apoi fundalul roz este rezonabil, insa textele sunt ingramadite – pret, detalii, calorii.
Dragut ce ati facut in footer – firme/influenceri.
In a doua varianta fundalul galbui este foarte neobisnuit. Intrebarea pe care trebuie sa o adresati este – “am mai vazut asta pe site-uri foarte mari, de succes?”. Raspunsul este “nu”. Astfel nu e o decizie buna.
Bună ziua!
Ținând cont de sfaturile dumneavoastră, am refăcut tema.
https://imgur.com/a/BhYHGx2
https://imgur.com/a/VR77pIs
Mulțumesc!
Este o imbunatatire semnficativa, dar tot ramane o problema: iconita de ‘adauga in cos’ trebuie sa fie in interiorul butonului. Nu poate pluti deasupra. Intrebarea e – ati mai vazut stilul acela cu iconita plasat in acel fel pe vreun site mare? Daca raspunsul este ‘nu’ atunci nu e ok. Tineti minte – nu trebuie reinventam sau sa revolutionam nimic.