Substack
аранжавыя чарнілы на стале ў рэдакцыі
Substack выглядае як ладна зношаная панэль кіравання навіннай рэдакцыі - белае палатно, цёплы, амаль чорны тэкст і адзін яркі аранжавы акцэнт, які адзначае кожны этап стварэння кантэнту. Візуальная іерархія пабудавана на шчыльнасці, а не на дэкоры: тонкія шэрыя лініі падзяляюць элементы стужкі, аватары маленькія, метададзеныя прыглушаны, а погляд чытача прывучаны да аранжавага закліку да дзеяння, аранжавага лагатыпа, аранжавай спасылцы «Падпісацца», аранжавай кнопкі. Паверхні застаюцца плоскімі і неабмежаванымі - ніякіх ценяў ад картак, ніякіх храмаваных элементаў панэляў - дазваляючы друкарцы (кампактны храмаваны элемент сістэмнага інтэрфейсу ў спалучэнні з карыстацкім шрыфтам загалоўкаў з засечкамі) несці на сабе асноўную рэдакцыйную нагрузку. Фірмовы стыль - стрыманасць у храмаваных элементах і яркасць у адным колеры: дадатак для чытання, якое выглядае як інструмент для публікацыі.
Трохкалонкавая кампаноўка для настольных кампутараў: фіксаваная левая бакавая панэль (~200px, рух з абразкамі і пазнакамі, замацаваная), цэнтральная стужка (максімальная шырыня ~600px, спіс пастоў з вертыкальнай пракруткай), фіксаваная правая бакавая панэль (~300px. Цэнтральная стужка - гэта рэдакцыйнае ядро - ніякіх картак, толькі пасты, размешчаныя адзін над адным з тонкімі падзельнікамі і прамежкамі паміж раздзеламі 32px. Галоўны банэр размешчаны ўверсе стужкі ў выглядзе адной карткі ва ўсю шырыню. Левая бакавая панэль змяшчае лагатып брэнда (аранжавы знак з накладзенымі лініямі), шэсць пунктаў навігацыі і аранжавую кнопку "Стварыць" ва ўсю шырыню ўнізе. Правая бакавая панэль змяшчае поле пошуку, картку рэгістрацыі і спіс "Далей" для чытання. Навігацыя мінімальная няма верхняй панэлі, няма хлебных дробак; бакавая панэль І ЁСЦЬ рух. Шчыльнасць кантэнту высокая: у пастах выкарыстоўваюцца метададзеныя 12-13px і асноўны тэкст 15-19px, што стварае рытм газетнай стужкі, а не адчуванне картачнай сеткі маркетплэйса.
Фатаграфіі - гэта кантэнт, створаны карыстальнікамі (аватары аўтараў, мініяцюры публікацый, малюнкі пастоў) - Substack не падае ўласных дэкаратыўных фатаграфій. У галоўнай картцы выкарыстоўваецца градыент ад бірузовага да зялёнага колеру з абстрактнымі ілюстрацыйнымі элементамі (геаметрычныя фігуры, стылізаваныя аб'екты ў выглядзе ручкі/нататкі) у якасці фону. Мініяцюры пастоў у правай бакавой панэлі невялікія (64px), складзеныя ў радыус 8px і функцыянуюць як папярэдні прагляд спісу для чытання. Агульная візуальная мова - тэкставы: інтэрфейс уяўляе сабой палатно для чытання, а выявы служаць невялікімі візуальнымі якарамі, а не ствараюць атмасферу.
Палітра
Брэнд
- Signal Orange
#ff6719— Аранжавы колер выкарыстоўваецца ў якасці дапаможнага акцэнту для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых сігналах. Не варта вылучаць яго як асноўны колер закліку да дзеяння.
Нейтральныя
- Ink
#363737— Асноўны тэкст - асноўны тэкст, загалоўкі, назвы пастоў, часовыя пазнакі, імёны аўтараў; цёплы, амаль чорны колер замест чыстага #000 для больш камфортнага чытання. - Paper
#ffffff— Палатно старонкі, паверхні картак, палі ўводу, фон навігацыі - дамінантная паверхня, якая займае пераважную частку інтэрфейсу. - Charcoal
#232525— Стан пры навядзенні курсора на дадатковы тэкст і спасылкі з высокім узроўнем выдзялення; глыбейшае, чым у рэжыме Ink, для блокаў кода і блокаў вылучэння. - Stone
#777777— Падтрымліваецца нейтральны колер для другарадных элементаў карыстацкага інтэрфейсу, падзельнікаў і прыглушаных подпісаў. Не варта прызначаць яго асноўным колерам для заклікаў да дзеяння. - Ash
#b6b6b6— Тонкія лініі межаў, контуры кнопак, абводка значкоў, межы адключаных элементаў кіравання. - Mist
#c8c8c8— Раздзяляльныя лініі, ненадакучлівы фон для значкоў, запаўненне пустых ячэек у выглядзе шкілета.
Друкарня
ад 12 да 32px · 5 прыступак
- system-ui — замена: -apple-system · напісання 400, 500, 600 · Асноўны шрыфт для карыстацкага інтэрфейсу і асноўнага тэксту - выкарыстоўваецца для пазнак навігацыі, кнопак, тэксту паведамленняў, метададзеных, палёў уводу і ўсіх элементаў інтэрфейсу. Кампактныя памеры 12-13px для метададзеных і 15-19px для асноўнага тэксту ствараюць адчуванне шчыльнай стужкі навін. Таўшчыня 400 для асноўнага тэксту, 500 для элементаў навігацыі і пазнак кнопак, 600 для вылучаных загалоўкаў паведамленняў і загалоўкаў раздзелаў.
- Cahuenga — замена: Charter · напісання 500 · Фірмовы дэкаратыўны шрыфт з засечкамі для загалоўкаў на ўзроўні прадукта (загалоўкі бакавой панэлі, загалоўкі рэгістрацыйнай карткі, галоўны тэкст). Сярэдняя таўшчыня і невялікая міжрадковы перапад надаюць яму прадстаўнічы выгляд, не ствараючы адчуванні грувасткасці; гэта адзіны шрыфт, які, апроч аранжавага колеру, сігналізуе аб тым, што гэта Substack.
- Spectral — замена: Charter · напісання 400 · Шрыфт з засечкамі для доўгіх пастоў - выкарыстоўваецца ў чытацкіх залах і ў кантэнце стужкі для павышэння удобочитаемости рэдакцыйных матэрыялаў. Трохі малодшая міжрадковая інтэрвал (1,20) забяспечвае камфортнае чытанне абзацаў, захоўваючы пры гэтым кампактнасць, характэрную для навінавых рэдакцый.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 8px |
| Радыус кнопак | 9999px |
| Радыус картак | 12px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 32px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Substack і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- ElevenLabs — Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- Dub — матавая панэль кіравання Link на рысавай паперы
- Seline Analytics — Ціхі аналітычны стол на цёплай паперы
- Notion — Цёплы папяровы блакнот пад паўдзённым сонцам
- Anthropic — Навуковы палявы часопіс на цёплым пергаменце - спакойныя паверхні колеру слановай косткі, рэдакцыйныя загалоўкі з засечкамі і адзіны гліняны акцэнт, які з'яўляецца толькі тады, калі трэба дзейнічаць
- Calendly — Цёмна-сінія чарнілы на халодным мармуры
- Augen Pro — Прэзентацыя Apple на белым фоне - клінічны, бязважкі, электрычны сіні як адзіны акцэнт у манахромнай прасторы
- Antimetal — Рэдакцыйная хроніка на крэмавай паперы - ціхая раніца ў навуковым часопісе, дзе стрыманасць сведчыць аб упэўненасці, а засечкі выконваюць асноўную працу
- Perk — Электрычны лайм на цёплай пергаментнай паперы
- Ditto — Залітая сонцам майстэрня па стварэнні ўзораў палявых кветак. Цёплыя крэмавыя паверхні, яркі жоўты асноўны колер, глыбокія цёмна-сінія чарнілы, арганічныя каляровыя формы, якія квітнеюць за вырабам.