# Texnologiya va SaaS: mahsulot, sayt va blog uchun illyustratsiyalar

Источник / Source: https://picwin.co/uz/blog/saas-mahsuloti-uchun-illyustratsiyalar
Язык / Language: uz
Рубрика / Topic: Texnologiyalar
Автор / Author: Picwin tahririyati
Опубликовано / Published: 2026-08-11T00:00:00.000Z
Обновлено / Updated: 2026-09-03T11:17:26.468Z
Слов / Words: 1366 · Чтение / Reading: 7 min
Обложка / Cover: https://picwin.co/api/picwin/blog-images/6e96ed896b8cf0475449a43fabd1928b11674da02f400f5fece9ebf984d8c150.webp
Переводы / Translations: en: https://picwin.co/en/blog/visuals-for-a-saas-product, kk: https://picwin.co/kk/blog/saas-onimine-arnalgan-illyustraciyalar, pt: https://picwin.co/pt/blog/ilustracoes-para-produto-saas, ru: https://picwin.co/blog/illyustracii-dlya-saas-produkta

Texnologik mahsulotni suratga olib bo‘lmaydi: dasturiy ta’minotning jismi yo‘q. SaaS vizual to‘plami — bosh ekran, funksiya bloklari, blog muqovalari va bo‘sh holatlar — nimalardan tuzilishi va uni bir uslubda yig‘ishni tushuntiramiz.

---

**Qisqacha**

Dasturiy mahsulotning suratga tushadigan jismi yo‘q, ammo har bir ekranga rasm kerak. Texnologik mahsulot uchun ishlaydigan to‘plam «bitta chiroyli illyustratsiya» emas, balki yagona uslubdagi seriyadir: bosh sahifa kadri, funksiya bloklari, blog muqovalari, bo‘sh holatlar va xatlar. U bir mavzuda yaratilgan kadrlardan yig‘iladi.

SaaS mahsuloti sayti oldida murakkab vazifa turadi: ko‘rinmas narsani tushuntirish
kerak, hikoya uchun joy esa poyabzal do‘koninikidek. Natijada ikki chekka holat
paydo bo‘ladi: butun enni egallagan jonsiz interfeys skrinshotlari yoki shoshilib
tayyorlangan mahsulot taassurotini beradigan stokdagi «noutbuk ustidagi qo‘llar».
Quyida mahsulotni tushuntirib, bosh sahifadan xatning oxirigacha bir uslubni
saqlaydigan o‘rta yo‘lni ko‘rib chiqamiz.

## Mahsulot dastur bo‘lsa, nimani illyustratsiya qilish kerak?

Mahsulotning o‘zini emas, u bajaradigan ish va bu ish kechadigan muhitni.
Foydalanuvchi interfeysni emas, natijani sotib oladi: vaqtida tayyor hisobot,
adashtirilmagan ombor, xotirjam reliz. Rasm natija va muhitni, skrinshot esa
mexanikani ko‘rsatadi. Ular birga ishlaydi, alohida esa yetarli emas.

Texnologik mahsulot rasmi uchun uchta haqqoniy manba bor:

- **abstraksiya** — tugunlar, oqimlar, qatlamlar, to‘rlar: tizim qanday tuzilganini ko‘rsatadi;

- **muhit** — ish joylari, server xonalari, omborlar, sexlar: mahsulot ishlatiladigan joy;

- **predmetli sahna** — interfeyssiz qurilma, ekran va texnika.

Skrinshot o‘z vazifasida qoladi: funksiya tavsifi yonida, bezak o‘rnida emas.

## Mahsulotning vizual to‘plami nimalardan tuziladi?

U oltita takrorlanadigan joydan iborat va har birida rasmning alohida vazifasi bor.

![Mahsulot vizual to‘plamining olti qismidan iborat chiziq va har biriga izoh](/api/picwin/blog-images/b0f492918a14c9826b79aa9f930cdcdb7de7991df5a125aa18c9e1267b6f076f.webp)

To‘plam bir marta yig‘iladi, keyin har yangi blok uchun bittadan to‘ldiriladi.

