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:
35 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!