Her web sitesi oluşturulmasına odaklanması gereken 3 önemli tasarım alanı
Yeni web tasarımcılarını ve “tasarım için gözleri” olmayan biri olarak tanımlamaya yardımcı olmak için etkili tasarım uygulamalarını keşfettiğimiz mini serimiz “Etkili Divi Web Tasarım İlkeleri” nin son gönderi olan Bölüm 3’e hoş geldiniz.
Şimdi, tasarım için daha iyi gözlere nasıl sahip olacağını ve ekipman kutumuzda sahip olmak için bazı etkili tasarım ilkelerini tartıştıklarını tartıştık, iyi tasarlanmış bir siteye ulaşmanın anahtarı olan 3 çok önemli tasarım alanına odaklanacağız.
Hadi düz gidelim! 3 Web sitesinin her yapımına odaklanması gereken 3 önemli tasarım alanı, bu serideki ilk iki gönderiyi takip etmeye devam ederseniz, tasarım açısından doğru veya yanlış olmadığını, ancak etkili ile birlikte gösterdiğimi duydunuz. Tartıştığımız tasarım ilkeleri, her zaman başarılı ve eğlenceli bir web sitesinin oluşturulmasını sağlamaya odaklandığım bazı pratik tasarım alanları var. Ve en iyi yanı, bu fikirler her türlü endüstriye veya web tasarım stillerine aktarılabilir! 1) Tipografi ve yazı tipleri Sitenizde güzel bir görüntü, çekici bir renk ve hoş tasarım öğeleri olabilir, ancak tipte sitenin stiline uygun olarak uygunsuz görünüyorsa veya değilse, ana engel olabilir. Bu serideki tipografinin temellerini tartışmadığımız için, temel bilgiler hakkında daha fazla bilgi edinmek istiyorsanız, lütfen her web tasarımcısı bilinmesi gereken (ve anlaşılması) 50 tipografik hükümlere geri dönün. Yazı tipi Kartning, Lider, İzleme, SANS ve SANS-SERIF’in anlaşılması, tür ve tasarım açısından daha iyi olmak isteyen insanlar tarafından çok ihtiyaç duyulacak. Farklı tasarım stilleri ve endüstrilerde çok farklı olan çok farklı müşteriler: Site endüstrisinize/tasarımınıza uygun yazı tiplerini kullanın – Bu serinin ilk gönderisinde, kendim iyi bir görüntü ve renge sahip bir site tasarladığım bir örneği hatırlıyorum. Yazı tipi uygun değildir. Kısacası, başlangıçta kullandığım bir endüstriyel ve yazı tipi üretim sitesi, şirketin görünümüne ve markasına uymayan daha modern ve şık bir tarzdı.
Bu, yazı tipleri ile yaratıcı olamayacağınız veya endüstriyel quo statüsüne uyum sağlamanız gerektiği anlamına gelmez, ancak pratik olarak profesyonel bir hizmet sitesinde çalışıyorsanız, üst düzey sanat yazı tipini istemeyebilirsiniz. Ve tersine, benzersiz bir titreşime sahip bir şey yapıyorsanız, belki sanat, belki Arial veya Helvetica istediğiniz titreşimlerle eşleşmez. Bu, yazı tipini karıştırıp eşleştirmem için bir sonraki noktama götürdü. 2 ila 3 yazı tipi kullanmaya devam edin – onlarca yıl boyunca test edilen temel tasarım prensibi, kullandığınız yazı tiplerinin sayısını sınırlamaktır. Çok fazla yazı tipi, genellikle hiyerarşiyi karıştıran ve açıkçası, sonunda suçlular için hediyeler arayan eski bir batı yaprağına benziyor. Genellikle başlıklar ve başlıklar için bir yazı tipi kullanıyorum, daha sonra genellikle tüm paragraf metnim için okunması kolay olan Sans-Serif yazı tiplerini kullanıyorum. Bazen ana menü için 3. stil bir yazı tipim olacak, ancak yazı tipi menüm genellikle başlığımla basitleştiriliyor.
Yazı tiplerinin nasıl eşleştirileceği hakkında daha fazla fikir için, lütfen web tasarımına yazı tiplerinin yüklenmesi hakkında bir önceki yazıya bakın: 7 ana ilkeler açıklandı ve açıklanan metninizle görsel var – içeriğinizdeki iyi metinlerin sayısı çok iyi. Aslında, SEO perspektifinden yardımcı olmak için sayfa başına en az 300 kelimeye sahip olması önerilir. Ancak dikkatli olun çünkü çok fazla metin ve yeterli görsel yardım yok. Kitaplar, bloglar, makaleler ve diğer uzun form içeriği için birçok metin beklenir, ancak çekici bir sayfa tasarlarsanız, çok fazla içerik daha fazla bakmadan önce kullanıcıları sıkılacaktır. Genellikle ön sayfanın müşterileri kapıdan getiren bir satış kanalı olması gerektiği zihniyetiyle tasarlıyorum, daha ayrıntılı bilgi için daha fazla sayfaya, bloglara ve diğer kaynaklara dalabilirler.
Bu örnekte, ilginç bir başlık, davet düğmesi hareketleri ile metnin paragrafı ve kullanıcıyı dahil eden mesajı bağlayan iyi bir görsel grafik görüyoruz. Bu, görsellerle iyi metin sayısını ayarlarken izlenmesi gereken iyi bir örnektir. Bir zamanlar metin ve görsellerle tasarlanmış güzel bir ön sayfam vardı ve temel düzenleme yapmak için müvekkilime teslim ettiğimde, tasarım akışına gerçekten zarar veren ön sayfaya küçük bir bölüm gibi görünen şeyleri attılar. Ben YARATTIM. Öyleyse bir ders olsun ve içerik iyi olsa da, doğru bir şekilde yerleştirilmesi gerektiğini bilin!
Yönlendirilmesi gereken bir diğer harika kaynak, 2016 yılında dikkate alınması gereken 20 tipografik eğilimdir, çünkü eğilim şimdiye kadar hala çok geçerlidir ve ilerlemeye devam edecektir. 2) Image ve Warnamirip Yönetimi Tipografi ile, web sitemi yapmak için en fazla 2 ila 3 ana renk kullanma eğilimindeyim. Markalaşmada birçok rengi olan bir şirket veya kuruluş olmadıkça, çok fazla rengin (özellikle uygun değilse) çok sinir bozucu ve sıklıkla kafa karıştırıcı olabileceğini düşünüyorum. İşte renkleri ve görüntüleri karıştırırken itaat ettiğim bazı yönergeler: Temel renk ve aksan rengi-bulduğum yöntemlerden biri son projede çok başarılı, müşteri markasını almak ve değilse, davetiyelerin harekete geçmesi, bağlantılar vb. İçin iyi bir aksan rengi seçmektir. Örneğin, bu sitede, gri ve turuncu ile markalaşma logoları alıyorum ve ana aksan rengi olarak turuncu “pop” yapmasına yardımcı olmak için ince koyu mavi/mavi deniz mavisi ekliyorum.
Renkleri resimlerle düzene sokma – tasarımınızı ve görüntünüzü iyi bir şekilde birleştirmenin bir yolu, web sitesinin rengini birkaç ana resimle eşleştirmektir. Bu örnek oldukça nadirdir, çünkü web sitesinin rengini, web sitesinin görüntüsü ve rengi arasında çok iyi bir izlenim üreten müvekkilimin kıyafetleriyle eşleştirebilirim. Müvekkilimin kıyafetlerinden iyi bir bordo ve turuncu kırmızı aldım ve tüm siteyi iyi bir görünümde birleştirebildim. Şimdi nadiren bir görüntünün tüm sitesini etiketleyebileceğiniz bir durumdasınız, ancak aynı prensip, oyunculuk yoluyla bir arka plan görüntüsü kullanılırken uygulanabilir. Pratik, belirli bir rengi nasıl seçeceğinizden emin değilseniz, burada 10 araç renk seçmenleri çok parlak renklerden kaçınır – genellikle insanları dar gözlerini ve ekrandan uzak durduran süper parlak yeşil, pembe, sarı vb. Kullanarak yeni tasarımcıları görüyorum. Burada kötü bir örnek göstermeyeceğim, ama eminim ki renklerin sizi döndürdüğü ve asla geriye bakmak istemediği birçok site gördünüz. Tabii ki parlak renklerde yanlış bir şey yok, sadece rengin bu etki sağlamadığından emin olun. Burası, diğer tasarımcılardan eleştiri ve yapıcı geri bildirim almak sonuç üretebilir.
Benim tavsiyem, metin, arka plan grafikleri vb. Gibi temel renkler için oldukça nötr bir renk kullanmaktır. Ardından, sayfa tasarımından daha fazla dikkat çeken davetiyeler, bağlantılar ve alanlar için daha parlak renkler kullanın. Tasarım konusunda yeniyseniz ve renk sizin için rahat bir alan değilse, lütfen renkleri nasıl seçeceğiniz konusunda birçok seçenek sunacak WordPress web tasarımcıları için renk eşleştirme tekniğimize geri dönün. 3) Güçlü davranma daveti Son olarak, çok önemli web tasarım alanlarından biri, harekete geçme konusunda güçlü ve net bir davetiye (CTA) sahip olmaktır. Kötü bir web tasarımının en yaygın problemlerinden biri, net bir şekilde harekete geçmeye davet edilmeden ağır metin tarafından yönlendirilen içeriğe sahip olmaktır. İçerik iyidir, ancak hepsi bilgi ise ve dönüşüm yoksa, müşteriniz kesinlikle tatmin olmayacaktır. CTA’nızı tasarımınızdaki diğer unsurlardan iyi bir renk veya vuruş efekti ile öne çıkarmanızı öneririm. Aşağıda, son zamanlarda müşteriler için harekete geçme daveti uyguladığımın bir örneğidir. Bu durumda, web sitesi kullanıcıları için ana istemciyi harekete geçirme daveti, e -posta güncellemelerine kaydolmaktır, bu yüzden devam edin, daha koyu bir arka plan görüntüsünden ortaya çıkan bir logomuz var, kaydırmadan önce bile doğrudan kaydolma fırsatına sahip küçük bir metin var aşağı. İdeal olarak, oyunculuk davetinize kullanıcının dikkatini çekmek istiyorsunuz. Canlı aksan rengine sahip olduğu veya bir site üzerindeki etkisi çok kullanışlıdır. İşte harekete geçme daveti açısından itaat ettiğim yönergelerden bazıları: Ana sayfanızı güçlü bir aksiyon davetiyesi ile sonlandırın – çoğu zaman, ev tasarımım neredeyse bir bütün olarak sitenin bir özeti. Örneğin, bir sitenin şöyle bir yapısı varsa:
Hakkımızda
Hizmet
Blog İletişim
Veranda’daki her bölüm için harekete geçme davetiyesi yapacağım, daha sonra bu durumda kaydolacak olan ana oyunculuk daveti için ince son tasarım. İşte ne demek istediğimin ana örneği:
Ön sayfa temel olarak tüm siteyi özetler ve kullanıcıların galerileri, videoları ve daha fazla bilgiyi görmek için tıklamaları için bir başlangıç noktasıdır. Belki zihniyet ev tasarımınızda olduğu gibi size yardımcı olacaktır! Yan çubuğunuzda harekete geçmeye davet edin – yanda güçlü davranmaya davet etme fırsatını unutmayın! Özellikle blog yayınları veya genellikle kenar çubuğu kullanan diğer sayfalarınız varsa. Bu, ek e -posta kaydı, bağış düğmesi veya diğer ana CTA’ya bağlantı eklemek için iyi bir fırsattır. Yukarıdaki siteye benzer şekilde, kişisel sitem için ana davetiyelerden biri e -posta kaydı ve verandamın önünde ve ortasında iken, blog yazımda ve sayfalarımda da çok netleştirdiğinden emin olmak istiyorum. . Burada, ana kayıt formunun üstünde ve altında güçlü bir görsel ile birlikte her bir gönderi şablonunun sağ üst kısmında bulunuyorum. Yani, yan çubuklu bir sayfanız varsa, bölgenin güçlü bir aksiyon davetiyesi için değerli bir gayrimenkul olduğunu unutmayın! Ve CTA’nızı görünür hale getirmek ve görünür hale getirmek istiyorsunuz ve ana içerik altında telefonda ilk görünecek olan tarafın üstünde olmalı. Subhhammal içeriğinden sonra harekete geçme davetiyeniz – son ve belki de en çok göz ardı edilen, normal sayfanızda harekete geçmeye davet etmeyi hatırlamaktır! Kendim, müşteri tarafından sorulduğunda yakın zamana kadar bunu görmezden geldiğimi itiraf ediyorum. Aşağıdaki örnek, ana hizmet sayfalarının sonunda hareket etmek için güçlü bir davetiye sahiptir.
Web sitesi kullanıcısı sayfayı gördüğünde, tüm bilgileri alacak ve daha sonra sağda iyi ve dostça bir resimle ilgileniyorsanız ve soldaki CTA düğmesi, bölüme yardımcı olan parlak turuncu tarafından desteklenir. Sayfadan. Evet, bir önceki yazıda genellikle CTA’mı ortada veya sağa koyduğumu söylediğimi biliyorum, ancak bu düzen iyi çalışıyor gibi görünüyor. Web Tasarım İşiniz! Mini Serisi boyunca tartıştıklarımızın kısa bir özetini yapalım: Bölüm 1 Zihniyetinizi hazırlayın
İyi Tasarım Trendleri Nasıl Öğrenilir
Çalışmanızın geri bildirimi ve yapıcı eleştirisi alın
Bölüm 2 Üçte bir kurallara uyun Düzen ve Akış Görsel hiyerarşi
Bölüm 3
Tipografi ve yazı tipleri
Resim ve renk
Güçlü davranmaya davet
Bir kez daha, tüm akademik çalışmalar iyi tasarıma adanmıştır, bu yüzden sadece buradaki yüzeyi çiziyoruz, ancak umudum, bu prensip ve uygulamanın tasarımda daha iyi olmak isteyen sizi yönlendirmeye yardımcı olmasıdır. Paylaşmak istediğiniz başka tasarım ilkeleriniz veya yöntemleriniz varsa, aşağıdaki yorumlarda bize anlatmaktan çekinmeyin! Bu hepimizin her gün daha iyi bir Divi web tasarımcısı olması için! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
