
Substack
оранжево мастило на бюрото в редакцията
Substack изглежда като износено табло за управление в редакцията – бяло платно, топъл, почти черен текст и един ярък оранжев акцент, маркиращ всеки етап от създаването на съдържанието. Визуалната йерархия е изградена върху плътност, а не върху декорация: тънки сиви линии разделят елементите на емисията, аватарите са малки, метаданните са приглушени, а окото на читателя е обучено да се фокусира върху оранжевия призив за действие, оранжевото лого, оранжевата връзка „Абониране“ и оранжевия бутон „Създаване“. Повърхностите са плоски и неограничени – без сенки на карти, без хромирани панелни елементи – позволявайки на типографията (компактен хромиран системен потребителски елемент, съчетан с персонализиран шрифт за заглавия със сериф) да носи основната тежест на редакционната тежест. Отличителният стил е сдържани хромирани елементи и ярки, едноцветни акценти: приложение за четене, което се усеща като инструмент за публикуване.
Триколонна структура за десктоп: фиксирана лява странична лента (~200px, навигация с икони и етикети, лепкава), централна емисия (максимална ширина ~600px, вертикално превъртащ се списък с публикации) и фиксирана дясна странична лента (~300px, търсене + препоръки + регистрация). Централната емисия е редакционното ядро - без карти, само публикации, подредени една върху друга с тънки разделители и 32px интервали между секциите. Основният банер се намира в горната част на емисията като една карта с пълна ширина. Лявата странична лента съдържа логото на марката (оранжев знак с наслагвани линии), шест навигационни елемента и оранжев бутон „Създаване“ с пълна ширина в долната част. Дясната странична лента съдържа поле за търсене, карта за регистрация и списък „Следва“ за четене. Навигацията е минимална - няма горна лента, няма навигационни трохи; страничната лента Е навигацията. Плътността на съдържанието е висока: публикациите използват 12-13px метаданни и 15-19px текст, създавайки ритъм, подобен на вестник, а не усещането за мрежа от карти на пазар.
Снимките са генерирано от потребителите съдържание (аватари на автори, миниатюри на публикации, изображения на публикации) – Substack не предоставя свои собствени декоративни снимки. Основната карта използва тюркоазен до зелен градиент с абстрактни илюстративни елементи (геометрични форми, стилизирани обекти като химикалки и бележки) като фон. Миниатюрите на публикациите в дясната странична лента са малки (64px), оградени в радиус от 8px и функционират като предварителен преглед на списъка за четене. Цялостният визуален език е базиран на текст: интерфейсът е платно за четене, а изображенията служат като малки визуални котви, вместо да създават атмосфера.
Палитра
Марка
- Signal Orange
#ff6719— Оранжевото се използва като вторичен акцент за декоративни детайли и за подчертаване на рядко срещани сигнали. Не трябва да се използва като основен цвят за призиви за действие.
Неутрален
- Ink
#363737— Основен текст – основният текст, заглавията, заглавията на публикациите, времевите отметки и имената на авторите; топъл, почти черен цвят вместо чист #000 за по-лесно четене. - Paper
#ffffff— Платното на страницата, повърхностите на картите, полетата за въвеждане и фонът на навигацията са доминиращите повърхности, които заемат по-голямата част от интерфейса. - Charcoal
#232525— Състояние на задържане на курсора за допълнителен текст и връзки с високи нива на селекция; по-дълбоко от режим „Ръкопис“ за блокове с код и блокове за селекция. - 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 — Слънчева работилница, в която се създават мостри от диви цветя. Топли кремави повърхности, ярък жълт основен цвят, наситено тъмносини мастила, органични цветови форми, разцъфтяващи зад произведението.