Uygulamanız Gereken Modern Web Tasarımının 7 Temel Unsuru

Yayınlanan: 2022-12-05

Modern web tasarımı, basitlik, etkililik ve mükemmel bir kullanıcı deneyimi ile ilgilidir. Gezinmesi kolay olmayan, yüklenmesi çok uzun süren veya biraz yorgun ve aşırı derecede duyarsızlaşmış bir kitlenin dikkatini çekmek için gerekenlere sahip olmayan web sitelerinin ziyaretçilerini dönüştürmesi pek olası değildir.

Modern Web Tasarımının Uygulamanız Gereken 7 Temel Unsuru Resim

Hem sıralanabilirliğini hem de genel UX puanlarını artırmak için web sitenize uygulamanız gereken 7 temel öğeyi burada bulabilirsiniz.

İçindekiler tablosu gösterisi
Bolca Beyaz Alan Kullanın
Görüntülerle Ayırın
Video kullan
Bir Pop Renk Ekleyin
Harekete Geçirici Mesajlarınızı Pop Haline Getirin
Bütünleştir, Eh, Her Şey
Basit Tutun
Sarmalamak

Bolca Beyaz Alan Kullanın

Modern web tasarımı basit ve derli topludur ve bol miktarda beyaz alan kullanır. Bu, daha ferah bir duygu yaratılmasına yardımcı olur ve bilgilerin sindirilmesini kolaylaştırır. Pek çok farklı öğeyi küçük bir alanda bir araya getirdiğinizde, sayfa klostrofobik bir his uyandırabilir.

Beyaz alanın elbette beyaz olması gerekmez. Herhangi bir rengi (hatta siyah) kullanabilirsiniz.

Alanın farklı ekran yönlerinde ve boyutlarında mantıklı bir şekilde kullanılmasını sağlamayı hedefleyin. Yatay bir masaüstünde iyi çalışan tek bir düzene bağlı kalmayın.

UnscrambleX Words with Friends sayfasına bir göz atın. Masaüstünde, sol ve sağ tarafta çok fazla boşluk var.

Arkadaşlarla UnscrambleX Words sayfa 1

Cep telefonunda, beyaz boşluk başlıklar arasında yoğunlaşarak metnin okunmasını kolaylaştırır.

Arkadaşlarla UnscrambleX Words sayfa 2

Görüntülerle Ayırın

Sayfaların daha kolay sindirilebilmesi için metinden daha fazlasını içermesi gerekir. Görüntüler, ziyaretçilerin tırmanmaları gereken metin duvarından korkmalarını önlemek için ekleyebileceğiniz en basit ve en basit öğedir.

Resimler ayrıca sayfanıza fazladan bir duygu katmanı eklemenize yardımcı olabilir, bu yüzden onları hafife almayın. Ürünler hakkında konuşurken görselleştirmeye yardımcı olabilirler, ancak kavramlar veya prosedürler hakkında konuşurken bilinçaltı düzeyde değer ve etki iletebilirler.

Lightroom için ön ayarlarla ilgili bu sayfaya bir göz atın. Resimler size beklenen etkinin ne olacağını gösterir ve siz de kolayca bilinçli bir seçim yapabilirsiniz.

portre ön ayarlarını temizle

Onlar olmasaydı, sayfa son derece yavan ve ilgi çekici olmazdı, pratikte yararsız olacağından bahsetmeye bile gerek yok.

Video kullan

Sayfalarınızın ilgi faktörünü artırmanın bir başka yolu da onlara video eklemektir. Sayfanın içeriğine ve amacına göre nasıl yapılır videosu olabilir, demo olabilir, video referans olabilir.

Videonun bir yakalama ile geldiğini unutmayın. Sorunsuz bir şekilde yüklenmesi gerekiyor ve sayfayı asla yavaşlatmamalı. Kullanıcı deneyimini engelliyorsa, sayfada gezinmeyi zorlaştırıyorsa veya çok dikkat dağıtıcıysa, onsuz daha iyi durumdasınız.

Technogym'in ana sayfasında, biri kahramanda olmak üzere birkaç video var. Yine de süper gerçeği yüklüyorlar ve UX'i engellemekten çok etkileşimi artırma olasılıkları çok daha yüksek. Otomatik oynatıldıkları için biraz dikkat dağıtıcı olabiliyorlar ama sessiz oldukları için yine de çok cana yakınlar.

Bir Pop Renk Ekleyin

