Seline Analytics
Ціхі аналітычны стол на цёплай паперы
Seline размешчаны на цёплым каменным фоне (#fafaf9) з адзіным яркім блакітным акцэнтам усе астатнія колеры нейтральныя і ўзятыя з шкалы адценняў каменя Tailwind. Загалоўкі выкананы з выкарыстаннем спецыяльна распрацаванага геаметрычнага шрыфта без засечак (roobert) таўшчынёй 400 з вузкай адмоўнай міжлітарнай адлегласцю, што надае тэксту марудлівую, амаль шэптовую ўпэўненасць, якая кантрастуе са звычайным крычаць стылем SaaS. Паверхні карыстацкага інтэрфейсу ўяўляюць сабой плоскія белыя карткі, якія лунаюць над цёплым фонам дзякуючы адной мяккай цені 16px-размыцця; межы выкананы тонкімі лініямі 1px-каменнага адцення, шчодра выкарыстоўванымі ў якасці асноўнага структурнага элемента замест цяжкіх падзельнікаў ці панэляў. Макет дыхае: кантэнт максімальнай шырыні, цэнтраваны на шчодрым вертыкальным рытме, з інтэрактыўнымі элементамі кіравання ў форме таблетак, ілюстрацыяй талісмана для надання індывідуальнасці і скрыншотамі панэлі дадзеных у якасці доказу прадукта. Агульнае ўражанне - гэта рэдакцыйная аналітыка: спакойная, манахромная, упэўненая, дзе сіні заклік да дзеяння з'яўляецца самым яркім элементам на старонцы дзякуючы наўмыснай стрыманасці ўсяго астатняга.
Старонка мае максімальную шырыню, цэнтраваная прыкладна на 1200px з вялікай вертыкальнай прасторай. Герой уяўляе сабой двухрадковы тэкставы блок, выраўнаваны па левым краі, з адной вылучанай фразай («просты і дзейсны») блакітнага колеру, за якой варта радок з двума заклікамі да дзеяння (блакітная таблетка + прывідная таблетка), затым радок лагатыпаў партнёраў у адценнях шэрага, затым радок рэйтынгу даверу, затым радок рэйтынгу даверу перакрывае наступны раздзел. Ніжэй лініі згіну: якія чаргуюцца радкі водгукаў у аднакалонкавай сетцы, затым поўнаэкранныя часткі з апісаннем функцый, тэкстам, выраўнаваным па левым краі, і цэнтраванымі візуальнымі элементамі прадукта. Навігацыя ўяўляе сабой мінімалістычную верхнюю панэль - лагатып злева, цэнтраваныя спасылкі навігацыі, уваход у сістэму + блакітны заклік да дзеяння справа - з плывучым кластарам аватараў у сярэдзіне навігацыі ў якасці пацверджання асобы. Прамежкі паміж раздзеламі шырокія (96px), каб стварыць рэдакцыйны рытм, а не шчыльнае нагрувашчванне інфармацыі.
Візуальны мова дамінуюць скрыншоты карыстацкага інтэрфейсу прадукта - папярэдні прагляд панэлі кіравання выкананы ў выглядзе фатаграфіі, адмаляванай з выкарыстаннем фільтра кантрасту адценняў шэрага (1) (0,94), які прыглушае колеры дадзеных да манахромнага адцення. Адзіная чалавечая фігура - гэта лінейны стыкер-талісман (персанаж у капюшоне), намаляваны ў стылі SVG толькі з контурамі, размешчаны адзін раз у кожным раздзеле ў якасці гуллівага процівагі аналітычнаму кантэнту, з мяккім ценем для стварэння эфекту глыбіні, як у стыкера. Лагатып і гліфы брэнда ўяўляюць сабой невялікія чорныя іскры / палымяныя знакі. Фатаграфіі адсутнічаюць - няма здымкаў у стылі лайфстайл, няма камандных фатаграфій, няма малюнкаў навакольнага асяроддзя. Аб'ект (панэль кіравання) - галоўны герой. Усе дэкаратыўныя значкі выкананы ў стылі контуру 1px альбо ў #0c0a09, альбо ў #3ba6f1, ніколі не запаўняюцца.
Палітра
Брэнд
- Cyan Signal
#3ba6f1— Асноўны заклік да дзеяння, актыўныя спасылкі, абводка абразкоў брэнда - адзіны каляровы акцэнт на старонцы, які выкарыстоўваецца эканомна, каб прыцягнуць увагу да дзеяння. - Cyan Edge
#3398e1— Сіні колер выкарыстоўваецца для вылучэння контураў дзеянняў, подпісаў да спасылак і інтэрактыўных элементаў. Не варта выкарыстоўваць яго ў якасці асноўнага колеру для заклікаў да дзеяння.
Нейтральныя
- Ink Black
#0c0a09— Асноўныя загалоўкі, выдзелены асноўны тэкст, выразныя абразкі - амаль чорны колер з цёплым адценнем. - Stone Canvas
#fafaf9— Фон старонкі — цёплае, крэмавае адценне, якое ўспрымаецца як папера, а не як белы колер экрана. - Pure White
#ffffff— Паверхні карт, якія выступаюць панэлі, заліванне палёў уводу - па змаўчанні плоскія і без ценяў. - Stone Border
#e8e6e5— Тонкія межы на картках, у навігацыі і палях уводу - гэта асноўны структурны элемент, а не падзельнікі. - Stone Muted
#d6d3d1— Дадатковыя рамкі, ледзь прыкметныя адценні фону, дэкаратыўныя падзельнікі. - Ash Gray
#a8a29e— Дапаможны тэкст, абводка абразкоў, адключаныя станы - чытэльны, але неактыўны.
Друкарня
ад 10 да 52px · 5 прыступак
- Roobert — замена: Inter Tight or Satoshi · напісання 400, 500 · Шрыфт для загалоўкаў і афармленні тэксту - унікальны геаметрычны шрыфт без засечак з мінімальнай адмоўнай міжлітарнай адлегласцю (-0.025em на 32px, -0.021em на 52px). Напісанне 400 на 52px - візітная картка шрыфта: нетрадыцыйны, ледзь улоўны, але аўтарытэтны, але пры гэтым стрыманы. Загалоўкі займаюць сваё месца, не крычучы.
- Inter — замена: Inter · напісання 400, 500, 600 · Асноўны шрыфт для тэксту, навігацыі, карыстацкага інтэрфейсу і загалоўкаў - нейтральны ўніверсальны шрыфт для ўсяго неэкраннага тэксту. 14px з таўшчынёй 400 і міжрадковым інтэрвалам 1,64 з'яўляецца пераважным памерам для асноўнага тэксту (частата 1174). Станоўчае міжлітарнае адлегласць (0.004em) пры малых памерах забяспечвае чытальнасць шчыльнага карыстацкага інтэрфейсу.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | прасторная |
| Базавы крок | 8px |
| Радыус кнопак | 9999px |
| Радыус картак | 10px |
| Цені | мяккія цені |
| Паміж секцыямі | 96px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Seline Analytics і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- ElevenLabs — Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- Dub — матавая панэль кіравання Link на рысавай паперы
- Notion — Цёплы папяровы блакнот пад паўдзённым сонцам
- Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
- Calendly — Цёмна-сінія чарнілы на халодным мармуры
- Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
- Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
- Perk — Электрычны лайм на цёплай пергаментнай паперы
- Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.
- Officevibe — Рэдакцыйны часопіс на паперы цёплага крэмавага колеру. Уявіце сабе ўдумлівае эсэ па кіраванні персаналам, аформленае ў выглядзе прадукта - курсіўны шрыфт з засечкамі, нібы шэпчучы скрозь сучасны сіні інтэрфейс