Web tasarımındaki en güçlü güç neden tutarlılık
Güçlü bir marka varlığı yaratmak istiyorsunuz. Logonuz var, yazı tipleri seçtiniz ve markanızı temsil etmek için güçlü bir renk paleti seçtiniz. Ancak, WordPress sitenizde marka öğelerinizi ve diğer stil seçeneklerinizi sürekli olarak kullandığınızdan nasıl eminsınız? Belki de tutarlılık sorunları için sitenizi kontrol etmek için geliştirmenin sonunda birkaç KG turuna güveniyorsunuzdur. Ama sitenizi ne için gördünüz? Bir kaç hafta? Birkaç ay? Eminim o zamanlar gözleriniz ve beyniniz yorgun. Yazı tipleri uyumsuzluğu gibi ince bir şey olsa bile, QA’ya yeni bir görünümle yaklaşmadığınız sürece onu yakalayamayabilirsiniz – ve bitiş çizgisine çok yakın olduğunuzda kimin zamanı var?
Bu kesinlikle dengeleyici bir eylem. Harika görünen bir site oluşturmak istiyorsunuz ve mümkün olduğunca hızlı ve verimli bir şekilde yapmak istiyorsunuz. Varsayımınız, her tutarlılık sorununun site çıkmadan önce yakalanacağı ve çözüleceğidir, ancak kesin olarak bulamazsınız. Yoksa olabilir mi? Bu nedenle, web tasarımı için tutarlılığın neden önemli olduğu ve WordPress UI ve UX’inizi nasıl etkileyebileceği hakkında konuşalım. Ayrıca, sitenizdeki unsurların sürekli olarak tasarlandığından, yerleştirilmesini ve yazıldığından emin olmak için kullanabileceğiniz bazı araçları da ekleyeceğim, projenizin sonunda hatalar için biraz yer bırakıyor. En azından tutarlılık açısından.
10 Tutarlılık Sorunları Yolları Web Tasarımınıza Zarar Verebilir Çekici Tasarım ve Sezgisel Arayüzler Ziyaretçilerinizle Güven Oluşturma konusunda çok yardımcı olur. Ancak bu güveni ilk olumlu izlenimle oluşturduktan sonra, sitenizde uygun koşullar oluşturmak için başka neler yapabileceğinizi düşünmeniz gerekir. Tutarlılık bu konuda yardımcı olur. Bunlar sadece birkaç nedeni: #1. Sitenin sol üst köşesinde gerçek şirket adı olan iki isim arasında ne ayırıyorsunuz?
Ayrıca, markanın açık, düşünce ve uyumlu olduğunu ve ziyaretçilere en küçük ayrıntıları önemsediğinizi gösterdiğini de savunuyorum. Sonuçta, marka ilişkinizin dökümü, ziyaretçileri nasıl iş yaptığınızın bir yansıması olup olmadığını merak edebilir. Başka bir deyişle, kendi işiniz için I ve T noktasını belirlemek için zaman ayıramıyorsanız, müşterilerinize yüksek kaliteli ürünler veya hizmetler sunmada gayretli olmayacak mısınız? #2. Anlamak, son zamanlarda gerçekten fark ettiğimiz şeylerden biridir, tüketicilerin çevrimiçi bir şey değil, birine bağlı gibi hissetmek istedikleridir. Bu yüzden web sitesinde orijinal kişiliği sergileyen marka ve çok iyi yaptıkları sosyal medyada. Tutarlı bir yazılı kopya ile ziyaretçileri “ses” deneyiminize kilitli hale getireceksiniz, bunları site çevresinde yönlendirmeye devam edeceksiniz.#3. Navigasyon
Bu kafa karıştırıcı mega menü ayarlarına ek olarak, çeşitli sekmelerde tutarsız simgeler kullanma sorunları da vardır.
Navigasyonun kolay olduğunu düşünebilirsiniz, çünkü her zaman aynı yerde ve her sayfada aynı şekilde düzenlenir. Ancak, tutarlılık, bir şeyi sitenizde aynı şekilde sunmaktan daha fazlasıdır. Ziyaretçilerin navigasyon bıçaklarının genel olarak kendi gerçekliğinizle nasıl çalışması gerektiğine dair beklentilerini uyumlu hale getirmek için bir sorun da var. Tabii ki, sitenizin altına yerleştirmek veya hamburger simgeleri yerine kişiselleştirilmiş semboller kullanmak harika olabilir, ancak bazı insanlar için gereksiz karışıklık ve hayal kırıklığına neden olabilir. #4. UI/UX UI ve UX tasarımlarında yer alan birçok şey vardır. Özellikle tartışmadan, yalnızca UI ve UX tasarımcılarının çoğunun son kullanıcılarla öngörülebilirlik ve rahatlık duygusu olmaya çalıştığını söyleyeceğim. Bir düğme gibi basit bir şey alın. Düğme tasarımına yaklaştıklarında, gerçekten tıklanıp tanınmasını istiyorlar ve sitelerindeki tüm düğmelerin aynı görünmesini istiyorlar. Hedef – bu hile ve diğer UI ve UX tasarım hileleriyle – sonuçta sürtünmeyi yerinde deneyimden ortadan kaldırmak. Yol boyunca sürtünme, parazit veya engeller olmadan, ziyaretçileri son varış noktasına (IE dönüşüm) yönlendirmek daha kolaydır.#5. Benzetme
Sadece bu web sitesindeki fotoğraflara dayanarak, şirketin geçimini sağlamak için ne yaptığını biliyor musunuz? Bunu doğru yapma şansınız var.
Müşterilerimin çoğunu hatırladığım şeylerden biri görüntü seçim süreci için savaştı. Kullanmak istedikleri bir dizi görüntü aldığım zamanlar olacak, ancak toplam kuvvetin bir karışımı olacak: bir satış görevlilerinin satış elemeleri çizimi, optik fiber kablonun fotoğraf yakın çekimi, bir sürüş arabasından soyut görüntü. Gece geç saatlerde yol. Her biri bir şekilde şirketin yaptıklarıyla bağlantılı olsa da, (varsa) estetik olarak uygun görünmediklerini söyledikleri tutarlı bir hikaye yoktu.
#6. WordPress sitenizin amacı hangi etkileşimdir? Ziyaretçilerin onunla etkileşime girmesini sağlamak için değil mi? Hizmetinize kaydolmak için videoları izlemelerini, diğer blog yayınlarını okumalarını veya formları doldurmalarını istiyorsunuz. En iyi uygulamaya gelince, kaydırarak, imleci yönlendirerek, dokunma vb. Bu, ziyaretçilere deneyimleri üzerinde daha iyi bir kontrol duygusu verir, çünkü belirli eylemlerde bulunduklarında ne olacağını tahmin edebilirler. 7. Okuma … acımasızlık en iyisidir. Bununla birlikte olamam bile. Odak azaltıldığında ve ziyaretçilerin sabrı azaldığında, web içeriğinin tüketilmesi daha kolay olmalıdır. Metniniz boyunca tutarlı olan tipografi ve etiket başlıklarının kullanımı ile ziyaretçiler, istedikleri bilgileri almak için sayfalarda nasıl gezinileceğini “öğrenebilir”. Bir sonraki başlık başlığında tarayabilirler veya ihtiyaç duydukları köprü için alt mavi çizgili metni arayabilirler.
#8. Tutarlı Web Tasarım öğelerinin kullanımı ile test yaparken, A/B test çabanız gelecekte daha verimli olacaktır. Bu yüzden şunu söylüyorum: Web sayfalarındaki belirli öğeler için aynı tasarımı, şekli, alanı vb. Kullandıysanız, A/B testinizin dönüşüm eksikliğine katkıda bulunan tutarsızlıklara odaklanmasına gerek yoktur.
Buna ek olarak, sitenizde bulunan genel öğenin farklı renklere sahip olduğunuzda veya farklı yerlere yerleştirildiğinde daha iyi bir performans olduğunu görürseniz, bu, sitenin diğer bölümlerinde ayarlamaların yönetilmesini kolaylaştıracaktır.#9.Ritim New York Times’ı bir sonraki kişiyle aynı seviyorum, ancak sitelerindeki düzen korkunç.Kesinlikle mantık yok!
Sitenize ritim ve mantıksal akışların da tutarlı bir tasarıma katkıda bulunmasını sağlayın.Örneğin, 300 piksel görüntüyü sayfanın sol tarafına yerleştirdiğinizi ve sağdaki 50 kelimelik bir açıklama ile dengelediğinizi varsayalım.Altında, solda 50 kelimelik bir açıklama ve sağa 300 piksel görüntü yerleştirirsiniz.Vb.Ziyaretçiler, öngörülen ritmi yakalayabilecek ve bu da bir sonraki adımda ne beklendiğini bilmelerine yardımcı olacak.
10. Dış faktörler göstermek istediğim bir diğer şey, tutarlılığın her zaman sitenizde yaptıklarınızla ilgili olmamasıdır. Bazen ziyaretçilerin beklentilerine göre oynamakla bir ilgisi vardır. Brenda tarafından tartışılan logo yerleştirme araştırmasını burada örnek olarak kullanacağım. Logonuzu sitenizin ortasına veya sağ tarafına yerleştirmek için harika görünse de – hatta birkaç noktada ortadan kaldırın – 2017’de web sitesinden ziyaretçilerin beklendiği şey değil. Bu büyük bir sorun gibi görünmeyebilir, ancak Ünlü en iyi tasarım uygulamasından sapma, web sitenizin performansına da zarar verebilir. WordPress web sitenizde tutarlılığı sağlamak için araçlar daha önce bahsettiğim gibi web tasarımında, tüm sitelerinizde tutarlılığı sürdürdüğünüzü sağlamak için her zaman yeterli olmayan uzun bir web tasarım projesinin sonunda birkaç tur KG turu. Bu nedenle, çalışırken tutarlılığı korumanıza yardımcı olacak bir dizi araca sahip olmalısınız. Önerdiğim şey bu: #1. WordPress Herhangi bir harici cihaza geçmeden önce doğrudan WordPress’te başlayın. Sitenize tutarsızlık olasılığını azaltmanıza yardımcı olacak özel bir alan vardır: tema ayar aracı. Burada, global ayarlar yapabilirsiniz: Yazı tipi
renk
Mesafe
Bağlantı
Ve daha fazlası (bu, kullandığınız temaya veya web sitesi üreticisine bağlıdır)
#2. Stil rehberi
Behance üzerinde ücretsiz stil kılavuz şablonu örneği.
Her marka – dijital veya diğer – bir stil kılavuzu gerektirir. Bu, her şeyi doğrudan tanımlar, böylece markanız için içerik oluştururken karışıklık olmaz. Bu şunları içermelidir: logonuz (ve çeşitli varyasyonlar)
Birincil ve ikincil renkler, metin renkleri, simge renkleri ve daha fazlasını içeren renk paletleri
Tipografi; İdeal olarak, en fazla iki veya üç yazı tipi
Benzetme
İkonografi Doku ve Desen
Kendi stil rehberinizi yapmaya çalışmak yerine, Behance (yukarıda gösterildiği gibi veya dribbble gibi web sitelerinde ücretsiz bir stil rehberi şablonu bulun
Dribbble üzerinde ücretsiz kullanıcı arayüzü örnekleri.
Kullanıcı arayüzü öğenizin varsayılan stilini sağlamak için sitenizin temasına güvenebilmenize rağmen, çoğunuz markanızın görünümüne uygun olacak şekilde kişiselleştirmeyi tercih edebilirsiniz. Ancak, baştan beri yapmak zaman alır ve belki de kendiniz yapmanız için rahat bir şey değildir. Burası UI öncesi kitinin yararlı olduğu yerdir. Genellikle renk paletleri, düğme tasarımı, widget’ları, alan alanları, sekmeler ve desenler gibi şeyleri içerir. Stil Kılavuzu gibi, site tasarımınız için iyi çalışacak ücretsiz bir kullanıcı arayüzü şablonu kiti (yukarıdaki gibi) bulabilmeniz gerekir. 4. Çerçeve ve Mockup Resmi
Sana söylüyorum, bu tamamen ızgara ile ilgili. Seni hayal kırıklığına uğratmayacaklar.
Her web tasarımcısının süreci, gerçek tasarım yapılmadan önce site çizimlerinin ne kadar planlama ve yapılması gerektiği açısından farklı olacaktır. Bununla birlikte, çerçeve ve kaba maketlerin – özellikle ızgara tabanlı tabanlı – kaybolma, yanlış boyut, tutarsız mesafe vb. Önünüzde tam olarak tasarlanmış bir web sayfanız olduğunda, ne kadar güzel göründüğünden veya yaptıkları tüm harika şeylerden rahatsız olmak kolaydır. Bu nedenle ilk planlama aşaması, potansiyel tutarsızlıkları en başından ortadan kaldırmak için iyi bir yerdir. Şahsen, Adobe Illustrator’ın en iyi ızgara tabanlı araç olduğunu düşünüyorum. Ancak, Adobe kullanmıyorsanız ve bunun için ödeme yapmak istemiyorsanız, çevrimiçi ücretsiz ızgaralar bulabilir veya wireframe.cc kullanabilirsiniz. #5. Eklenti ve son olarak eklentiye varıyoruz. Bunun çok yaygın bir araç önerisi olduğunun farkındayım, ancak itiraf etmelisiniz, eklenti size kullanmak için tutarlı bir tasarım öğesi vermek için iyi bir iş çıkarıyor. Bir pop-up gibi bir şey düşünün. Kendi açılır kodunuzu arka uçta yapmaya çalışmak ve farklı renkler, yazı tipleri veya yerleşim kullanma riskini almak yerine, eklenti herhangi bir zamanda görülmesini ve aynı hareket etmesini sağlar. Tasarım öğelerinizin tutarlılığını tahmin etmenize yardımcı olacak güvenilir bir eklenti kaynağı arıyorsanız, WordPress WPMU Dev Eklentisi koleksiyonuyla başlayın. Oscar Wilde bir keresinde “Tutarlılık yaratıcı bir özelliktir” dedi.
Şimdi, Bay ile aynı fikirde olmamaktan nefret ediyorumWilde çünkü onun yazısının büyük bir hayranıyım, ama bu durumda bunu yapmalıyım.Bazı insanların yaratıcılığı boğma fikriyle neden “tutarlılığı” bozacağını anlasam da, bunun sorun olduğunu düşünmüyorum.Web tasarımcılarının, geliştiricilerin ve hatta yazarların daha yaratıcı olmaları için daha fazla zamana sahip olmalarına izin veren tutarlılığın olduğuna inanıyorum.Sitenize aynı tasarım öğeleri, tahmin edilen içerik ritmi ve mantıksal arayüzle girerek, ziyaretçilere gezinmek için kullanabilecekleri tanıdık ayarlara vereceksiniz.Daha sonra, pop -up ve animasyon gibi beklenmedik muamelelerle onları şaşırtmak için zaman verir. Web sitelerinizden birinin yayınlanmasından çok sonra bulduğunuz en kötü tutarsızlık nedir?
Etiket:
tasarım tutarlılık
