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 оптимизациясе.
Охшаш стильләр
- Mollie — Кашемир счетчигы, караңгы реестр. Кара текст тирәсендә редакция дизайны өчен җитәрлек ак урын калдырыгыз, аннары продукт белән бәйле пунктларны җылы кремнар, эспрессо коктейльләре һәм чын түләү ысулларының тактиль фотолары белән ныгытыгыз.
- Kagi — Аерым уку бүлмәсе. Калын графит текст тирәсендә ачык ак урын булдырыгыз, тынычлыкны бозу өчен нечкә шәмәхә төстәге акцентлар һәм җылы пастель өслекләр кулланыгыз.
- Milanote — Milanote - махсус иҗади студия. Караңгы рамлы стеналар, ак дисплей киңлеге һәм йомшак тирәнлектәге чын объектларга охшаган скриншотлар ярдәмендә йөзүче визуаль такталар кулланып, редакция галереясы стилендәге битләр булдырыгыз.
- Co2 — Кышкы яктылыкта климат атласы. Һавадан төшерелгән документ пейзажы кебек битләр ясагыз, анда сериф исемнәре, категория буенча кодланган мәгълүматлар һәм бозлы рәсемнәр киң ак кырларны ассызыклый.
- GitButler — Текст ахырында зәңгәрсу төс. Югары контрастлы сериф башлыклары, нечкә техник рәшәткәләр, җылы графит өслекләр һәм сизелерлек зәңгәрсу төс акценты белән берләштерелгән.
- ElevenLabs — Җылы каймак төсендәге фотоэссе, нечкә башлыклар белән. Баухаус стилендәге дәфтәр — йомырка кабыгы төсендәге кәгазь, кара буяу һәм продуктны күрсәтү өчен бер шәмәхә һәм кызгылт сары төстәге бизәк.
- Awesomic — Конфеттины хәтерләткән кызгылт сары тыныш билгеләре белән редакция цинк челтәре
- Monad — җылы пергаменттагы редакция техник журналы
- Dub — Link'ның мат дөге кәгазе белән идарә итү панеле
- Seline Analytics — Җылы кәгазьдә тыныч аналитик өстәл
- Anthropic — Җылы пергамент турында фәнни өлкә журналы - тыныч фил сөяге өслекләре, серифлы редакция рубрикалары һәм хәрәкәт кирәк булганда гына күренә торган бердәнбер балчык акценты.
- Calendly — Салкын мәрмәрдә куе зәңгәр төстәге кара