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:
11 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.
Salut , multumesc pentru feedback la varianta Desktop. Revin cu varianta pentru mobile. Nu sunt sigura daca am inteles cu stroke-ul, l-am facut de 2 pixeli, sper ca e ok.
https://imgur.com/rKGlDoW
Adauga in cos este descentrat pe verticala. Aliniati fara diacritice, apoi le adaugati. Pe mobil titlurile verzui nu arata la fel de bine. Footerul nu imi place deloc, dar e o chestie subiectiva. La newsletter campul e un pic cam inchis pentru gustul meu. Per total, bunicel. De aici puteti face multe variatii. Spor in continuare!