Substack
портокалово мастило на бирото во редакцијата
Substack изгледа како добро истрошена контролна табла за редакција - бело платно, топол, речиси црн текст и еден светло портокалов акцент што ја означува секоја фаза од креирањето содржина. Визуелната хиерархија е изградена врз густина, а не врз декорација: тенки сиви линии ги одделуваат елементите на фидот, аватарите се мали, метаподатоците се пригушени, а окото на читателот е тренирано да се фокусира на портокаловиот повик за акција, портокаловото лого, портокаловата врска „Претплати се“ и портокаловото копче „Креирај“. Површините се одржуваат рамни и неограничени - без сенки на картички, без елементи на хром панелот - дозволувајќи типографијата (компактен елемент на корисничкиот интерфејс на системот Chrome поврзан со прилагоден фонт за наслови serif) да го носи товарот на уредничката тежина. Стилот на потпис се ограничени елементи на хром и живописни, еднобојни акценти: апликација за читање што се чувствува како алатка за објавување.
Распоред на работна површина со три колони: фиксна лева странична лента (~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 — Сончева работилница за создавање примероци од диви цвеќиња. Топли кремасти површини, жива жолта основна боја, темно сини мастила, органски форми на бои што цветаат зад делото.