Tasarımda Altın Oran'a hakim olmak

Tasarımınız neredeyse doğru görünüyor, ancak bir şeyler hissediyor. Boşluk garip görünüyor. Oranlar işe yaramıyor. Kenar boşluklarını ve dolguları ayarlarsınız, ancak bu nagging dengesizlik duygusu kalır. Eksik parça altın oran olabilir.

Bu matematik ilkesi yüzyıllardır harika bir tasarıma rehberlik etmiştir. Ve gözlerimiz doğal olarak bu spesifik oranları tercih ediyor. Çoğu tasarımcı altın oranlarını atlar veya çatlamanın ne kadar zor olduğu için onları yanlış uygulayabilir. Bununla birlikte, Divi 5 gibi bir sayfa oluşturucu ile, karmaşık hesaplamalar olmadan mükemmel oranlar uygulayabilirsiniz.

Daha fazlasını öğrenelim.

Altın oranı nedir?

Altın oran yaklaşık olarak eşittir

1.618.

Nereden geldi? Bir çizgiyi iki parçaya böldüğünüzde bu numarayı alırsınız, burada daha uzun kısmın daha kısa kısmına bölünmesi, tüm çizginin daha uzun kısmına bölünmesiyle eşittir.

Fibonacci dizisini kullanarak altın oranı hesaplayabilirsiniz. 0 ve 1 ile başlayın. 1 almak için bunları ekleyin. Sonra 2 almak için 1 ve 1 ekleyin. Son iki sayıyı eklemeye devam edin: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Daha büyük sayıyı önceki sayıya böldüğünüzde 1.618'e yaklaşırsınız.

Bu oran doğanın her yerinde görünür. Ayçiçeği tohumu spiralleri onu takip ediyor. Nautilus kabukları bu oranları kullanarak büyür. Yüzünüz bile muhtemelen özellikleriniz arasındaki altın oran ölçümlerini takip eder. Bir şey bu oranı takip ettiğinde, beyniniz bunu doğal olarak hoş olarak kabul eder.

Görüntüler Nezaket: Lucas ve Dynamic Wang'da Unplash ve Milena Carolina Dos Santos Mangueira

Φ (phi) sembolü, antik Yunanlıların MÖ 300 civarında keşfettiği benzersiz bir matematiksel oranı temsil eder. Buna “ilahi oranı” olarak adlandırdılar ve özel bir görsel denge ve güzellik ortaya çıkardığına inanıyorlardı.

Neden Önemlidir: Eski Binalardan Web Tasarımına

Yunanlılar Parthenon Tapınağı için bu oranı kullandılar ve Mısır Piramitleri bu ölçümleri takip ediyor. Leonardo Da Vinci gibi sanatçılar bu oranları yıllarca incelediler. Da Vinci, insan vücudundaki altın oranları gösteren ünlü “Vitruvian adamını” çizdi.

Temsili görüntü

Köklü tasarımcılar bunu hala kullanıyor. Apple'ın logosu altın oran oranlarını kullanır. Eski Twitter kuş logosu bu ölçümleri izledi. Dergiler önemli içeriği merkezde yerine altın oran noktalarına yerleştirir.

Görüntüler Nezaket: Widewalls & Design Shack

Bilim adamları neden altın oranı gibi insanların neden şekillerini incelediler. Beyin taramaları, insanlar altın oranı dikdörtgenlerine baktıklarında zevk alanlarında daha fazla aktivite gösterir. Bu, tüm kültürlerde ve yaşlarda gerçekleştiği için insanlara özgüdür.

Beyniniz bu oranları diğer oranlardan daha hızlı işler, bu da daha iyi bir kullanıcı deneyimi anlamına gelir. Web sitesi oranları 1.618'den çok uzaklaştığında, ziyaretçiler rahatsız hissediyor ve daha erken ayrılıyor.

Oran, mükemmel bir şekilde eşit olmadan denge oluşturur. Mükemmel simetri web sitelerinde sıkıcı görünebilir. Altın oran, kullanıcıların beklediği temiz, profesyonel görünümlü görünümlü olarak görsel ilgi yaratmak için yeterli asimetri verir.

Tasarımlarınız neden “kapalı” hissediyor (ve oranlar bunu nasıl çözüyor)

Düzeninizi mükemmelleştirmek için saatler harcadınız. Renkler doğru. Yazı tipleri birlikte çalışır. Ama hala bir şey hissediyor. Kenar çubuğu çok geniş görünüyor. Başlık biraz sıkışık görünüyor. İçerik alanı geri kalanıyla akmaz.

Bu yaygın bir deneyim. Birçok tasarımcı, boyutları şu anda neyin doğru hissettiğine göre ayarlar. Belki ana içeriği yüzde 70 ve kenar çubuğunu yüzde 30'a ayarladınız. Bu sayılar makul görünüyor, ancak her zaman doğal görünmüyorlar.

Gözlerimiz denge ve tanıdık kalıpları arar. Oranlar tam olarak doğru olmadığında, nedenini açıklayamasanız bile, tüm tasarım garip hissediyor. Büyük bir hata olmayabilir, sadece sizi rahatsız eden küçük bir ayrıntı.

