Uyga vazifa

Har bir vazifa 20–30 daqiqa. Natijalarni Figma dasturidagi alohida faylda saqlang. Topshirish: keyingi dars boshida mentorga Figma havolasini ko'rsating.

10-dars uchun (Shrift va tipografiya)

1-topshiriq: «Tipografik ierarxiya va shrift juftligi»

1. Figma'da Mobile (375x812) o'lchamli Frame oching.
2. Google Fonts'dan ikkita shrift juftligini tanlang (masalan: Sarlavhalar uchun Poppins, asosiy matn uchun Inter).
3. Yangiliklar kartasi dizaynini yarating:
   • Kategoriya tegi: 10px BOLD, bosh harflarda;
   • Asosiy sarlavha: 20px SemiBold, Line Height: 130%;
   • Qisqa tavsif: 14px Regular, Line Height: 150%;
   • Sana va muallif: 12px Muted (och kulrang).

Kutiladigan natija: o'qilishi oson, tipografik ierarxiyasi to'g'ri qurilgan yangilik kartasi.

---

11-dars uchun (UI elementlarida rang nazariyasi)

2-topshiriq: «60-30-10 rang palitrasi va kontrast»

1. Figma'da o'zingiz tanlagan brend yo'nalishi (masalan: ekologik mahsulotlar yoki musiqa ilovasi) uchun 3 ta rang tanlang (60% fon, 30% karta foni, 10% yorqin brend CTA tugmasi).
2. Shu ranglar asosida bitta «Mahsulot kartasi» (Product Card) chizing: Rasm, Mahsulot nomi, Narxi, Chegirma belgisi va «Sotib olish» tugmasi.
3. WebAIM Contrast Checker orqali tugma foni va matni orasidagi kontrast kamida 4.5:1 ekanligini tekshiring.

Kutiladigan natija: 60-30-10 qoidasiga mos, WCAG kontrast talablariga javob beruvchi chiroyli karta.

---

12-dars uchun (UI kompozitsiyasi va vizual ierarxiya)

3-topshiriq: «E-kutubxona to'liq bosh ekrani»

1. Hafta davomida o'rganilgan barcha bilimlarni (Tipografiya, Rang, Kompozitsiya) birlashtiring.
2. «E-kutubxona» mobil ilovasi bosh sahifasini 8-point grid qoidasi bo'yicha chizing:
   • Yuqori panel: Profil avatari, qidiruv satri;
   • Kompozitsion markaz: Katta «Hafta tavsiyasi» banneri va yorqin «O'qishni boshlash» tugmasi;
   • Ritm: Gorizontal aylanuvchi «Ommabop kitoblar» kartalari qatori (bir xil 16px oraliq bilan);
   • Pastki navigatsiya: 4 ta asosiy bo'lim ikonkalari.

Kutiladigan natija: professional, muvozanatli va I-bob talablariga to'liq javob beruvchi mobil bosh sahifa UI maketi.

---