Телеграм, WhatsApp+380637610482
Валерий Данюк
Валерий ДанюкхөгжүүлэгчБизнест зориулсан хиймэл оюун ухааны хэрэгслүүдийг хөгжүүлэх. Өндөр чанартай. Боломжийн үнэтэй.Telegram руу бичих
Substack — энэ хэв маягтай сайтын урьдчилсан харагдац

Substack

редакцийн өрөөний ширээн дээрх улбар шар бэх

Substack нь хуучирсан мэдээний өрөөний хяналтын самбар шиг харагддаг - цагаан даавуу, дулаахан, бараг хар текст, контент бүтээх үе шат бүрийг тэмдэглэсэн ганц тод улбар шар өнгийн өргөлт. Харааны шатлал нь чимэглэл гэхээсээ илүү нягтрал дээр суурилдаг: нимгэн саарал шугамууд нь тэжээлийн элементүүдийг тусгаарладаг, аватарууд нь жижиг, мета өгөгдөл нь бүдэг, уншигчийн нүдийг улбар шар уриалга, улбар шар лого, улбар шар "Захиалга" холбоос, улбар шар "Үүсгэх" товчлуур дээр анхаарлаа төвлөрүүлэхэд сургасан. Гадаргууг хавтгай, хязгаарлалтгүй байлгадаг - картын сүүдэргүй, хром самбарын элементүүдгүй - хэвлэмэл хэв маяг (өөрчлөн тохируулсан serif гарчгийн фонттой хосолсон авсаархан хром системийн UI элемент) нь редакцийн жингийн гол ачааллыг авч явах боломжийг олгодог. Тэмдэглэгээний хэв маяг нь хязгаарлагдмал хром элементүүд болон тод, нэг өнгийн попууд юм: нийтлэх хэрэгсэл шиг санагддаг унших апп.

Гурван баганатай ширээний зохион байгуулалт: тогтмол зүүн хажуугийн самбар (~200px, дүрс болон шошготой навигаци, наалттай), төвийн тэжээл (хамгийн их өргөн ~600px, бичлэгийн босоо гүйлгэх жагсаалт) болон тогтмол баруун хажуугийн самбар (~300px, хайлт + зөвлөмж + бүртгэл). Төвийн тэжээл нь редакцийн гол цөм юм - карт байхгүй, зөвхөн нимгэн хуваагчтай, хэсгүүдийн хооронд 32px зайтай бичлэгүүдийг давхарлан байрлуулсан. Үндсэн баннер нь тэжээлийн дээд хэсэгт нэг бүтэн өргөнтэй карт хэлбэрээр байрладаг. Зүүн хажуугийн самбарт брэндийн лого (давхардсан шугамтай улбар шар тэмдэг), зургаан навигацийн зүйл, доод хэсэгт бүтэн өргөнтэй улбар шар "Үүсгэх" товчлуур багтсан болно. Баруун хажуугийн самбарт хайлтын талбар, бүртгэлийн карт, унших "Дараагийнх" жагсаалт багтсан болно. Навигаци нь хамгийн бага - дээд самбар байхгүй, талхны үйрмэг байхгүй; хажуугийн самбар нь навигаци юм. Агуулгын нягтрал өндөр: бичлэгүүд нь 12-13px мета өгөгдөл болон 15-19px үндсэн текстийг ашигладаг бөгөөд энэ нь зах зээлийн картын торны мэдрэмжийн оронд сонин шиг хэмнэлийг бий болгодог.

Зураг нь хэрэглэгчийн үүсгэсэн контент (зохиогчийн аватар, нийтлэлийн жижиг зураг, нийтлэлийн зураг) юм. Substack нь өөрийн гэсэн гоёл чимэглэлийн зургуудыг өгдөггүй. Үндсэн карт нь оюу ногоон өнгөнөөс ногоон өнгийг ашиглан хийсвэр чимэглэлийн элементүүд (геометрийн дүрс, үзэг, тэмдэглэл гэх мэт хэв маягийн объектууд)-ийг дэвсгэр болгон ашигладаг. Баруун талын самбар дээрх нийтлэлийн жижиг зураг нь жижиг (64 пиксел) бөгөөд 8 пикселийн радиус дотор байрладаг бөгөөд унших жагсаалтын урьдчилсан харагдац болж үйлчилдэг. Ерөнхийдөө харааны хэл нь текст дээр суурилсан: интерфэйс нь унших зураг бөгөөд зургууд нь уур амьсгалыг бий болгохын оронд жижиг харааны зангуу болж үйлчилдэг.

Палетт

Брэнд

  • Signal Orange #ff6719 — Улбар шар өнгийг гоёл чимэглэлийн нарийн ширийн зүйлсийн хоёрдогч өргөлт болон ховор тохиолддог дохиог тодруулахад ашигладаг. Үүнийг үйлдэлд уриалахад үндсэн өнгө болгон ашиглаж болохгүй.