**Bosh sahifadagi bosh kadr.** Mahsulot mazmunini ushlab turadigan bitta kadr.
Uni eng ko‘p va uzoq ko‘rishadi, qolgan hamma rasmning uslubini ham u belgilaydi.

**Funksiya bloklari.** Bir-biriga o‘xshash uch-oltita kichik kadr. Bu yerda
seriyalilik muhim: tarqoqlik «internetdan yig‘ilgan» degan taassurot beradi.

**Blog va hujjatlar muqovasi.** Ular doim o‘ylagandan ko‘proq kerak bo‘ladi:
har bir material o‘z muqovasini so‘raydi.

**Bo‘sh holatlar va xatolar.** Ma’lumotsiz ekran — foydalanuvchi chiqib ketishga
eng yaqin payt. Xotirjam illyustratsiya g‘amgin smaylikdan yaxshiroq ishlaydi.

**Xatlar va bildirishnomalar.** Xat sarlavhasi, dayjest rasmi, reliz muqovasi.

**Ijtimoiy tarmoqlar va konferensiyalar.** Anons, vebinar muqovasi, slayd va stend.

Nega seriyalilik chiroydan muhim?

Beshta tasodifiy rasm yonidagi bitta ajoyib tasvir oltita bir maromdagi kadrdan
yomonroq ko‘rinadi. Sayt yaxlit o‘qiladi, ko‘z esa yorug‘lik, rang to‘yinganligi
va uslub «yoshi»dagi farqni darhol ilg‘aydi.

## Ko‘rinmas narsani sxemaga aylantirmay qanday ko‘rsatish mumkin?

Har qanday texnologik mahsulotga mos uchta usul bor.

**Kirish va chiqishni ko‘rsatish.** Har bir tizimga nimadir kiradi va undan
nimadir chiqadi: ombordagi qutilar va yukxat, qo‘ng‘iroq va suhbat yozuvi,
qoralama va imzolangan hujjat. «Oldin va keyin» kadri mahsulotni abstraksiyadan
tezroq tushuntiradi, suratga esa dastur emas, buyumlar olinadi.

**Ish joyini ko‘rsatish.** Logistika uchun ombor va yuklash, fintex uchun kassa
va filial, sanoat dasturi uchun sex va boshqaruv xonasi mos. Sohaga xos muhit
darhol «bu biz haqimizda» deydi va begona auditoriyani ham ajratadi.

**Ko‘lamni ko‘rsatish.** Bitta qurilma bilan qurilmalar tokchasi turli xabar
beradi. Mahsulot hajm haqida bo‘lsa, kadr ham ko‘plikni qator, to‘r va takror
orqali ko‘rsatishi kerak.

Abstraksiya to‘rtinchi usul bo‘lib qoladi, lekin u interfeys shakllaridan:
o‘sha yumaloqlik, palitra va chiziq qalinligidan tuzilishi kerak. Umumiy
abstraksiya ekran mavzusi zastavkasidan farq qilmaydi.

## Klishe qanday ko‘rinadi va uni nima bilan almashtirish kerak?

Klishe — istalgan mahsulot saytiga biror so‘zni o‘zgartirmay qo‘yish mumkin
bo‘lgan kadr. O‘rinbosar esa har doim aniqroq.

### Eskirgan

- Muzokara xonasida noutbuk ustidagi qo‘llar

- Ko‘k «raqamli miya» va nuqtalardan neyrotarmoq

- Ikkilik kod fonidagi qulf

- O‘suvchi grafik fonida qo‘l siqish

- Inson yuzli robot

### Ishlaydigan

- Mahsulotdan haqiqatan foydalanadigan odamning ish joyi

- Buyum shaklida chizilgan ma’lumot oqimi

- Server xonasi, ombor, sex yoki kabina — vazifa muhiti

- Odam ishlatayotgan qurilmaning yirik plani

- Mahsulotning firma shakllaridan abstraksiya

Tekshiruv oson: kadr tagiga raqib nomini yozing. Hech narsa o‘zgarmasa, bu klishe.

## Bunday rasmlarga veb qanday talab qo‘yadi?

Talabni did emas, sahifa tuzilishi belgilaydi: kadr kesilish, qorong‘i mavzu va
mobil ekranga bardosh berishi kerak.

