Dars xulosasi

• Wireframe — sahifa yoki ekranning vizual skeleti; u elementlarning joylashuvini va axborot tuzilishini ko'rsatadi.
• Wireframe ikki darajaga bo'linadi: Low-fidelity (past aniqlikdagi, oq-qora, tezkor) va High-fidelity (yuqori aniqlikdagi, rangli va pikselli).
• Boshlang'ich bosqichda ranglar va bezaklardan qochish kerak — aks holda e'tibor qulaylik va mantiqdan chalg'iydi.
• Wireframe'da rasmlar o'rniga ichiga diagonal xoch ("X") chizilgan to'rtburchaklar (Image placeholder) qo'yiladi.
• Balsamiq — daftarga qalam bilan chizilgan (hand-drawn/sketch) uslubdagi tezkor wireframe vositasi.
• Balsamiq'ning kuchi — piksel ketidan quvmasdan, 10 daqiqada butun boshli ilova tuzilmasini jamoaga ko'rsatib bera olishidadir.
• Quick Add funksiyasi orqali klaviaturadan nomini yozib istalgan elementni (Button, Input, Image) bir soniyada ekranga joylash mumkin.

Qo'shimcha ma'lumot

Nega eskiz (sketch) va wireframe dan boshlash vaqtni tejaydi?

Ko'pchilik buyurtmachilar yoki boshlovchilar: "Nega birdaniga chiroyli dizayn chizmaysiz?" deb so'rashadi. Tasavvur qiling, siz Figmada 3 kun o'tirib chiroyli ranglar, soyalar va rasmlar bilan murakkab sahifa chizdingiz. Buyurtmachi kelib: "Yo'q, bu tugma bu yerda emas, pastda bo'lishi kerak edi, bu bo'lim esa umuman ortiqcha" desa, 3 kunlik mehnatingiz havoga uchadi. Agar qog'ozda yoki Balsamiqda 15 daqiqada wireframe chizib ko'rsatganingizda edi, xatoni o'sha zahoti sezib, 1 daqiqada o'zgartirgan bo'lardingiz!

Wireframe'da matnlar bilan qanday ishlanadi?

