Notion
Öğlen güneşinde ısınmış bir kağıt defter
Notion'ın arayüzü, gün ışığında sevilen bir kağıt deftere benziyor: steril değil, dokunsal bir his veren sıcak, kremsi bir tuval (#f6f5f4), ürün metnine editoryal ağırlık kazandıran cömert sans-serif tipografi ve seyrek noktalama işaretleri gibi kullanılan renkler—şeftali rengi "haplar" fiilleri vurguluyor, tek bir mavi ana eylemi sabitliyor ve dönen bir dizi vurgu tonu (mercan, kehribar, gökyüzü, gece yarısı) kart arka planlarını çıkartmalar gibi renklendiriyor. Kartlar, Moleskine defterinin çizgili bölümleri gibi ince kenarlıklı ve köşeli bir tuval üzerine yerleştirilmiş—gölge yok, krom yok. Animasyon, 200 ms'de yumuşak geçişler ve arayüze dekoratif olmadan hayat veren yaylı karakter animasyonlarıyla neşeli ve esnek.
Ortalanmış halde, maksimum genişlik yaklaşık 1440 piksel ile sınırlıdır. Ana öğe, ortalanmış bir yığın halindedir: bir sembol satırı → içine renkli bir hap yerleştirilmiş büyük iki satırlı bir başlık → bir alt başlık → iki harekete geçirici düğme içeren bir satır → büyük bir ürün arayüzü maketi. Ana öğenin altında, bölümler beyaz kart ızgaraları ve tam renkli vurgu panelleri arasında dönüşümlü olarak yer alır. Logo duvarı, gri tonlamalı ortak logoların ortalanmış tek satırlı bir ızgarasıdır. Özellik blokları, bölümler arasında soldan sağa doğru dönüşümlü olarak iki sütunlu bir düzen kullanır (solda metin, sağda renkli panel). "İstediğiniz zaman asistanlarınıza sorun" bölümü, üst kartın tam genişliği kapladığı ve alt satırın iki eşit sütuna bölündüğü 2x2'lik bir kart ızgarası kullanır. Bölümler arasındaki boşluklar geniştir (~80 piksel), sakin bir dikey ritim oluşturur. Navigasyon, ortalanmış navigasyon öğeleri ve sağa hizalanmış eylem düğmeleriyle sabit 64 piksel yüksekliğinde bir üst çubuktur.
Görseller ön planda, fotoğraf yok. Görsel dil, düz, resimli semboller (2 piksellik renkli dairelerde yuvarlak kenarlar), soyut dekoratif öğeler (elle çizilmiş kıvrımlar, parıltı, oklar, çiçek şekilleri) ve ürünün kullanıcı arayüzünün maketleri üzerine kuruludur. Semboller ana pencerede yatay bir sıra halinde yedi avatar olarak görünür ve sayfa boyunca eğlenceli noktalama işaretleri gibi dağılmıştır. Ürün ekran görüntüleri tek "gerçek" görsel öğelerdir: Notion arayüzünü (Kanban panoları, belge görünümleri, yapay zeka ajan panelleri) tüm öğeleri ve gerçek verileriyle gösterirler. Ana penceredeki ürün maketi büyük, ortalanmış ve tuvalden ayıran tek bir gölge oluşturur. Yaşam tarzı fotoğrafları, stok görseller veya soyut 3D render'lar yoktur.
Palet
Marka
- Notion Blue
#0075de— Aktif navigasyonda bir vurgu unsuru olan ve eyleme geçirici düğmeyi (CTA) dolduran ana öğe, neredeyse tek renkli bir sistemde, bir düğme olarak algılanabilecek kadar doygun olan tek renk şemasıdır.
Doğal
- Paper Warmth
#f6f5f4— Sayfa tuvali, ana pencere arka planı ve bölüm arka planı, sisteme dokunsal, analog bir his veren sıcak, hafif bej tonlarından oluşmaktadır. - Pure White
#ffffff— Kart yüzeyleri, kabartmalı paneller, logo arka planı, koyu renkli kartlarda zıt renkte metin. - Ink Black
#000000— Ana metin, gezinme bağlantıları, başlıklar; yeni renkler eklemeden hiyerarşi oluşturmak için farklı şeffaflık oranlarıyla (%100, %95, %90, %60, %40, %20) kullanılmıştır. - Charcoal
#111111— Siyah rengin çok sert görüneceği kullanıcı arayüzü alanları için koyu metin seçeneği. - Stone
#757575— İkincil gezinme metni, soluk yardımcı metin, devre dışı bırakılmış düğme etiketleri - %60 mürekkep çözünürlüğü - Graphite
#615d59— Ana metin, sıcak bir tona sahip; kahverengimsi gri renk, sıcak arka planla uyum sağlıyor.
Tipografi
12 ila 96 piksel arası · 10 adım
- NotionInter — yenisiyle değiştirme: Inter · ana hatlar 400, 500, 600, 700 · Ana sans-serif yazı tipi, ince nüanslara sahip geometrik bir hümanist yazı tipidir ve gövde metni için 400, gezinme/kullanıcı arayüzü için 500 ve başlıklar için 600-700 boyutlarında kullanılır. Yazı tipi ölçeği, daha büyük boyutlarda agresif negatif harf aralığı kullanır (-4,6 piksel 96 pikselde, -2 piksel 72 pikselde), bu da başlığın havadar olmaktan ziyade daha kompakt ve kendinden emin görünmesini sağlar.
- Lyon Text — yenisiyle değiştirme: Source Serif Pro · ana hatlar 400 · Ana metnin belirli bölümleri ve bölüm girişleri için ayrılmış olan editoryal serif yazı tipi, yazı tipine edebi bir ağırlık kazandırmak amacıyla (dört kez) seyrek olarak kullanılmıştır; bu, bir dergi düzenindeki alıntıya benzer. Paralel bir hiyerarşi yerine sistemik bir vurgu işlevi görür.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 8px |
| Düğme yarıçapı | 8px |
| Kart yarıçapı | 12px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 80px |
| Sayfa genişliği | 1440px |
Yapay zeka, web sitenizi Notion 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
- Mollie — Kaşmir bir tezgah, koyu renkli bir defter. Siyah metnin etrafında editoryal tasarım için bolca beyaz alan bırakın, ardından ürünle ilgili noktaları sıcak krem tonları, espresso kahverengileri ve gerçek ödeme yöntemlerinin dokunsal fotoğraflarıyla pekiştirin.
- Kagi — Ayrı bir okuma odası. Kalın grafit yazılar etrafında açık beyaz bir alan oluşturun, sakinliği bozmak için ince mor vurgular ve sıcak pastel yüzeyler kullanın.
- Milanote — Milanote, kendini yaratıcı çalışmalara adamış bir stüdyodur. Yüzen görsel panolar kullanarak editoryal galeri tarzı sayfalar oluşturun: koyu çerçeveli duvarlar, beyaz ekran alanı ve yumuşak bir derinliğe sahip gerçek nesnelere benzeyen ekran görüntüleri.
- Co2 — Kış ışığında bir iklim atlası. Serif başlıkların, kategori kodlu verilerin ve buzlu görüntülerin geniş beyaz kenar boşluklarını vurguladığı, havadan çekilmiş bir belge manzarası gibi sayfalar oluşturun.
- GitButler — Metnin sonunda turkuaz rengi. Yüksek kontrastlı serif başlıkların, ince teknik ızgaraların, sıcak grafit yüzeylerin ve zarif bir turkuaz vurgunun birleşimi.
- 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.
- 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