Prezentare Generală a Lecției:
În această lecție, vei învăța principiile de bază ale designului web, ce face un site să fie atractiv și ușor de utilizat, și cum să folosești uneltele esențiale pentru a începe călătoria ta în web design. La final, vei înțelege aspectele esențiale ale designului web și vei fi pregătit să-ți configurezi mediul de lucru.
Secțiunea 1: Ce Face un Site Atractiv?
Principii Cheie ale Designului Vizual:
- Consistența:
- Menține stiluri uniforme pentru culori, fonturi și structuri.
- Exemplu: Folosește aceeași schemă de culori și tipografie pe toate paginile.
- Ierarhia Vizuală:
- Aranjează elementele astfel încât să ghidezi privirea utilizatorului către conținutul important.
- Exemplu: Titluri mari și culori îndrăznețe pentru informațiile principale.
- Echilibrul și Spațiul Alb:
- Evită aglomerarea și lasă elementele să „respire.”
- Exemplu: Adaugă spații între secțiuni pentru a îmbunătăți lizibilitatea.
- Psihologia Culorilor:
- Alege culori care evocă emoțiile dorite sau se aliniază cu brandul.
- Exemplu: Albastru pentru încredere, verde pentru natură și creștere.
- Design Responsiv:
- Asigură-te că site-ul se adaptează la toate dimensiunile ecranului (desktop, tabletă, mobil).
Secțiunea 2: Ce Face un Site Funcțional?
Principii de Utilizabilitate și Funcționalitate:
- Navigare Prietenoasă:
- Folosește o structură clară a meniului și linkuri intuitive.
- Exemplu: Poziționează bara de navigare în partea de sus a paginii.
- Viteză de Încărcare:
- Optimizează imaginile și codul pentru a îmbunătăți performanța site-ului.
- Accesibilitate:
- Asigură-te că site-ul poate fi utilizat de persoanele cu dizabilități (ex: text alternativ pentru imagini).
- Call-to-Action (CTA):
- Ghidează utilizatorii către acțiuni specifice (ex: „Înscrie-te” sau „Află mai multe”).
- Claritatea Conținutului:
- Păstrează conținutul concis și bine organizat pentru a capta atenția utilizatorilor.
Secțiunea 3: Unelte Necesare pentru Web Design
1. Editor de Text:
- Unealtă: Visual Studio Code (VS Code)
- De ce să-l folosești: Ușor, gratuit și suportă limbaje precum HTML, CSS și JavaScript.
- Configurare:
- Descarcă de pe https://code.visualstudio.com/.
- Instalează extensii precum „HTML Boilerplate” și „Live Server” pentru productivitate.
2. Browser pentru Testare:
- Browsere Recomandate: Google Chrome, Firefox sau Edge.
- Motiv: Au instrumente de dezvoltare integrate pentru depanare și testare.
3. Inspect Element:
- Funcție în Browsere: Click dreapta pe orice pagină web și selectează „Inspect” pentru a vizualiza structura HTML/CSS și a modifica elementele în timp real.
- Cum să-l folosești:
- Identifică problemele de aspect.
- Experimentează cu stiluri direct în browser.
- Cum să-l folosești:
Secțiunea 4: Activitate Practică – Crearea Primei Pagini Simple
Pasul 1: Configurează Mediul de Lucru:
- Deschide Visual Studio Code.
- Creează un fișier nou numit
index.html.
Pasul 2: Scrie HTML de Bază:
htmlCopy code<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prima Mea Pagină Web</title>
</head>
<body>
<h1>Bine ai venit pe site-ul meu!</h1>
<p>Acesta este un paragraf simplu pentru a începe cu web design-ul.</p>
</body>
</html>
Pasul 3: Vizualizează Pagina:
- Salvează fișierul.
- Deschide-l în browser pentru a vedea rezultatul.
Secțiunea 5: Temă pentru Acasă
- Analizează un Site:
- Alege un site care îți place și notează 3 aspecte care îl fac atractiv și 3 funcționalități utile.
- Personalizează-ți Pagina:
- Adaugă numele tău ca titlu.
- Scrie o scurtă descriere despre ce dorești să înveți în web design.
Chestionar pentru Săptămâna 1
- Care este importanța ierarhiei vizuale în designul web?
- a) Pentru a confunda utilizatorii.
- b) Pentru a ghida utilizatorii către informațiile importante.
- c) Pentru a face site-ul să pară aglomerat.
- Ce unealtă este folosită pentru a inspecta elementele unei pagini web?
- a) Photoshop
- b) Inspect Element în browser
- c) Microsoft Word