Тэлеграм, WhatsApp  +380637610482
Валерый Данюк
Валерый ДанюкраспрацоўшчыкРаспрацоўка ІІ-інструментаў для бізнесу. Якасна. Нядорага.Напісаць у Telegram
ElevenLabs - папярэдні прагляд сайта ў гэтым стылі

ElevenLabs

Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту

ElevenLabs працуе ў стылі цёплага белага мінімалізму: палатно колеру яечнай шкарлупіны (#fdfcfc) з чорным шрыфтам і адным пластом цёплых шэра-карычневых паверхняў (#f5f3f1). Фірмовы стыль ціхі і ўпэўнены ледзь адрозны шрыфт Waldenburg 300 з лімітавай выразнасцю вылучае загалоўкі (-0.02em), у то час як Inter 400/500 надае ўсяму астатняму спакойную нейтральнасць. Два акцэнтныя колеры - яркі фіялетавы #0447ff і яркі аранжавы #ff4704 - успыхваюць толькі ўнутры візуальных элементаў прадукта (аўдыёсферы, абразкі прадукта), ніколі не ў якасці хрому ў карыстацкім інтэрфейсе. Кампаненты застаюцца плоскімі ці злёгку прыпаднятымі з тонкімі 1px рамкамі, шырокімі 20px радыусамі на картках і цалкам запоўненымі 9999px кнопкамі. Сістэма нагадвае студыю Баўхаўса на крэмавай паперы: стрыманая, рэдакцыйная і тэхнічна дакладная.

Часткі ва ўсю шырыню размешчаны вертыкальна ў адной цэнтральнай калонцы максімальнай шырыні з вонкавымі прамежкамі шырынёй 1280px. Галоўны раздзел асіметрычны: загаловак выраўнаваны па левым краі на ўзроўні 48px Вальдэнбург, апісанне тэксту выраўнавана па правым краі, пад загалоўкам размешчаны дзве кнопкі-«таблеткі». Пад галоўнай часткай знаходзіцца вялікая панэль з укладкамі для навігацыі, якая займае ўсю шырыню кантэнту. Часткі чаргуюцца паміж фонамі колеру яечнай шкарлупіны і шэра-карычневага колеру з вертыкальнымі прамежкамі шырынёй 96-125px. Ніжні калантытул ўяўляе сабой кампактную адзіную паласу. Навігацыя - мінімалістычная верхняя панэль - без фіксаваных паводзін, без мега-меню. Рытм кантэнту адпавядае рэдакцыйнаму стылю: шмат вольнай прасторы, адзін асноўны візуальны элемент на частку, няма картачных сетак пад часткай «Давер».

Візуальнае афармленне дамінуе ў каляровай гаме: буйныя градыенты ў выглядзе мяккіх аўдыёсферы (кругі 200px+ з радыяльнымі пераходамі ад фіялетавага да аранжавага і ружовага) служаць галоўным графічным элементам. Лагатыпы ў раздзеле «Давер» прадстаўлены ў нізкакантраснай гаме шэрага на фоне матавага палатна. Фатаздымка мінімальная - адсутнічаюць фатаграфіі ў стылі лайфстайл і прадметнай фатаграфіі. Іканаграфія бедная і манахромная (чорныя контурныя або зафарбаваныя абразкі, няма храматычных абразкоў). Візуальная сістэма больш нагадвае дызайнерскае выданне, чым каталог прадукцыі - стрыманасць рэдакцыі пераважае над маркетынгавым эфектам.

Палітра

Брэнд

  • Violet Spark #0447ff — Візуальны акцэнт прадукта - адлюстроўваецца толькі ўсярэдзіне ілюстрацый аўдыёсферы і дэкаратыўных значкоў прадукта; ніколі не выкарыстоўваецца для элементаў інтэрфейсу.

Нейтральныя

  • Eggshell #fdfcfc — Палатно старонкі, паверхні кнопак, паверхні картак - цёплы, злёгку крэмавы, а не стэрыльна-белы колер дазваляе пазбегнуць лічбавых блікаў і надае сайту спакой, уласцівае паперы.
  • Warm Taupe #f5f3f1 — Падзяляльныя палосы, дэкаратыўныя карткі і дадатковы ўзровень паверхні - на адзін крок глыбей, чым матавая паверхня, ствараюць ціхі падзел без меж.
  • Stone #ebe8e4 — Тонкія межы, падзельнікі, фоны для абразкоў - цёплы шэры колер, які знаходзіцца паміж шэра-карычневым і сярэдне-шэрым, але не стварае адчування холаду.
  • Ink #000000 — Асноўны тэкст, запоўненыя кнопкі, рух, спасылкі - чысты чорны колер служыць асновай для цёплай каляровай палітры і стварае адзіны рэзкі кантраст у сістэме.
  • Graphite #44403b — Асноўны тэкст, загалоўкі раздзелаў - ледзь прыкметны цёплы цёмна-шэры колер для тэксту, якому трэба надаць выразнасць, але без рэзкасці чорнага колеру.
  • Smoke #777169 — Асноўны тэкст, някідкія апісанні, подпісы - сярэдне-цёплы шэры; дамінуючы, чытэльны, але спакойны стыль афармлення картак і тэматычных тэкстаў.

Друкарня

ад 10 да 48px · 8 прыступак

  • Waldenburg — замена: Inter (300) or Söhne Light · напісання 300 · Толькі для загалоўкаў і элементаў афармлення. Выкарыстоўваецца ў фармаце 48/36/32px з таўшчынёй шрыфта 300 - звышлёгкі шрыфт з'яўляецца нетрадыцыйным; большасць сайтаў выкарыстоўваюць 600-700, гэты ледзь прыкметны шрыфт стварае аўтарытэт за рахунак стрыманасці. Шчыльны міжлітарны інтэрвал -0.02em збліжае літары пры вялікіх памерах. Замена: "Inter" таўшчынёй 300 або "Söhne" лёгкай таўшчыні ў якасці прэміяльнай альтэрнатывы.
  • Inter — замена: Inter or system-ui · напісання 400, 500 · Усё, што знаходзіцца за межамі экрана: асноўны тэкст, рух, кнопкі, спасылкі, подпісы, палі ўводу, карткі. Вага 400 - значэнне па змаўчанні; вага 500 зарэзерваваны для кнопак і выдзеленых спасылак. Памеры вар'іруюцца ад 10 да 10 з паменшаным міжрадковым інтэрвалам (1,47-1,6), што дае абзацам прастору для дыхання. Невялікая міжлітарная адлегласць 1 (2) пры памерах ад 14 да 3 павялічвае чытальнасць пры малых памерах.
  • Geist Mono — замена: JetBrains Mono or IBM Plex Mono · напісання 400 · Мікратэкст, размешчаны побач з кодам або тэхнічны, у пазіцыі 13px - выкарыстоўваецца рэдка (частата = 28) для тэхнічных метак або метададзеных. Адзін пласт, вялікая вышыня радка 1,69.

Інтэрвалы і форма

ПрызначэннеЗначэнне
Шчыльнасцьшчыльная
Базавы крок8-16px
Радыус кнопак9999px
Радыус картак20px
Ценіне - межы замест ценяў
Паміж секцыямі96-125px
Шырыня старонкі1280px

ІІ збярэ ваш сайт у стылі ElevenLabs і напоўніць яго

  • Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
  • Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
  • Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
  • Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.

Падобныя стылі

  • Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
  • Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
  • Dub — матавая панэль кіравання Link на рысавай паперы
  • Seline Analytics — Ціхі аналітычны стол на цёплай паперы
  • Notion — Цёплы папяровы блакнот пад паўдзённым сонцам
  • Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
  • Calendly — Цёмна-сінія чарнілы на халодным мармуры
  • Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
  • Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
  • Perk — Электрычны лайм на цёплай пергаментнай паперы
  • Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.
  • Officevibe — Рэдакцыйны часопіс на паперы цёплага крэмавага колеру. Уявіце сабе ўдумлівае эсэ па кіраванні персаналам, аформленае ў выглядзе прадукта - курсіўны шрыфт з засечкамі, нібы шэпчучы скрозь сучасны сіні інтэрфейс