“Tasarımcı Olmayanlar” İçin 3 Etkili Web Tasarım İlkesi

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 2. bölümüne hoş geldiniz.

Önceki yazımızda, zihniyetinizi hazırlamayı ele aldık ve tasarım için nasıl daha iyi bir göz geliştireceğinizi öğrenmenin bazı yollarını inceledik. Bu yazıda, web tasarımının “tasarım” tarafında daha iyi olmak için web tasarım çalışmalarınıza hemen uygulayabileceğiniz bazı evrensel iyi tasarım ilkelerine odaklanacağız.

Hemen ona geçelim!

“Tasarımcı Olmayanlar” İçin 3 Etkili Web Tasarım İlkesi

Bu serinin 1. bölümünde bahsedildiği gibi, tasarım söz konusu olduğunda doğru ya da yanlış yoktur. Bu yazıda ele alacağımız şey, genel olarak web tasarım topluluğu içinde büyük ölçüde ve evrensel olarak iyi tasarım ilkeleri olarak kabul edilmektedir. Bu, aynı zamanda, Divi web tasarımcısından yaklaşık on yıllık bir deneyime ve daha da önemlisi, yüzlerce mutlu ve memnun müşteriye sahip bir grafik/baskı tasarımcısı olarak benim kişisel kılavuzum. Bu ilkeleri, oluşturduğum her Divi web sitesi tasarımında kullanıyorum ve her zaman iğrenç veya olağandışı bir şey isteyen bir müşteri olsa da, bunlar size 10 kez en az 9'da iyi hizmet edecektir.

1) Üçte Bir Kuralı

Web tasarımı, grafik tasarım, baskı tasarımı, fotoğrafçılık ve diğer yaratıcı ortamlarda en yaygın uygulamalardan biri, basit bir kuralı takip etmektir: Üçler Kuralı. Kısacası, Üçler Kuralı tamamen simetri ve denge ile ilgilidir. Üçler kuralının amacı, tasarımda daha fazla denge ve uyum sağlamanıza yardımcı olmaktır. Ve en iyi yanı - Üçler Kuralını grafiklere, resimlere, tüm web sayfası düzenlerine ve daha fazlasına uygulayabilirsiniz!

Üçler Kuralı'nın bilimsel olup olmadığına dair çevrimiçi çok sayıda konuşma var, ancak ne olursa olsun, popüler görüş, bir görüntü veya tasarımın hem sol hem de sağ yarısında veya üst ve altta çok benzer olması durumunda izleyicinin onu bulabileceğini gösteriyor. sıkıcı veya sıkıcı. Herhangi bir şey varsa, üçte bir kuralı onu ilginç kılar ve aşağıda ele alacağımız iyi bir akışa yol açabilir.

Divi Web İçeriğinizi Optimize Etmek için Tasarım İpuçları hakkındaki önceki yazımızda, görsel olarak düşünmenin harika bir yolu olan bir ızgara sistemi olarak da bahsedilmektedir. Şuna benzeyen bir ızgara hayal edin:

Resminiz, grafiğiniz veya düzeniniz üzerindeki bu hayali ızgara ile, içeriği bir veya daha fazla ana kesişme noktasının yakınına kolayca yerleştirebilirsiniz.

Nesneleri ve odak noktalarını 4 kesişme noktasından 1 veya daha fazlasında tutmak, öznenin kesişme noktasının altında olduğu ikinci örneğe kıyasla, genellikle çok daha dengeli, simetrik bir görünüm elde edecektir. Aşağıdaki resme bir göz atın. İlk örnek, üçte bir kuralına UYGUN DEĞİLDİR.

Bu örnek, üçte bir kuralına uymaktadır.

İlk örnek hala güzel bir görüntü olsa da, üçte bir kuralının kullanılması, üçte birler kuralında ön planı alt kesişme noktalarıyla kesiştirerek görüntüye tamamen farklı bir his verir. Üçte bir kural tablosu ile resme bakalım.

Şimdi, üçler kesişimleri kuralını sıraya koymadan resme bakalım.

Göze hoş gelen tasarımların genellikle bir veya daha fazla kesişme noktasıyla nasıl hizalanacağı konusunda büyük bir fark görebilirsiniz. Üçler Kuralı en çok fotoğrafçılık ve videografide konuşulurken, web sitesi tasarımı için de aynı derecede önemlidir. Üçler kuralını kişisel siteme nasıl uyguladığımı size göstereceğim. İzleyicinin aşağı kaydırmadan önce gördüğü şey için geçerli olan "ekranın üst kısmındaki" ilk tasarımın bir anlık görüntüsü burada.

