Substack
tahririyatdagi stol ustidagi to'q sariq siyoh
Substack eskirgan yangiliklar xonasi boshqaruv paneliga o'xshaydi - oq kanvas, iliq, deyarli qora matn va kontent yaratishning har bir bosqichini belgilaydigan bitta yorqin to'q sariq rangli aksent. Vizual ierarxiya bezak emas, balki zichlikka asoslangan: ingichka kulrang chiziqlar lenta elementlarini ajratib turadi, avatarlar kichik, metama'lumotlar o'chirilgan va o'quvchining ko'zi to'q sariq chaqiruv, to'q sariq logotip, to'q sariq "Obuna bo'lish" havolasi va to'q sariq "Yaratish" tugmasiga e'tibor qaratishga o'rgatilgan. Sirtlar tekis va cheklanmagan holda saqlanadi - karta soyalari yo'q, xrom panel elementlari yo'q - bu tipografiyaga (maxsus serif sarlavha shrifti bilan birlashtirilgan ixcham xrom tizim interfeysi elementi) tahririyat og'irligining asosiy qismini ko'tarishga imkon beradi. Imzo uslubi cheklangan xrom elementlari va jonli, bir rangli poplardir: nashriyot vositasi kabi his qiladigan o'qish ilovasi.
Uch ustunli ish stoli tartibi: chap yon panel o'rnatilgan (~200px, piktogramma va yorliqlar bilan navigatsiya, yopishqoq), markaziy tasmasi (maksimal kengligi ~600px, vertikal ravishda aylantiriladigan postlar ro'yxati) va o'ng yon panel o'rnatilgan (~300px, qidiruv + tavsiyalar + ro'yxatdan o'tish). Markaziy tasmasi tahririyat yadrosi hisoblanadi — kartalar yo'q, shunchaki bir-birining ustiga yupqa bo'linuvchilar va bo'limlar orasidagi 32px bo'shliqlar bilan joylashtirilgan postlar. Asosiy banner tasmasi yuqori qismida bitta to'liq kenglikdagi karta sifatida joylashgan. Chap yon panelda brend logotipi (qoplama chiziqlari bo'lgan to'q sariq belgi), oltita navigatsiya elementi va pastki qismida to'liq kenglikdagi to'q sariq "Yaratish" tugmasi mavjud. O'ng yon panelda qidiruv maydoni, ro'yxatdan o'tish kartasi va o'qish uchun "Keyingisi" ro'yxati mavjud. Navigatsiya minimal — yuqori panel yo'q, non ushoqlari yo'q; yon panel navigatsiya hisoblanadi. Kontent zichligi yuqori: postlar 12-13px metama'lumotlar va 15-19px asosiy matndan foydalanadi, bu bozor kartalari panjarasi hissiyotini emas, balki gazetaga o'xshash ritmni yaratadi.
Rasmlar foydalanuvchi tomonidan yaratilgan kontent (muallif avatarlari, post eskizlari, post rasmlari) — Substack oʻzining dekorativ fotosuratlarini taqdim etmaydi. Asosiy kartada fon sifatida mavhum illyustratsion elementlar (geometrik shakllar, ruchkalar va eslatmalar kabi stilize qilingan obyektlar) bilan firuza-yashil gradient ishlatiladi. Oʻng yon paneldagi post eskizlari kichik (64 piksel), 8 piksel radiusda joylashgan va oʻqish roʻyxatining oldindan koʻrish vazifasini bajaradi. Umumiy vizual til matnga asoslangan: interfeys oʻqish kanvasidir va tasvirlar atmosfera yaratish oʻrniga kichik vizual langar vazifasini bajaradi.
Palitra
Brend
- Signal Orange
#ff6719— Apelsin rangi dekorativ detallar uchun ikkinchi darajali aksent va kamdan-kam uchraydigan ishoralarni ta'kidlash uchun ishlatiladi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak.
Neytral
- Ink
#363737— Asosiy matn — asosiy matn, sarlavhalar, post sarlavhalari, vaqt belgilari va mualliflarning ismlari; osonroq o'qish uchun sof #000 o'rniga issiq, deyarli qora rang. - Paper
#ffffff— Sahifa kanvasi, karta sirtlari, kiritish maydonlari va navigatsiya foni interfeysning katta qismini egallaydigan dominant sirtlardir. - Charcoal
#232525— Yuqori tanlov darajalariga ega qo'shimcha matn va havolalar uchun kursorni olib boring; kod bloklari va tanlash bloklari uchun Ink rejimidan chuqurroq. - Stone
#777777— Neytral rang ikkilamchi UI elementlari, ajratgichlar va ovozsiz yorliqlar uchun qo'llab-quvvatlanadi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Ash
#b6b6b6— Yupqa chegara chiziqlari, tugma konturlari, belgi konturlari, o'chirilgan boshqaruv elementlarida chegaralar. - Mist
#c8c8c8— Ajratuvchi chiziqlar, piktogrammalar uchun ko'zga tashlanmaydigan fon, skelet shaklida bo'sh kataklarni to'ldirish.
Tipografiya
12 dan 32 pikselgacha · 5 qadam
- system-ui — almashtirish: -apple-system · konturlar 400, 500, 600 · Foydalanuvchi interfeysi va asosiy matn uchun asosiy shrift navigatsiya yorliqlari, tugmalar, xabar matni, metama'lumotlar, kiritish maydonlari va barcha interfeys elementlari uchun ishlatiladi. Metama'lumotlar uchun 12-13 piksel va asosiy matn uchun 15-19 pikselli ixcham o'lchamlar zich yangiliklar lentasi hissiyotini yaratadi. Og'irligi asosiy matn uchun 400, navigatsiya elementlari va tugma yorliqlari uchun 500 va belgilangan xabar sarlavhalari va bo'lim sarlavhalari uchun 600 ni tashkil qiladi.
- Cahuenga — almashtirish: Charter · konturlar 500 · Mahsulot darajasidagi sarlavhalar (yon panel sarlavhalari, ro'yxatdan o'tish kartasi sarlavhalari, asosiy matn) uchun imzo dekorativ serif shrifti. Uning o'rtacha og'irligi va ozgina chiziq balandligi unga katta hajmli ko'rinmasdan o'ziga xos ko'rinish beradi; bu to'q sariq rangdan tashqari, Substackning o'ziga xosligini bildiradigan yagona shrift.
- Spectral — almashtirish: Charter · konturlar 400 · Uzun postlar uchun serif shrift — oʻqish zallarida va yangiliklar lentasi tarkibida tahririyat materiallarining oʻqilishini yaxshilash uchun ishlatiladi. Satrlar oraligʻining biroz torroq boʻlishi (1.20) yangiliklar xonalariga xos boʻlgan ixchamlikni saqlab qolgan holda paragraflarni qulay oʻqishni taʼminlaydi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | zich |
| Asosiy qadam | 8px |
| Tugma radiusi | 9999px |
| Karta radiusi | 12px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 32px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Substack 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
- Dub — Linkning mat guruch qog'ozi boshqaruv paneli
- 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.