Notion
Түскі күн астында жылы қағаз дәптер
Notion интерфейсі күндізгі жарықтағы сүйікті қағаз дәптерге ұқсайды: стерильді емес, тактильді сезілетін жылы, кремді кенеп (#f6f5f4), өнім мәтініне редакциялық салмақ қосатын кең санс-сериф типографиясы, ал сирек тыныс белгілері ретінде қолданылатын түс - шабдалы "таблеткалары" етістіктерді ерекшелейді, негізгі әрекетті бір көк бекітеді және екпін реңктерінің айналмалы массиві (маржан, кәріптас, аспан, түн ортасы) карталардың фонын стикерлер сияқты бояйды. Карталар кенепте жұқа жиектері мен бұрыштары бар - көлеңкесіз, хромсыз - Moleskine дәптерінің сызықты бөліктері сияқты орналастырылған. Анимация ойнақы және серіппелі, 200 мс жылдамдықтағы тегіс ауысулар және интерфейске сәндік болмай-ақ жан беретін серіппелі кейіпкер анимациялары бар.
Орталықтандырылған, максималды ені шамамен 1440 пиксельмен шектелген. Негізгі элемент - орталықтандырылған стек: таңбалар қатары → ендірілген түсті таблеткасы бар үлкен екі жолдық тақырып → қосымша тақырып → екі әрекетке шақыру түймесі бар қатар → өнімнің үлкен интерфейс макеті. Негізгі элементтің астында бөлімдер ақ карталардың торлары мен толық түсті екпін панельдері арасында кезектесіп орналасады. Логотип қабырғасы - сұр реңктегі серіктес логотиптерінің орталықтандырылған бір қатарлы торы. Функция блоктары екі бағандық орналасуды пайдаланады (сол жақта мәтін, оң жақта түрлі-түсті панель), бөлімдер арасында солдан оңға ауысып отырады. "Көмекшілеріңізден сұраныс бойынша сұраңыз" бөлімінде 2x2 карта торы қолданылады, мұнда жоғарғы карта толық енін алады, ал төменгі жол екі тең бағанға бөлінеді. Бөлімдер арасындағы науалар кең (~80 пиксель), бұл тыныш тік ырғақты жасайды. Навигация - орталықтандырылған навигация элементтері және оңға тураланған әрекет түймелері бар 64 пиксель биіктіктегі бекітілген жоғарғы жолақ.
Суреттер өте маңызды, фотосуреттер жоқ. Көрнекі тіл жалпақ, иллюстрацияланған белгілерге (2 пиксель түсті шеңберлердегі дөңгелек жиектер), абстрактілі сәндік элементтерге (қолмен салынған дірілдер, жылтырақтар, жебелер, гүл пішіндері) және өнімнің пайдаланушы интерфейсінің макеттеріне негізделген. Таңбалар негізгі терезеде жеті аватардың көлденең қатары ретінде пайда болады және бет бойынша ойнақы тыныс белгілері ретінде шашыраңқы орналасқан. Өнімнің скриншоттары жалғыз «шынайы» көрнекі элементтер болып табылады: олар нақты Notion интерфейсін (Kanban тақталары, құжат көріністері, жасанды интеллект агент панельдері) элементтердің толық жиынтығымен және нақты деректермен көрсетеді. Негізгі терезедегі өнім макетінің өлшемі үлкен, ортасында орналасқан және оны кенептен бөліп тұратын бір ғана көлеңке түсіреді. Өмір салты фотосуреттері, қор суреттері, абстрактілі 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 басқару туралы ойлы эссені елестетіп көріңіз — заманауи көк интерфейс арқылы сыбырлап жазылған курсивті сериф қаріпі.