Notion
Peshin quyoshida iliq qog'oz daftar
Notion interfeysi kunduzgi yorug'likda sevimli qog'oz daftarga o'xshaydi: steril emas, balki teginishga qulay his qiladigan issiq, kremsi kanvas (#f6f5f4), saxovatli sans-serif tipografiyasi mahsulot nusxasiga tahririy og'irlik bag'ishlaydi va siyrak tinish belgilari sifatida ishlatiladigan rang - shaftoli "tabletkalar" fe'llarni ta'kidlaydi, bitta ko'k asosiy harakatni bog'laydi va aylanadigan urg'u ranglari (marjon, kehribar, osmon, yarim tunda) karta fonlarini stikerlar kabi ranglaydi. Kartalar Moleskine daftarining chiziqli qismlari kabi yupqa chegaralar va burchaklar - soyalarsiz, xromsiz - kanvasga joylashtirilgan. Animatsiya o'ynoqi va prujinali bo'lib, 200 ms tezlikda silliq o'tishlar va bezaksiz interfeysga jon bag'ishlaydigan prujinali personaj animatsiyalari bilan.
Markazlashtirilgan holda, maksimal kenglik taxminan 1440 piksel bilan cheklangan. Asosiy element markazlashtirilgan stekdir: belgilar qatori → o'rnatilgan rangli tabletkali katta ikki qatorli sarlavha → kichik sarlavha → ikkita harakatga chaqiruv tugmalari bo'lgan qator → katta mahsulot interfeysi maketi. Asosiy element ostida bo'limlar oq kartochkalar panjaralari va to'liq rangli urg'u panellari orasida almashinib turadi. Logotip devori kulrang rangdagi sherik logotiplarining markazlashtirilgan bitta qatorli panjarasidir. Xususiyat bloklari ikki ustunli maketdan foydalanadi (chapda matn, o'ngda rangli panel), bo'limlar orasida chapdan o'ngga navbatma-navbat. "Yordamchilaringizdan talab bo'yicha so'rang" bo'limi 2x2 karta panjarasidan foydalanadi, bu yerda yuqori karta to'liq kenglikni egallaydi va pastki qator ikkita teng ustunga bo'linadi. Bo'limlar orasidagi oluklar keng (~80 piksel) bo'lib, xotirjam vertikal ritm yaratadi. Navigatsiya - bu markazlashtirilgan navigatsiya elementlari va o'ngga tekislangan harakat tugmalari bilan 64 piksel balandlikdagi sobit yuqori panel.
Rasmlarsiz illyustratsiyalar juda muhim. Vizual til tekis, tasvirlangan belgilar (2 pikselli rangli doiralarda yumaloq qirralar), mavhum dekorativ elementlar (qo'lda chizilgan qiyshiqlar, yaltiroqliklar, strelkalar, gul shakllari) va mahsulotning foydalanuvchi interfeysi maketlariga asoslangan. Belgilar asosiy oynada yetti avatarning gorizontal qatori sifatida ko'rinadi va sahifa bo'ylab o'ynoqi tinish belgilari sifatida sochilib ketgan. Mahsulot skrinshotlari yagona "haqiqiy" vizual elementlardir: ular haqiqiy Notion interfeysini (Kanban taxtalari, hujjat ko'rinishlari, AI agent panellari) to'liq elementlar to'plami va haqiqiy ma'lumotlar bilan ko'rsatadi. Asosiy oynadagi mahsulot maket katta, markazlashtirilgan va uni tuvaldan ajratib turadigan bitta soyani hosil qiladi. Turmush tarzi fotosuratlari, stok tasvirlari, mavhum 3D renderlar yo'q.
Palitra
Brend
- Notion Blue
#0075de— Harakatga chaqiruv (CTA) tugmasini to'ldiruvchi asosiy element, faol navigatsiyadagi urg'u, to'ldirilgan harakat tugmalari deyarli monoxrom tizimdagi kalit sifatida qabul qilinadigan darajada to'yingan yagona rang sxemasidir.
Neytral
- Paper Warmth
#f6f5f4— Sahifa kanvasi, asosiy oyna foni va qism foni tizimga sensorli, analog tuyg'u beradigan iliq, biroz bej ranglarda. - Pure White
#ffffff— Karta yuzalari, ko'tarilgan panellar, logotip fon, qorong'u kartochkalardagi kontrastli matn. - Ink Black
#000000— Asosiy matn, navigatsiya havolalari, sarlavhalar - yangi ranglar qo'shmasdan ierarxiyani yaratish uchun turli shaffoflik bilan (100%, 95%, 90%, 60%, 40%, 20%) ishlatiladi. - Charcoal
#111111— Sof qora rang juda qo'pol ko'rinadigan interfeys joylari uchun qorong'u matn varianti. - Stone
#757575— Ikkilamchi navigatsiya matni, ovozsiz yordamchi matn, o'chirilgan tugma yorliqlari - 60% siyoh alfa - Graphite
#615d59— Asosiy matn iliq ohangga ega - jigarrang kulrang, bu iliq fon bilan uyg'unlashadi.
Tipografiya
12 dan 96 pikselgacha · 10 qadam
- NotionInter — almashtirish: Inter · konturlar 400, 500, 600, 700 · Asosiy sans-serif shrifti nozik nuanslarga ega geometrik gumanist bo'lib, asosiy matn uchun 400, navigatsiya/foydalanuvchi interfeysi uchun 500 va sarlavhalar uchun 600-700 o'lchamlarda ishlatiladi. Shrift shkalasi kattaroq o'lchamlarda (96 pikselda -4,6 piksel, 72 pikselda -2 piksel) agressiv salbiy harflar oralig'idan foydalanadi, bu esa sarlavhani havodor emas, balki ixchamroq va ishonchliroq qiladi.
- Lyon Text — almashtirish: Source Serif Pro · konturlar 400 · Asosiy matnning alohida bo'limlari va bo'lim kirishlari uchun ajratilgan tahririyat serif shrifti jurnal maketidagi iqtibosga o'xshash shriftga adabiy og'irlik berish uchun kamdan-kam hollarda (to'rt marta) ishlatiladi. U parallel ierarxiya o'rniga tizimli urg'u vazifasini bajaradi.
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 | 80px |
| Sahifa kengligi | 1440px |
Sun'iy intellekt veb-saytingizni Notion 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
- 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.