Figmada interaktiv Wireframe

low-fidelity · 7 bosqich · user flow · interaktiv linklar

10-sinfAdvanced UX/UI4-hafta · 12-dars

Takrorlash: 10–11-darslar

10-dars

Prototip turlari (low/mid/hi-fi), kichik vs katta prototip xatolari

11-dars

User flow, flowchart shakllari: romb (qaror), to'rtburchak (harakat), axborot arxitekturasi

Bugun

Wireframe nima, nega muhim, 7 bosqich, Figmada amaliyot

Wireframe

Sahifaning «chizmasi» va GPS’i

Wireframe nima?

Ta'rif

Wireframe — veb-sahifaning «chizmasi»: asosiy tuzilishi va joylashuvini belgilovchi tizim.

Rang, shrift va grafika yo'q — faqat tuzilma!

O'xshatish

Foydalanuvchi interfeysi va tajribasini xaritalashga yordam beruvchi GPS deb tasavvur qiling.

Yo'lboshlovchi — manzilni tanlashda chalg'itmaydi.

Wireframe skeleti: faqat kulrang qutilar

Nega muhim? — 5 afzallik

Funksionallik, foydalanish qulayligi va kontent tartibini ustuvor qiladi
Ranglar, shriftlar va rasmlar chalg'itmaydi — e'tibor tuzilmada
Oddiy chizmalar qaror qabul qilishda aniq yo'l xaritasi beradi
Turli variantlarni sinash osonlashadi, ijodkorlik kuchayadi
Yakunda qulay va samarali veb-sahifalar yaratishga yordam beradi

Wireframesiz: dizayn qarorlarining tartibsiz labirintiga tushib qolish mumkin

Wireframesiz yoki wireframe bilan?

Labirint

Darhol ranglar va rasmlar bilan boshlanadi. Tuzilma xatosi kech topiladi, hammasini qayta chizish kerak bo‘ladi.

Yo‘l xaritasi

Avval tuzilma va user flow kelishiladi. Variantlarni tez sinash va jamoa bilan muhokama qilish oson.

Qo'llanish holatlari

Sayt turi	Muhim elementlar	Mumkin	Mumkinmas
Ko'chmas mulk	Interaktiv ro'yxat, galereya, xarita	Qidiruv va filtrni intuitiv qiling	Ko'p vizual bilan sahifani to'ldirmang
E-commerce	Mahsulot vitrinasi, sodda menyu, oson checkout	Vizual ierarxiyani to'g'ri quring	Checkoutni murakkablashtirmang
Portfolio	Loyihalar, xizmatlar, aloqa	Eng kuchli loyihalarni birinchi ko'rsating	Asosiy kontentni soyada qoldirmang

Mini-test

Nega wireframe’da rang, shrift va rasmlar ishlatilmaydi?

Bezak chalg‘itadi. Low-fidelity bosqichda faqat joylashuv va mantiq muhim.

Wireframe yaratish vositalari

Qog'oz va qalam

Hali ham ajoyib usul! Tez, arzon, hamma uchun qulay.

Figma

Piksel darajasida aniq wireframe. Bugun asosiy asbob.

Brauzerda ishlaydi, jamoa bilan birga!

Webflow

Loyihani ishlab chiqish bosqichiga o'tkazishda qulay. Figma bilan juda mos keladi.

Figmada 7 bosqich

Fayldan interaktiv linkgacha

Figmada wireframing: 7 bosqich

1. Yangi fayl — ro'yxatdan o'ting, yangi dizayn faylini oching

2. Frame — F tugmasi, sahifa o'lchamini tanlang (masalan 1440×1024)

3. Header va navigatsiya — to'g'ri to'rtburchaklar bilan menyu va logo joyi

4. Asosiy elementlar — rasm, matn, tugmalar uchun oddiy shakllar (minimalizm!)

5. Tekislash — Align vositalari, 8pt grid, bir xil oraliqlar

6. Interaktiv linklar — Prototype → On click → Navigate to → user flow

7. Tekshirish — Present rejimida sinash, jamoa bilan bo'lishish

Figma: tezkor klavishlar

