UI kit amaliyoti

«E-kutubxona»: header va kategoriya paneli

9-sinfUX/UI dizayn5-hafta · 15-dars

Takrorlash

Twitter dasturchilari yaratgan, responsiv dizaynga kuchli kit?

Bootstrap — HTML, CSS, JS; container → row → col.

Bugun nimani yig'amiz?

Design paneli

Har bir qiymat — aniq raqam

Design paneli xaritasi

Bo'lim	Nima sozlanadi
W / H	eni va bo'yi
X / Y	sahifadagi joylashuv
Corner radius	burchak silliqligi
Fill	rang yoki rasm (Image)
Stroke	chegara: rang, qalinlik, joylashuv
Effects	Drop shadow, Blur

Foydali tugmalar

R — Rectangle L — Line T — Text Alt — red guides Ctrl+Alt+K — komponent

Header

Qidiruv, Kirish, profil, savat

Qidiruv maydoni

1. Rectangle

Header markazida: R tugmasi.

2. W / H, X / Y

Masalan, 600 × 50, aniq koordinatalar.

3. Fill

Oq rang — toza va neytral.

4. Corner radius 25

Yumaloq «pill» shakl.

Radius siri

Balandlik 50 px, radius 8 → oddiy yumaloq burchak.

Radius siri

Balandlik 50 px, radius 25 (yarmi) → burchaklar yarim doira, to'liq «pill».

Qoida: to'liq yumaloq uchun radius = balandlik / 2.

Qidiruv tugmasi

eni va bo'yi

sariq rang opacity

corner radius

Lupa: Fill → Image → rasm yuklash → Crop bilan moslash.

Kirish, profil, savat

«Kirish»

Inter, 25 px — tizimga kirish.

Profil

Image, 38 × 38 px, Exposure.

Savat

Image + Exposure — fonga uyg'un.

Mini-test

Ikonka yorug'ligini fonga moslash uchun qaysi sozlama?

Exposure — rasm yorug'ligi. Crop esa o'lcham va joylashuvni moslaydi.

Kategoriya paneli

Soya, stroke, chiziqlar, guides

Line va stroke

Pastki panel: Shape tools → Rectangle, Line, Arrow, Ellipse, Polygon, Star
Line: rang qora, 2 px, Center
Header ostida — bo'limlarni ajratish

Pastga bosing: stroke joylashuvi

Inside · Center · Outside

Inside

chiziq ichda — o'lcham o'zgarmaydi

Center

yarmi ichda, yarmi tashqarida

Outside

tashqarida — element vizual kattalashadi

Yon panel

Soyasiz

Panel fonga «yopishib» qoladi, chegarasi sezilmaydi.

Drop shadow

Fill oq, Stroke qora 1 px Inside, Opacity 100% — chuqurlik hissi.

Kategoriyalar

Maktab darsliklari Badiiy adabiyot Ilmiy-ommabop Bolalar adabiyoti Chet tillar

Red guides: elementni tanlab, Alt bosib boshqasiga olib boring — masofa ko'rinadi. Oraliqlar teng bo'lsin.

Pastda — «more categories» havolasi.

Mini-test

Panel o'lchami o'zgarmasligi uchun stroke qaysi joylashuvda?

Inside — chiziq shakl ichida chiziladi.

Yagona uslub

Har bir yangi element 13-darsdagi Color/Text styles, bir xil radius va 8-point grid oraliqlaridan foydalansin.

Qidiruv bloki → Ctrl/Cmd + Alt + K → Search/Default — UI kitingizning birinchi molekulasi.

Amaliy topshiriqlar 45 daqiqa

OsonQidiruv maydoni 600 × 50, radius 25 va sariq 50 × 50 tugma.

O'rtaTo'liq header: lupa, «Kirish», profil, savat, 2 px Line.

QiyinKategoriya paneli + «more categories» + Search komponenti + yangi tugma.

Dars xulosasi

Header

Qidiruv, tugma, Kirish, ikonkalar.

Panel

Soya, Inside stroke, chiziqlar.

Uslub

Stillar, guides, komponent.

Keyingi hafta: Figma chuqurroq

Frame, komponentlar va prototiplash

6-hafta