Apple
Tek bir mavi anahtarı olan beyaz bir oda.
Apple'ın tasarımı, sadeliğin bir örneğidir: neredeyse beyaz bir zemin, bol beyaz alan ve her eylemi kasıtlı hissettiren tek, canlı mavi bir vurgu. Birincil odak noktası tipografidir—SF Pro, artan boyutla azalan negatif harf aralığıyla, başlıkların aşırı ağır olmadan mimari bir netlik kazanmasını sağlar. Ürün, tasarımın ta kendisidir: büyük ürün fotoğrafları ve yaşam tarzı görselleri hakimken, krom öğeler ince çerçevelere, yarı saydam navigasyona ve ince çizgilere karışır. Bölümler, açık gri bir arka plana karşı tam renkli bloklarla promosyon malzemeleri için dönüşümlü olarak kullanılır ve dekoratif unsurlardan ziyade ölçek değişiklikleriyle ritim yaratır.
Sayfa düzeni, sabit bir maksimum kapsayıcı genişliği olmayan tam genişlikte bir sayfadır; bölümler kenardan kenara uzanır ve metin blokları yaklaşık 980 pikselde ortalanmıştır. Navigasyon, kaydırma sırasında görünen her ürün için ek bir alt klasör içeren tek, sabit bir global çubuktur. Ana düzen her zaman ortalanmıştır: büyük bir ürün adı, tek satırlık bir slogan, iki hap düğmesi ve ardından kalan görüntü alanını dolduran bir ürün resmi. Bölümler, cömert bir dikey ritimle (bölümler arasında 64 pikselden fazla) dikey olarak üst üste dizilmiştir ve #f5f5f7 ve renkli arka planlar dönüşümlü olarak kullanılmıştır. Sayfanın alt kısmı, her biri üzerine yerleştirilmiş metin ve hap düğmesi bulunan bir fotoğraf bloğu olan tam genişlikte hizmet kartlarından (Apple TV+, Fitness+, Müzik, Oyun Salonu) oluşan tek bir yatay satırdır. Yan çubuklar, çok sütunlu içerik düzenleri, asimetrik kompozisyonlar yoktur; her şey ortalanmış, üst üste dizilmiş ve simetriktir.
Fotoğrafçılık, baskın görsel dildir. Ürün fotoğrafları, herhangi bir bağlam olmaksızın, tamamen beyaz veya yumuşak gri bir arka plana karşı çekilir; cihaz, izole edilmiş ve aydınlatılmış bir şekilde yıldızdır. Yaşam tarzı fotoğrafları, genellikle yakın çekim nesnelerle birlikte, tam genişlikte banner'larda sergilenir. Renk geçişleri (pastel mavi, pembe, yeşil), dekorasyon olarak değil, ürün bölümleri için bir arka plan görevi görür. İkonografi minimalist ve çizgi tabanlıdır, 1-2 piksel kalınlığındadır ve metinle aynı gri tonlamadadır. Ürün fotoğraflarının kendisi dışında hiçbir illüstrasyon, soyut grafik veya 3D render kullanılmaz.
Palet
Marka
- Apple Blue
#0071e3— Doldurulmuş işlem düğmeleri, seçili durumlar - her görünümü anlamlı kılmak için az miktarda kullanılan tek etkileşimli kromatik renk. - Link Blue
#0066cc— Vurgulanmış işlem çerçeveleri, gömülü bağlantılar - dolu bir tabletin çok gösterişli olacağı yerlerde Apple Mavisi'nden daha doygun bir renk kullanılmıştır. - Signal Blue
#2997ff— Dekoratif çerçeveler, resim konturları, simge kenarlıkları - sistemdeki en açık mavi renk, kullanıcı etkileşiminden ziyade atmosfer yaratmak için kullanılmıştır.
Doğal
- Carbon
#1d1d1f— Ana metin, başlık çerçeveleri, gezinme çizgileri, kart çerçeveleri - baskın mürekkep rengi, hafif bir sıcaklık tonuyla neredeyse siyahtır. - Frost
#f5f5f7— Sayfa tuvali, ana metin arka planı ve altbilgi yüzeyi, saf beyazdan biraz daha soğuk olan Apple'ın imzası niteliğindeki açık gri renktedir. - Ice
#f4f8fb— Etkileyici yüzey dolguları, incelikli tonlar, koyu bir arka plan üzerinde düğme metni—bölümü öne çıkarmadan canlandıran incelikli bir mavi tonu. - Smoke
#333333— İkincil metin, gezinme dolgusu, düğme kenarlıkları - Orta gri tonlarından daha fazla etki gerektiren kenarlıklar ve simgeler için çok yönlü, nötr bir renk. - Graphite
#474747— Gezinti metni, gezinme kenarlıkları, bağlantı kenarlıkları - öğe hiyerarşisinde Karbon ve Duman arasında ara bir konumda yer alır. - Ash
#707070— Altbilgi metni, liste kenarlıkları, gezinme kenarlıkları, soluk gövde metni - Var olması gereken ancak göze batmayan içerikler için orta gri tonu.
Tipografi
12 ila 56 piksel arası · 8 adım
- SF Pro Display — yenisiyle değiştirme: Inter · ana hatlar 400, 600, 700 · Başlıklar ve büyük metinler—40 piksel ve üzeri boyutlar, daha dar bir açıklık ve daha güçlü negatif izleme için bir ekran formatı kullanır; 700 reklam düzenleri için, 400 ise editoryal içerikteki ürün adları için ayrılmıştır.
- SF Pro Text — yenisiyle değiştirme: Inter · ana hatlar 300, 400, 600 · Gövde metni, gezinme menüsü, düğmeler, alt başlıklar — çalışma yazı tipi; gövde metni için 400, alt başlıklar ve nitelikli etiketler için 300, gezinme öğeleri ve düğme metni için 600; negatif harf aralığı boyuta orantılı olarak azalır (-0.022em'den 12px'e, -0.01em'den 44px'e).
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 12px |
| Düğme yarıçapı | 980px |
| Kart yarıçapı | 8px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 64px |
| Sayfa genişliği | 1440px |
Yapay zeka, web sitenizi Apple 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
- Studio — Hareket halindeki bir galeri duvarı. Her ekran, tipografik malzemelerin ve üst üste binen yaratıcı eserlerin dikkat çekmek için yarıştığı, sakin, gri bir sergi yüzeyini temsil ediyor.
- 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.
- Basis Theory — Tasarım stüdyosundaki ödeme terminalleri. Beyaz teknik kağıt, üst üste binen yarı saydam işlem katmanları ve tek bir turkuaz kontrol elemanı görsel yönü belirliyor.
- CleanShot X — Mavi ışıkla aydınlatılmış bir masaüstüne sahip bir stüdyo. Kompakt siyah metnin etrafında sakin bir beyaz alan oluşturun, ardından zengin mavi kontrollerin ve katmanlı Mac ürün resimlerinin ön plana çıkmasına izin verin.
- Modern Treasury — Grafik kağıdı üzerinde bir hazine defteri. Nakit akışlarının ince çizgilerle, etiketli düğümlerle ve hassas, gizli kontrollerle gösterildiği, sessiz, beyaz bir işletme sayfasına benzeyen sayfalar oluşturun.
- Basha-Franklin — Beyaz bir lento altında galeri ızgarası. Sıcak bir #f4ede6 tonu, ince bir siyah yapı ve basılı bir mimari portföyü andıran fotoğraflardan esinlenilmiş asimetrik sütunlar kullanın.
- Bajgart Office — Editörlük galerisi duvarı. İnce detaylı serif yazı tiplerinin ve portföy parçalarının, krom kaplı arayüz öğelerinden daha fazla görsel ağırlık taşıdığı geniş beyaz bir alan kullanın.
- Heptabase — Güneş ışığıyla aydınlanmış bir masa. Sıcak, kağıt benzeri yüzeyler, kömür rengi kontrol düğmeleri ve araştırma için kullanılan yüzer pencereler, bir yazılım kontrol paneli yerine düzenli bir çalışma alanı hissi yaratıyor.
- Bejamas — Pijamalar—siyah camdan yansıyan asitli kireç. Bulanık yeşil ışık çizgilerinin yüzeyle kesiştiği büyüleyici siyah panellerle kesintiye uğrayan sakin, açık gri editoryal sayfalar oluşturun.
- Baba — Kırmızı güneş ışığında bakım notları. Duygusal merkez olarak insan fotoğraflarını kullanarak, samimi beyaz, pembe ve krem renkli bilgi yüzeylerinin etrafına geniş kırmızı anlatım çizgileri oluşturun.
- Grafana Labs — Sunrise Sinyal İstasyonu'nun kontrol odası. Sessiz, gri ve beyaz bir çalışma alanı, geniş, dört renkli ufuk çizgisi ve hassas mavi arayüz sinyalleriyle birleşiyor.
- 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.