Dub
матавая панэль кіравання Link на рысавай паперы
Візуальная сістэма Dub - гэта стрыманая, амаль рэдакцыйная эстэтыка SaaS: амаль белае палатно, змацаванае тонкімі рамкамі, а не выступоўцамі элементамі, з шчыльнай манахромнай друкарняй, якая выконвае структурную працу, і адным ярка-сінім колерам (#2563eb), размаўлялым за сябе. Паверхні застаюцца плоскімі і безрамочными на першы погляд, але кожны кантэйнер мае 1px #e5e5e5 край, які стварае адчуванне друкаванага дакумента. Індывідуальнасць дасягаецца за кошт невялікага набору каляровых акцэнтаў у выглядзе «таблетак» (аранжавы, зялёны, фіялетавы), якія параць над нейтральнай палітрай, і загалоўкаў, якія выглядаюць упэўнена і сучасна, але не крычаць. Кампаненты кампактныя і шчыльныя: 8px зазоры, 12px радыус карткі, пазнакі ў форме таблетак на 9999px і нябачныя элементы кіравання замест цяжкіх запоўненых кнопак.
Старонка пабудавана па цэнтраванай мадэлі з максімальнай шырынёй, прыблізна роўнай 1200px. Галоўны элемент уяўляе сабой цэнтраваны тэкставы блок з трыма плаваюць элементамі (Партнёрскія праграмы, Аналітыка канверсій, Кароткія спасылкі), размешчанымі гарызантальна над вялікім макетам прадукта. Раздзелы размешчаны вертыкальна з пастаяннымі 64px прамежкамі, чаргуючыся паміж белым палатном і #f5f5f5 папяровай смугой для танальнага падзелу. У ніжняй частцы выкарыстоўваецца Z-вобразны шаблон: рэдакцыйны тэкст цэнтраваны ў сярэдняй траціне, а якія плаваюць карткі карыстацкага інтэрфейсу замацаваныя ў левага і правага палёў, ствараючы асіметрычны, часопісны рытм. Воблака лагатыпаў уяўляе сабой простую сетку 5×2, цэнтраваную на старонцы. Навігацыя ўяўляе сабой мінімалістычную верхнюю панэль - лагатып злева, рух па цэнтры, група з двух кнопак (прывідная кнопка "Уваход" + запоўненая кнопка "Рэгістрацыя") справа - без фіксаванага або мега-меню. Макет панэлі кіравання ў галоўным акне дэманструе класічную двухкалонкавую абалонку прыкладання: фіксаваная бакавая панэль (падобная на 240px) + вобласць кантэнту, якая вызначае шчыльнасць інфармацыі аб прадукце для наведвальнікаў да таго, як яны пачнуць пракручваць старонку.
Візуальны шэраг арыентаваны на прадукт, а не на стыль жыцця. У цэнтры галоўнага экрана – вялікі скрыншот панэлі кіравання, які ўяўляе сабой рэальны макет прадукта з бакавой панэллю навігацыі, табліцай дадзеных і якія плаваюць элементамі карыстацкага інтэрфейсу, – размешчаны ў выглядзе плоскай панэлі на белым палатне. Лагатыпы кліентаў адлюстроўваюцца ў абясколеранай сетцы шэрых тонаў (beehiv, superpower, Chatbase і т. д.) для пацверджання іх эфектыўнасці ў сацыяльных сетках, без колеру, каб адзіны сіні акцэнт старонкі заставаўся дамінантным. Якія плаваюць карткі партнёраў (невялікі профіль + пліткі з дадзенымі аб прыбытках/выплатах) перамяшчаюцца вакол блокаў рэдакцыйнага тэксту ў ніжняй частцы, ствараючы адчуванне глыбіні без выкарыстання ценяў на самім тэксце. Фонавы ўзор у выглядзе кропкавай сеткі - гэта фірмовы знак: тонкі шэраг маленькіх кропак з вельмі нізкай празрыстасцю стварае тэкстуру і адчуванне сістэмы дызайну/паверхні чарцяжа, падкрэсліваючы пазіцыянаванне як "сучаснай платформы атрыбуцыі спасылак". Іканаграфія невялікая, з контурамі і заліваннем, і выкарыстоўвае акцэнтную палітру (аранжавы мандарын, фіялетавы лавандавы, зялёны мятны) для тэгаў функцый. Ніякіх фатаграфій, ілюстрацый, 3D-мадэляў - карыстацкі інтэрфейс прадукта САМ з'яўляецца візуальнай мовай.
Палітра
Брэнд
- Electric Blue
#2563eb— Асноўны фірменны колер - лагатып, спасылкі, ключавыя паказчыкі, актыўныя станы, акцэнты значкоў. Насычаны сіні колер на белым фоне стварае адзіны момант візуальнай прывабнасці сістэмы. - Deep Sapphire
#1e40af— Асноўны фон кнопкі дзеяння, ярка выяўленае заліванне закліку да дзеяння - адзіны колер, які пазначае дзеянне, выкарыстоўваецца эканомна, каб прыцягнуць увагу.
Нейтральныя
- Canvas White
#ffffff— Фон старонкі, паверхня карткі, усплываючыя панэлі - абсалютная аснова кожнага экрана. - Paper Mist
#f5f5f5— Ненадакучлівая змена колеру паверхні для ўкладзеных картак, дадатковых панэляў і заліванні пры навядзенні курсора. - Ash
#e5e5e5— Тонкія межы на картах, уваходных раздымах і падзельніках - гэта структурная лінія, якая змацоўвае сістэму. - Smoke
#d4d4d4— Больш выразныя межы для выдзеленых кантэйнераў і контураў дадатковых кнопак. - Pebble
#c8c8c8— Межы, контуры элементаў кіравання і структурныя падзельнікі з сярэднім кантрастам. Не варта вылучаць гэты колер у якасці асноўнага колеру закліку да дзеяння. - Midnight Ink
#0a0a0a— Асноўны тэкст кнопак, выдзеленыя кнопкі, тэкст навігацыі - амаль чорны колер для максімальнага кантрасту.
Друкарня
ад 11 да 48px · 9 прыступак
- Satoshi — замена: Inter (weight 500 · напісання 500 · Загалоўкі для адлюстравання - выкарыстоўваюцца толькі ў радку 36-48px для загалоўкаў загалоўка і раздзелаў. Тып шрыфта - 500 (сярэдні, не тоўсты): загалоўкі выглядаюць упэўнена і сучасна, але ніколі не крычаць. Геаметрычныя прапорцыі Сатошы надаюць шрыфту злёгку рэдакцыйны, сучасны выгляд, які не можа прайграць асноўны тэкст Inter.
- Inter — замена: Inter (native) · напісання 400, 500, 600 · Асноўны тэкст, пазнакі карыстацкага інтэрфейсу, рух, падзагалоўкі, невялікія загалоўкі. Inter - гэта асноўны працоўны конік, якая апрацоўвае ўсё, ад мікра-пазнак 11px да другарадных загалоўкаў 30px. Вага 400 - гэта значэнне па змаўчанні для асноўнага тэксту, 500 - для вылучаных элементаў і пазнак кнопак, 600 зарэзервавана для важных пазнак карыстацкага інтэрфейсу. Памер 16px з вышынёй радка 1,5 з'яўляецца найболей часта сустракаемым аднакрокавым памерам (1220 выпадкаў), што пацвярджае, што 16px з'яўляецца кананічным памерам асноўнага тэксту.
- Geist Mono — замена: JetBrains Mono or IBM Plex Mono · напісання 400, 500 · Фрагменты кода, тэхнічныя метададзеныя, убудаваныя монашырынныя токены. Выкарыстоўваюцца ў блоках кода ў кодзе ў пазіцыі 12-14px і ў буйных элементах адлюстравання кода ў пазіцыі 24px. Забяспечвае давер да прылады распрацоўніка, якое адпавядае пазіцыянаванню прадукта Dub.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 8px |
| Радыус кнопак | 8px |
| Радыус картак | 12px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 64px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Dub і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- ElevenLabs — Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- Seline Analytics — Ціхі аналітычны стол на цёплай паперы
- Notion — Цёплы папяровы блакнот пад паўдзённым сонцам
- Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
- Calendly — Цёмна-сінія чарнілы на халодным мармуры
- Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
- Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
- Perk — Электрычны лайм на цёплай пергаментнай паперы
- Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.
- Officevibe — Рэдакцыйны часопіс на паперы цёплага крэмавага колеру. Уявіце сабе ўдумлівае эсэ па кіраванні персаналам, аформленае ў выглядзе прадукта - курсіўны шрыфт з засечкамі, нібы шэпчучы скрозь сучасны сіні інтэрфейс