Notion
Цёплы папяровы блакнот пад паўдзённым сонцам
Інтэрфейс Notion выглядае як каханы папяровы нататнік пры святле дня: цёплае крэмавае палатно (#f6f5f4), які адчуваецца хутчэй тактыльным, чым стэрыльным, шчодрая друкарня без засечак, якая надае рэдакцыйная вага тэксту пра прадукт, і колер, выкарыстоўваны ў якасці рэдкай пунктуацыі. асноўнага дзеяння, а які змяняецца набор акцэнтных адценняў (каралавы, бурштынавы, нябесны, паўночны) размалёўвае фон картак, нібы стыкеры. Карткі размяшчаюцца на палатне з тонкімі рамкамі і кутамі - без ценяў, без хрому - як разлінаваныя секцыі ў блакноце Moleskine. Анімацыя гуллівая і спружыністая, з плыўнымі пераходамі з затрымкай у 200 мс і пругкімі анімацыямі знакаў, якія робяць інтэрфейс жывым, не будучы пры гэтым дэкаратыўным.
Цэнтраваная, максімальная шырыня абмежавана прыкладна 1440px. Галоўны элемент уяўляе сабой цэнтраваную чарку: радок з знакамі → вялікі загаловак у два радкі з убудаванай каляровай таблеткай → падзагаловак → радок з двума кнопкамі закліку да дзеяння → вялікі макет карыстацкага інтэрфейсу прадукта. Пад галоўным элементам секцыі чаргуюцца паміж сеткамі з белых картак і поўнакаляровымі акцэнтнымі панэлямі. Сцяна з лагатыпамі ўяўляе сабой цэнтраваную аднарадную сетку з лагатыпаў партнёраў у адценнях шэрага. Блокі з функцыямі выкарыстоўваюць двухкалонкавую кампаноўку (тэкст злева, каляровая панэль справа), якая чаргуецца злева направа паміж секцыямі. Раздзел "Задайце пытанне сваім асістэнтам па запыце" выкарыстоўвае сетку з картак 2×2, дзе верхняя картка займае ўсю шырыню, а ніжні радок падзяляецца на дзве роўныя калонкі. Прамежкі паміж секцыямі дастаткова вялікія (~80px), ствараючы спакойны вертыкальны рытм. Навігацыя ўяўляе сабой фіксаваную верхнюю панэль вышынёй 64px з цэнтраванымі элементамі навігацыі і выраўнаванымі па правым краі кнопкамі дзеянняў.
Ілюстрацыі вышэй за ўсё, без фатаграфій. Візуальная мова пабудаваны на плоскіх ілюстраваных сімвалах (круглыя грані ў каляровых колах 2px), абстрактных дэкаратыўных элементах (намаляваныя ад рукі закавыкі, бліскаўкі, стрэлкі, формы кветак) і макетах карыстацкага інтэрфейсу прадукта. Сімвалы адлюстроўваюцца ў галоўным акне ў выглядзе гарызантальнага шэрагу з 7 аватараў і раскіданыя па старонцы ў якасці гуллівых знакаў прыпынку. Скрыншоты прадукта – адзіныя «рэальныя» візуальныя элементы: яны паказваюць рэальны інтэрфейс Notion (канбан-дошкі, паданні дакументаў, панэлі ІІ-агентаў) з поўным наборам элементаў і рэальнымі дадзенымі. Макет прадукта ў галоўным акне вялікі, цэнтраваны і адкідае адзіны цень, якая адлучае яго ад палатна. Тут няма фатаграфій у стылі лайфстайл, няма сцёкавых малюнкаў, няма абстрактных 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 да 96px · 10 прыступак
- NotionInter — замена: Inter · напісання 400, 500, 600, 700 · Асноўны шрыфт без засечак - геаметрычны гуманістычны з невялікімі асаблівасцямі, выкарыстоўваецца ў памеры 400 для асноўнага тэксту, 500 для навігацыі/інтэрфейсу карыстальніка, 600-700 для загалоўкаў. У шрыфтавой шкале выкарыстоўваецца агрэсіўная адмоўная міжлітарная адлегласць пры вялікіх памерах (-4.6px пры 96px, -2px пры 72px), што робіць загаловак больш кампактным і ўпэўненым, а не паветраным.
- Lyon Text — замена: Source Serif Pro · напісання 400 · Рэдакцыйны шрыфт з засечкамі, зарэзерваваны для асобных фрагментаў асноўнага тэксту і ўступаў да раздзелаў, выкарыстоўваецца эканомна (4 разы), каб надаць шрыфту літаратурную вагу, падобна цытаце ў макеце часопіса. Функцыянуе як сістэмны акцэнт, а не як паралельная іерархія.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 8px |
| Радыус кнопак | 8px |
| Радыус картак | 12px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 80px |
| Шырыня старонкі | 1440px |
ІІ збярэ ваш сайт у стылі Notion і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- ElevenLabs — Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- Dub — матавая панэль кіравання Link на рысавай паперы
- Seline Analytics — Ціхі аналітычны стол на цёплай паперы
- Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
- Calendly — Цёмна-сінія чарнілы на халодным мармуры
- Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
- Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
- Perk — Электрычны лайм на цёплай пергаментнай паперы
- Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.
- Officevibe — Рэдакцыйны часопіс на паперы цёплага крэмавага колеру. Уявіце сабе ўдумлівае эсэ па кіраванні персаналам, аформленае ў выглядзе прадукта - курсіўны шрыфт з засечкамі, нібы шэпчучы скрозь сучасны сіні інтэрфейс