Eğer erkekler Mars’tan gelirse ve Venüs’ten kadınlar, tasarımcılar ve geliştiriciler farklı gezegenlerden gelmelidir!Doğru!Birçok geliştirici tasarım açısından zorluk çekiyor ve bunun tersi.Tasarım becerilerinizi geliştirmek isteyen bir geliştiriciyseniz, okumaya devam edin!İlkeler ve Temel Tasarım Elemanları Bir bisiklet sürmeden önce, önce yürümeyi öğrenmelisiniz, değil mi?WordPress web tasarımınıza ekleyebileceğiniz bazı temel tasarım ilkelerini öğrenelim!İçindekiler
Hiyerarşi
Kompozisyon
Odak noktası
renk
Tipografi
Akış
Hizalama
Geliştiriciler için son notlar
Görsel hiyerarşi hiyerarşisi, web sayfalarında öğelerin ve tasarım özelliklerinin göreceli ilgi alanlarını ima edecek şekilde sunumudur.Görsel hiyerarşi, insan gözünün gördüğü şeyi hissettiği sırayı da etkiler.Genellikle görsel kontrast, boyut veya elemanların yerleştirilmesi ile elde edilir.
Devs için ipuçları: Görsel bir hiyerarşi yapmak sizin için kolay olmalıdır, çünkü bir geliştirici olarak, en azından kod açısından gayretli bir organizatörsiniz. Bu göreve HTML yapıları yaptığınız gibi yaklaşın (en iyi örnek başlık hiyerarşisidir, bir sonraki en önemli
, egzersizi biliyorsunuz.). Web sayfanızdaki tüm öğelerin bir listesini oluşturun. Birbirinizin etiketine bir kağıt parçası üzerindeki bir yerde “ilgi seviyesi” ile verin (bu sadece gözleriniz içindir). Örneğin, anahtar kelime başlığı/cümle genellikle ziyaretçilerin yön sayfasında görmesi gereken en önemli şeydir. LVL 1. Yapın. En önemli ikinci şey CTA düğmesidir – bu sizin LVL2 öğenizdir, vb. Görsel olarak belirgin bir daha yüksek seviyeli bir element oluşturun ve diğer içeriği (LVL 4 veya daha düşük) görsel olarak daha az çekici hale getirin. Aşağıdaki infografik görsel hiyerarşi yapmanın birkaç yolunu göstermektedir. Unutma, aşırıya kaçmayın ve her şeyi karıştırmayın!
Görsel bir hiyerarşiye ulaşmanın bir yolu
Görsel hiyerarşi, aynı türdeki öğelere uygulanabilir, bu da tam olarak HTML’deki başlık gibi. Örneğin, stili yalnızca biraz farklı ayarlarsanız, daha güçlü ve daha zayıf eylemler (“Şimdi Satın Al” ve “Daha Fazla Oku” gibi) için bir düğmeniz olabilir.
Görsel bir hiyerarşi yapmak, aynı öğede farklı stiller kullanır, çerçevenin boyutunu ve rengini değiştirme veya ağırlık ve yazı tipi kuvvetini değiştirme gibi küçük şeylerin büyük bir fark yaratabileceğini fark eder. CSS’de yapmak çok kolay.
Kompozisyon Web sayfalarının kompozisyonu, sanat ve web tasarımının temel ilkelerine göre tasarım öğelerinin yerleştirilmesi ve organizasyonudur. Kuralların üçte birini uygularken dengeli bir kompozisyon yapmak daha kolaydır. Üçte biri kuralları, bir görüntünün aynı mesafe olan iki yatay çizgi ve aynı mesafedeki iki dikey çizgi ile dokuz eşit parçaya bölünmesi gerektiğini önerir. En önemli kompozisyon elemanı, bu çizgilerin kesişimine mümkün olduğunca yakın yerleştirilmelidir. Daha dinamik bir kompozisyon yapmak için üçte bir kuralın uygulanması
Üçüncüsünün kurallarını uygulamak, kompozisyonunuza sadece odak noktanıza odaklanmaktan daha fazla enerji ve daha iyi akış yaratın.
Denge dengesi, görsel öğelerin nasıl eşit olarak dağıtılacağını düzenleyen tasarım ilkesidir. Beynimiz dengeli bir tasarımı istikrarlı ve sakin olarak görürken, dengesizlik bizi rahatsız ve rahatsız edici hissettiriyor. Dengesiz tasarım daha güçlü bir ifade yapabilir, ancak bunu doğru şekilde yapmak için çok yetenekli bir tasarımcıyı gerektirir. Çoğu durumda, her şeyi dengelemeye çalışmalısınız. Beyaz alanın negatif alanı, düzen stratejinizin önemli bir parçasıdır. Tasarıma negatif alan eklemek, görsel bozuklukları azaltmaya, okunabilirliği artırmaya ve mevcut dengeyi artırmaya yardımcı olur. Negatif alan eklemek için tasarım öğelerinize marj ve dolgu kullanın.
Elemanların etrafına negatif boşluklar ekleyerek, elemanı vurgulayabilirsiniz. Google’ın arama sayfasına bakın. Merkezi bir logo ve çevresinde birçok negatif alanı var. Bu web sitesinin çekirdeğini kaçıramazsınız. İçeriğinizi öne çıkarmak için negatif bir alan kullanmak
Şimdi bununla karşılaştırın.
Çok az negatif alana sahip kötü tasarım örnekleri
Bu web sitesi birçok düzeyde yanlıştır, ancak bu sayfanın en kötü şeylerinden biri, bu sayfanın içerikle dolu olmasıdır, bu yüzden onu bile göremezsiniz. Web sayfasının odak noktasının veya odak noktasının odak noktası, sayfanızdaki en çekici yerdir. Sayfanızın en önemli parçası olmalı veya WordPress’inizi yayınlamalıdır. Sayfanızın her zaman net bir odak noktası olması gerekir (yani Google ana sayfasına bakın). Sitenizin tasarımına ve işlevselliğine bağlı olarak daha büyük bir tuval üzerinde en fazla iki veya üç odaklanmış nokta (potansiyel unsur CTA sayısı). Çok fazla önemli unsur yapın ve bu sayfada olduğu gibi toplam kaosla sonuçlanacaksınız. Epilepsi yaşıyorsanız, bu bağlantıyı açmayın.
Profesyonel ipuçları: Merkezi olmayan görüntüler ve web sayfaları için, odak noktasını doğru yere yerleştirmek için üçte bir kuralları kullanın. Photoshop kesme aracı sizin için bir çizgi çizer.
Photoshop’taki kesme aracı sizin için otomatik olarak bir çizgi çizer
Bu resmin en önemli unsurlarının (kahramanın ve şirket logosunun yüzü) üçte bir oluşan kavşakta nasıl olduğuna dikkat edin. Odak noktası olması gereken yer burasıdır. Renk rengi çok önemli bir temel tasarım öğesidir. Renk Teorisi ve Renk Psikolojisi Tasarım Okulu’nda bir dönem alabilir, ancak endişelenmeyin, bunu kısaltacağız. Bilmeniz gereken en önemli şey, web tasarımınız için nasıl bir renk paleti yapacağınızdır. İşte bazı ipuçları:
Tasarımınız için ana rengi seçin.
Derinlik elde etmenize ve profesyonel bir görünüm elde etmenize yardımcı olmak için ana renk varyantlarınızdan ikisini (genellikle daha parlak bir renk ve ana renginden daha koyu) seçin.
İkincil renkleri seçin. Ana renginizi tamamladığından (veya tezat oluşturduğundan) emin olun.
Ayrıca ikincil renk varyantlarınızdan ikisini de seçin.
Nötr renkler (beyaz, gri, siyah) ekleyin.
Asla siyah veya beyaz opaklık kullanmayın. Gözlerde çok zor.
3 vurgu rengi kullanılarak birkaç durumda kabul edilebilir. 4 veya daha fazla kullanmak neredeyse her zaman çok kötü bir fikirdir. Sitenizi böyle göstermeyin!
Çoğu WordPress temasının birincil ve ikincil renkleri seçmek için doğuştan gelen bir seçeneği vardır. Yani, birincil rengi seçtikten sonra, birkaç öğenin renkleri ve genellikle düzen otomatik olarak değişecektir. Daha ayrıntılı tasarımlar için birincil ve ikincil renk varyantlarınızı ekleyin ve özel detaylar için kullanın.
Görsel hiyerarşide daha az önemli olan öğeler için nötr bir renk veya ikincil renk varyantı kullanın. Profesyonel ipuçları: Bir renk hesap makinesi kullanarak mükemmel renk paletine giden yolunuzu hackleyin. Bu basit ama şaşırtıcı uygulama, ilk renk seçeneklerinize göre uyum seçmenizi sağlayacaktır. Bir renk hesap makinesi kullanarak renk uyumunu kolayca seçin
Bir renk paleti seçmek için diğer düzgün araçlar Google Malzeme Paleti ve Renk Aracı Uygulamalarıdır. Rona’nın birincil rengini ve varyantını seçmek için bir malzeme paleti kullanın ve uyum oluşturmak için bir renk hesap makinesi kullanın. UI tasarımında renk kullanımı hakkında daha fazla bilgi edinmek istiyorsanız, ziyaret edilecek en iyi yer malzeme tasarımıdır.
Akış veya görsel hareketin akması, izleyicilerin gözlerini çalışma boyunca yönlendirmek için kullanılır. Dikkatli tasarım öğelerinin (çizgiler, şekiller, görüntüler, tipografi ve negatif alanlar) bileşimi akış yaratır. Bir web tasarımında, iyi bir grafiği yürütmek oldukça zordur, çünkü metin blokları, navigasyon, kayma vb. Göz hareketlerine görsel olarak zarar verir. Bunun nedeni, en sıkıcı form olan dikdörtgen olmalarıdır. Genellikle, (batı kültüründe) gözlerimiz sol üst köşeden bir web sitesi görmeye başlar. Bu nedenle, web tasarımında en yaygın akış türü F Flow ve Z. akışıdır.
Z vs f WordPress Deposu temasında akış
Devs için ipuçları: Akışı çok fazla vurgulamayın – sadece odak noktasının nerede olduğunu ve izleyicilerin nasıl gördüğünü düşünün. Genel kompozisyonda size yardımcı olacak daha önce tasarlanmış düzene sahip iyi bir WordPress teması bulun. Tipografi Tipografi, yazma dili yapmak için mektup türünü yönetmenin sanatı ve tekniğidir, gösterildiğinde Wikipedia kelimesi okunabilir, okunabilir ve ilginç olabilir. Çok fazla ayrıntı olmadan, bilmeniz gereken şey budur: yazı tipleri nerede bulunur
Yazı Tipleri Nasıl Seçilir
Yazı tipleri nasıl eşleştirilir
WordPress sitenize özel yazı tipleri nasıl yüklenir
İyi bir yazı tipi nerede bulabilirsiniz? Belki birisi çalıların arkasında bekliyor? Hepsini yakalamak için, nerede arayacağınızı bilmek güzel. Herkesin ziyaret ettiği ilk yer Google yazı tipi diziniydi. WordPress ve BuddyPress ile Google Yazı Tipi Dizini’nin nasıl kullanılacağına bakın. Diğer insanlar gibi Google yazı tiplerini kullanmak istemiyorsanız, ziyaret etmek için daha fazla yazı tipi kütüphanesi vardır: https://www.fontfabric.com/ https://www.fontsquirrel.com/ https: //www.1001fonts. com/https: //www.dafont.com/ https://fontlibrary.org/ Web siteniz için mükemmel yazı tipi nasıl seçilir? Bu ayrı bir sanat, ama işte bazı öneriler:
Markanızın estetiğine ve ruh haline göre yazı tiplerini seçin. Açıkçası, bir hukuk firması web sitesi oluşturursanız çizgi roman kullanmayı düşünmeyeceksiniz. Aslında, çizgi roman sans kullanmayın. Bir çizgi roman yapsanız bile.
İşte tasarımcıların nefret etmeyi sevdiği ve herhangi bir web sitesinde kullanamayacağınız başka yazı tipleri. Helvetica burada bir istisna. Tasarımcılar bundan nefret ediyorlar çünkü çok iyi ve kıskanıyorlar. Öte yandan Papirus, tüm zamanların favorisi “kesinlikle hiç kullanılmamıştır”. Genel bir kural olarak, serif başlığı için sans-serif yazı tiplerini ve içerik için yazı tipi kullanın.
Orta sayıda el yazısı yazı tipi kullanın ve sadece bir tasarım öğesi veya dekorasyon olarak. İçeriğiniz için asla kullanmayın.
İçerik için, okunabilen ve dekoratif olmayan yazı tiplerini seçin.
Sayfanızda çok fazla tipografi ve yazı tipi türünü karıştırmayın. İkisi genellikle fazlasıyla yeterlidir.
Sitenizde yalnızca bir tür harf kullanmayı seçebilirsiniz. Sorun buysa, farklı ağırlıklar ve yazı tipleri denemenizi şiddetle tavsiye ederim.
Yazı tiplerinin seçimi hakkında daha fazla okumakla ilgileniyorsanız, bu iyi eski makaleyi öneririm. WordPress tasarımım için bir yazı tipi ortağı nasıl seçerim? Size birbiriyle eşleşen bir çift yazı tipi nasıl seçileceğine dair 2 ipucu vereceğim:
Aynı yazı tipi ailesini kullanın. İnsan ailelerinden farklı olarak, yazı tipi aileleri birbirlerine çok iyi sahiptir.
İki zıt tipografi seçin, ancak görsel olarak tamamlayıcı, bir serif ve bir sans-serif. Yazı tipi hiyerarşisini ayarlayın ve başlık için bir yazı tipi kullanın (yüzde 99 sans-serif olacak) ve diğeri içerik için.
İlham almak için 30 iyi yazı tipi kombinasyonuna bakın.WordPress’e yazı tipleri nasıl yüklenir WordPress temanıza yazı tipleri ekleyin, herhangi bir geliştirici için oldukça basit bir işlemdir.İlk olarak, Örnek-Font.ttf dosyasını tema dizinine (Children!) Dosya yöneticisini kullanırsınız.Ardından, yazı tipi dosyasını style.css olarak alın çocuğunuzun teması CSS @font-face kurallarını kullanır.
Yaptın! Yardıma ihtiyacınız varsa, WordPress sitenize özel yazı tiplerini yüklemek için bu ayrıntılı kılavuzu kontrol edin. Her zamanki gibi, bunu yapmanıza yardımcı olacak birçok WordPress tipografik araç ve eklenti var. İpucu bonusu: Harf türleri ve yazı tipleri arasındaki farkın ne olduğunu merak edebilirsiniz. Teorik olarak, tipografi aslında bir yazı tipi ailesidir. Yazı tipi, harf türünün belirli bir boyutu, ağırlığı ve kuvvetidir. Ancak, hiç kimse lüks tasarımcılar dışında daha fazla harf kullanmaz. Onların çemberine sızmak istiyorsanız, kelime dağarcığınızın bir parçası olun. Hizalamanın hizalanması, bildiğiniz bir tasarım ilkesidir. Bilirsiniz … Word üzerinde hizalama kullanıyorsunuz, CSS metin hizalama özelliğini biliyorsunuz, onu üniversitede tarihlendirmek için kullanıyorsunuz … lise sevgiliniz gibi, gördüğünüzden daha fazla hizalama ilkeleri var. Yeni başlayanlar için bu sadece bir metin özelliği değildir. Oh, hayır, hayır! Marj ve dolgu, zaten bildiğiniz seviyelendirme örnekleridir. Unutmayın, tasarımcıları her şeyi uyumlu hale getirmeyi seviyorum. Aslında, kötü veya tembel tasarımcıları tanımanın en iyi yolu, tasarımdaki tüm unsurların mükemmel ve simetrik veya simetrik olup olmadığını görmektir. Hizalama, hatlara veya kenar boşluklarına göre öğelerin düzenlenmesine yardımcı olur. Genellikle, kenar boşlukları tasarımınızdan nasıl tasarlanacağınızdan görünür ve örtük değildir. İki temel hizalama ilkesi türü vardır: kenar hizalama ve merkez hizalama. Kenarların tesviye edilmesi, dış kenarla eşleşen kenar boşluklarına elementler yerleştirirken, orta seviye tasarım öğelerini orta eksende birbirine paralel olacak şekilde yerleştirir.
Devs için ipuçları: WordPress sitenizdeki öğeleri uyumlu hale getirmenin en kolay yolu bir sayfa yapıcı kullanmaktır. CSS’yi tercih ediyorsanız, marj ve dolgu ayarları ayarlarınızı ayarlamayı unutmayın. Float CSS özelliğini kullanarak elemanları sola veya sağa hizalayın. Geliştirici için son not, hadi gerçekleşelim. Olağanüstü bir tasarım hazırlamak için profesyonel bir tasarımcı kiralamak, birçok durumda gitmeye çalışılan ve test edilen bir yoldur. Gücünüze ve işlevselliğinize odaklandığınızda sizin için tüm yaratıcı düşünceleri (daha fazla) yapabilirler. Bununla birlikte, kendinizi ara sıra bir tasarım tablosunda bulabilirsiniz ve o zaman temel tasarım ilkelerinin kaydedildiğini bilmek. Gözünüzü ve görsel algınızı uygulamak, işinizi kesinlikle biraz daha kolaylaştıracak ve iyi veya kötü tasarımları hemen tanımanıza izin verecektir. Ayrıca, yapışkan renk kombinasyonunun perde arkasındaki tüm sıkı çalışmalarınıza zarar vermesini istemiyoruz. Sizce geliştiricilerin temel tasarım ilkelerini bilmesi gerektiğini düşünüyor musunuz? Kendinizi hiç “turşu tasarım” da buldunuz mu? Deneyiminizi paylaşın, sizden haber almaktan mutluluk duyacağım!
Etiket:
tasarım
UI
renk
tipografi