Asıl mesele genellikle orandır. Düzenler dengeli hissettiren şeyleri görmezden geldiğinde, beyniniz fark eder. Parmağınızı üzerine koyamasanız bile bir şey hissediyor.

Ne kadar yanlış oranlar sabote kullanıcı deneyimi

Kötü oranlar işlerin garip görünmesini sağlar. Beyniniz belirli şekillerin ve boyutların birlikte iyi gitmesini bekler. Ekranınızın tam yarısını alan bir kahraman bölümü hayal edin. Sert ve garip görünüyor.

Şimdi, alanın yüzde 43'ünü veya yüzde 67'sini kullanan birini düşünün. Dengesiz ve dağınık görünüyor.

Bu web sitenize zarar verebilir. İnsanlar gördüklerine güveniyorlarsa çok hızlı karar verirler. Sayfa bakarsa, işletmenizin güvenilmez olduğunu düşünebilirler. Dağınık tasarım, insanların işinizin iyi olmadığına inanmasını sağlar.

Altın oran bunu düzeltmeye yardımcı olabilir. Kahramanınızı yüzde 70 yapmak yerine yüzde 61,8'i deneyin ve bir sonraki bölüm yüzde 38,2'si görünür bırakın.

Bu sayılar rastgele değil. Çiçeklerde ve kabuklarda olduğu gibi, doğada gördüğünüz 1.618 adlı özel bir desen izlerler. Gözleriniz bu deseni biliyor ve gördüklerinde sakin hissediyor.

İşin püf noktası, parçaların birbirleriyle nasıl ilişkili olduğudur. Başlık boyutunuz Altın Oranı kullanarak içerik alanınızla eşleşirse her şey doğru hisseder. Altbilginiz, menünüz ve içeriğiniz, uzay için savaşıyormuş gibi görünmek yerine birbirine sığmaya başlar.

Altın Oran oranları nasıl hesaplanır

Süslü matematiğe ihtiyacın yok. Sadece 62 ve 38'i hatırlayın. Bu sayılar 100'e kadar ekler, böylece yüzde olarak çalışırlar.

Daha büyük kısmına% 62 ve daha küçük kısmına% 38 vererek herhangi bir alanı bölün. Web siteniz 1000 piksel genişliğindedir. Ana içeriğinizi 620 piksel yapın. Kenar çubuğunuzu 380 piksele koyun. Mükemmel altın oranı.

500 piksel-boyda bir bölüm var. Ana alanınız 310 piksel alır. Geri kalanlar 190 piksel alır.

Web sitesi parçaları için hızlı kurallar

Kahraman bölümü, insanların ilk gördüklerinin yaklaşık% 60'ını almalıdır. Geri kalanı ana içerik önizlemenize gider. Kartları% 60 geniş oldukları kadar uzun yapın. 300 piksel genişliğinde bir kart 180 piksel uzunluğunda.

Düğmeler aynı şekilde çalışır. 100 piksel genişlik 60 piksel yükseklik anlamına gelir. Metin sütununuz 600 piksel genişliğindedir. Yaklaşık 370 piksel içerik eklemeyi bırakın. Ardından bir sonraki bölümünüzü ekleyin.

Doğru görünüyor mu?

Ekranınızdan geri adım atın. Parçalar şimdi dengeli hissetmeli. Gözünüz bölümden bölüme sorunsuz bir şekilde akar. Bir noktaya bakmaya devam ederseniz, oranlar kapalı olabilir.

Popüler web siteleri her yerde aynı 62/38 bölünmeler kullanır. Ne arayacağınızı öğrendikten sonra deseni görmeye başlayacaksınız. Matematik gizli kalır, ancak görsel uyum hemen göze çarpar.

Ortak Altın Oran Hataları Tasarımcılar

Çoğu tasarımcı altın oranının var olduğunu ve onu kullanmak istediğini biliyor. İşte genellikle mücadele ettikleri yer.

En büyük hata, bir sistem olmadan rastgele oranları uygulamaktır. Başlığınız için altın oranları, içerik ızgaranız için üçte bir ve altbilginiz için rastgele yüzdeler kullanırsınız. Bir yaklaşım seçin ve tasarımınızda tutarlı bir şekilde kullanın.

Birçok tasarımcı 1.5 veya 1.7 gibi kolay sayılara 1.618'i yuvarlar. Beyniniz,% 62 ile% 60 arasındaki farkı fark eder ve bu küçük boşluk yaratmaya çalıştığınız görsel uyumu etkiler.

Bir başka yaygın konu da uyumsuzluk oranı unsurlarıdır. Örneğin, mükemmel orantılı bir kahraman bölümü oluşturabilirsiniz, ancak tamamen farklı aralık oranları kullanan bir resim galerisi ekleyebilirsiniz. Görsel bağlantı kesimi, kurduğunuz akışı bozar.

Bazı tasarımcılar, okuma konforunu düşünmeden metne altın oranı uygular. Mükemmel matematiksel oranları takip eden bir çizgi uzunluğu rahat okuma genişliğini aşabilir. Okunabilirlik matematiksel hassasiyete göre öncelik alır.