Asosiy vositalar

F — Frame yaratish
R — Rectangle (to'rtburchak)
T — Text (matn)
Ctrl+Z — Bekor qilish
Ctrl+D — Nusxa ko'chirish

Interaktiv link

Elementni tanlang
O'ng panel: Prototype yorlig'i
O'q sudrab boshqa Frame'ga
On click → Navigate to
Present (▶) bilan sinab ko'ring

Interaktiv link: On click → Navigate to

Prototype yorlig‘ida 4 qadam

1. Elementni tanlang

Masalan, «Yangiliklar» tugmasi

2. O‘qni sudrang

O‘ng panel - Prototype: elementdan kerakli Frame’ga

3. Harakatni tanlang

On click → Navigate to

4. Present

Play tugmasi: bosib, o‘tishni tekshiring

Maktab sayti wireframe sxemasi

+--------------------------------------------------+
| [LOGO]      Bosh | Qabul | Yangiliklar | Aloqa   |  <- header
+--------------------------------------------------+
| Bosh sahifa > Yangiliklar                         |  <- breadcrumbs
+--------------------------------------------------+
|  [ Katta rasm ]      Sarlavha                     |
|                      Qisqa matn   [ QABUL ]       |  <- CTA
+--------------------------------------------------+
| [Yangilik 1]   [Yangilik 2]   [Yangilik 3]        |
+--------------------------------------------------+
| Havolalar | Mualliflik huquqi                     |  <- footer
+--------------------------------------------------+

Faqat kulrang/qora-oq shakllar — rang, rasm va maxsus shrift yo'q!

Wireflow: wireframe + oqim

Mini-quiz

Wireframega qaysi element mos KELMAYDI?

Hujjat: wireframeda ranglar, shriftlar yoki rasmlar chalg'itmasligi kerak, e'tibor tuzilma va mazmunda.

Amaliyot

Maktab sayti: 2 ekran va interaktiv link

Odatiy xatolar

Erta bezash

Wireframe’da rang va rasm: e’tibor tuzilmadan chalg‘iydi

Tekislanmagan

Oraliqlar har xil: tekislash va 8pt grid’dan foydalaning

Link yo‘q

Ekranlar bog‘lanmagan: user flow ko‘rinmaydi

bosqich

afzallik

Amaliyot: Maktab sayti wireframe

qiyin

Figmada 2 ta Frame yarating: «Bosh sahifa» va «Qabul»

Frame 1: Bosh sahifa

Header: logo, menyu (4 havola)
Katta rasm joyi (kesishgan chiziq)
CTA tugma: «Qabul» (48px balandlik)
3 ta yangilik bloki (teng kenglik)
Footer

Frame 2: Qabul

Sarlavha
3 maydonli forma
«Orqaga» havolasi
Prototype: CTA → Frame 2
Present da sinab ko'ring!

⏰ 25 daqiqa

Tezkor nazorat

Wireframe nima?

Veb-sahifaning chizmasi: asosiy tuzilma va joylashuvi

Nega rang va rasm ishlatilmaydi?

Ular chalg'itadi — e'tibor mazmun va tuzilmada qolsin

Figmada birinchi 3 bosqich?

1. Yangi fayl · 2. Frame · 3. Navigatsiya va header

Interaktiv link qaysi bosqichda?

6-bosqich: Prototype → On click → Navigate to

E-commerce wireframe'ida muhim?

Mahsulot vitrinasi, sodda menyu, oson checkout

4-hafta yakuni va uyga vazifa

4-hafta natijalari

Design thinking: prototiplashtirish bosqichlari
User flow va axborot arxitekturasi
Wireframe: low-fidelity, 7 bosqich
Figma: Frame, Prototype, Present

Uyga vazifa

Portfolio sayti uchun 3 ekranli wireframe yarating
«Bosh sahifa», «Loyihalar», «Aloqa» Frame'lari
Har ekranda navigatsiya va footer
3 ekran orasida interaktiv linklar
Present screenshot yoki Figma havolasini yuboring

Keyingi hafta: Vizual ierarxiya, rang nazariyasi va tipografiya asoslari