**Saytga rasm qo‘yishdan oldingi chek-list**

- Bosh kadr va muqova uchun 16 : 9 gorizontal format, funksiya kartochkalari uchun kvadrat.

- Uzun tomon kamida 1600 piksel: kichik rasm retina-ekranda xira ko‘rinadi.

- Kompozitsiya chetdan kesilishga chidamli: mazmun kadr chegarasiga 8%dan yaqin emas.

- Sarlavha va tugma uchun yuz yoki naqsh ustida bo‘lmagan sokin joy bor.

- Kadr qorong‘i mavzuda ham o‘qiladi, butun maydonni oq fon egallamagan.

- Siqilgandan keyingi hajm megabayt emas, yuzlab kilobayt; format WebP yoki AVIF.

- Begona logotip, taniqli interfeys va mashhur brendga taqlid yo‘q.

- Rasm ichida yozuv yo‘q: aks holda uni har bir tilga tarjima qilishga to‘g‘ri keladi.

Rasm ichidagi matn

Kadrdagi har qanday yozuv — besh tilda kelajakdagi tahrir va mobil ekrandagi
xira matn. Yozuv tasvir ichiga emas, sahifa vositalari bilan uning ustiga qo‘yiladi.

## Tayyor kadr qaysi ssenariylarni yopadi?

Mahsulot jamoalari katalogga murojaat qiladigan besh vazifa:

-

### Yangi funksiya lendigi

Bitta bosh kadr va bloklar uchun uch-to‘rtta tasvir. Sahifa yaxlit ko‘rinishi
uchun ular bitta topshiriq ishlaridan yig‘iladi.

-

### Blog va xatlar

Har bir maqolaga muqova. Seriya tufayli sonlar umumiy ko‘rinishga ega bo‘ladi,
obunachi mavzuni o‘qimasdan ham xatni taniydi.

-

### Hujjatlar va ta’lim

Matn joylanadigan sokin abstraksiyalar va sxema tagliklari.

-

### Interfeysdagi bo‘sh holatlar

Kichik, yorug‘ va dramasiz. Bu yerda kadr keyin nima qilishni tushuntiradi.

-

### Investorlar taqdimoti va konferensiya

Muhit va texnikaning yirik kadrlari, bir uslubdagi slaydlar va stend muqovasi.

[TexnikaTexnika: qurilma, ekran, uskuna va ish joylari — texnologik mahsulotning predmetli bazasi.
Ishlarni ko‘rish](/uz/category/technology)[AbstraksiyaAbstraksiya: oqim, to‘r, qatlam va gradiyentlar — sxema, taglik va bo‘sh holatlar uchun.
Ishlarni ko‘rish](/uz/category/abstract)[IkonkalarIkonkalar: funksiya bloklari va imkoniyatlar ro‘yxati uchun kichik belgilar.
Ishlarni ko‘rish](/uz/category/icons)[MaketlarMokap va shablonlar: mahsulot skrinshoti joylanadigan qurilma va ekranlar.
Ishlarni ko‘rish](/uz/category/mockups)

Kerakli syujet topilmadimi — [katalogni](/uz/catalog) to‘liq oching: qidiruv ish
nomi va tavsifi bo‘yicha ishlaydi.

## Rasmlar ko‘p bo‘lsa, yagona uslubni qanday saqlash kerak?

Uch parametrni kelishib oling va ulardan chekinmang: yorug‘lik, palitra, plan.

**Yorug‘lik.** Bitta yo‘nalish va harorat tanlang: iliq yon yorug‘lik yoki sovuq
tarqoq nur. Ularni aralashtirish turli syujetlardan ham kuchliroq tarqoqlik yaratadi.

**Palitra.** Mahsulotning ikki-uch rangi va bitta aksentini saqlang. Aksent
saytdagi tugma bilan tortishgan kadrni qayta ishlashga to‘g‘ri keladi.

**Plan.** Bosh kadr — umumiy, funksiya bloklari — o‘rta, ikonka-illyustratsiyalar
— yirik. Hammasi bir xil planda bo‘lsa, sahifa yassi ko‘rinadi.