Web tasarımcıları da genellikle yanıt verebilirliği göz ardı eder. Dengeli görünen masaüstü oranları daha küçük ekranlarda sıkışık veya gerilmiş hissedebilir. Altın oranlar cihaz boyutlarında farklı uygulamalara ihtiyaç duyar.

Birçok sayfa oluşturucu, orantılı uyumu göz ardı eden keyfi düzenleri varsayılan olarak varsayar. Standart üç sütunlu ızgaralar, daha doğal oranlar yerine 33/33/33 bölünmesi kullanır.

En sınırlayıcı hata, ilk denemelerden sonra yaklaşımı terk etmektir. Altın oranlar, düzenli ayarlamalar olarak değil, düzen yapınız boyunca sistematik olarak uygulandığında en iyi şekilde çalışır.

Neden birçok sayfa oluşturucu altın oranlarını görmezden geliyor?

Sayfa oluşturucular programcı düşüncesi etrafında büyüdü. Geliştiriciler temiz bir şekilde bölünen sayıları sever. On iki sütun, dört bölüm, elli elli bölünür.

Birçok inşaatçı şirketi, kullanıcıların kendi tasarım seçeneklerini kontrol etmeleri gerektiğine gerçekten inanıyor. Farklı yaklaşımları tercih edebilecek insanlara belirli estetik teorileri zorlamak istemiyorlar. Bazı tasarımcılar altın oranından nefret eder ve diğer oran sistemlerini tercih eder. Yaratıcılık seçeneklerde geliştiğinde neden bir matematiksel prensibi zorlar?

Gerçek teknik mesele tasarım felsefesinden daha karışıktır. Altın oranlar, eski cihazlarda kırılan garip ondalık sayılar yaratır. Bir sütunun% 61.8 genişliğinde duyarlı bir ızgara oluşturmayı deneyin. % 25 veya% 33 gibi temiz yüzdeler her cihazda öngörülebilir bir şekilde davranır.

Çoğu sayfa oluşturucu şirketi, tasarım araçları değil, teknik çözümler olarak başladı. Güvenilir bir şekilde çalışan sistematik, mantıklı düzenler etrafında inşa edilmiştir.

Kullanıcılar nadiren oranlardan şikayet ederler. Kırık mobil düzenler ve yavaş yükleme süreleri hakkında şikayet ediyorlar. Şirket öncelikleri tasarım teorisini değil, gerçek kullanıcı geri bildirimlerini takip eder.

Bazı inşaatçılar ezici yeni başlayanlar için endişeleniyor. Yeni kullanıcılar zaten düzinelerce düzen seçeneği ile karşı karşıya ve matematiksel düşünceler eklemek, sadece temiz ve profesyonel bir şey isteyen insanları korkutabilir.

Divi 5 ile mükemmel oranlar oluşturmak

Divi 5'in altın oranı tasarımından matematiksel bir baş ağrısından nokta ve tıkla sadeliğine nasıl döndüğüne dair nitty-britritts'e dalmadan önce, kısa bir sapma alalım ve Divi'yi kodlama kabusu olmadan profesyonel sonuçlar isteyen WordPress tasarımcıları için neyin tercih ettiğini anlayalım.

Divi nedir?

Divi, özelliklerden ödün vermeden görsel tasarıma önem veren insanlar için tasarlanmış bir WordPress sayfa oluşturucudur.

200 modülü üzerinden sürükleyip bırakabilir, metni değiştirebilir ve yeni renkler seçebilirsiniz. Her şey tam sayfanızda olur, böylece ziyaretçilerin tam olarak ne göreceğini görürsünüz.

Tema 2000'den fazla önceden yapılmış düzenlerle doludur. Bunlar temel şablonlar değil, restoranlar, fotoğrafçılar, danışmanlar ve düzinelerce başka işletme için tam tasarımlar. Stilinize uyan ve oradan özelleştiren birini seçin.

Ürünleri çevrimiçi satıyorsanız, Divi özellikle mağazalar için yapılmış 20+ modül içerir. Ürün sayfalarınız profesyonel görünecek ve aslında tarayıcıları alıcılara dönüştürmeye yardımcı olacaktır.

Baş ağrısı olmadan web siteleri oluşturun

Tema oluşturucu, sitenizin her parçasını tasarlamanıza olanak tanır. Markanıza uygun özel başlıklar oluşturabilir, benzersiz blog düzenleri oluşturabilir ve hatta 404 sayfanızın şaşırtıcı görünmesini sağlayabilirsiniz.

Divi AI, AI'nın rahatlığını doğrudan tasarım tuvalinize getirir. Metin oluşturabilirsiniz,

görüntüler,

kod,

ve divi AI kullanan tüm sayfa bölümleri.

Hatta mevcut fotoğraflarınızı sadece ihtiyacınız olanı açıklayarak düzenleyebilirsiniz.

Divi Quick Sites, Web Sitesi Builatörlerinin karşılaştığı en büyük sorunlu Web Sitesi: Nereden başlayacağınızı bilmeden boş bir sayfaya bakma. Profesyonel web sitesi şablonlarına sahip, tasarım ekibimiz tarafından oluşturulan profesyonel başlangıç ​​siteleri arasından seçim yapabilirsiniz ve başka hiçbir yerde bulamayacağınız benzersiz görüntüler ve sanat eserlerine sahiptir.

