Steep
Аналітыка шрыфтоў з засечкамі на паперы цёплага адцення
Steep уяўляе аналітыку як рэдакцыйны матэрыял - загалоўкі Signifier з засечкамі параць над амаль манахромным белым палатном, а адзіны цёплы персікавы акцэнт (#fbe1d1) падкрэслівае ў астатнім ахраматычную сістэму. Старонка чытаецца як разварот прадуктовага часопіса: буйны курсіўны шрыфт, дастатковая прастора для тэксту, вялікія карткі з мяккімі бакамі радыусам 24px і элементы кіравання ў форме таблетак, шчыльна прылеглыя да паверхні. Кампаненты здаюцца спакойнымі і бязважкімі - цені ледзь прыкметныя, межы тонкія, а колер выкарыстоўваецца для функцыянальнага акцэнту (персікавая выноска, цёмна-карычневы надпіс на персікавым фоне). Паверхні прадукта (табліцы рэгіёнаў, дыяграмы актывацыі, канструктары ІІ) прадстаўлены як плаваюць элементы вакол загалоўка, а не ўкладзены ў абалонку панэлі кіравання.
Мадэль старонкі мае максімальную шырыню 1200px, цэнтраваную па цэнтры, пры гэтым галоўныя часткі займаюць амаль усю шырыню старонкі, але застаюцца ў межах кантэйнера. Галоўны шаблон уяўляе сабой цэнтраваны загаловак з буйным шрыфтам з засечкамі, падзагаловак і пару кнопак-«таблетак», акружаныя чатырма плаваюць карткамі з апісаннем прадукта (табліца рэгіёнаў уверсе злева, рэгістрацыйная картка справа, дыяграма актывацыі ўнізе злева, рэдактар AI ўнізе. Часткі чаргуюцца паміж фонамі Paper White і Card Mist, ствараючы спакойны рытм без моцнага кантрасту. Часткі з апісаннем функцый выкарыстаюць двухкалонкавую кампаноўку тэксту і карыстацкага інтэрфейсу з вялікімі вертыкальнымі прамежкамі 80px. Навігацыя ўяўляе сабой адзіную празрыстую верхнюю панэль (без фону, рамкі і цені) з лагатыпам злева, спасылкамі навігацыі па цэнтры і двума заклікамі да дзеяння (тэкставая спасылка + запоўненая кнопка-«таблетка») справа. Агульная шчыльнасць размяшчэння прасторная - старонка "дыхае" паміж раздзеламі, і кантэнт ніколі не адціскае краю.
Візуальнае афармленне арыентавана на прадукт, а не на лад жыцця: плаваюць фрагменты карыстацкага інтэрфейсу (табліцы рэгіёнаў з дадзенымі ў 5 радкоў, лінейныя дыяграмы, якія паказваюць актывацыю ў жніўні-лістападзе, радыяльныя кольцы прагрэсу, палі ўводу ІІ) размешчаны ў выглядзе абрэзаных скрыншотаў. Ніякіх фатаграфій, ілюстрацый, абстрактнай графікі. Усе візуальныя элементы прадукта размешчаны на белых плаваюць картках з тонкімі рамкамі і мяккімі ценямі. Кругі аватараў нясуць невялікі паказальнік кірунку курсора - візуальны матыў, які сігналізуе аб узаемадзеянні ў рэальным часе. Галоўная кампазіцыя ўяўляе сабой калаж з тэксту і карыстальніцкага інтэрфейсу, а не цэнтраваны загаловак з фатаграфіяй.
Палітра
Нейтральныя
- Ink Black
#17191c— Асноўны тэкст, запоўнены фон кнопкі, лагатып навігацыі - адзіная цёмная паверхня ў сістэме; усе заклікі да дзеяння і загалоўкі ў асноўным тэксце адлюстроўваюцца на гэтым амаль чорным фоне. - Paper White
#ffffff— Палатно старонкі, тэкст кнопак, рэльефныя паверхні картак - дамінуючы фонавы тон, які нясе прыкладна 76 частотных кропак. - Mist Gray
#f2f2f3— Паверхні картак, дадатковыя фоны, заліванне палёў уводу - незаўважны пласт пад паперай для ўкладзенага кантэнту. - Fog White
#fafafb— Дадатковы фон старонкі для якія чаргуюцца частак і паверхняў пры навядзенні курсора - на адзін крок вышэй паперы для стварэння ледзь прыкметных варыяцый палос. - Slate Gray
#777b86— Колер спасылкі, прыглушаны дапаможны тэкст, тэкст у ніжнім калантытуле - халодны, ненасычаны шэры колер, размешчаны паміж асноўным тэкстам і тэкстам, які нельга ўключыць. - Ash Gray
#979799— Дадатковыя пазнакі, тэгі катэгорый (Маркетынг, Фінансы, Продажы) - на адзін крок святлей, чым колер спасылак.
Друкарня
ад 15 да 90px · 8 прыступак
- Signifier — замена: GT Sectra · напісання 400 · Шрыфт з засечкамі для загалоўкаў і загалоўкаў - выкарыстоўваецца выключна для H1/H2 у трох памерах; таўшчыня шрыфта застаецца на ўзроўні 400 (звычайны) пры любым маштабе, што з'яўляецца фірмовым выбарам: шрыфт з засечкамі хутчэй шэпча, чым крычыць, як тоўсты шрыфт.
- Sohne — замена: Inter · напісання 400, 430, 450, 480, 500 · Асноўны шрыфт, шрыфты для інтэрфейсу і навігацыі - універсальны, які ахоплівае ўсё, ад метададзеных да падзагалоўкаў; паўступеністыя варыянты таўшчыні (430, 450, 480) ствараюць тонкую іерархію без пераходу да тоўстага шрыфта.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 8px |
| Радыус кнопак | 9999px |
| Радыус картак | 24px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 80px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Steep і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Newformcap — Рэдакцыйная газета ў грымёрцы
- Claude — Надрукаваны на цёплым пергаменце артэфакт - чарніла на касцяной паперы, гліна як адзінае каляровае дыханне.
- 11x– Digital workers — Кінематаграфічная рэдакцыйная пустыня - панарамныя фатаграфіі мясцовасці на фоне манументальных загалоўкаў з засечкамі, дзе старонка чытаецца як разварот раскошнага часопіса
- Revolut — Манахромная рэдакцыйная праца, заснаваная на фатаграфіі аблокаў - белыя чарнілы, гузікі-таблеткі, адна сіняя палоска колеру ў свеце, у астатнім выкананым у шэрых танах
- Scheduling — Рэдакцыйная фарба на крэмавай паперы
- Titan — архіў у цёплых танах манахром
- Programa — Швейцарская дызайн-студыя апоўдні. Белая сцяна галерэі асветлена адзінай жоўтай настольнай лямпай - усё ў адценнях шэрага, пакуль якая-небудзь кнопка, значок або акцэнт не прыцягнуць увагу, і тады гэты адзіны жоўты акцэнт вызначае ўвесь пакой
- Sana Agents — Лаймавая іскра на белым фоне ў рэдакцыйным артыкуле
- Visual — Цёплы рэдакцыйны самвыд. Крэмавая папера, плакаты з засечкамі, манахромныя нататкі на палях, адзін жоўты маркер
- Midday — Рэдакцыйная брашура на пергаменце - загаловак з засечкамі 72px на фоне цёплага каменнага фону, асноўны тэкст без засечак з інтэрвалам, элементы кіравання ў форме таблетак, адсутнасць ценяў
- Chat for impact — Клініка лясной зеляніны з пакоямі пастэльных тонаў
- Handhold — Цёплы пергамент пад ледзь чутнымі засечкамі - рэдакцыйны разварот, набраны ўручную без храматычных шумоў, дзе найтонкі шрыфт з засечкамі таўшчынёй 200 перадае ўвесь голас