Tasarım = Duygular + Kullanılabilirlik
Güzel sanatlar öznel bir alan olsa da, grafik tasarım temellerinde daha formüle sahiptir. Etkili bir tasarım, insanları belirli bir şekilde hissetmeli ve belirli bir eylemde bulunmalıdır. Bu yazıda Gravity Switch'i paylaşmak istiyorum. web tasarım ilkeleri ve onların arkasındaki düşüncemiz.
Bu kurallar şunlardır: önce hedefleri tanımlayın; ikinci kullanıcılara odaklanmak; duygu için tasarım; görsel tasarım kurallarını takip eder; net, görsel bir hiyerarşi oluşturmak; tutarlı ol; kuralları çiğnemek (gerektiğinde); hile kullanmayın; ve son olarak test edin, ölçün ve geliştirin.
1. İlk önce hedefleri tanımlayın
Bahse girerim “önce kullanıcılara odaklan” diyeceğimi sandınız. çoğuinsanlarsöylemek. Unut gitsin, hedeflerinle başlayalım. Her web sitesi tasarım projesine, iş hedeflerinizi güçlendiren açık ve gerçekçi web sitesi hedeflerini ana hatlarıyla belirten bir beyin fırtınası oturumuyla başlayın .
Daha iyi göstermek için, Amazon'a bakalım. Amaçları ürün satışlarını maksimize etmektir. “Yükselen” ve “çapraz satış” yoluyla, her bir kullanıcının satın alma gücünü en üst düzeye çıkarabilir, ancak başarılı olmak için satın alma sürecini yavaşlatırlar . Rakiplerinin çoğunun aksine, Amazon'un arama sonuçlarında "şimdi satın al" düğmesi yok. Kullanıcılar, bir satın alma işlemi yapmadan önce bir sayfa daha (potansiyel artışlarla) ziyaret etmelidir. Bu, bir site tasarımının açık iş hedeflerini nasıl yerine getirebileceğinin mükemmel bir örneğidir.
Çoğu modern e-ticaret sitesi, “şimdi satın al” düğmesini arama sonuçlarından çıkardı, ancak bazı tuğla ve harç prizleri hala buna sahip.
2. İkinci kullanıcılara odaklanın
Açık hedeflerinizle aklınızda olursanız, kullanıcıları tanımlamanız ve önceliklendirmeniz gerekir. Mümkün olduğunca spesifik olun. Sorulacak sorulardan bazıları:
- Erkek vs kadın dökümü?
- Eğitim Seviyesi?
- Ülkedeki yerler?
- İlgili hobiler?
- Gelir dağılımı?
- Çocukların ürün alımlarını kim kullanıyor? Çocuklar? Ebeveynler? Dedesi?
Önemli olan nokta, tasarımcıların kullanıcılardan haberdar olması ve tasarımlarının anahtar kullanım yollarını engellememesini sağlamaktır.
3. Duygular için tasarım
Markanızın neler hissetmesi gerektiğini anladığınızdan emin olun . Beyin fırtınası. Sorular sor. Anlaşmaya varın. Ve muhtemelen en önemlisi, müşterilerinize geri sunarken bu duygulara odaklanın. İstemcinizin bir tasarımdan “hoşlanıp” hoşlanmadığını asla sormayın. Tasarımları teslim ettiğinizde, “Bunlardan hangisini en profesyonel hissettiriyorsunuz?” Gibi sorular sormalısınız veya “Bu iki tasarımı karşılaştırdığınızda, bunun daha modern olduğunu görürsünüz, bu daha dinamik. Bunlar sizin için önemli olan iki duyguydu, şimdi onları görsel olarak görüyorsunuz, sizce hedef kitlenize sunmak için en önemli duygu hangisiydi? ”
Bu organizasyonlardan hangileri eğlenceli? Rahatlatıcı? Yenilikçi? Meşgul? Gerçek? (@JessicaShiner ve Christine Mark tarafından tasarlanan tasarımlar)
4. Görsel tasarım kurallarına uyun
Web sitesi kullanıcılarının, bir web sitesine güvenip güvenmeyeceklerine karar vermek için bilinçli ve bilinçaltında kullandıkları çok sayıda küçük öğe vardır. En önemlileri:
- Kırpma: fotoğrafların seçilmesi savaşın sadece yarısıdır, fotoğrafları kırpmak bir sayfa düzenini oluşturan veya bozan şeydir.
- Negatif alan: kenar boşluklara, dolgulara ve çizgi yüksekliğine dikkat etmek, New York Times gibi bir lise bültenine benzemek arasındaki farktır.
- Yazı tipleri: herkes yazı tiplerini seçmeyi sever, ancak harika bir tasarımcı profesyonel bir yazı tipini hızlı bir şekilde belirleyebilir ve web sitesindeki yazı tipi sayısını 1-2'ye (genellikle kendi yazı tipi olan logoyu saymayacak şekilde) saklayabilmelidir.
- Renkler: Renkler, tasarımcıların etkili bir şekilde kullanması için en zor şeylerden biridir. İyi bir renk paleti seçmek için çok fazla kural var ve çevrimiçi kullanım için cazip olsa da renk paleti jeneratörler kendi renk paletinizi tasarlarken zaman harcayın.
- Düzen: iyi bir görsel sayfa “akış” yaratın, böylece kullanıcının gözleri, hedeflerinizi görsel olarak başka öğeler olmadan sayfaya gitmek istedikleri yere gider.
5. Açık, görsel bir hiyerarşi oluşturun
Web sitesi ziyaretçileri kaybolacak. Okumadılar. Açıkça tanımlanmış, iyi düşünülmüş bir görsel hiyerarşi ile dikkatlerini çekin ve en önemli bilgilere ulaşın. İyi düşünülmüş bir tasarım - site> sayfa> bölüm - kullanıcıyı sayfaya istediğiniz gibi yönlendirir. Kullanıcılar sayfanıza bakabilmeli ve bir saniyede anlayabilmelidir.
Bir makalenin aşağıdaki örneğine bakın ve gözünüzün sayfanın neyle ilgili olduğunu veya makalenin nerede başladığını anlatması zor olduğunu fark edin!
Aşağıda, bu sayfada aşağıdaki şekillerde daha net bir görsel hiyerarşi oluşturmak için bir düzine CSS satırı değiştirerek yaptığım bir maket verilmiştir:
- Makale başlığı, sayfadaki en önemli öğe olmalıdır. Şu anda sayfanın aşağısından daha küçük bir yazı tipi boyutu var! Bu yüzden makale başlığının boyutunu arttırdım ve başlıkların boyutunu azalttım.
- Sayfanın ilerisindeki sayfalar da görsel olarak ilerlediğinden içeriğin bağlantısı kesildi. Bu nedenle, başlığın altındaki boşluk bırakılırken, başlığın altındaki boşluk bırakılırken, kullanıcıların aşağıdaki paragraf için bir başlık olduğunu bilmelerini sağladım. .
- Aynı zamanda küçük görüntüyü sol yerine başlığın sağına da taşıdım, böylece bir kullanıcı sayfanın sol tarafını taradığında, makalenin başlığını kendi vizyonunda yönlendiriyor.
- Kenarlık ve arka plan sınıflarını mavi görüntüleyicide kaldırdım, böylece artık başlık ile rekabet etmiyor ve üst kenar boşluğunu kaldırdım. Zaten gri yapmak için yerinde bir sınıf vardı, bu örnekte iyi çalışıyor.
- Ayrıca, bunun bir yeniden basım makalesinin yanı sıra bazı boş paragraflar olduğunu gösteren dikkat dağıtıcı metin ve görüntüyü de kaldırdım.
etiketleri.
Bu sayfanın kritik bir parçası olduğunu varsayarak, tüm reklamları orijinal olarak kodlanmış olarak bilerek bıraktım.
6. Tutarlı olun
Kullanıcılarınızı karıştırmayın. Bağlantılar tutarlı ve farklı olmalıdır. Simgeleri, fotoğrafları ve illüstrasyonları kullanmayı seçerseniz, bunların uyumlu bir kümeye ait olduklarından emin olun. Tutarsızlıklar, kullanıcınızı dikkati dağıtacak ve mesajınızı gizleyecektir. 3'ten fazla yazı tipi kullanmayın - hepsi aynı ailede olsaydı en iyisidir. Kendinizi 5-6 renkle sınırlayın (Not: logo farklı bir yazı tipi olabilir ve genellikle olmalıdır ).
7. Kuralları çiğneyin (gerektiğinde)
Vurgulanması gereken özellikle benzersiz veya önemli bir şey varsa, “kuralları ihlal etmeniz gerekebilir.” Öğenin göze çarpmasına yardımcı olmak için bir veya iki zıt renk kullanabilirsiniz. Örneğin aşağıdaki İngiltere web sitesi, vergi oranını bu rengi daha büyük bir öğe haline getirerek vurgulamaktadır.
Kullanıcılar bilgi sayfasını ziyaret ettiğinde KDV vergisi, GOV.UK tasarımcıları, çoğu insanın ihtiyaç duyduğu bilginin ön ve merkez olmasını sağladı.
8. hile aşırı kullanmayın
Tasarımınızı eğlenceli hale getirin , ancak bu öğelerin sitede gerçekleştirmeye çalıştığınız şeyleri desteklediğinden emin olun . Örneğin Inze siteye bakmak güzel ve cep telefonunda harika ama masaüstü bilgisayarımda ziyaret ettiğimde kayboldum. Gezinme kaybolana kadar gizlenir, bu da ne yazık ki sayfanın alt kısmına gözümü soktu. Sonuç olarak, üstte görünen ince navigasyonun farkına bile varmadım. En üste bir gezinti olduğunu fark etmeden önce en üste doğru kaydırdım. “Gizli” navigasyon, temiz bir etkidir, ancak “tasarım”, istenen eylemi almamı engelledi. Sonunda, kafa karıştırıcı, özensiz bir marka imajı taşır.
Bu makalede tam olarak neler olup bittiğini Inze ile karşılaştır Web Tasarımcısı Depo Masaüstü bilgisayarınızdaki bir bağlantıyı yuvarladığınızda. Temiz bir etkiye sahibiz, ancak bir hile uğruna kullanıcılar için “engel” yaratmıyor. Ayrıca, incelikli bir şekilde degrade olur, dolayısıyla mobil cihazlarda veya eski tarayıcılarda kırılmayacaktır.
9. Test. Ölçün. iyileştirmek
Web siteleri gelişti. Esneklik ve uyarlanabilirlik için tasarım. Devam eden test verilerinin toplanması ve analiz edilmesi sürekli iyileştirme sağlayacaktır. Unutmayın, her şey hedeflerinizi karşılayan bir tasarım yaratmakla ilgilidir.
Bir dizi küçük tasarım değişikliğinin sonuçlarını orijinal açılış sayfasına (solda) dikkatlice ölçerek, kayıtların yüzdesini% 60 artıran yeni bir tasarım (sağda) ile karşılaştık!
Hatırlamak
Etkili grafik tasarım, kullanıcıyı marka ile duygusal olarak birleştirirken aynı zamanda istediğiniz şeyi yapmalarını sağlamaya ihtiyaç duyar. Bu yapılabilir.
Bu kurallara tasarım için katılıyor musunuz? Daha fazlasını ekler misiniz? Yorumlarda görüşlerinizi bize bildirin.
Öne çıkan görsel / küçük resim, duygu görüntüsü Shutterstock üzerinden.