Veya Divi AI'nın iş tanımınıza göre özel düzenler oluşturmasına izin verin.

Bu AI tarafından üretilen web sitesi sadece bir tel çerçeve değil. Açıklamanız uyarınca ilgili başlıklar, kopyalar ve görüntüler içerecektir. Divi AI'dan tüm görüntüleri oluşturmasını isteyebilirsiniz, Unplash'tan bir tane kullanabilir veya yer tutucuları kullanabilirsiniz, böylece bunları kendiniz değiştirebilirsiniz.

Yazı tiplerinizi ve renklerinizi önceden seçebilir ve AI'nın onlarla birlikte çalışmasına izin verebilirsiniz. Ve elbette, web siteleri normal web siteleri gibi düzenlenebilir kalır, böylece zevkinize göre ihtiyacınız olan her şeyi değiştirebilirsiniz.

Divi al

Divi 5: Bir sonraki adım

Web siteleri oluşturmak, kağıt üzerinde fikir çizmek gibi doğal hissetmelidir. Bir vizyonunuz var ve araçlarınız yoluna girmeden onu hayata geçirmeye yardımcı olmalı. Bizi Divi'yi tamamen yukarıdan yeniden inşa etmeye iten şey budur.

Bugün bir alfa olarak mevcut olan ve yeni web sitelerinde kullanılmaya hazır olan Divi 5, web siteleri oluştururken ihtiyacınız olanları dinliyor. Çan ve ıslık veya kimsenin gerçekten kullanmadığı değil , işinizi daha hızlı ve daha keyifli hale getiren gerçek iyileştirmelerdir. Sevdiğiniz her şeyi Divi hakkında tuttuk ve bir sonraki seviyeye taşıdık.

Yeni web araçlarını kullanarak her şeyi sıfırdan yeniden inşa ettik. Sayfalar şimdi daha hızlı yüklenir ve kontroller daha iyi çalışır. Ekstra iş olmadan tasarımlarınızı tüm sitenizde aynı tutabilirsiniz.

Ne geliştirildi? Ne var ne yok?

• Komple Çerçeve Yeniden Oluşturma eski kısa kodlardan kurtulur. Her şey daha hızlı yüklenen ve daha iyi çalışan yeni blok tabanlı kod üzerinde çalışır.
• Tek tıklayın Düzenleme Hemen düzenlemek için sayfanızın herhangi bir bölümünü tıklamanıza olanak tanır. Artık küçük simgeler için avlanmaya veya menüleri kazmaya gerek yok.
• Özelleştirilebilir kesme noktaları , üç yerine çalışmak için yedi ekran boyutu sağlar. Her birini kesin ihtiyaçlarınıza uyacak şekilde değiştirebilirsiniz.
• Gelişmiş birimler desteği, oluşturucudaki Calc (), Clamp (), Min (), Max () ve tüm yeni CSS birimlerini kullanmanızı sağlar.
• Tasarım değişkenleri , renkleri, yazı tiplerini, boyutlarını, görüntüleri, metinleri ve bağlantıları tek bir yerde kaydetmenizi sağlar. Bunları bir kez değiştirin ve sitenizdeki her yerde güncellenecekler.
• Seçenek Grup Ön Setleri , sınırlar, yazı tipleri, gölgeler ve aralıklar için stilleri kaydetmenize ve yeniden kullanmanıza olanak tanır. Bunlar sitenizin farklı bölümlerinde çalışır.
• İç içe satırlar, diğer satırların içine satır koymanızı sağlar. Özel bölümler olmadan karmaşık düzenler oluşturabilirsiniz.
• Modül grupları birkaç modülü bir ünitede birleştirir. Bu, karmaşık düzenlerin yönetilmesini kolaylaştırır. Özel modüllerinizi de yapabilirsiniz.
• Çok Panel Çalışma Alanı Panelleri istediğiniz yere yerleştirmenizi sağlar. Aynı anda açık birkaç ayarla çalışabilirsiniz.
• Özellik yönetimi , farklı parçalar arasında stilleri, içeriği ve ön ayarları kopyaladığınızda, yapıştırdığınızda ve sıfırladığınızda tam kontrol sağlar.
• Işık/Karanlık Modu, çalışırken gözlerinizde daha kolay olan temayı seçmenizi sağlar.
• Tuval ölçeklendirme, sitenizin farklı ekranlarda nasıl göründüğünü görmek için çalışma alanınızı yeniden boyutlandırmanıza olanak tanır. Önizleme modlarını değiştirmeye gerek yok.
• Performans iyileştirmeleri, sayfaların daha hızlı yüklenmesini, daha hızlı görüntülenmesini ve inşa ederken daha yumuşak hissetmesini sağlar.

Bugün Divi 5'i deneyin

