
Framer
boşluktaki neon galerisi
Framer neredeyse tamamen karanlık bir ortamda çalışır; içerik, bir galeri açılışındaki neon tabela gibi havada asılı duran siyah bir tuvaldir. 0,8–1,1 gibi dar satır aralıkları ve agresif negatif harf aralığı (-0,04em 54 pikselde) ile GT Walsheim Medium yazı tipinde yazılan başlıklar, sayfada düzgünce oturmak yerine öne çıkan, yoğunlaştırılmış, dekoratif bir yazı tipi oluşturur. Tek bir elektrik mavisi (#0099ff), tüm işlevsel vurguları (kenarlıklar, parlama, simgeler, aktif durumlar) sağlarken, arayüzün geri kalanı renksiz kalır ve saf siyahtan derinlik yaratmak için ince gri geçişlere (#111, #171717, #242424) güvenir. Bileşenler dekoratif olmaktan ziyade düşünülmüş hissi verir: 8–25 piksel yuvarlak kenarlar, ince 1 piksel kenarlıklar, minimal gölge efektleri ve boşluğun parlamasına izin veren yarı saydam yüzeyler.
Tam genişlikteki bölümler siyah tuvalin ötesine uzanır ve içerik maksimum ~1200 piksel genişlikle sınırlıdır ve ortalanmıştır. Ana bölümde sola hizalanmış bir başlık ve tek bir harekete geçirici (CTA) düğme bulunur; sağ taraf ise kasıtlı olarak boş bırakılmıştır - asimetrik olarak, ortalanmamıştır. Bölümler, yalnızca metin içeren düzenler (büyük başlık + alt metin) ve ürün ekran görüntüleri arasında geçiş yapar. "Framer ile Birlikte Gelir" bölümü, 4 sütunlu bir ızgarada logo duvarı kullanır. Topluluk bölümünde, yuvarlak köşeli, ortalanmış, tam genişlikte bir kapsayıcı içine bir ürün ekran görüntüsü yerleştirilir. Navigasyon minimaldir - solda logo ve sağa hizalanmış bağlantılar bulunan ince bir üst çubuk, görünür kontroller yoktur. Bölüm ritmi: Bölümler arasında önemli 80 piksellik dikey boşluklar, boşlukta yüzen farklı içerik adaları oluşturur.
Ürünün kullanıcı arayüzünün ekran görüntüleri baskın durumda; trafik ışığı noktalarıyla çerçevelenmiş krom benzeri bir pencere içinde yer alan uygulama ekran görüntüleri ana görsel haline geliyor. Kalite kanıtı olarak sunulan logolar, geniş aralıklı siyah bir arka plan üzerinde beyaz harflerle gösteriliyor. Fotoğraf, illüstrasyon veya soyut grafik kullanılmıyor; görsel dil, canlı bir arayüz olarak sergilenen ürünün kendisi. Simge stili: minimalist, konturlu, tek renkli ve küçük boyutlarda beyaz. Metin yoğunluğu: ağırlıklı olarak metin, ara sıra ürün ekran görüntüleri şeklinde büyük parçalar. Alanın görsel dengesi, görsellerden ziyade tipografiyi açıkça destekliyor.
Palet
Marka
- Vivid Violet
#0066ff— Ana işlem düğmesi, arayüzde düz renkli bir düğme arka planının görüntülendiği tek yerdir.
Doğal
- Bone
#ffffff— Ana başlıklar, ana metin koyu bir arka plan üzerinde, düğme arka planı tek ışık kaynağı. - Void
#000000— Sayfa tuvali, gezinme arka planı, kart yüzeyleri, simge dolgusu; hepsi gereksiz tüm içeriği emen sonsuz bir siyah renktir. - Graphite
#111111— Kabartmalı kart yüzeyleri, boşluğun bir adım ötesindedir: büyük, işlevsel kartlar ve modüler kaplar. - Obsidian
#171717— Düğmeler, ek kartlar, kullanıcı arayüzü dolguları için ara yüzey - etkileşimli öğeleri tuvalden ayırır. - Slate
#242424— Fareyle üzerine gelindiğinde, giriş alanları ve girintili paneller, metin biçimine geçmeden önce en parlak nötr renkte görünür. - Ash
#333333— Pasif arka plan resimleri ve yapısal öğeler için derin dolgu.
Tipografi
12 ila 68 piksel arası · 8 adım
- sans-serif — yenisiyle değiştirme: Inter · ana hatlar 400 · Sans-serif - çıkarılan verilerde bulundu ancak yapay zeka tarafından tanımlanmadı.
- GT Walsheim — yenisiyle değiştirme: Inter Tight · ana hatlar 500 · Başlıklar ve alt başlıklar için kullanılan yazı tipi, marka yazı tipidir. 0,8–1,1 satır aralığı ve -0,04em ila -0,05em harf aralığıyla 44–68 piksel aralığında agresif bir şekilde daraltılmıştır. Dekoratif bir unsur değildir; GT Walsheim'ın geometrik sıcaklığı, katı ölçülerle birleşerek sistemin sesini yaratır: kendinden emin, kompakt ve biraz fütüristik. Benzer geometrik ifade için Inter Tight veya Space Grotesk Bold'u düşünebilirsiniz.
- Inter Variable — yenisiyle değiştirme: Inter · ana hatlar 400 · Ana metin, navigasyon ve ikincil başlıklar temel işlevleri yerine getirir. Inter Variable ekseni, ağırlıkların sorunsuz enterpolasyonuna olanak tanır. İzleme, boyut arttıkça daralır: 18 piksele kadar -0,001em ve 22 piksele kadar -0,027em. Değişken sürüm, sitenin sorunsuz mikro animasyonlarına olanak tanır. Yerine: Inter ( Google) – neredeyse tamamen aynı bir yedek çözüm.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 10px |
| Düğme yarıçapı | 9999px |
| Kart yarıçapı | 20px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 80px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Framer 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
- Auros — Biyolüminesans veri topları içeren derin deniz terminali
- Origin Financial — Sessiz bir ihtişamın gece yarısı galerisi. Büyük serif yazı tipleri ve birkaç aydınlatılmış renkli panelin, finansın özenle tasarlanmış bir sanat eseri olduğu hissini yarattığı, sessiz, neredeyse karanlık bir oda.
- Raycast — Gece Yarısı Komuta Merkezi, Mercan Neon
- Dimension — Buzlu cam panellerle donatılmış, alacakaranlıkta aydınlatılan bir çalışma alanı.
- Reflect Notes — Yıldızlı mor uzay, notaların neredeyse simsiyah çivit mavisi bir boşluğun fonunda takımyıldızlar gibi süzüldüğü karanlık bir gözlemevidir.
- Ameba — Gece yarısı kontrol odası – buzlu cam panellerin içinde elektrik mavisi bir titreşim.
- Branding — Siyah galeri duvarı, kan kırmızısı vurgular - Büyük beyaz yazı tipleri, tek bir parlak kırmızı vurgu ve web arayüzünden çok galeri tabelasına benzeyen çarpıcı dekoratif unsurlarla kesintiye uğrayan, boşluğu andıran koyu bir tuval üzerinde yüzüyor.
- Harness — Gece yarısı fosforlu yeşil vurgularla donatılmış Görev Kontrol Merkezi
- Koto — Gece yarısı Obsidyen Galerisi. Neredeyse zifiri karanlık bir sahne, tek sıcak ışık kaynağı sarı bir kalem ve yoğunlaştırılmış yazılar, sergi afişleri gibi geniş boşlukta yüzüyor.
- Ohzi — Karanlık bir galeride asılı duran, parlayan bir küp.
- Depot — Karanlık bir sunucu terminali. Neredeyse tamamen siyah bir geliştirici konsolu, çalışmanın başlangıcını işaret eden tek bir yeşil LED ve geri kalan kullanıcı arayüzü grafit renginde görüntüleniyor.
- Maciej Zadykowicz — Kaleydoskopik duvar resmiyle dikkat çeken Gece Yarısı Galerisi, neredeyse simsiyah bir stüdyo duvarıdır; burada canlı ve renkli bir tipografik sanat eseri tüm dikkati üzerine çekerken, diğer her şey sakin ve ölçülü kalır.