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 — Җылы каймак төсле кәгазьдә басылган редакция журналы. Кадрлар белән идарә итү турында уйланылган иншаны күз алдыгызга китерегез, ул продукт буларак тәкъдим ителә - заманча зәңгәр интерфейс аша пышылдап язылган курсив-сериф шрифты.