Notion
Түшкү күндүн астында жылуу кагаз дептер
Notion интерфейси күндүзгү сүйүктүү кагаз дептерге окшош: жылуу, каймак түстүү полотно (#f6f5f4) стерилдүү эмес, тактилдүү сезилет, кенен санс-сериф типографиясы продукттун текстине редакциялык салмак кошуп, сейрек тыныш белгилери катары колдонулган түс — шабдалы "таблеткалары" этиштерди баса белгилейт, бир көк негизги аракетти бекитет жана басым түстөрүнүн айлануучу массиви (коралл, янтарь, асман, түн ортосу) картанын фондорун стикерлер сыяктуу боёйт. Карталар Moleskine дептеринин сызылган бөлүктөрүндөй жука чек аралары жана бурчтары бар полотного жайгаштырылган — көлөкөсүз, хромсуз. Анимация ойноок жана пружиналык, 200 мс ылдамдыктагы жылмакай өтүүлөр жана интерфейске декоративдүү болбостон жан берген пружиналык каарман анимациялары менен.
Борборлоштурулган, максималдуу туурасы болжол менен 1440 пиксель менен чектелген. Негизги элемент - борборлоштурулган стек: символдордун катары → түстүү таблеткасы бар чоң эки саптуу аталыш → кошумча аталыш → эки аракетке чакыруу баскычы бар сап → чоң продукт интерфейсинин макети. Негизги элементтин астында бөлүмдөр ак карточкалардын торчолору менен толук түстүү акцент панелдеринин ортосунда кезектешип жайгашкан. Логотиптин дубалы - боз түстөгү өнөктөш логотиптеринин борборлоштурулган бир катарлуу торчосу. Функциялык блоктор эки тилкелүү макетти колдонот (сол жакта текст, оң жакта түстүү панель), бөлүмдөрдүн ортосунда солдон оңго кезектешип жайгашкан. "Жардамчыларыңыздан суроо-талап боюнча сураңыз" бөлүмүндө 2x2 карточка торчосу колдонулат, мында үстүнкү карточка толук туурасын ээлейт, ал эми астыңкы катар эки бирдей тилкеге бөлүнөт. Бөлүмдөрдүн ортосундагы науачалар кенен (~80 пиксель), бул тынч вертикалдык ритмди түзөт. Навигация - бул борборлоштурулган навигация элементтери жана оңго тегизделген аракет баскычтары бар 64 пиксель бийиктиктеги бекитилген үстүнкү тилке.
Иллюстрациялар эң маанилүү, сүрөттөрү жок. Визуалдык тил жалпак, иллюстрацияланган символдорго (2 пикселдик түстүү тегерекчелердеги тегеректелген четтери), абстракттуу декоративдик элементтерге (кол менен тартылган сызыктар, жылтырактар, жебелер, гүл формалары) жана продуктунун колдонуучу интерфейсинин макеттерине негизделген. Символдор негизги терезеде жети аватардын горизонталдуу катары катары көрсөтүлөт жана баракча боюнча ойноок тыныш белгилери катары чачырап жайгашкан. Продукциянын скриншоттору жалгыз "чыныгы" визуалдык элементтер болуп саналат: алар элементтердин толук топтому жана чыныгы маалыматтар менен чыныгы Notion интерфейсин (Kanban такталары, документтердин көрүнүштөрү, AI агент панелдери) көрсөтөт. Негизги терезедеги продуктунун макети чоң, борборлоштурулган жана аны полотнодон бөлүп турган бир гана көлөкө түшүрөт. Жашоо образынын сүрөттөрү, фондулук сүрөттөр, абстракттуу 3D рендерлер жок.
Түстөр палитрасы
Бренд
- Notion Blue
#0075de— Аракетке чакыруу (CTA) баскычын толтуруучу негизги элемент, активдүү навигациядагы басым, толтурулган аракет баскычтары - бул дээрлик монохромдук системадагы которгуч катары кабыл алынгыдай деңгээлде каныккан жалгыз түс схемасы.
Нейтралдуу
- Paper Warmth
#f6f5f4— Барактын холстунун, негизги терезенин фонунун жана бөлүмдүн фонунун баары жылуу, бир аз бежевый түстөрдөн жасалган, бул системага тактилдүү, аналогдук сезим берет. - Pure White
#ffffff— Карточкалардын беттери, көтөрүлгөн панелдер, логотиптин фоны, кара карталардагы контрасттуу текст. - Ink Black
#000000— Негизги текст, навигация шилтемелери, аталыштар - жаңы түстөрдү кошпостон иерархияны түзүү үчүн ар кандай тунуктук менен (100%, 95%, 90%, 60%, 40%, 20%) колдонулат. - Charcoal
#111111— Таза кара түс өтө катаал көрүнгөн интерфейс аймактары үчүн караңгы текст опциясы. - Stone
#757575— Кошумча навигациялык текст, үнсүз жардамчы текст, өчүрүлгөн баскыч энбелгилери - 60% сыя альфасы - Graphite
#615d59— Негизги текст жылуу фон менен гармониялашкан күрөң боз түскө ээ - жылуу фон.
Типография
12ден 96 пикселге чейин · 10 кадам
- NotionInter — алмаштыруу: Inter · контурлар 400, 500, 600, 700 · Негизги sans-serif шрифти – бул назик нюанстары бар геометриялык гуманисттик шрифт, ал негизги текст үчүн 400, навигация/колдонуучу интерфейси үчүн 500 жана аталыштар үчүн 600-700 өлчөмдөрдө колдонулат. Шрифттин масштабы чоңураак өлчөмдөрдө (96 пикселде -4,6 пиксел, 72 пикселде -2 пиксел) агрессивдүү терс тамга аралыктарын колдонот, бул аталышты кенен эмес, компакттуу жана ишенимдүү кылат.
- Lyon Text — алмаштыруу: Source Serif Pro · контурлар 400 · Негизги тексттин жана бөлүмдөрдүн кириш сөздөрүнүн айрым бөлүмдөрү үчүн сакталган редакциялык сериф шрифти журнал макетиндеги цитата сыяктуу шрифтке адабий салмак берүү үчүн сейрек колдонулат (төрт жолу). Ал параллелдүү иерархия эмес, системалуу акцент катары кызмат кылат.
Интервалдар жана форма
| Максаты | Мааниси |
|---|---|
| Тыгыздык | орточо |
| Негизги кадам | 8px |
| Баскычтын радиусу | 8px |
| Картанын радиусу | 12px |
| Көлөкөлөр | көлөкөлөрдүн ордуна чек аралар жок |
| Бөлүмдөрдүн ортосунда | 80px |
| Барактын туурасы | 1440px |
Жасалма интеллект сиздин веб-сайтыңызды Notion стилинде куруп, аны толтурат
- Instagram, TikTok, Facebook шилтемелери аркылуу өнүмдөр жана посттор менен толтуруңуз.
- Эски сайтыңыздан мазмунду өткөрүп бериңиз — жөн гана даректи көрсөтүңүз.
- Эң мыкты кыймылдаткычтагы заманбап дизайн: серверди рендеринг жана SEO оптималдаштыруу менен React ( Next.js).
- Издөө натыйжалары жана нейрон тармактарынын сунуштары үчүн толугу менен автоматташтырылган SEO оптималдаштыруу.
Окшош стилдер
- ElevenLabs — Жылуу каймак түстөгү, назик аталыштары бар фотоэссе. Баухаус стилиндеги дептер — жумуртканын кабыгы түстүү кагаз, кара сыя жана продукцияны көрсөтүү үчүн бир кызгылт көк жана кызгылт сары түстөгү акцент.
- Awesomic — Конфеттини эске салган кызгылт сары тыныш белгилери бар редакциялык цинк торчосу
- Monad — жылуу пергамент боюнча редакциялык техникалык журнал
- Dub — Linkтин матовый күрүч кагазынан жасалган башкаруу панели
- Seline Analytics — Жылуу кагаздагы тынч аналитикалык стол
- Anthropic — Жылуу пергамент жөнүндөгү илимий талаа журналы — пил сөөгүнүн тынч беттери, сериф менен кооздолгон редакциялык аталыштар жана аракет керек болгондо гана пайда болгон бир гана чопо акцент.
- Calendly — Муздак мраморго кочкул көк сыя менен тартылган
- Augen Pro — Apple компаниясынын ак түсү монохром мейкиндиктеги жалгыз акцент катары клиникалык, салмаксыз, электр көк түсүн камтыйт.
- Antimetal — Каймак кагазга басылган редакциялык хроника — илимий журналдагы тынч таң, анда токтоолук ишенимди билдирет, ал эми серифтер оор жумушту аткарат
- Perk — Жылуу пергамент кагазындагы электр лаймы
- Ditto — Күн нуру тийген жапайы гүлдөрдүн үлгүлөрүн жасоочу устакана. Жылуу каймак түстөгү беттер, ачык сары түс, кочкул көк сыялар, чыгарманын артында гүлдөгөн органикалык түстөгү формалар.
- Officevibe — Жылуу каймак түстүү кагазга басылган редакциялык журнал. Заманбап көк интерфейс аркылуу шыбырап жазылган курсивдүү сериф шрифти менен берилген, продукт катары сунушталган HR башкаруу боюнча ойлуу эссени элестетиңиз.