• Servicii Web Design
  • Blog
  • Despre
  • Contact
    • Inregistreaza-teLogare
Cristian Barin - Expert Photoshop - Cursuri PhotoshopCristian Barin - Expert Photoshop - Cursuri Photoshop
  • Servicii Web Design
  • Blog
  • Despre
  • Contact
    • Inregistreaza-teLogare

Course

  • Home
  • All courses
  • Curs UI/UX – Principii Esentiale de Web Design

Capitolul 1: Informatii esentiale de web design

1: De ce sa inveti web design? 2: Web design fara programare – cum?

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:

Incepe Cursul Vezi Detalii
This content is protected, please login and enroll course to view this content!
Lectia anterioara Ajustam formularul pentru newsletter pentru mobil
Lectia urmatoare Obiectivele redesignului

    11 Comments

  1. Admin bar avatar
    [email protected]
    aprilie 28, 2021
    Răspunde

    Am modificat varianta Desktop in unele locuri.

    Varianta Desktop: https://imgur.com/Q7Tobsz
    Varianta Mobilă: https://imgur.com/aPP7Q1s

    Multumesc!

    • Admin bar avatar
      [email protected]
      aprilie 28, 2021
      Răspunde

      Mi-a scapat alinierea la Stanga pt Ce alergeni contin produsele Ohvaz? si Cine face livrarea? in rubrica de intrebari. Am observat dupa

      • Cristian Barin
        aprilie 28, 2021
        Răspunde

        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!

  2. [email protected]
    iunie 7, 2021
    Răspunde

    https://imgur.com/HiuORJD

    • Cristian Barin
      iunie 7, 2021
      Răspunde

      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.

  3. [email protected]
    ianuarie 24, 2022
    Răspunde

    Bună seara!
    Atașez varianta mobilă:
    https://imgur.com/a/Y0ujBdU
    https://imgur.com/a/xcZBWcd
    Mulțumesc!

    • Cristian Barin
      ianuarie 24, 2022
      Răspunde

      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.

  4. [email protected]
    februarie 2, 2022
    Răspunde

    Bună ziua!
    Ținând cont de sfaturile dumneavoastră, am refăcut tema.
    https://imgur.com/a/BhYHGx2
    https://imgur.com/a/VR77pIs
    Mulțumesc!

    • Cristian Barin
      februarie 3, 2022
      Răspunde

      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.

  5. Admin bar avatar
    [email protected]
    aprilie 13, 2023
    Răspunde

    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

    • Cristian Barin
      aprilie 13, 2023
      Răspunde

      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!

Scrie un comentariu Anulează răspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Fondator Ohvaz, Adobe Certified Instructor si Adobe Certified Expert in Photoshop, instructor de top pe Udemy, fost freelancer de succes pe 99designs, fondator Theme Junky – firma de design aplicatii Android. Autor carte Un Milion din Photoshop. Specializat in UI design si graphic design.

  • Un Milion din Photoshop
  • Curs Complet Photoshop
  • Despre Cristian Barin
  • ANPC
  • Termeni si conditii
  • Politica de retur si metode de plata
  • Contact

Toate drepturile rezervate. ExpertPhotoshop.ro 2023

Înregistrează-te

Continua cu Facebook
Continua cu Google

Ai deja cont? Apasă aici

Intră în contul tău

Continua cu Facebook
Continua cu Google
Ți-ai uitat parola?

Nu ai cont? Înregistrează-te

Înscrie-te la newsletter

Primesti lectiile gratuite imediat in casuta de email

x

Abonament lunar: 49 lei / lună

Avantaje
  • Access nelimitat la 3 cursuri
  • Poți anula oricând abonamentul
  • Ajutor prin email
Dezavantaje
  • Fără live chat
  • Fără materiale bonus
  • Nerambursabil
Cumpără abonamentul: 49 lei / lună