Her Web Sitesi Kurulumunda Odaklanılacak 3 Önemli Tasarım Alanı

Yeni web tasarımcılarını ve kendilerini “tasarım gözü” olmayan biri olarak tanımlayanları güçlendirmeye yardımcı olacak etkili tasarım uygulamalarını araştırdığımız mini dizimiz “Etkili Divi Web Tasarım İlkeleri” nin son yazısı olan 3. bölüme hoş geldiniz.

Artık tasarıma nasıl daha iyi bakılacağını öğrenmeyi ve hazırlamayı ele aldığımıza ve araç kutumuzda olması gereken bazı etkili tasarım ilkelerini gözden geçirdiğimize göre, bir başarı elde etmenin anahtarı olan 3 çok önemli tasarım alanına odaklanacağız. iyi tasarlanmış bir site.

Hemen ona geçelim!

Her Web Sitesi Kurulumunda Odaklanılacak 3 Önemli Tasarım Alanı

Bu serideki ilk iki gönderiyi takip ettiyseniz, tasarım söz konusu olduğunda doğru ya da yanlış diye bir şey olmadığına işaret ettiğimi duydunuz, ancak üzerinden geçtiğimiz etkili tasarım ilkelerinin yanı sıra, birkaç önemli nokta var. , her seferinde başarılı, göze hoş gelen bir web sitesi oluşturmak için odaklandığım pratik tasarım alanları. Ve en iyi yanı, bu fikirlerin her tür endüstriye veya web tasarım stiline aktarılabilir olmasıdır!

1) Tipografi ve Yazı Tipleri

Siteniz güzel görüntülere, ilgi çekici renklere ve hoş tasarım öğelerine sahip olabilir, ancak sitenin türü kötü görünüyorsa veya sitenin stiline uymuyorsa, bu büyük bir caydırıcı olabilir. Bu seride tipografinin temellerine girmediğimiz için, temel bilgiler hakkında daha fazla bilgi edinmek istiyorsanız lütfen Her Web Tasarımcısının Bilmesi (Ve Anlaması) Gereken 50 Tipografi Terimimize bakın. Karakter aralığı, satır aralığı, izleme, sans ve sans-serif yazı tiplerini anlamak, yazım ve tasarımda daha iyi olmak isteyen kişilerin işine yarayacaktır.

Tasarım stilleri ve farklı sektörlerde büyük farklılıklar gösteren müşterilerle başarılı bir Divi web tasarımcısı olarak bağlı kaldığım birkaç pratik tipografi yönergesi sunmama izin verin:

Sitenizin sektörü/tasarımıyla iyi eşleşen yazı tiplerini kullanın – Bu serinin ilk gönderisinde, harika görüntülere ve renklere sahip bir site tasarladığım ancak yazı tipinin iyi uyuşmadığı bir örneği hatırladım. Kısacası, endüstriyel bir üretim sitesiydi ve başlangıçta kullandığım yazı tipi daha modern, şık bir tarzdı ve gerçekten de şirketin görünümüne ve markasına uymadı.

Bu, yazı tipleriyle yaratıcı olamayacağınız veya sektördeki statükoya uymanız gerektiği anlamına gelmez, ancak pratik olarak, profesyonel bir hizmet sitesinde çalışıyorsanız, muhtemelen fazla bir şey istemeyeceksiniz. en iyi, iddialı yazı tipi dahil. Ve tam tersi, benzersiz, belki de iddialı bir vibe ile bir şey üzerinde çalışıyorsanız, belki Arial veya Helvetica, aradığınız vibe ile eşleşmeyecektir. Bu beni bir sonraki yazı tiplerini karıştırma ve eşleştirme noktasına getiriyor.