Divi 5 artık yeni web sitesi projeleri için kullanılabilir. İş akışınızı daha hızlı ve daha kolay hale getirmek için onu sıfırdan yeniden inşa ettik. Halka açık alfa indirin ve iyileştirmeleri görmek için bir sonraki yeni sitenizde deneyin. Yeni ve eski tüm Divi üyeleri için ücretsizdir.

Mevcut Divi 4 siteleri için göç sistemini geliştirirken sadece yeni siteler için kullanmanızı öneririz. Taze başlıyorsanız, şimdi güncellenmiş arayüzü ve daha iyi performansı denemek için harika bir zaman.

Divi 5 kullanarak altın oranları nasıl kullanılır

Yeterince dedi. Derin bir dalış yapalım ve Divi 5'i kullanarak web sitenizde nasıl altın oranlarını uygulayabileceğimizi görelim ve daha da iyisi, nasıl standartlaştırılabilecekleri için yeni bir bölüm veya sayfa oluşturduğunuzda matematikle uğraşmanız gerekmiyor.

Tasarım değişkenleri, sitenizdeki değerleri kaydetmenize ve yeniden kullanmanıza olanak tanır. Sitenizin görsel kimlik DNA'sını oluştururlar. Divi 5'in altı türü vardır: renkler, yazı tipleri, görüntüler, metin dizeleri, bağlantılar ve sayılar. Her birinin belirli bir rolü vardır:

• Renk değişkenleri marka renklerini, arka planları, metin renklerini ve site çapında kullanılan diğer tonları tutar.
• Yazı tipi değişkenleri yazı tiplerini başlıklar, gövde metni ve özel öğeler için tutarlı tutar.
• Görüntü değişkenleri, kolay kullanım için logolar veya arka plan kalıpları gibi ortak grafikleri saklar.
• Metin dizesi değişkenleri sloganlar, kişiler ve yasal notlar gibi yeniden kullanılabilir içeriği kaydeder.
• Bağlantı Değişkenleri , sosyal medya veya önemli sayfalar gibi sık sık kullandığınız URL'leri tutar.
• Sayı değişkenleri pikseller, yüzdeler, EMS, REM'ler ve görünüm portu birimlerindeki ölçümleri işler ve oranları herhangi bir ekranda tutmak için Calc () gibi CSS işlevleriyle çalışır.

Altın Oran Değişkenlerinizi Ayarlama

Divi 5 Gösterge Tablonuzu açın ve sol kenar çubuğunda değişken yönetici simgesini bulun.

Değişkenler panelini açmak için tıklayın. Renklerinizi, yazı tiplerinizi, görüntülerinizi, metninizi ve bağlantı değişkenlerinizi ekleyin.

Ardından, altın oran değişkenlerinizi oluşturmak için sayılar sekmesine gidin. Bu sayı değişkenlerini ekleyerek başlayın:

Tipografi değişkenleri

• H1 Boyutu: Kelepçe (47px, 4.7vw, 76px)
  • Minimum 47px: En küçük telefonlarda (320px genişliğinde) bile, H1'iniz hiyerarşi kuracak kadar büyük kalır. Daha küçük bir şey, ana başlık olarak etkiyi kaybeder.
  • 4.7VW Orta Değer: Bu ViewPort Genişlik Birimi metin ölçeğini sorunsuz hale getirir. 1000 piksel ekran genişliğinde, 4.7vw = 47px. 1600px'de 75 piksel olarak büyüyor
  • Maksimum 76px: Bunu üç kez (18 × 1.618 × 1.618 × 1.618 = 76.244px) çoğaltarak elde ederiz.
• H2 Boyut: Kelepçe (29px, 3.5vw, 47px)
  • Minimum 29px: H2'yi okunabilir kalırken mobil cihazlarda H1'den belirgin şekilde daha küçük tutar
  • 3.5VW Ölçeklendirme: Hiyerarşiyi korumak için H1'den orantılı olarak daha küçük ölçeklendirme
  • Maksimum 47px: Tam 76px ÷ 1.618 = 47.122px
• H3 Boyut: Kelepçe (18px, 2.9vw, 29px)
  • Minimum 18px: Dikey alandan tasarruf etmek için mobil cihazlarda vücut metni boyutunu eşleştirir
  • 2.9VW Ölçeklendirme: Daha büyük başlıklardan daha nazikçe büyür
  • 29px Maksimum: Tam olarak 47px ÷ 1.618 = 29.124px
• H4 Boyutu: Kelepçe (14px, 2.2vw, 22.4px): ~ 29px ÷ 1.618 = 17.994px'i bölmeye devam et, ancak okunabilirlik için minimum 22.4px'e ayarladık
• H5 Boyut: Kelepçe (13px, 1.8vw, 18px): 18px'lik temel yazı tipi boyutumuz buradaki ölçekte mükemmel bir şekilde uyuyor
• Vücut Metin Boyutu: Kelepçe (16px, 1.6vw, 18px): Tüm hesaplamaların kaynaklandığı standart 18px taban

Clamp () işlevi, metnin ekranlar arasında sorunsuz bir şekilde yeniden boyutlandırılmasına izin verir. Üç değer alır: telefonlar için en küçük boyut, ölçeklendirme için orta değer ve masaüstleri için en büyüğü. Ekranlar büyüdükçe metnin kademeli olarak büyümesini sağladığı için ortada ViewPort Genişliği (VW) kullanıyoruz. Boyutlar arasında ani sıçrama yok.

