Tasarımcılar için görsel hiyerarşi ilkeleri, izleyicinin gözlerinin bir tasarımda nasıl hareket edeceğine rehberlik etmek ve hangi öğelerin en önemli veya görsel olarak çekici olduğunu belirlemek için kullanılan bir tasarım konseptidir.
İlk başta taş tabletler, papirüs tomarları ve kağıtlar vardı. Daha sonra bilgisayar ekranları ve elektronik tabletler geldi. Sayfa görüntüleme teknolojisi geliştikçe tasarımcılara içeriği organize etmenin net bir yolu kalıyor. Ama hangisi daha iyi? Kısacası , görsel hiyerarşi.
İşte görsel hiyerarşinin tanımı: Görsel hiyerarşi, düzenlemedir tasarımda grafik öğeler Her bir unsurun önem sırasına göre. Görsel ağırlık belirler element önemi Tasarımın hiyerarşisinde izleyiciye neye, hangi sırayla odaklanacağını anlatıyor.
Tasarımcılar için Kaynaklar. 50 ücretsiz
Duyarlı çerçeveler tasarımcıları aynı anda birçok farklı sayfa hakkında düşünmeye zorladığından, bu giderek daha önemli bir konu haline geliyor. Yoğun metinler ve kısa dikkat süreleri ile karşı karşıya kalan tasarımcılar, okuyucunun gözünü en önemli bilgiye yönlendirmek için 6 ilke geliştirdiler.
Görsel hiyerarşinin bu 6 ilkesi, broşürlerden uygulamalara kadar her şeyi tasarlamanıza yardımcı olacak ve son kullanıcının tasarımcılar için olumlu bir okuma deneyimi yaşamasını sağlayacaktır.
Tüm kültürler yukarıdan aşağıya doğru okunur ve çoğu kültür soldan sağa doğru okunur. Ancak bu bilgi sizin için önemli olmasına rağmen sayfa tasarımıtasarımcılar işin çok daha zor olduğunu biliyorlar.
Son araştırmalar, insanların bir sayfayı okumadan önce o sayfayla ilgilenip ilgilenmediklerini görmek için taradıklarını göstermiştir. Tarama desenleri "F" ve "Z" olmak üzere iki şekilden birini alma eğilimindedir ve tasarımınızda bundan yararlanabilirsiniz.
F-Desenleri. Görsel Hiyerarşinin İlkeleri
F şablonları makaleler veya blog gönderileri gibi geleneksel metin sayfalarına uygulanır. Okuyucu sol tarafı tarar sayfa sola hizalanmış başlıklarda veya ilk konu cümlelerinde ilginç anahtar kelimeler arar, daha sonra ilginç bir şeyle karşılaştığında durur ve (sağa doğru) okur. Sonuç bir F'ye (ya da bir E'ye ya da daha fazla yatay çizgili bir şeye benzer; ancak "F" terimi takılıp kalır).
Bunu nasıl kullanabilirsin? Önemli bilgileri sola hizalayın ve paragraf bloklarını bölmek için kısa, kalın başlıklar, madde işaretleri ve benzeri dikkat çekici öğeler kullanın.
Z modeli. Görsel Hiyerarşinin İlkeleri
Z-desenleri bilgilerin blok paragraflarda sunulmasının zorunlu olmadığı reklamlar veya web siteleri gibi diğer sayfa türleri için geçerlidir. Okuyucu önce önemli bilgilerin bulunabileceği sayfanın üst kısmını tarar, ardından çapraz olarak karşı köşeye geçerek sayfanın alt kısmında da aynısını yapar.
Web tasarımcıları genellikle sayfalarını bu davranışa açıkça uyacak şekilde tasarlar; en önemli bilgileri köşelere yerleştirir ve diğer önemli bilgileri üst ve alt çubuklara yönlendirerek köşegenleri birbirine bağlar.
Aşağıda 2010 konferans toplantısının tasarımında önemli unsurlar logodur (sol üstte), bir "şimdi kaydolun" düğmesi (sağ üstte) ve stratejik olarak güzel Z desenli noktalara yerleştirilmiş bir konuşmacı listesi (altta).
2. Boyut önemlidir. Görsel Hiyerarşinin İlkeleri
_
Oldukça basit: İnsanlar önce büyük şeyleri okurlar. Aşağıdaki Young Vic reklamına "bölünmeden" önce gözleriniz "performansa" çekilmişse, hemen bir algı psikoloğuyla iletişime geçmelisiniz: nadir bir anormallik olarak test edilerek muhtemelen iyi para kazanabilirsiniz.
İlginç olan bu eğilimin aslında yukarıdan aşağıya kuralını reddedecek kadar güçlü olmasıdır. Yukarıdaki görselde "hack", "harekete geçme zamanı"nın yerine geçer çünkü daha büyük ve sola doğrudur (böylece soldan sağa kuralı yardımcı olur).
Ancak Yıllık Raporun bir sonraki sayfasında: İnsan Hakları Kampanyası 2012 (beşinci medya sütununda geliştirildi) büyük ölçüde okuyoruz yazı Hemen üstündeki metinden önce "Seçim 2012" metni "Kampanya Yolunda Eşitlik Mücadelesi". Görsel Hiyerarşinin İlkeleri
"2012 Seçimi" en üst düzey bilgi sırasıdır: bize aşağıdaki bilgilerin ilgili olduğu genel temayı anlatır. Ancak tasarımcı, makalenin başlığının okuyucular için daha ilgi çekici olduğuna karar verdi ve bu nedenle onu ilk önce okunacak şekilde derecelendirdi.
3. Uzay ve doku. Görsel Hiyerarşinin İlkeleri
Dikkat çekmenin başka bir yolu da İçeriğe nefes alması için yeterli alan verin . Düğmenin etrafında önemli miktarda negatif boşluk varsa veya metin bloğundaki çizgiler geniş bir şekilde takip ediliyorsa, bu öğeler okuyucular tarafından daha kolay görülebilecektir.
Aşağıdaki resimde (DrawtoClick sitesinin bir parçası) görebileceğiniz gibi, aralık, boyut kullanımına zarif bir alternatif veya tamamlayıcı olabilir. Burada satış noktası “Notre agence vouscompagne...” çok küçük puntoyla yazılmış ama etrafı bol miktarda beyaz alanla çevrelenmiş, bu da onun önemini gösteriyor. Aşağıda, “Le Compendre”, “Le Réaliser” ve “Le Partager” ifadeleri çevredeki alandan ayrılarak ek bir vurgu kazanıyor.
İnsanlar görsel hiyerarşiyle ilgili olarak "doku"dan bahsettiklerinde, dokunun grafik etkilerini kastetmiyorlar. Daha ziyade, bu tür "doku", bir sayfadaki alanın, metnin ve diğer ayrıntıların genel düzenlemesini veya yapısını ifade eder. Bright Pink'ten alınan bu örnek, konsepti iyi bir şekilde göstermektedir:
İlk resimde "Spor" kelimesi hiyerarşide "badminton"dan daha yüksektir çünkü daha uzun, daha büyük ve daha cesurdur. Resim 2'de "badminton"u ön plana çıkaran ve kendi alanına yerleştiren siyah dikdörtgen sayesinde iki kelime kabaca eşdeğerdir.
Üçüncü resimde, arka plandaki karalama "Spor" alanını kesintiye uğratıyor ancak "badminton" alanını kesintiye uğratmıyor ve bu nedenle "badminton"un hiyerarşide en yüksek olduğu yerde bir tersine dönüşle sonuçlanıyor. Bu gelişmeyi tahmin etmek zordur, bu nedenle tasarımcılar bunu genellikle bütünsel bir "doku" duygusuyla ilişkilendirir.
4. Yazı tipi ağırlığı ve eşleştirme. Görsel Hiyerarşinin İlkeleri
Yazı tipi seçimi görsel hiyerarşi oluşturmak için kritik öneme sahiptir. Bir yazı tipinin en önemli özellikleri arasında ağırlığı, harfleri oluşturan konturların genişliği ve serif ve sans serif gibi stil yer alır. İtalik yazılar gibi diğer değişiklikler de rol oynayabilir.
Nasıl olduğunu fark et kulaklık The Tea Factory için aşağıdaki web tasarımındaki kelime hiyerarşisinin sırasını etkiler: Oyunun adı "ısınmanıza yardımcı olacak mükemmel çaylar"dır, ancak kelime yerleşimine ek olarak yazı tipi ağırlığı ve italiklerdeki farklılıklar, daha fazla bir anlam yaratır. dinamik, daha az doğrusal, okuma deneyimi. "://azbyka.com.ua/foto/tea-factory.jpg" />
Bazı durumlarda amaç, çeşitli bilgileri eşit derecede acil olarak sunmaktır. Herkesi aynı boyuta ve ağırlığa ayarlamak eşitliği sağlayacaktır ancak aynı zamanda monoton görünmesine de neden olacaktır. Yazı tipi farklılaştırması, aşağıdaki Trendi dergisi kapağında olduğu gibi, bunu önlemenin bir yoludur. Görsel Hiyerarşinin İlkeleri
Burada, sayfanın çevresindeki beş iltifat hiyerarşi açısından aynıdır, ancak iyi eşleştirilmiş iki yazı tipini (biri orta kalınlıkta serif, diğeri hafif ama uzun sans serif) değiştirerek çeşitlilik elde ederler.
5. Renk ve gölge.
İşte çok basit bir şey daha: parlak renkler yumuşak renklerden veya gri tonlarından öne çıkarken, daha açık tonlar daha "uzak" görünür ve dolayısıyla hiyerarşide daha zengin, daha koyu tonlara göre daha alt sıralarda yer alır. Where Are They web sitesi, parlaklık etkisi yaratmak için parlak ışık ve renkli arka aydınlatmayı siyah beyaz ızgara efektiyle karşılaştırıyor:
Guggenheim web sitesi, konum seçimi, o anda izlenen sergilerin listesi ve özel sergilere bağlantılar gibi önemli bilgileri vurgulamak için renkleri kullanıyor. Görsel Hiyerarşinin İlkeleri
Özel Paketleme için En İyi Yazı Tipi
Whitney Museum web sitesi ise renk tonunu (bu, temel tona beyaz eklemek, onu daha açık hale getirmek anlamına gelir) kullanarak tek bir yazı tipi, ağırlık ve ton (siyah) içinde bir hiyerarşi kurar. "Pop Kültüründe Cory Archangel" görsel hiyerarşide açıkça "Whitney Hikayelerinde Yenilikler"in altında yer alıyor; bunun nedeni yalnızca daha düşük olması değil, aynı zamanda gölgesinin daha açık olması ve beyaz arka planda daha az göze çarpmasını sağlamasıdır. Görsel Hiyerarşinin İlkeleri
Rengin özel bir anlamı vardır mobil tasarım küçük ekran boyutunun boyut çeşitliliği ve geniş aralık gibi diğer stratejileri kullanma yeteneğinizi sınırladığı uygulamalar. Grainger Industrial Supply uygulamasında, "Ödeme İşlemine Devam Et" düğmesi kırmızı renkte olup, göründüğü her sayfada öne çıkmasını sağlar. Dar Arama Sonuçları paneli ise bunun aksine gri renktedir ve hiyerarşide arama çubuğu ve ürün bağlantıları gibi diğer öğelerle kabaca eşdeğerdir.
Grainger için uygulama tasarımı
6. Tasarımcılar için yönlendirme.
Sayfa düzenleri genellikle hem geleneksel olarak hem de en okunaklı format olduğu için dikey ve yatay çizgilerden oluşan bir ızgarayı takip edecek şekilde tasarlanmıştır. Böyle bir sistemde hiyerarşi kurmanın yeni bir yolu vardır: Izgarayı kırmak.
Bir eğri veya çapraz boyunca konumlandırılan metin, çevredeki ızgarayla engellenen metin karşısında otomatik olarak öne çıkar ve ilgi odağı olur. Bu, uzun zamandır Frost Design'ın otobüs durağı posteri gibi reklamcılıkta etkili bir strateji olmuştur.
Leave a comment