2 ila 3 yazı tipine sadık kalın - On yıllardır zamana dayanan temel bir tasarım ilkesi, kullandığınız yazı tipi sayısını sınırlamaktır. Çok fazla yazı tipi okuyucunun dikkatini dağıtır, genellikle hiyerarşiyi karıştırır ve açıkçası, bir kanun kaçağı için ödül arayan eski bir batılı el ilanı gibi görünür. Başlıklar ve başlıklar için genellikle tek bir yazı tipi kullanırım, ardından tüm paragraf metnim için genellikle kolayca okunabilen bir sans-serif yazı tipi kullanırım. Bazen ana menü için 3. stil yazı tipim olur, ancak menü yazı tipim genellikle başlıklarım ile uyumlu hale getirilir.

Yazı tiplerini nasıl eşleştireceğinize dair daha fazla fikir için, lütfen Web Tasarımında Yazı Tipi Eşleştirme hakkındaki bu önceki gönderiye bakın: Açıklanan ve Açıklanan 7 Temel İlke

Metninizde görseller olsun – İçeriğinizde yeterli miktarda metin olması harika. Aslında, SEO açısından yardımcı olması için sayfa başına en az 300 kelime olması önerilir. Ancak çok fazla metin olmasına ve yeterli görsel yardımcı olmamasına dikkat edin. Kitaplar, bloglar, makaleler ve diğer uzun biçimli içerikler için çok fazla metin beklenir, ancak hoş ve ilgi çekici bir açılış sayfası tasarlıyorsanız, çok fazla içerik daha fazla bakmadan kullanıcıyı sıkar. Genellikle ön sayfanın müşterileri kapıdan geçiren satış hunisi olması gerektiği, SONRA daha ayrıntılı bilgi için daha fazla sayfa, blog ve diğer kaynaklara dalabilecekleri zihniyetiyle tasarlarım.

Elegant Themes ana sayfası şu anda bunun mükemmel bir örneğidir.

Bu örnekte, ilgi çekici bir başlık, harekete geçirici mesaj butonlu bir metin paragrafı ve kullanıcının ilgisini çeken mesaja bağlanan hoş bir görsel grafik görüyoruz. Bu, görsellerle yeterli miktarda metin düzenlerken izlenecek harika bir örnektir.

Bir zamanlar metin ve görsellerle tasarlanmış güzel bir ön sayfam vardı ve temel düzenlemeleri yapması için müşterime verdiğimde, ön sayfaya, tasarımın akışını tamamen bozan küçük bir kitap bölümü gibi görünen bir şey attılar. Ben YARATTIM. Öyleyse bu bir ders olsun ve içeriğin harika olmasına rağmen buna göre yerleştirilmesi gerektiğini bilin!

Geri dönmek için bir başka harika kaynak, 2016'da Dikkat Edilmesi Gereken 20 Tipografi Eğilimi, çünkü bu eğilimler bugün hala çok geçerli ve ilerleyecek.

2) Görüntü ve Renk Yönetimi

Tipografiye benzer şekilde, web sitem için en fazla 2 ila 3 ana renge bağlı kalma eğilimindeyim. Markalaşmada çok sayıda renge sahip bir şirket veya kuruluş olmadıkça, çok fazla rengin (özellikle de iyi eşleşmedikleri takdirde) çok dikkat dağıtıcı ve genellikle kafa karıştırıcı olabileceğini düşünüyorum. Renk ve görüntüleri karıştırırken uyguladığım bazı yönergeler şunlardır:

Temel renkler ve vurgu renkleri – Son projelerde çok başarılı bulduğum yöntemlerden biri, bir müşterinin markasını almak ve henüz almadıysa, harekete geçirici mesajlar, bağlantılar vb. için güzel bir vurgu rengi seçmektir. Örneğin, bu konuda sitesinde, logonun markasını gri ve turuncu ile aldım ve turuncunun ana vurgu rengi olarak "pop" olmasına yardımcı olmak için ince, koyu deniz mavisi/mavi ekledim.

Renkleri resimlerle akıcı hale getirin – Tasarımınızı ve resimlerinizi harika bir şekilde bir araya getirmenin bir yolu, web sitesi renklerini bazı birincil görüntülerle eşleştirmektir. Web sitesi renklerini müşterimin kıyafeti ile eşleştirebildiğim için bu örnek biraz nadirdir, bu da görüntü ve web sitesi rengi arasında çok güzel ve akıcı bir his uyandırdı.

