• 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 Detalii Lectii
This content is protected, please login and enroll course to view this content!
Lectia anterioara Web design fara programare – cum?
Lectia urmatoare Iata cum trebuie sa abordezi proiectul

    37 Comments

  1. Admin bar avatar
    Tronciu Serban Ilie
    aprilie 9, 2021
    Răspunde

    Nu gasesc locul dedescarcare a resurselor pentru curs. Se poate da o indrumare?

    • Cristian Barin
      aprilie 9, 2021
      Răspunde

      Rog refresh la lectie. Multumesc.

  2. Admin bar avatar
    Markus Diether
    aprilie 10, 2021
    Răspunde

    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

    • Cristian Barin
      aprilie 10, 2021
      Răspunde

      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!

  3. [email protected]
    aprilie 11, 2021
    Răspunde

    Salutari!
    Aici este link-ul cu varianta creata de mine pentru acest exercitiu.
    https://imgur.com/xNovmpw

    • Cristian Barin
      aprilie 11, 2021
      Răspunde

      Foarte ok mai putin butoanele alese – ambele sunt descentrate pe verticala, dar totodata au si rotunjimi diferite (0px fata de 5px).

  4. Admin bar avatar
    Alisa
    aprilie 15, 2021
    Răspunde

    https://imgur.com/a/auGpROG

    • Cristian Barin
      aprilie 15, 2021
      Răspunde

      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!

  5. Admin bar avatar
    [email protected]
    aprilie 15, 2021
    Răspunde

    Atasez linkul cu varianta mea: https://imgur.com/ddzRpZX

    • Cristian Barin
      aprilie 15, 2021
      Răspunde

      Felicitari! E un inceput foarte bun. Nu fix cum l-as fi vazut eu, dar este corect si bine realizat. Spor in continuare!

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

        Multumesc! Am observat la urmatoarea lectie ca nu am fost destul de atenta in alegerea Logo-ului, dar voi fi pe viitor🤔

        • Cristian Barin
          aprilie 16, 2021
          Răspunde

          Da, dar nu este propriu-zis o greseala. E o alegere… mai putin buna :). Butoanele descentrate sunt o problema reala.

  6. [email protected]
    aprilie 16, 2021
    Răspunde

    Acesta este link-ul cu varianta mea
    https://i.imgur.com/bBCxiQ1.png

    • Cristian Barin
      aprilie 16, 2021
      Răspunde

      Din pacate sunt multe probleme in design-ul dumneavoastra, dar tocmai de aceea cred ca acest curs o sa va ajute mult.

  7. [email protected]
    mai 7, 2021
    Răspunde

    https://imgur.com/OPPcS3S

    • Cristian Barin
      mai 7, 2021
      Răspunde

      Bun! Tot inainte!

  8. Admin bar avatar
    Denis Lomos
    mai 15, 2021
    Răspunde

    https://imgur.com/g7sLIsx

    • Cristian Barin
      mai 16, 2021
      Răspunde

      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.

      • Admin bar avatar
        Denis Lomos
        mai 18, 2021
        Răspunde

        Am inteles, am schimbat cu aceasta versiune fara alte modificari de elemente : https://imgur.com/w9mjhHd

        • Cristian Barin
          mai 19, 2021
          Răspunde

          In regula! Spor in continuare.

  9. [email protected]
    iulie 10, 2021
    Răspunde

    Buna ziua, aici este link-ul meu:
    https://imgur.com/70HVKuG

    • Cristian Barin
      iulie 13, 2021
      Răspunde

      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.

  10. [email protected]
    iulie 29, 2021
    Răspunde

    Buna dimineata ! Acesta este link-ul meu: https://imgur.com/Q5pvILE

    • Cristian Barin
      iulie 29, 2021
      Răspunde

      Aproape perfect – erau necesare 2 butoane. Ati inceput bine!

  11. Alexandru
    septembrie 8, 2021
    Răspunde

    https://imgur.com/a/1iACbVG

    • Cristian Barin
      septembrie 8, 2021
      Răspunde

      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!

  12. bosinceanusergiuvasile
    noiembrie 7, 2021
    Răspunde

    https://imgur.com/VBd4r7q

    • Cristian Barin
      noiembrie 7, 2021
      Răspunde

      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!

  13. [email protected]
    decembrie 14, 2021
    Răspunde

    Bună seara!
    Acesta este link-ul către miniproiectul meu: https://imgur.com/a/VcuWb2E
    Mulțumesc!

    • Cristian Barin
      decembrie 15, 2021
      Răspunde

      E un inceput excelent! Fara probleme!

  14. [email protected]
    aprilie 22, 2022
    Răspunde

    Salutare
    https://imgur.com/kDEFWu1

    • Cristian Barin
      aprilie 23, 2022
      Răspunde

      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!

  15. [email protected]
    mai 11, 2022
    Răspunde

    salut, imi puteti spune ce greseli am facut, si eventual sa mi dati o nota https://imgur.com/a/qF2mgPf

    • Cristian Barin
      mai 11, 2022
      Răspunde

      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!

      • [email protected]
        mai 11, 2022
        Răspunde

        multumesc!

  16. bosinceanusergiuvasile
    aprilie 6, 2023
    Răspunde

    Buna ziua cu respect! aveti aici atasat
    https://i.imgur.com/rjd9abE.jpg

    • Cristian Barin
      aprilie 6, 2023
      Răspunde

      Arata foarte ok, felicitari! E fix ce trebuie.

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ă