Dub
Linkning mat guruch qog'ozi boshqaruv paneli
Dubning vizual tizimi cheklangan, deyarli tahririy SaaS estetikasiga ega: chiqib turgan elementlar o'rniga yupqa chegaralar bilan birlashtirilgan deyarli oq rangli kanvas, zich monoxrom tipografiya strukturaviy qo'llab-quvvatlashni ta'minlaydi va bitta yorqin ko'k rang (#2563eb) o'zgacha ifodani beradi. Sirtlar bir qarashda tekis va ramkasiz bo'lib qoladi, lekin har bir konteynerda bosilgan hujjat hissiyotini uyg'otadigan 1px #e5e5e5 chegarasi mavjud. Shaxsiyat neytral palitra ustida suzib yuradigan kichik rangli "tabletka" aksentlari (to'q sariq, yashil, binafsha) va yorqin bo'lmasdan o'ziga ishongan va zamonaviy his qiladigan sarlavhalar orqali erishiladi. Komponentlar ixcham va zich: 8px oluklar, 12px karta radiusi, 9999px o'lchamdagi tabletka shaklidagi yorliqlar va og'ir, to'ldirilgan tugmalar o'rniga ko'rinmas boshqaruv elementlari.
Sahifa maksimal kengligi taxminan 1200 piksel bo'lgan markazlashtirilgan maket asosida qurilgan. Asosiy element - bu katta mahsulot maketining ustida gorizontal ravishda joylashtirilgan uchta suzuvchi element (Affiliate Programs, Conversion Analytics, Short Links) bo'lgan markazlashtirilgan matn bloki. Bo'limlar vertikal ravishda oq tuval va ohang ajratish uchun #f5f5f5 qog'oz tumanlari o'rtasida navbatma-navbat joylashgan 64 pikselli oluklar bilan joylashtirilgan. Pastki qism Z shaklidagi maketdan foydalanadi: tahririyat matni o'rta uchdan bir qismida markazlashtirilgan va suzuvchi UI kartalari chap va o'ng chekkalarga mahkamlangan bo'lib, assimetrik, jurnalga o'xshash ritm yaratadi. Logotip buluti sahifaning markazida joylashgan oddiy 5x2 panjara. Navigatsiya minimalist yuqori satr - chapda logotip, o'rtada navigatsiya, o'ngda ikkita tugma guruhi ("Kirish" tugmasi + to'ldirilgan "Ro'yxatdan o'tish" tugmasi) - qat'iy yoki mega-menyusiz. Asosiy oynaning boshqaruv paneli joylashuvi klassik ikki ustunli ilova joylashuvini namoyish etadi: o'rnatilgan yon panel (240 pikselga o'xshash) + tashrif buyuruvchilar aylantirishni boshlashdan oldin mahsulot haqidagi ma'lumotlarning zichligini belgilaydigan kontent maydoni.
Vizual tasvirlar turmush tarziga emas, balki mahsulotga qaratilgan. Asosiy ekran katta boshqaruv paneli skrinshotida joylashgan bo'lib, yon panel navigatsiyasi, ma'lumotlar jadvali va suzuvchi UI elementlari bilan oq kanvasda tekis panel sifatida joylashtirilgan real dunyo mahsulotining maketini ifodalaydi. Mijoz logotiplari ijtimoiy media samaradorligini e'tirof etish uchun to'yinmagan kulrang panjara (beehiv, superpower, Chatbase va boshqalar) da ko'rsatiladi, sahifaning bitta ko'k aksenti dominant bo'lib qolishi uchun rangsizlantiriladi. Suzuvchi hamkor kartalari (kichik profillar va daromad/to'lov ma'lumotlari bo'lgan plitkalar) pastki qismdagi tahririyat matni bloklari bo'ylab harakatlanadi, bu matnning o'zida soyalardan foydalanmasdan chuqurlik hissi yaratadi. Nuqtali panjara fon naqshlari o'ziga xos xususiyatdir: juda past shaffoflikka ega kichik nuqtalarning ingichka qatori tekstura va dizayn tizimi/chizma yuzasi hissiyotini yaratadi, saytning "zamonaviy havola atributi platformasi" sifatidagi mavqeini ta'kidlaydi. Ikonografiya minimal, konturlar va to'ldirishlar bilan va xususiyat teglari uchun aksent palitrasidan (mandarin to'q sariq, lavanta binafsha, yalpiz yashil) foydalanadi. Hech qanday fotosuratlar, illyustratsiyalar yoki 3D modellardan foydalanilmaydi — mahsulotning foydalanuvchi interfeysi o'zi vizual tildir.
Palitra
Brend
- Electric Blue
#2563eb— Asosiy brend rangi — logotip, havolalar, asosiy ishlash ko'rsatkichlari, faol holatlar va ikonka urg'ulari — ishlatiladi. Oq fonda to'q ko'k rang tizimning yagona vizual jozibasini yaratadi. - Deep Sapphire
#1e40af— Harakat tugmasining asosiy foni, harakatga chaqiruvning qalin shrifti — harakatni bildiruvchi yagona rang — diqqatni jalb qilish uchun kamdan-kam ishlatiladi.
Neytral
- Canvas White
#ffffff— Sahifa foni, karta yuzasi, qalqib chiquvchi panellar har bir ekranning mutlaq asosidir. - Paper Mist
#f5f5f5— Ichki kartalar, qo'shimcha panellar va plombalar uchun hover sichqonchasi rangidagi nozik o'zgarishlar. - Ash
#e5e5e5— Kartalardagi yupqa chegaralar, kirish ulagichlari va bo'lgichlar tizimni birlashtirib turadigan strukturaviy chiziqdir. - Smoke
#d4d4d4— Tanlangan konteynerlar va qo'shimcha tugma konturlari uchun aniqroq chegaralar. - Pebble
#c8c8c8— O'rtacha kontrastli chegaralar, boshqaruv konturlari va strukturaviy ajratgichlar. Bu rang harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Midnight Ink
#0a0a0a— Maksimal kontrast uchun tugmalarning asosiy matni, belgilangan tugmalar va navigatsiya matni deyarli qora rangda.
Tipografiya
11 dan 48 pikselgacha · 9 qadam
- Satoshi — almashtirish: Inter (weight 500 · konturlar 500 · Sarlavhalarni ko'rsatish – faqat sarlavha va bo'lim sarlavhalari uchun 36–48 pikselli qatorlarda ishlatiladi. Shrift qalinligi – 500 (o'rtacha, qalin emas): Sarlavhalar ishonchli va zamonaviy ko'rinadi, lekin hech qachon haddan tashqari kuchli emas. Satoshining geometrik nisbatlari shriftga Interning asosiy nusxasi takrorlay olmaydigan biroz tahririy, zamonaviy tuyg'u beradi.
- Inter — almashtirish: Inter (native) · konturlar 400, 500, 600 · Asosiy nusxa, foydalanuvchi interfeysi yorliqlari, navigatsiya, kichik sarlavhalar va ikkinchi darajali sarlavhalar. Inter asosiy ishchi kuchi bo'lib, 11 pikselli mikro-yorliqlardan tortib 30 pikselli ikkinchi darajali sarlavhalargacha bo'lgan hamma narsani boshqaradi. Asosiy nusxa uchun standart og'irlik 400, belgilangan elementlar va tugma yorliqlari uchun 500 va muhim foydalanuvchi interfeysi yorliqlari uchun 600 ajratilgan. 1,5 chiziq balandligidagi 16 piksel eng ko'p uchraydigan bir bosqichli o'lchamdir (1220 marta takrorlanib), bu 16 piksel kanonik asosiy nusxa o'lchami ekanligini tasdiqlaydi.
- Geist Mono — almashtirish: JetBrains Mono or IBM Plex Mono · konturlar 400, 500 · Kod parchalari, texnik metamaʼlumotlar va oʻrnatilgan monospace tokenlari 12–14 pikselli kod bloklarida va 24 pikselli katta kod displey elementlarida qoʻllaniladi. Bu Dub mahsulot pozitsiyasiga mos ravishda ishlab chiquvchi vositasining ishonchliligini taʼminlaydi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | o'rtacha |
| Asosiy qadam | 8px |
| Tugma radiusi | 8px |
| Karta radiusi | 12px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 64px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Dub uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- ElevenLabs — Iliq krem tusli, nozik sarlavhali fotoinsho. Bauhaus uslubidagi daftar — tuxum qobig'i rangli qog'oz, qora siyoh va mahsulotni namoyish qilish uchun bitta binafsha va to'q sariq rangli aksent.
- Awesomic — Konfetini eslatuvchi to'q sariq tinish belgilari bilan bezatilgan rux to'ri
- Monad — Issiq pergamentdagi tahririyat texnik jurnali
- Seline Analytics — Issiq qog'ozda jimgina analitik stol
- Notion — Peshin quyoshida iliq qog'oz daftar
- Anthropic — Issiq pergamentga oid ilmiy jurnal - tinch fil suyagi yuzalar, serifli tahririyat sarlavhalari va faqat harakat zarur bo'lganda paydo bo'ladigan bitta loy aksenti.
- Calendly — Sovuq marmar ustiga to'q ko'k siyoh
- Augen Pro — Apple’ning oq rangli taqdimoti monoxrom makonda yagona aksent sifatida klinik, vaznsiz, elektr ko‘k rangga ega.
- Antimetal — Qaymoq qog'ozga yozilgan tahririyat xronikasi — ilmiy jurnalda sokin tong, bu yerda o'zini tuta bilish ishonchni ifodalaydi va seriflar og'ir ishlarni bajaradi
- Perk — Issiq pergament qog'ozidagi elektr ohak
- Ditto — Quyosh nuri tushgan holda yovvoyi gullar namunalarini yaratish ustaxonasi. Issiq krem rangli yuzalar, yorqin sariq asosiy rang, to'q ko'k siyohlar, asar orqasida gullab-yashnayotgan organik rang shakllari.
- Officevibe — Issiq krem rangli qog'ozda tahririyat jurnali. Zamonaviy ko'k interfeys orqali pichirlab yozilgan kursiv serif shrift - mahsulot sifatida taqdim etilgan HR menejmenti haqidagi puxta o'ylangan inshoni tasavvur qiling.