Oldindan kelishiladigan to‘rtinchi masala — saqlash. To‘plam yillar yashaydi va
bir necha jamoani ko‘radi: asl fayllarni bir joyda saqlang, ularni syujet emas,
saytdagi o‘rni bo‘yicha («hero-main», «feature-sync») nomlang va har kadr qaysi
topshiriq yoki sahnadan olinganini yozib boring. Yarim yildan keyin dastlabki
oltitasiga mos yettinchi rasmni topishning yagona yo‘li shu.

Galereyada emas, sahifada tekshiring

Rasmlarni papkada ketma-ket emas, maket ichida ko‘ring: yonida sarlavha va tugma
paydo bo‘lganda qarorlarning yarmi o‘zgaradi.

## Kerakli kadr bo‘lmasa nima qilish kerak?

O‘zingiz yarating. Aniq sxemaga abstraksiya yoki muayyan sohaga muhit ko‘p
uchraydigan ehtiyoj: mahsulot qanchalik maxsus bo‘lsa, tayyorini topish shunchalik
qiyin. Sovuq ombor logistikasi, metall qabul qilish, elektr tarmog‘i dispetcherligi
kabi sahnalar stokda tayyor turmaydi: ularni suratga olish qimmat, talab esa tor.

Ikkinchi holat — to‘plam tayyor bo‘lib, yarim yildan so‘ng shu uslubda yettinchi
kadr kerak bo‘lishi. Begona stokdan «xuddi shunday, ammo boshqa» rasmni topish
deyarli imkonsiz; qabul qilingan uslubni so‘z bilan tasvirlab, seriyani davom
ettirish esa bir necha daqiqalik ish.

Mahsulotingiz uchun kadr yarating

Sahnani so‘z bilan tasvirlang — butun to‘plam yig‘iladigan bir uslubdagi kadrlar seriyasini oling.

[Mini-ilovani ochish](/uz/partners)

Yondosh mavzular: [marketpleys rasmlariga](/uz/blog/marketpleyslar-uchun-rasmlar)
qo‘yiladigan talablar, [pul va ishni klishesiz](/uz/blog/biznes-va-moliya-klishesiz)
ko‘rsatish va [safarsiz trevel-kadrlar](/uz/blog/trevel-kadrlar-safarsiz) yig‘ish.

### Bosh sahifaga skrinshotmi yoki illyustratsiyami?

Ikkalasi ham, ammo turli joyda. Illyustratsiya «nima uchun», skrinshot esa
«qanday ko‘rinadi» savoliga javob beradi. Bosh kadrda illyustratsiya, funksiya
blokida izohli skrinshot odatda yaxshiroq ishlaydi.

### Qorong‘i mavzuni nima qilish kerak?

Sotib olishdan oldin kadrni ikkala mavzuda tekshiring. Yaxlit oq fonsiz tasvirlar
eng universal: ular yorug‘ va qorong‘i sahifada birdek yashaydi.

### Mahsulotga boshlanishida nechta rasm kerak?

Odatda olti-sakkizta yetadi: bosh kadr, uch-to‘rtta funksiya bloki, blog muqovasi
va bo‘sh holat. Keyin har yangi material uchun bittadan qo‘shiladi.

### 3D, fotografiya va yassi grafikani aralashtirish mumkinmi?

Har bir tur roli o‘zgarmasa, mumkin: masalan, 3D faqat bosh kadrlar, fotografiya
faqat muhit, yassi grafika faqat sxemalar uchun. Tartibsiz aralashma dizayn yo‘qdek ko‘rinadi.

### Kadrdagi mashhur servislar logotipini nima qilish kerak?

Ishlatmang. Begona tovar belgisi huquqiy xavf tug‘diradi va mavjud bo‘lmagan
hamkorlikka ishora qiladi.

### Dastlabki bosqichda vizual uchun ortiqcha to‘lamaslik yo‘li qanday?

Bitta bosh kadr va bir uslubdagi uch blokdan boshlang, qolganini sahifalar paydo
bo‘lishi bilan qo‘shing. Qimmat xato — sayt nima haqida ekani aniq bo‘lmasidan
oldin yigirmata rasm buyurtma qilish.