Müşterilerimin kıyafetinden güzel bir kestane rengi ve turuncu renk aldım ve tüm siteyi güzel bir üniforma görünümünde bir araya getirmeyi başardım. Artık bir sitenin tamamını bir resimden markalaştırabileceğiniz bir durumda nadiren olacaksınız, ancak bu aynı ilke, harekete geçirici mesajlar vb. ile arka plan resimleri kullanırken de uygulanabilir!

Pratik olarak, belirli renkleri nasıl seçeceğinizden emin değilseniz, işte 10 Renk Seçici Aracı

Çok canlı renklerden uzak durun - Yeni tasarımcıların genellikle şaşı ve ekrandan uzaklaşmasına neden olan süper parlak yeşiller, pembeler, sarılar vb. kullandığını görüyorum. Burada herhangi bir kötü örneğe işaret etmeyeceğim ama eminim ki renklerin sizi geri çevirdiği ve asla geriye bakmak istemediğiniz birçok site görmüşsünüzdür. Canlı renklerle kesinlikle yanlış bir şey yok, sadece bu etkiyi vermediklerinden emin olun. Bu, diğer tasarımcılardan yapıcı eleştiri ve geri bildirim almanın karşılığını alabileceği yerdir.

Benim tavsiyem, metin, arka plan grafikleri vb. gibi temel renkler için oldukça nötr renkler kullanmak, ardından harekete geçirici mesajlar, bağlantılar ve sayfa tasarımının daha fazla dikkat çeken alanları için daha canlı renkler kullanmaktır. Tasarım konusunda yeniyseniz ve renk sizin için rahat bir alan değilse, renkleri daha iyi seçme konusunda birçok seçenek sağlayacak olan WordPress Web Tasarımcıları için Renk Eşleştirme Tekniklerimize geri dönmekten çekinmeyin.

3) Güçlü Harekete Geçirici Mesajlar

