• Acasa
  • Articole Photoshop
  • Despre Cristian Barin
  • Contact
    • Inregistreaza-teLogare
Cristian Barin - Expert Photoshop - Cursuri PhotoshopCristian Barin - Expert Photoshop - Cursuri Photoshop
  • Acasa
  • Articole Photoshop
  • Despre Cristian Barin
  • Contact
    • Inregistreaza-teLogare

Course

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

Section 1: Informatii esentiale de web design

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

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:

Incepe Cursul Vezi Detalii
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

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

Scrie un comentariu Anulează răspunsul

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

Despre mine

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.

urmareste-ma pe youtube

Navigație

  • Un Milion din Photoshop
  • Curs Complet Photoshop
  • Despre Cristian Barin
  • ANPC
  • Termeni si conditii
  • Contact

All Rights Reserved. ExpertPhotoshop.ro 2021

Developed By Sanchit Varshney

Înregistrează-te

Ai deja cont? Apasă aici

Intră în contul tău

Ț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 toate cursurile
  • 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ă