Şimdi, ana bölümün üzerine üçte birler kuralını koyalım ve nasıl göründüğüne bakalım. Bu durumda, üçte bir kuralını uyguladığım birincil menünün altındaki içeriğe odaklanacağım.

Bu örnekte kesişim noktalarının üzerinde veya yakınında bulunan 4 ana eleman bulunmaktadır. Kısacası, aşağıdakileri vurgulamak istedim:

1. Kim olduğumun ve bu sitenin neyle ilgili olduğunun kısa bir açıklaması.
2. Yeni kullanıcıların kimden haber alacaklarını görerek kendilerini daha rahat ve güvenilir hissetmelerini sağlayan bir resim.
3. İnsanlara kaydolmaları için bir neden veren son e-kitabımın bir grafiği.
4. Son olarak, kullanıcının gözünün biteceği son 2 karede bir harekete geçirici mesaj e-postası kaydolun.

Üçte bir kuralıyla, her kesişme noktasında (özellikle fotoğrafçılıkta) bir şeye sahip olmak genellikle en iyi uygulama değildir, ancak web sitemde genellikle bu düzeni izlerim. Ve bir yan not: soldan sağa okuduğumuz için, genellikle gözümüzün bittiği yer olduğu için ekranın ortasında veya sağ tarafında harekete geçirici mesajlar görüyorum. Bu dizinin son gönderisinde eylem çağrılarına daha ayrıntılı olarak gireceğiz, ancak bu, Üçler Kuralını tasarımıma nasıl uyguladığıma iyi bir örnek.

Bu nedenle, bir web sayfasını nasıl düzenleyeceğinizden emin değilseniz veya resimleri, metinleri ve belki de harekete geçirici mesajları karıştırmakla uğraşıyorsanız, üçte bir kuralına uymayı deneyin ve bu sizin rehberiniz olsun.

2) Düzen ve Akış

Bir web sayfasını düzenlemeye ve tasarlamaya gelince, yine doğru ya da yanlış bir stil yoktur. Genellikle projeye, müşterinizin isteklerine, tasarım stilinize ve genellikle hedeflediğiniz pazara bağlıdır. Çoğu zaman, dijital veya web tasarım ajansları, moda ve fotoğrafçılık gibi hizmetlerde, minimalist bir görünüm ve his ile daha modern ve modaya uygun tasarımlar. Modern tasarımla birlikte genellikle daha fazla açık alan, daha az metin odaklı içerik, daha fazla görüntü ve belki de daha fazla kaydırma gelir. (Eski moda müşterilerimden bazıları titredi!)

İmalat, hukuk firmaları, mavi yakalı endüstriler vb. gibi daha geleneksel iş pazarlarında, muhtemelen daha fazla metin odaklı içeriğe, daha az açık alana ve şüphesiz daha az çekici görüntü ve tasarım öğelerine sahip web siteleri bulacaksınız. Ve her ne sebeple olursa olsun, bu sektörlerdeki müşterilerimin çoğu çok fazla kaydırmaya şiddetle karşı çıkıyor. Bu nedenle, iyi bir akışa sahip bir düzen tasarlamayı bilmek çok önemlidir! Yaratıcı tasarım stilimi, müşterimin sektöründe işe yarayan, hedef demografik ve müşterimin istek ve ihtiyaçlarıyla dengelemeye çalışmam gerektiğini sık sık fark ettim. Tüm bunlarla birlikte, kiminle çalışıyor olursanız olun veya hangi sektörde olursanız olun uygulanabilecek bazı temel düzen ve akış ilkeleri vardır.

Yukarıda bahsedilen bir önceki gönderiye bakıldığında, izlenecek çok önemli bir kılavuz bir z-tasarım modelidir. Bunu, haftalık olarak sağlanan yeni profesyonel Divi yerleşim kitlerinin çoğunda sık sık bulacaksınız.

Ne demek istediğime bir göz atalım.

Soldaki ilk örnekte, solda bir resim, sağda güzel bir harekete geçirici mesaj düğmesi olan bir metin var, sonra gözünüz aşağıyı okuyor ve solda metin/CTA'nın başka bir bölümünü, ardından sağda başka bir resimle ve tekrar et. Tam tersi, sağdaki resimde ters bir desen var. Metinden görüntüye, metne, vb. Bu z stili kalıbı takip etmek, okuyucuların ilgisini çekmenin harika bir yoludur ve metin ile görüntüleri birlikte dengelemenin harika bir yoludur.