Masaüstünde, mükemmel altın oranlara sadık kalıyoruz. Mobil ekranlar, metni okunabilir tutmak için küçük ayarlamalara ihtiyaç duyar. Saf hesaplamalar bazı başlıklar için 11 piksel önerebilir, ancak bu da ziyaretçilerinizin gözlerini zorlar. 14 piksel gibi pratik minimumlar ayarlamak, herkesin içeriğinizi rahatça okuyabilmesini sağlarken Altın Oranın görsel uyumunu korur. Orantılı ilişkiler sağlam kalır; Okunabilirlik için biraz değiştiler.

Aralık değişkenleri

Her değer öncekini tam olarak 1.618 ile çarpar:

• Alan XS: Kelepçe (8px, 1vw, 10px)
  • Neden 10 piksel taban: Bu, mobil cihazlarda en küçük konforlu dokunmatik hedef dolgu. Endüstri bilgeliği 44px minimum dokunmatik hedefler ve her tarafta 10 piksel dolgu önerir ve içerik sizi oraya götürür. 10 pikselden daha küçük elemanların sıkışık hissetmesini sağlar.
  • Neden Minimum 8 Piksel: 360 piksel genişliğindeki telefonlarda, 10 piksel bile çok geniş hissedebilir. Elemanları ayırt edilebilir tutarken içerik alanını en üst düzeye çıkarmak için 8px'e düşüyoruz.
  • Neden 1VW: Boşluğu orantılı olarak büyütür ve size 1000 piksel ekran genişliğinde tam olarak 10 piksel verir
• Alan Küçük: Kelepçe (13px, 1.6vw, 16.18px): Düğme dolgu ve form alanı aralığı için ideal.
• Uzay Ortamı: Kelepçe (21px, 2.6vw, 26.18px): İlgili içerik blokları arasındaki boşluk için harika.
• Alan Büyük: Kelepçe (34 piksel, 4.2VW, 42.36px): Ekran boyutuyla ölçeklendirilirken ana bölümler arasında nefes alan oluşturur.
• Space XL: Kelepçe (55px, 6.8VW, 68.54px): Kahraman bölümlerinde ve ana özellik bloklarında üst/alt dolgu için harika. Kahraman bölümlerinin mobil cihazlarda bile önemli bir dolgu olması gerekir. 50px'in altında, kahraman içeriği kenarlara karşı sıkışık hissediyor.
• Alan XXL: Kelepçe (89px, 11vw, 110.89px): Serbestçe kullanın. Belki dramatik solunum odasına ihtiyaç duyan özel bölümler için.

Düzen değişkenleri

• Birincil sütun genişliği:% 61.803
  • Nasıl anlıyoruz: 1 1,618 = 0.61803 (veya%61.803) bölün
  • Bunu herhangi bir iki sütunlu düzende ana içerik alanınız için kullanın
• İkincil sütun genişliği:% 38.197
  • Kenar çubuğu sütununuz için aynı satırda kullanın
  • % 100 - 61.803% =% 38.197
• Konteyner Maksimum Genişlik: 1165px
  • Çizgiler 72 karakterin ötesine geçtiğinde metin okunabilir.
    • ve minimum metin boyutu olarak 10 piksel varsayılırsa, optimal okuma genişliği (720px) × Altın Oran (1.618) = 1165px
  • İçeriğinizi tutan ana bölümünüze veya satırınıza başvurun
• Altın Yükseklik Oranı: Calc (% 100 / 1.618)
  • Bu, resimler, harekete geçirici kutular, kahraman bölümleri, ekip üye kartları vb. Gibi modül/modül grupları için yüksekliklerde bir değer olarak kullanılabilir.
  • Bu, kareler veya rastgele şekiller yerine dikdörtgenler yaratacaktır. Beyniniz bu oranları mükemmel çerçeveli bir fotoğraf gibi doğal olarak çekici bulur.
  • Bunu nasıl elde ederiz? Altın oranı, genişlik = 1.618 ise, yükseklik = 1. Yani genişlik =%100 ise, yükseklik =%100 ÷ 1.618 =%61.8. Bu formül bunu otomatik olarak yapar.

Bu değişkenleri Divi 5'in değişken yöneticisine kaydedin. Ardından, genişlik, yükseklik veya maksimum genişlik alanlarının yanındaki değişkenler simgesini tıklayarak bunları herhangi bir yerde kullanın. İlk kurulumdan sonra matematik gerekmez. Ayrıca, bu değişken etiketlerin hiçbiri sabit değildir; Etiketleri mantıklı bir şeyle değiştirebilirsiniz.

Altın Oranlı Bir Kahraman Bölümü Oluşturma

Yeni oluşturduğumuz altın oran değişkenlerini kullanarak, başlangıç ​​sitesi koleksiyonunun tasarımlarından birinden esinlenerek bir kitabın açılış sayfası için bir kahraman bölümü oluşturalım. Ve bu eğlenceli kısım. Dikkatli bir şekilde hesaplanan değişkenleri alabilir ve gerçek bir kahraman bölümünü nasıl etkilediklerini izleyebilirsiniz.

