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
- 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
- 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ı.
- Officevibe — Sıcak krem rengi kağıda basılmış bir editoryal dergi. İnsan kaynakları yönetimi üzerine düşünceli bir makalenin, modern mavi bir arayüz üzerinden fısıldayan el yazısı bir serif yazı tipiyle bir ürün olarak sunulduğunu hayal edin.