Wireframe chizayotganda real matn o'rniga ko'pincha Lorem Ipsum (lotincha to'ldiruvchi matn) yoki qalin gorizontal chiziqlar qo'yiladi. Ammo muhim sarlavhalar, tugma yozuvlari (masalan: "Sotib olish", "Ro'yxatdan o'tish") aniq o'zbek tilida yozilishi shart, chunki foydalanuvchi qaysi tugma nima qilishini tushunishi kerak.

Balsamiq ishchi muhiti qismlari

1. Canvas (Ish maydoni): Markazda joylashgan, elementlar teriladigan oq doska.
2. UI Library (Elementlar paneli): Yuqorida toifalarga bo'lingan tayyor bloklar (Containers, Forms, Text, Media, iOS...).
3. Quick Add: Shunchaki Enter yoki qidiruv qatoriga so'z yozib, kerakli elementni topish.
4. Property Inspector: O'ng tomondagi panel bo'lib, tanlangan elementning o'lchami, shrifti va holatini sozlaydi.

Atamalar lug'ati

Atama	Ma'nosi
Wireframe	Ekran strukturasi va elementlar joylashuvining vizual skeleti
Low-fidelity (Low-fi)	Ranglarsiz, sodda chiziqlar bilan chizilgan past aniqlikdagi maket
High-fidelity (High-fi)	Haqiqiy ranglar va detallarga boy yuqori aniqlikdagi maket
Placeholder	Rasm yoki matn o'rniga vaqtincha qo'yilgan ramziy belgi
Balsamiq	Tezkor, qalam uslubidagi wireframe yaratish dasturi
Quick Add	Element nomini yozib, uni darhol ish maydoniga qo'yish vositasi
Canvas	Dizayn yaratiladigan asosiy ishchi maydon
Information Architecture	Sahifadagi ma'lumotlarning mantiqiy ierarxiyasi va tuzilishi

Bilasizmi?

• Balsamiq dasturini 2008-yilda Peldi Guilizzoni ismli Adobe muhandisi yaratgan bo'lib, uning maqsadi odamlarni kompyuterda "qog'oz va qalam" tezligida loyihalashga o'rgatish edi.
• Katta IT-kompaniyalarda (Google, Apple, Meta) har qanday yangi funksiya dasturchilarga berilishidan oldin kamida 10 xil qog'oz eskiz va wireframe bosqichidan o'tadi.
• Wireframe so'zi aslida kino va 3D grafika sohasidan kirib kelgan: u yerdagi qahramonlar terisi va kiyimi chizilishidan oldin simli karkas bilan harakatlantiriladi.

Topshiriqlar

1. Qog'ozda eskiz (Sketching) oson

Daftaringizga oddiy qalam bilan mobil telefon ramkasini chizing va uning ichiga o'zingiz yoqtirgan kalkulyator ilovasi tugmalarining joylashuv eskizini tushiring.

Kutiladigan natija: daftarga chizilgan toza qalamaki eskiz fotosurati.

2. Image Placeholder chizish oson

To'rtburchak chizib, uning ichiga burchakdan burchakka diagonal ikkita chiziq torting ("X" belgisi). Bu simvol dizaynda nimani anglatishini yoniga yozib qo'ying.

Kutiladigan natija: to'g'ri chizilgan rasm o'rni belgisi.

3. Balsamiq bilan ilk tanishuv oson

Balsamiq (balsamiq.cloud yoki desktop) dasturini oching. Ish maydoniga bitta Browser yoki Smartphone ramkasi va uning ichiga bitta Button joylang.

Kutiladigan natija: dastur ekranidan olingan birinchi skrinshot.

4. Low-fi vs High-fi taqqoslash oson

Low-fidelity va High-fidelity wireframe farqini 3 ta asosiy mezon (vaqt, rang, maqsad) bo'yicha kichik jadval qilib yozing.

Kutiladigan natija: 3 bandli taqqoslash jadvali.

5. Login ekrani wireframe'i o'rta

Balsamiqda mobil ilova uchun "Tizimga kirish" (Login) oynasini chizing. Unda: Logo o'rni (Placeholder), Login va Parol inputlari, "Kirish" tugmasi hamda "Parolni unutdingizmi?" havolasi bo'lsin.

Kutiladigan natija: Balsamiqdan eksport qilingan PNG tasvir yoki loyiha skrinshoti.

6. Do'kon mahsulot kartasi (Product Card) o'rta

Veb-sayt uchun bitta tovar kartasi (masalan, krossovka) wireframe'ini tuzing: tovar rasmi, brend nomi, narxi, chegirma belgisi va "Savatga qo'shish" tugmasi.

Kutiladigan natija: tovar kartasining mantiqiy va proporsional wireframe ko'rinishi.

7. "Mobile_Book" bosh sahifasi eskizi o'rta

Mobil kitob kutubxonasi bosh sahifasining wireframe'ini chizing: qidiruv paneli, "Ommabop kitoblar" gorizontal karuseli va pastki navigatsiya paneli (Bottom Navigation Bar) joylashsin.

Kutiladigan natija: barcha qismlar joylashtirilgan mobil ekran wireframe'i.

8. Quick Add tezlik mashqi o'rta

Balsamiq dasturida Quick Add yordamida sichqonchani ishlatmasdan faqat klaviatura orqali 5 ta elementni (Heading, Paragraph, Button, Checkbox, Icon) ketma-ket ekranga tushiring.

Kutiladigan natija: elementlar joylashgan ishchi ekran skrinshoti.

9. Xabarlar (Chat) ro'yxati wireframe'i qiyin

Telegram yoki WhatsApp ilovasiga o'xshash chatlar ro'yxati ekrani wireframe'ini tuzing. Unda: qidiruv, do'stlarning dumaloq avatarlari, oxirgi xabar matni, xabar kelgan vaqt va o'qilmagan xabarlar soni (badge) bo'lsin. Kamida 4 ta chat qatori ko'rinsin.

Kutiladigan natija: to'liq va professional darajada chizilgan mobil chat wireframe'i.

10. Qog'ozdagi eskizdan raqamli Balsamiqqa o'tish qiyin

Avval daftarga yangiliklar saytining bosh sahifasi eskizini chizing. So'ngra aynan shu eskizni Balsamiq dasturida raqamli wireframe ko'rinishiga o'tkazing. Ikkala natijani yonma-yon solishtiring.

Kutiladigan natija: daftardagi rasm va Balsamiq PNG faylining taqqoslash kollaji.

11. 3 ekranli to'liq mini-loyiha bonus

Sevimli mavzuingizda (masalan: pitssaxona ilovasi) 3 ta ketma-ket ekranning Low-fi wireframe'ini chizing: 1-ekran (Menyu), 2-ekran (Tanlangan taom), 3-ekran (Savat va buyurtma).

Kutiladigan natija: 3 ta ekranning tartibli va o'zaro bog'liq wireframe to'plami (PNG/PDF).

O'zingizni tekshiring

1. Wireframe tushunchasini o'z so'zingiz bilan ta'riflab bering.
2. Low-fidelity wireframe qanday afzalliklarga ega?
3. Nega loyihalashning ilk bosqichida ranglar va haqiqiy fotolardan foydalanilmaydi?
4. Balsamiq dasturining qo'lda chizilgan (sketch) uslubi dizaynerga qanday psixologik erkinlik beradi?
5. Wireframe'da "X" chizilgan to'rtburchak nimani bildiradi?
6. Quick Add funksiyasi dizayner ishini qanday tezlashtiradi?

Uyga vazifa

Maktabingiz yoki shaxsiy blogingiz uchun veb-sayt bosh sahifasining Low-fi wireframe'ini tayyorlang (Balsamiq dasturida yoki oq qog'ozda). Sahifada Header (logo va menyu), Katta banner (rasm va sarlavha), 3 ta yangiliklar bloki va Footer bo'lsin.