Bu, iyi sayfa tasarımında akışta düzen için tek seçenek değildir, ancak içeriği soldan sağa ve sonra aşağı doğru almamız iyi bir uygulamadır. Sonra soldan sağa, sonra aşağı vb. Bu nedenle, şüpheye düştüğünüzde, sayfa içeriğinizin akışını düzenlemeye yardımcı olacak bir yol olarak z stili kalıbı izlemeyi deneyin. Ve kaydırma ile ilgili son bir not - Sitelerimi 3-5 kaydırma içinde tutma eğilimindeyim. Çoğu zaman, ne kadar çok kaydırmanız gerekiyorsa, sayfa o kadar büyük olur ve o kadar yavaş yüklenir. Yine, kaydırma konusunda doğru ya da yanlış yoktur, ancak daha eski moda bir zihniyete sahip müşterilerle henüz çalışmadıysanız, bir miktar muhalefetle karşılaşmanız garantidir. Bu müşterileri kaydırmanın korkulmaması gerektiğini tekrar teyit etmeye çalışıyorum. Sosyal medya, bizi sürekli kaydırma ve hızlı bir şekilde içerik alma konusunda eğitti.

3) Görsel Hiyerarşi

Burada belirtmek istediğim son ana ilke görsel hiyerarşidir. Kısacası, hiyerarşi, kullanıcının en önemli bilgilerin ne olduğunu bilmesine yardımcı olur ve tasarımınızda gözlerinin nereye gitmesi gerektiğine dair çok net bir yön sağlar. Hiyerarşiye genellikle tipografi ile atıfta bulunulur (buna üçüncü yazımızda değineceğiz), ancak sitenin grafik öğelerinde, görsellerinde ve genel tasarımında da çok önemli olabilir.

“İyi tasarım” bölümünde eksikliğini hissettiğim siteleri kasten işaret etmeyeceğim, ancak eminim ki hepsi aynı boyutta net olmayan metin ve resim smorgasbord içeren birçok siteye rastlamışsınızdır. eylem çağrısı, değil mi? İşte bundan kaçınmak istiyoruz. İyi bir hiyerarşi kullanmak, web sitesi kullanıcınıza daha sonra NE tıklamaları veya ne yapmaları gerektiğini bilme konusunda rehberlik etmenin en iyi yoludur.

Hiyerarşiyi göz önünde bulundurarak oluşturduğum yeni bir tasarıma bir örnek:

Sağ üstteki logo ve telefon numarası açıkça büyük ve görünürken, ekranın üst kısmındaki en büyük içerik ve en canlı renk, düğmeye tıklamak için harekete geçirici mesajdır.

Müvekkilim özellikle insanların siteye girdiklerinde kolayca bir inceleme talep etmelerini istedi, bu yüzden umarım bunu başarmak için bu görsel hiyerarşi fikrini kullandım! Son zamanlarda hiyerarşiyi nasıl kullandığımın bir başka örneği de bu sitedeki ekranın üst kısmındaki tasarım:

Bu durumda, müşterinin ana eylem çağrısı, Çevrimiçi Alışveriş Yapmak veya Doğrudan Müşteriyle İletişime Geçmektir. Logo, kısa açıklama ve hatta telefon numarası yaygındır, ancak Divi Double Button, daha fazla kaydırma yapmazlarsa, kullanıcıların aradıklarını tıklamalarını sağlama umuduyla başlangıçta gördüğünüz en büyük öğedir.

Yine, bunlar görsel hiyerarşinin sadece birkaç örneği olsa da, web sitesi kullanıcılarınızı istediğiniz şeyi yapmaya veya gitmelerini istediğiniz yere gitmeye yönlendirmek için çok güçlü bir yöntem olabilir! Bir kenara, Kaçınılması Gereken Genel Web Tasarım Hataları hakkındaki önceki yazımıza göz atmanızı şiddetle tavsiye ederim.

Kapanışta

Umarım bu etkili tasarım ilkeleri, web tasarımında yeniyseniz veya tasarımda daha iyi olmak istiyorsanız, tasarım çabalarınızda size yardımcı olmuştur! Yine, gözden geçirebileceğimiz birçok ilke var ama bunlar tüm web sitesi tasarımlarımda uygulamaya çalışan ilk 3'tür.

Paylaşmak istediğiniz başka tasarım ilkeleriniz varsa, aşağıdaki yorumlarda bize bildirin!

Yarın: Her Web Sitesi Yapımında Odaklanacak 3 Önemli Tasarım Alanı

Artık zihniyetimizi hazırlamayı, tasarıma daha iyi bakmayı öğrenmeyi ve bazı temel tasarım ilkelerini gözden geçirmeyi ele aldığımıza göre, son yazımız web tasarımının odaklanmamız gereken en önemli birkaç yönünü keşfedecek. her web sitesi inşa. O zamana kadar!

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!