Substack
Yazı işleri ofisindeki masanın üzerinde turuncu mürekkep.
Substack, eski bir haber odası panosuna benziyor: beyaz bir tuval, sıcak, neredeyse siyah metin ve içerik oluşturmanın her aşamasını işaretleyen tek bir parlak turuncu vurgu. Görsel hiyerarşi, süsleme yerine yoğunluk üzerine kurulu: ince gri çizgiler akış öğelerini ayırıyor, avatarlar küçük, meta veriler soluk ve okuyucunun gözü turuncu harekete geçirici düğmeye, turuncu logoya, turuncu "Abone Ol" bağlantısına ve turuncu "Oluştur" düğmesine odaklanacak şekilde eğitilmiş. Yüzeyler düz ve kısıtlanmamış tutulmuş – kart gölgeleri yok, krom panel öğeleri yok – tipografinin (özel bir serif başlık yazı tipiyle eşleştirilmiş kompakt bir krom sistem UI öğesi) editoryal ağırlığı taşımasına izin verilmiş. İmza stili, kısıtlı krom öğeler ve canlı, tek renkli vurgular: bir yayıncılık aracı gibi hissettiren bir okuma uygulaması.
Üç sütunlu masaüstü düzeni: sabit sol kenar çubuğu (~200 piksel, simgeler ve etiketlerle gezinme, sabit), orta akış (maksimum genişlik ~600 piksel, dikey olarak kaydırılan gönderi listesi) ve sabit sağ kenar çubuğu (~300 piksel, arama + öneriler + kayıt). Orta akış, editoryal çekirdeği oluşturur; kart yok, sadece ince ayırıcılarla ve bölümler arasında 32 piksel boşluklarla üst üste yığılmış gönderiler. Ana banner, akışın en üstünde tek bir tam genişlikte kart olarak yer alır. Sol kenar çubuğu, marka logosunu (üzerine çizgiler yerleştirilmiş turuncu bir işaret), altı gezinme öğesini ve altta tam genişlikte turuncu bir "Oluştur" düğmesini içerir. Sağ kenar çubuğu, bir arama alanı, bir kayıt kartı ve okuma için bir "Sıradaki" listesi içerir. Gezinme minimaldir; üst çubuk yok, ekmek kırıntısı yok; kenar çubuğu gezinmenin kendisidir. İçerik yoğunluğu yüksek: gönderilerde 12-13 piksel meta veri ve 15-19 piksel gövde metni kullanılıyor; bu da bir pazar yerinin kart ızgarası havasından ziyade gazete benzeri bir ritim yaratıyor.
Fotoğraflar kullanıcı tarafından oluşturulan içeriktir (yazar avatarları, gönderi küçük resimleri, gönderi görselleri)—Substack kendi dekoratif fotoğraflarını sağlamaz. Ana kart, arka plan olarak soyut illüstratif öğeler (geometrik şekiller, kalem ve not gibi stilize nesneler) ile turkuazdan yeşile doğru bir gradyan kullanır. Sağ kenar çubuğundaki gönderi küçük resimleri küçüktür (64 piksel), 8 piksel yarıçapla çevrilidir ve okuma listesinin önizlemesi olarak işlev görür. Genel görsel dil metin tabanlıdır: arayüz bir okuma tuvalidir ve görseller atmosfer yaratmaktan ziyade küçük görsel bağlantı noktaları görevi görür.
Palet
Marka
- Signal Orange
#ff6719— Turuncu, dekoratif detaylar için ikincil bir vurgu rengi olarak ve nadir görülen ipuçlarını öne çıkarmak için kullanılır. Eyleme geçme çağrıları için birincil renk olarak kullanılmamalıdır.
Doğal
- Ink
#363737— Gövde metni—ana metin, başlıklar, gönderi başlıkları, zaman damgaları ve yazar adları; daha kolay okunabilmesi için saf #000 yerine sıcak, neredeyse siyah bir renk. - Paper
#ffffff— Sayfa tuvali, kart yüzeyleri, giriş alanları ve gezinme arka planı, arayüzün büyük çoğunluğunu kaplayan baskın yüzeylerdir. - Charcoal
#232525— Yüksek seçim seviyelerinde ek metin ve bağlantılar için fareyle üzerine gelindiğinde görünen durum; kod blokları ve seçim blokları için Mürekkep modundan daha derin. - Stone
#777777— İkincil kullanıcı arayüzü öğeleri, ayırıcılar ve soluk etiketler için nötr bir renk desteklenir. Eylem çağrıları için birincil renk olarak kullanılmamalıdır. - Ash
#b6b6b6— İnce kenar çizgileri, düğme çerçeveleri, simge çerçeveleri, devre dışı bırakılmış kontrollerin kenarlıkları. - Mist
#c8c8c8— Ayırıcı çizgiler, simgeler için göze batmayan arka plan, boş hücrelerin iskelet şeklinde doldurulması.
Tipografi
12 ila 32 piksel arası · 5 adım
- system-ui — yenisiyle değiştirme: -apple-system · ana hatlar 400, 500, 600 · Kullanıcı arayüzü ve gövde metni için kullanılan birincil yazı tipi, gezinme etiketleri, düğmeler, mesaj metni, meta veriler, giriş alanları ve tüm arayüz öğeleri için kullanılır. Meta veriler için 12-13 piksel ve gövde metni için 15-19 piksel gibi kompakt boyutlar, yoğun bir haber akışı hissi yaratır. Kalınlık, gövde metni için 400, gezinme öğeleri ve düğme etiketleri için 500 ve vurgulanmış mesaj başlıkları ve bölüm başlıkları için 600'dür.
- Cahuenga — yenisiyle değiştirme: Charter · ana hatlar 500 · Ürün düzeyindeki başlıklar (yan çubuk başlıkları, kayıt kartı başlıkları, ana metin) için özel olarak tasarlanmış, dekoratif bir serif yazı tipi. Orta kalınlığı ve hafif satır yüksekliği, hantal görünmeden seçkin bir görünüm kazandırır; turuncu rengin yanı sıra Substack'in kimliğini yansıtan tek yazı tipidir.
- Spectral — yenisiyle değiştirme: Charter · ana hatlar 400 · Uzun yazılar için tasarlanmış, okuma odalarında ve haber akışı içeriklerinde editoryal materyallerin okunabilirliğini artırmak için kullanılan bir serif yazı tipi. Biraz daha dar satır aralığı (1,20), haber odalarına özgü kompaktlığı korurken paragrafların rahat okunmasını sağlar.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | yoğun |
| Temel adım | 8px |
| Düğme yarıçapı | 9999px |
| Kart yarıçapı | 12px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 32px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Substack tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- ElevenLabs — Sıcak krem tonlarında, incelikli başlıklarla hazırlanmış bir fotoğraf denemesi. Bauhaus tarzı bir defter: yumurta kabuğu renginde kağıt, siyah mürekkep ve ürün sergilemek için tek bir mor ve turuncu vurgu.
- Awesomic — Turuncu noktalama işaretleriyle konfetiyi andıran, editoryal amaçlı çinko ağ.
- Monad — sıcak parşömen üzerine editoryal teknik dergi
- Dub — Link'in mat pirinç kağıdı kontrol paneli
- Seline Analytics — Sıcak kağıt üzerinde sessiz, analitik bir masa.
- Notion — Öğlen güneşinde ısınmış bir kağıt defter
- Anthropic — Sıcak parşömen kağıda basılmış bilimsel bir saha dergisi; sakin fildişi yüzeyler, tırnaklı yazı tipi başlıkları ve yalnızca harekete geçilmesi gerektiğinde ortaya çıkan tek bir kil rengi vurgu.
- Calendly — Soğuk mermer üzerine koyu mavi mürekkep
- Augen Pro — Apple'ın beyaz sunumunda, tek renkli bir alanda tek vurgu olarak klinik, ağırlıksız, elektrik mavisi bir renk öne çıkıyor.
- Antimetal — Krem rengi kağıda basılmış bir editörlük günlüğü—bilimsel bir dergide sakin bir sabah; burada ölçülülük özgüveni ifade eder ve serif yazı tipleri ağır işleri üstlenir.
- Perk — Sıcak parşömen kağıdı üzerinde elektrikli kireç
- Ditto — Güneş ışığı altında kır çiçeği örnekleri oluşturulan bir atölye. Sıcak krem rengi yüzeyler, canlı sarı bir taban rengi, koyu lacivert mürekkepler, eserin arkasında açan organik renk formları.