Divi 5'in görsel oluşturucusunda yeni bir bölüm oluşturarak başlayın. Altın yükseklik oranı değişkeninizi kullanarak yüksekliği ayarlayın. Bu, beyninizin hoş olduğunu tanımasını doğal hale getirir.

Space XL değişkeninizi üst ve alt dolguya ekleyin. Bu, masaüstünde uygun şekilde genişlerken mobil cihazlarda yeterli nefes odası sağlar.

Bölüm arka plan için, tasarım değişkenlerinizi kullanarak iki ana seçeneğiniz vardır:

Seçenek 1: Düz renkli arka plan

• Arka plan renk alanını tıklayın ve açılır listeden birincil renk değişkeninizi seçin. Bu, kahraman bölümünüzü marka kimliğinizle tutarlı tutar. Birincil renginiz metin kontrastı için çok hafifse, bunun yerine ikincil renk değişkeninizi kullanın. Hangi rengi seçerseniz, metninizin okunabilir kalması için yeterli kontrast sağladığından emin olun. İlhamımıza ayak uydurarak,% 72 durak ve 90 ° 'de arka plan ve birincil renkler gradyanı ekleyeceğiz.

Seçenek 2: Resim Arka Planı

• Arka plan görüntü alanından kahraman görüntü değişkeninizi (bir tane oluşturduysanız) uygulayın. Arka plan görüntü ayarının yanındaki Değişkenler simgesini tıklayın ve kaydedilen görüntü değişkeninizi seçin. Arka plan görüntülerini kullanırken, metin okunabilirliği için bir kaplama ekleyin. Kaplama rengini birincil renk değişkeninize ayarlayın ve opaklığı%40-60 olarak ayarlayın. Bu, beyaz metni net ve okunabilir hale getirecek kadar görüntüyü koyulaştırır.
• Seçtiğiniz arka plan görüntüsünü daha iyi karşılaştırırsa, bina için ikincil renk değişkeninizi de kullanabilirsiniz.

İki sütun düzeni oluşturmak

İki sütunlu bir satır ekleyin.

Sol sütun genişliğini birincil sütun genişliği değişkeninize ve sağ sütunu ikincil sütun genişliği değişkeninize ayarlayın. Ayrıca “Sütun Yüksekliklerini Eşitle” seçeneğini de açacağız. Ardından, içeriği daha büyük ekranlarda okunabilir tutmak için Container maksimum genişlik değişkeni uygulanacaktır. Bu, özellikle daha geniş ekranlarda metin çizgilerinin çok geniş gerilmesini önler.

Ayrıca “özel oluk genişliği kullanın” ve 1 olarak ayarlayacağız. Bu, modüllerimiz arasında altın oranlı aralıklar kullanmamıza yardımcı olacaktır.

Uzay orta değişkeninizi, sütunlar arasında nefes alan eklemek için birinci sütunun sağına ve ikinci sütunun sol dolgusuna uygulayın. Bu, sütunlar arasında bağlantısız hissetmelerini sağlamadan yeterince ayrılık yaratır.

Daha büyük sütun ana mesajınızı ve harekete geçirici mesajınızı tutacaktır. Daha küçük sütun basit bir kahraman görüntüsü içerebilir veya temiz, metin odaklı bir tasarım için boş kalabilir.

Akan tipografi kurmak

Ana sütununuza iki başlık modülü ekleyin.

İlkini H5 olarak ayarlayın ve H5 boyut değişkenini uygulayın. Bu örnekte, bu metin modülü “en çok satan yazar” içeriğini taşır. Ayrıca bu metin için ikincil rengi kullanacağız ve büyük harfli bir yazı tipi stili uygulayacağız. Ayrıca, ayırt edici hale getirmek ve ağırlığını kalın hale getirmek için metne gövde yazı tipini de uygulayacağız.

İkincisini H1 olarak ayarlayın ve H1 boyut değişkeninizi uygulayın. Bu senin ana başlığınız olur. Bu örnekte, daha önce eklenen yazarın adını bir tasarım değişkeni olarak kullanacağız. Fikirler konusunda kısaysanız, harika başlık metninde size yardımcı olmak için Divi AI kullanabilirsiniz.

Bunun altında, destek paragrafınız için bir metin modülü ekleyin. Vücut metin boyutu değişkeni ve renk değişkeninizi uygulayın. Temel değer teklifinizi açıklayan 2-3 cümle tutun. Bu örnek için, yazarımıza kısa bir giriş ekleyeceğiz. Burada size yardımcı olmak için Divi AI'yı da kullanabilirsiniz.

Boşluk Bu öğeler, başlık ve paragraf arasındaki marj olarak uzay ortamınızı kullanır.

Ardından, metninizin altına bir düğme modülü ekleyin. Renklerinizi uygulayın. Birincil renk tasarım değişkeni ve düğme metnini kullanıyoruz.