Son olarak, web tasarımının çok önemli bir alanı, güçlü ve net harekete geçirici mesajlara (CTA'lar) sahip olmaktır. Kötü web tasarımının en yaygın sorunlarından biri, net bir harekete geçirici mesaj içermeyen yoğun metin odaklı içeriğe sahip olmaktır. İçerik harika, ancak tüm bilgiler ve dönüşüm yoksa, müşteriniz kesinlikle tatmin olmayacaktır. Vurgulu bir renk veya hoş bir vurgulu efektle CTA'larınızı tasarımınızdaki diğer öğelerden öne çıkarmanızı öneririm.

İşte yeni bir müşteri için bir harekete geçirici mesajı nasıl uyguladığıma bir örnek.

Bu durumda, müşterinin web sitesi kullanıcıları için birincil eylem çağrısı, e-posta güncellemelerine kaydolmaktır, bu nedenle hemen, daha koyu bir arka plan görüntüsünden çıkan logoya, hemen kaydolma fırsatına sahip küçük bir metin parçasına sahibiz. aşağı kaydırmadan önce. İdeal olarak, harekete geçirici mesajınıza kullanıcının gözünü çekmek istersiniz. Bir sitede canlı bir vurgu rengine veya efektine sahip olmanın son derece faydalı olduğu yer burasıdır.

Eylem çağrısı söz konusu olduğunda bağlı kaldığım birkaç yönerge:

Ana sayfanızı güçlü bir harekete geçirici mesajla sonlandırın - Çoğu zaman, ana sayfa tasarımlarım neredeyse sitenin tamamının bir özetidir. Örneğin, bir sitenin şöyle bir yapısı varsa:

• Hakkımızda
• Hizmetler
• referanslar
• Blog
• Temas

Ana sayfadaki bu bölümlerin her biri için bir harekete geçirici mesaj yapacağım, ardından ana harekete geçirici mesaj için nihai, şık bir tasarım yapacağım, ki bu durumda kaydolmak olacaktır. İşte ne demek istediğimin en iyi örneği:

Ön sayfa esasen tüm siteyi kapsar ve kullanıcıların galerileri, videoları ve daha fazla bilgiyi görüntülemek için tıklamaları için bir başlangıç ​​noktasıdır. Belki de bu zihniyet, ana sayfa tasarımlarınızda olduğu gibi size yardımcı olacaktır!

Kenar çubuğunuzda bir harekete geçirici mesaj bulundurun - Kenar çubuğunda güçlü bir harekete geçirici mesaj fırsatını unutmayın! Özellikle blog gönderileri veya sık sık kenar çubuğu kullanan başka sayfalar içeren bir siteniz varsa. Bu, ekstra bir e-posta kaydı, bağış düğmesi veya başka bir ana CTA'ya bağlantı eklemek için harika bir fırsat.

Yukarıdaki siteye benzer şekilde, kişisel sitem için ana eylem çağrılarından biri bir e-posta kaydıdır ve bu, ana sayfamın ön ve merkezinde yer alırken, bunu blog gönderilerimde ve eğitim sayfalarımda da çok belirgin hale getirmek istedim. .

Burada, ana kayıt formunun üstünde ve altında güçlü bir görselle birlikte her gönderi şablonunun sağ üst köşesinde var. Bu nedenle, kenar çubuklu sayfalarınız varsa, bu alanların güçlü harekete geçirici mesajlar için değerli gayrimenkuller olduğunu unutmayın! Ve emin olmak ve CTA'nızın dikkat çekici ve tercihen ana içeriğin altında mobilde ilk olarak görünecek olan kenar çubuğunun en üstünde olmasını istiyorsunuz.

Alt sayfa içeriğinden sonra bir harekete geçirici mesajınız olsun – Son olarak ve belki de en çok gözden kaçan şey, normal sayfalarınızda bir harekete geçirici mesaj bulundurmayı hatırlamaktır! Yakın zamana kadar, bir müşteri tarafından istendiğinde, kuşkusuz bunu gözden kaçırdım. Aşağıdaki örnekte, ana hizmet sayfalarının sonunda güçlü bir harekete geçirici mesaj bulunmaktadır.

Bir web sitesi kullanıcısı bu sayfayı görüntülediğinde, tüm bilgileri alır ve ardından sağda hoş, hoş bir görüntü ve soldaki CTA düğmesi ile ilgileniyorsa, bu bölüme yardımcı olan canlı bir turuncu ile desteklenen müşterimle iletişim kurma şansına sahip olur. sayfadan çıkın. Evet biliyorum, önceki bir gönderide genellikle CTA'larımı ortaya veya sağa koyduğumu söyledim ama bu düzen iyi çalışıyor gibi görünüyordu

Seri Özeti

Umarım bu seri, web tasarımı çabalarınıza uygulayabileceğiniz bazı iyi web tasarım ilkeleri ve taktikleri ile size ilham vermesine yardımcı olmuştur! Mini serinin tamamında neler yaptığımızın kısa bir özetini yapalım:

Bölüm 1

• Zihniyetinizi Hazırlamak
• İyi Tasarım Trendleri Nasıl Öğrenilir?
• Çalışmanız Hakkında Geribildirim ve Yapıcı Eleştiri Alın

Bölüm 2

• Üçler Kuralını Takip Edin
• Düzen ve Akış
• Görsel Hiyerarşi

3. Bölüm

• Tipografi ve Yazı Tipleri
• Görüntü ve Renk
• Güçlü Harekete Geçirici Mesajlar

Yine, tüm akademik çalışmalar iyi tasarıma adanmıştır, bu yüzden burada sadece yüzeyi çiziyoruz, ancak umuyorum ki bu ilkeler ve uygulamalar, tasarımda daha iyi olmak isteyenlere doğru yönde işaret etmede yardımcı olmuştur. Size yardımcı olan ve paylaşmak istediğiniz başka tasarım ilkeleriniz veya yöntemleriniz varsa, aşağıdaki yorumlarda bize bildirmekten çekinmeyin!

İşte hepimiz için her gün daha iyi Divi Web Tasarımcıları olmak!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!