Modern web tasarımı, sayfalarınıza biraz renk katmanız için de gereklidir. Onları tamamen renkli yapmanıza gerek yok, ama ideal olarak, kesinlikle ayarladığınız hava bu değilse, sadece siyah beyaz istemezsiniz.

Renk, işletmenizin tonuyla eşleşmeli ve ziyaretçilerinize nasıl biri olduğunuz hakkında bir fikir vermelidir. Mavi, sakinliği ve profesyonelliği işaret ettiği için genellikle en popüler seçimdir. Mor, özellikle SaaS ve dijital alanlarda da sıklıkla görülür.

Mailchimp örneğin sarı tonlarıyla gitti. Eskiden ana sayfalarında çok daha fazla renk vardı, ancak o zamandan beri muhtemelen daha sessiz öğelerin daha iyi çalıştığını fark ettiler. Yeni web siteleri pürüzsüz ve şık görünüyor, ancak kesinlikle ne sıkıcı ne de sıkıcı.

mailchimp resim 1

Harekete Geçirici Mesajlarınızı Pop Haline Getirin

Popping demişken, sayfalarınızda öne çıkması gereken bir diğer önemli unsur da CTA'dır. Dönüşümleri en doğrudan etkilediği için belirgin ve çok net olması gerekir. Ziyaretçilerin, tıkladıklarında tam olarak ne olacağını bilmeleri gerekir.

Birkaç farklı işleminiz varsa, her birinin kendi CTA'sı ile geldiğinden emin olun. Bu şekilde, ziyaretçilerinize farklı seçimler yapabileceklerini ve her şeyin sadece ürünü satın almak veya bir telefon görüşmesi ayarlamakla ilgili olmadığını göstereceksiniz.

Unbounce, hepsi sizi farklı dönüşüm yollarına götürecek birkaç farklı CTA'ya sahiptir. Ücretsiz deneme sürümü başlatabilir veya çözümlerinin farklı özelliklerinden birini seçip en çok ihtiyacınız olan şeyle başlayabilirsiniz.

Bütünleştir, Eh, Her Şey

Modern web sitesi ziyaretçileri biraz şımarıktır ve her şeyin aynı anda sunulmasını isterler. Ürün veya bağlantı arayarak zaman kaybetmek istemiyorlar, kesinlikle ihtiyaç duyduklarından fazlasını tıklamak istemiyorlar ve her şeyin onlar için özetlenmesini istiyorlar.

Tasarımınızla ne kadar çok zaman kazanırsanız, geri gelme olasılıkları o kadar artar.

Gezinmenizi basitleştirdiğinizden ve anlayacakları terimler kullandığınızdan emin olun. Çoğu insanın ne aradığını biliyorsanız, ana sayfanıza bu sayfalara bağlantılar ekleyin ve arama sürelerini azaltın.

Lydia Millen, web sitesi tasarımının bu unsurunu çivileyen bir sosyal medya etkileyicisidir. Kitlesinin ne istediğini biliyor: kendi giyim koleksiyonunda alışveriş yapmak, videolarını izlemek ve son zamanlarda giyip kullandıklarını satın almak. Tüm bunları kolayca erişilebilir hale getirdi.

Basit Tutun

Sonuç olarak, modern web tasarımını yakalamak için asıl amacınız sayfalarınızı basit tutmaktır. Çok fazla yazmayın, kullanıcılarınızı seçenekler ve gereksiz bilgilerle bombardımana tutmayın. Bunun yerine, onları erken bağlamayı hedefleyin ve ardından dikkatlice haritalanmış bir dönüşüm hunisinde dikkatlice yönlendirin.

Tortuga Sırt Çantalarına bir göz atın. Sloganları basit ve doğrudandır. Ana sayfada size ürünlerinin küçük bir bölümünü gösterirler, ancak menüleri, başka ne stokladıklarını size söyleyecek kadar geniştir. USP'lerini vurgularlar ve müşteri incelemelerine yer verirler, hepsi bu.

Tortuga Sırt Çantaları 1
Tortuga Sırt Çantaları 2

Ana sayfaları derli toplu ve minimalist ama son derece etkili. Bir saniye bile kaybolmayacaksınız ve markadan tam olarak ne bekleyebileceğinizi anlayacaksınız.

Sarmalamak

Bu web tasarım ipuçlarıyla, dijital evinizin aradığınız türden kitleyi çekme ve elde tutma şansı çok daha yüksek olacaktır. Herhangi bir önemli tasarım değişikliği yapmaya başlamadan önce her zaman sizden gerçekten ne istediklerini ve neye ihtiyaç duyduklarını düşünmeniz gerektiğini unutmayın.