Düğme boyutları için boşluk ortamı değişkeninizi sol ve sağ dolgu ve alana küçük üst ve alttan ekleyin. Bu, büyük boy olmadan metninizle orantılı bir düğme oluşturur. Paragraftan ayırmak için üst kenar boşluğu olarak alanınızı büyük değişken kullanın.

Düğme metni, paragraf metninizle tutarlılığı korumak için vücut metin boyutu değişkeninizi kullanmalıdır. Daha önce eklediğimiz düğme bağlantısı tasarım değişkenini de uygulayacağız.

Doğru sütunu şekillendirme

Doğru sütun, bir görüntüden yerleşik bir forma kadar her şeyi tutabilir. Daha küçük sütunda bir görüntü kullanıyorsanız, basit tutun. Ekibinizin, ofisinizin veya temiz bir illüstrasyonun fotoğrafı iyi çalışır. Görüntü yerleşimini aşırı düşünmeyin: normal olarak sütun içinde ortalayın. Bu örnek için, yeni bir kitabın görüntü tasarımı değişkenini ekleyeceğiz. Ayrıca öne çıkması için bir kutu gölgesi ekleyin.

Ayrıca, görüntünün genişliğini% 90 olarak ayarlayacağız, böylece daha hizalı görünüyor.

Danışmanlık web siteleri için bazen doğru sütunu boş bırakmak, mesajınıza tam olarak odaklanan daha temiz, daha profesyonel bir görünüm oluşturur.

Sonuç

Sonuç aşağıdadır:

Kahramanınızın görünümünü farklı ekran boyutlarında test etmek için Divi 5'in tuval ölçeklendirmesini kullanın. Değişkenlerinizdeki CLAMP () işlevleri, yanıt verebilirliği otomatik olarak ele almalıdır.

Altın oran değişkenleri mükemmel orantılı uyum sağlarken, özel içeriğinize göre küçük ayarlamalara ihtiyacınız olabilir. Uzun başlıkların biraz daha küçük bir metne ihtiyacı olabilir. Kısa, yumruklu saglinler daha büyük boyutları işleyebilir. Bazı marka stilleri daha sıkı veya daha gevşek bir aralık gerektirir.

Tasarım değişkenlerinin güzelliği, bu değişikliklerin sadece iki tıklama almasıdır. Değişken yöneticiyi açın, H1 boyutunuzu veya alan büyük değişkeni ayarlayın ve vardiyanın tüm sitenizde anında uygulanmasını izleyin.

H1'iniz belirgin kalmalı, ancak mobil cihazlarda okunabilir olmalıdır (minimum 47px). Boşluğunuz cömert hissetmeli ancak herhangi bir ekran boyutunda aşırı olmamalıdır. İki sütunlu bölünme, güven ve netliğin gösterişli tasarım öğelerinden daha önemli olduğu hizmet işletmeleri için iyi çalışan klasik, profesyonel bir düzen sunar.

Opsiyon Grup Ön Ayarları ile Site Çapında Altın Oranların Bakımı

Tasarım değişkenleri sayıları ele alır, ancak seçenek grup ön ayarları, tüm site boyunca sürekli olarak kullanıldığından emin olur.

Oluşturduğumuz değişkenleri kullanarak ilk bölümünüzü oluşturun. Tipografiyi, boşluğu ve düzeni tam olarak doğru alın. Ardından, her stil grubunun (tipografi, aralık, sınır vb.) Yanındaki önceden ayarlanmış simgeyi tıklayın ve bunları seçenek grup ön ayarları olarak kaydedin.

Bu, altın oran oranlarınızı zaten içeren yeniden kullanılabilir tasarım blokları oluşturur. Sıfırdan başlamak yerine, her yeni bölüm veya modül eklediğinizde bu ön ayarları uygulayın.

Site çapındaki oranları ayarlamanız gerektiğinde, değişkeni bir kez değiştirin. Kullanımı kullanan her ön ayar, tüm sitenizde anında güncellenir. Değişiklik yapmak için bireysel sayfalar aracılığıyla avlanma yok.

Altın oranlarınız manuel çalışma olmadan tutarlı kalır.

Matematikten Güzel Tasarım, Divi 5 bunu kolaylaştırır

Düzenler “neredeyse doğru” göründüğünde bu nagging hissi nihayet mantıklı. Seçici değildiniz: Beyniniz, hissedilen orantılı ilişkilerden yararlanıyordu.

Altın oranlar size güvenilir bir başlangıç ​​noktası verir, ancak çoğu inşaatçı her seferinde matematiği yapmanızı sağlar. Divi 5'in tasarım değişkenleri sistemi tamamen değiştirir. 1.618 oranınızı bir kez hesaplayın, değişkenler olarak kaydedin, ardından bunları sitenizde herhangi bir yere uygulamak için tıklayın.

Elli sayfada boşluğu ayarlamanız mı gerekiyor? Her sayfayı ayrı ayrı düzenlemek yerine bir değişkeni değiştirin. Altın oranları takip eden tutarlı tipografi ister misiniz? Kelepçe () değerlerinizi bir kez ayarlayın ve tüm cihazlarda mükemmel bir şekilde ölçeklendirin.

Matematik her yerde çalışır, ancak Divi 5 aslında sürekli kullanmayı pratik hale getirir.