Calendly
Цёмна-сінія чарнілы на халодным мармуры
Calendly успрымаецца як спакойная, упэўненая працоўная прастора для планавання: амаль белае палатно з вялікай прасторай для дыхання, выразныя белыя карткі тавараў, парылых на прахалодным шэрым фоне, і ўся друкарня, выкананая цёмна-сінімі чарніламі, а не чыста чорнымі. Вызначальным элементам з'яўляецца цёмна-сіні колер (#0b3558), які выкарыстоўваецца ўсюды, дзе з'яўляецца тэкст - загалоўкі, кнопкі, значкі, спасылкі - што змякчае ўвесь інтэрфейс, робячы яго цяплейшым і стыльным, чым тыповая мэтавая старонка SaaS-сэрвісу. Адзін яркі сіні колер (#006bff) выкарыстоўваецца для ўсіх асноўных дзеянняў, а дэкаратыўныя ружовыя і блакітныя плямы, якія выходзяць за макеты тавараў, дадаюць цяпла, не ствараючы бязладзіцы. Кампаненты застаюцца стрыманымі: тонкія межы 1px, ледзь прыкметныя цені з сінім адценнем, вялікія радыусы картак 24px і куты кнопак 8px, якія выглядаюць прадуманымі, а не мяккімі.
Максімальная шырыня 1200px, цэнтраванне, шырокія вонкавыя палі на настольных кампутарах. Галоўны экран падзелены на дзве калонкі: левая калонка змяшчае загаловак 80px + асноўны тэкст + размешчаныя адзін над адным кнопкі ўваходу, правая калонка змяшчае картку фішкі браніравання, на фоне якой знаходзяцца дэкаратыўныя элементы. Пад галоўным экранам размешчана паласа з лагатыпам Trust у выглядзе адзінай паласы ва ўсю шырыню. Наступныя раздзелы чаргуюцца паміж цэнтраванымі блокамі загалоўка (H2 + падтэкст + неабавязковы заклік да дзеяння), за якімі ідуць двухкалонкавыя блокі з апісаннем функцый (тэкст злева/тавар справа або тавар злева/тэкст справа) з дэкаратыўнымі акцэнтнымі элементамі за кожнай выявай тавара. Картачныя сеткі сустракаюцца рэдка - у макеце перавага аддаецца парным часткам, размешчаным побач, а не шматкалонкавым сеткам. Адлегласць паміж раздзеламі складае 48-64px. Навігацыя ўяўляе сабой 64px фіксаваную верхнюю панэль з лагатыпам злева, цэнтраваным меню і групай заклікаў да дзеяння справа.
Асноўным візуальным элементам з'яўляюцца скрыншоты прадукта - лаканічныя макеты карыстацкага інтэрфейсу календара браніравання, выкананыя на беласнежных картках з шырокімі закругленымі кутамі. Дэкаратыўнае афармленне: кожная картка прадукта акружаная мяккай плямай каралава-пурпурнога (#e55cff) або нябесна-блакітнага (#0099ff) колеры, злёгку зрушаным і размытым, што стварае эфект калажу, а не плоскі скрыншот. Ніякіх фатаграфій, ніякіх малюнкаў у стылі лайфстайл - усе візуальныя элементы ўяўляюць сабой карыстацкі інтэрфейс прадукта, абстрактныя акцэнтныя формы або манахромныя лагатыпы партнёраў на паласе даверу. Абразкі выкананы ў лінейным стылі з таўшчынёй лініі 1,5-2px, манахромныя, у цёмна-сінім колеры (Ink Navy) або сінім (Signal Blue).
Палітра
Брэнд
- Ink Navy
#0b3558— Асноўны тэкст, загалоўкі, абразкі, цёмны фон для заклікаў да дзеяння, навігацыйныя спасылкі. - Signal Blue
#006bff— Асноўны заклік да дзеяння (CTA), актыўная рух, акцэнты для спасылак, выбраныя штаты
Нейтральныя
- Carbon
#0a0a0a— Тэкст у чыста чорным колеры (рэзервовы варыянт), гліф лагатыпа, заліванне абразком. - Slate Gray
#476788— Дадатковы асноўны тэкст, дапаможны тэкст, прыглушаныя пазнакі. - Mist Gray
#a6bbd1— Адключаны тэкст, неактыўныя пазнакі функцый, светлыя абводкі значкоў - Cloud
#f8f9fb— Палатно старонкі, фон ніжняга калантытула, дадатковая паверхня - Paper
#ffffff— Картачныя паверхні, якія выступаюць панэлі, тэкст кнопак на цёмным фоне. - Pebble
#f0f3f8— Фонавыя выявы для значкоў, заліванне палёў уводу, ледзь прыкметныя падзельнікі, эфекты пры навядзенні курсора.
Друкарня
ад 12 да 80px · 10 прыступак
- Gilroy — замена: Manrope · напісання 400, 500, 600, 700 · Увесь тэкст інтэрфейсу. Gilroy - гэта геаметрычны гуманістычны шрыфт без засечак з шырокімі апертурамі і раўнамерным кантрастам рысак; яго тоўстыя напісанні (700) выкарыстоўваюцца для загалоўкаў, а 500-600 - для кнопак і падзагалоўкаў. Заменіце на Manrope ці Inter.
- Gilroy — замена: Inter · напісання 400 · Асноўны тэкст і ўніверсальныя пазнакі карыстацкага інтэрфейсу - шрыфт таўшчынёй 400 забяспечвае чытальнасць доўгіх тэкстаў, не ствараючы адчуванні цяжару.
- Gilroy — замена: Inter · напісання 500 · Другарадныя загалоўкі і вылучаны асноўны тэкст - шрыфт 14/500 з'яўляецца асноўнай прыладай для загалоўкаў картак і ўбудаваных метак.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 8-16px |
| Радыус кнопак | 8px |
| Радыус картак | 24px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 48-64px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Calendly і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- ElevenLabs — Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- Dub — матавая панэль кіравання Link на рысавай паперы
- Seline Analytics — Ціхі аналітычны стол на цёплай паперы
- Notion — Цёплы папяровы блакнот пад паўдзённым сонцам
- Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
- Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
- Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
- Perk — Электрычны лайм на цёплай пергаментнай паперы
- Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.
- Officevibe — Рэдакцыйны часопіс на паперы цёплага крэмавага колеру. Уявіце сабе ўдумлівае эсэ па кіраванні персаналам, аформленае ў выглядзе прадукта - курсіўны шрыфт з засечкамі, нібы шэпчучы скрозь сучасны сіні інтэрфейс