Төвийг сахисан

  • Ink #363737 — Үндсэн текст - үндсэн текст, гарчиг, нийтлэлийн гарчиг, цагийн тэмдэг, зохиогчийн нэрс; уншихад хялбар болгохын тулд цэвэр #000-ийн оронд дулаан, бараг хар өнгө.
  • Paper #ffffff — Хуудасны зураг, картын гадаргуу, оролтын талбарууд болон навигацийн дэвсгэр нь интерфэйсийн дийлэнх хэсгийг эзэлдэг давамгайлсан гадаргуу юм.
  • Charcoal #232525 — Өндөр сонголтын түвшинтэй нэмэлт текст болон холбоосуудыг харахын тулд хулганы заагчийг аваачих төлөв; код блок болон сонголтын блокуудын хувьд Бэх горимоос илүү гүнзгий.
  • Stone #777777 — Хоёрдогч UI элементүүд, хуваагч болон дуугүй шошгоны хувьд төвийг сахисан өнгө дэмжигддэг. Үүнийг үйлдэл хийх дуудлагын үндсэн өнгө болгон ашиглаж болохгүй.
  • Ash #b6b6b6 — Нимгэн хүрээний шугам, товчлуурын тойм, дүрсний тойм, идэвхгүй болгосон удирдлагууд дээрх хүрээ.
  • Mist #c8c8c8 — Хуваах шугамууд, дүрс тэмдгүүдийн хувьд анзаарагдахгүй дэвсгэр, араг ясны хэлбэрээр хоосон нүднүүдийг дүүргэх.

Типографи

12-оос 32 пиксел хүртэл · 5 алхам

  • system-ui — солих: -apple-system · тоймууд 400, 500, 600 · Хэрэглэгчийн интерфэйс болон үндсэн текстийн үндсэн фонтыг навигацийн шошго, товчлуур, мессежийн текст, мета өгөгдөл, оролтын талбар болон бүх интерфэйсийн элементүүдэд ашигладаг. Мета өгөгдөлд 12-13 пиксел, үндсэн текстэд 15-19 пикселийн авсаархан хэмжээ нь нягт мэдээний тэжээл мэт мэдрэмжийг төрүүлдэг. Үндсэн текстийн жин 400, навигацийн элементүүд болон товчлуурын шошгоны жин 500, тодруулсан мессежийн гарчиг болон хэсгийн гарчгийн жин 600 байна.
  • Cahuenga — солих: Charter · тоймууд 500 · Бүтээгдэхүүний түвшний гарчиг (хажуугийн гарчиг, бүртгэлийн картын гарчиг, үндсэн текст)-д зориулсан өвөрмөц гоёл чимэглэлийн сериф фонт. Дунд зэргийн жинтэй, бага зэрэг мөрийн өндөр нь том хэмжээтэй мэт санагдахгүйгээр онцгой харагдуулдаг; энэ нь улбар шар өнгөнөөс гадна Substack-ийн мөн чанарыг илтгэдэг цорын ганц фонт юм.
  • Spectral — солих: Charter · тоймууд 400 · Урт бичлэгүүдэд зориулсан сериф фонт—уншлагын танхим болон мэдээний тэжээлийн контентод редакцийн материалын уншигдах байдлыг сайжруулах зорилгоор ашигладаг. Мөр хоорондын зайг арай багасгасан (1.20) нь мэдээний өрөөний ердийн нягтралыг хадгалахын зэрэгцээ догол мөрийг тухтай унших боломжийг олгодог.

Интервал ба хэлбэр

ЗорилгоУтга
Нягтралнягт
Үндсэн алхам8px
Товчлуурын радиус9999px
Картын радиус12px
Сүүдэрсүүдрийн оронд хил хязгаар байхгүй
Хэсгүүдийн хооронд32px
Хуудасны өргөн1200px

Хиймэл оюун ухаан таны вэбсайтыг Substack хэв маягаар бүтээж, дүүргэх болно

  • Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
  • Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
  • Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
  • Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.

Төстэй хэв маяг

  • ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
  • Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
  • Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
  • Dub — Линкийн царцсан будааны цаасан удирдлагын самбар
  • Seline Analytics — Дулаан цаасан дээрх чимээгүй аналитик ширээ
  • Notion — Үдийн наран дор дулаахан цаасан дэвтэр
  • Anthropic — Дулаан илгэн цаасны тухай шинжлэх ухааны салбарын сэтгүүл - тайван зааны ясан гадаргуу, сериф хээтэй редакцийн гарчиг, зөвхөн үйлдэл шаардлагатай үед гарч ирдэг ганц шавар аялга.
  • Calendly — Хүйтэн гантиг дээр хар хөх бэх
  • Augen Pro — Apple-ийн цагаан өнгөний дүрслэл нь монохром орон зайд цорын ганц тод өнгө болгон эмх цэгцтэй, жингүй, цахилгаан цэнхэр өнгийг хослуулсан.
  • Antimetal — Цөцгий цаасан дээрх редакцийн тэмдэглэл - шинжлэх ухааны сэтгүүлд өнгөрүүлсэн нам гүм өглөө, биеэ барих нь өөртөө итгэх итгэлийг илэрхийлж, серифүүд хүнд ажлыг хийдэг.
  • Perk — Дулаан илгэн цаасан дээр цахилгаан лайм
  • Ditto — Нарны гэрэлд зэрлэг цэцгийн дээж бүтээх цех. Дулаан цөцгийтэй гадаргуу, тод шар суурь өнгө, гүн хар хөх бэх, бүтээлийн ард дэлбээлж буй органик өнгөний хэлбэрүүд.