Dijital iletişimin yaratıcıları, tasarımcıları, düşünürleri ve problem çözücüleri olarak, hedef kitlemiz hakkındaki anlayışımıza dayalı seçimler yaparız.
Bu seçimler, soldan sağa, sağdan sola veya yukarıdan aşağıya okuma gibi kültürümüzden edindiğimiz bilgiler ve önemli resimlerin yerleştirilmesi, metin, etkileşimli arayüz ve renk seçenekleri.
Kültürün ötesinde, insan gözü ve beynin gözün gördüğü şeyin önemini nasıl kaydettiği vardır. Ücretsiz e-kitapta açıklanan görsel tasarım ilkelerini biraz anlayarak İnsan Gözü için Web UI Tasarımı , son derece etkili web siteleri tasarlayabiliriz.
Doğru tasarımı öğrenmek için tasarım tarihi çalışılmalıdır. Tarihteki büyük sanatçılar ve tasarımcıların hepsi basit tasarım kurallarını takip ettiler ve bu kuralları takip etseler, eğseler veya çiğniyorlarsa, bu kadar yüksek bir saygıya sahip olmalarını sağlayan temel unsurlardı.
Beyin, birden fazla çalışmada, sunulan bilginin eğitimli bir hiyerarşisi tarafından kayıt altına alma modelini izler. Kalın renkler, kalın yazı tipi, kontrastlar ve yerleştirme, termal göz izleme testlerinde her zaman ortaya çıkan şeydir, çünkü çoğunlukla böyle eğitildiğimiz içindir.
* İlginç Not: Dikkatin sol ve sağdaki resimlerdeki metnin son üçte birini okumaktan nasıl uzaklaştığını görüyor musunuz? Kullanıcılar gittikçe daha az okuyor. Orta görüntüdeki gibi uzun metin sütunlarını bölün.
Ayrıca, kullanıcılar metninizin her kelimesini nadiren okuyacağından, ilk iki paragraf en önemli olanıdır ve amacınızı içermelidir. Dikkat çekmek için paragrafları, alt başlıkları ve madde işaretlerini cazip anahtar kelimelerle başlatın.
Patron ya da müşteri 'ortaya çıksın!' veya 'daha fazla' UMPH ekle! ' ona! ' en basit göz tanıma yöntemini istiyor - daha büyük ve daha cesur hale getirin. Aynı şekilde, negatif alan kullanımı, gözü daha büyük ve daha cesur olmayan belirli bir alana odaklanmaya zorlar.
Z ve F modellerinin (diğer adıyla düzen) tasarım ilkeleri, insan gözünün bir web sitesini taramak için nasıl eğitildiğini izler. Harika kreasyonlar genellikle hoş tasarım için doğanın akışına güvenir.
Grid modelini kullanan soldan sağa okumaya dayalı F-şablonu basit, kolaydır ve bilgileri göz için basit bir hiyerarşi içinde düzenler. Açıklayıcıyla birlikte resmin üst kısmında başlık ve ardından bir bağlantı. Aşağı gidin ve bir sonraki içerik parçasına başlayın. Çok fazla düşünmeye gerek yok ama tam olarak heyecan verici de değil.
Açıklandığı gibi İnsan Gözü için Web UI Tasarımı , F modeli, reklam veya harekete geçirici mesajlar yerleştiren ancak içeriği tamamen dışarıda bırakmak istemeyen siteler için oldukça yararlıdır. Bu durumda, kenar çubuğu, kullanıcıları daha derin bir seviyeye dahil etmek için vardır. Tüm desenlerde olduğu gibi, F-Deseni bir şablondan ziyade bir kılavuzdur çünkü F deseni, F'nin en üst sıralarından sonra sıkıcı hissedebilir.
Soldan sağa okuyucularda göz hareketinin benzer bir kullanımı Z-desenidir. F modeline çok benzer şekilde, Z, sayfanın göz taraması olarak soldan sağa okumayı takip eder ve önemli öğeleri gözün Z taraması yoluna yerleştirir.
Z kalıbını kullanan web siteleri genellikle metin ağırlıklı değildir ve sayfada kesin bir eylem çağrısı bulunur. Bu göz tarama modeli kullanıcıyı noktaya daha hızlı getirecek ve web'de daha hızlı olması daha iyidir.
Tasarım düşüncesinin birkaç popüler 'kuralı' vardır. Hepsinin geçerli noktaları vardır ve doğal olarak hepsi başarıyla 'kırılabilir'!
Bu tasarım kurallarının nasıl çalıştığını göstermek amacıyla, aşağıda bazı gruplanmış resimler bulunmaktadır. Biri basit, stok fotoğraflar. Diğeri, dört saygın tasarımcının her birinden bir eser, Piet Zwart , Josef Müller-Brockmann , Paul Rand ve Saul Bass . Eklenen birkaç belirli web sitesiyle, bu resimlerin farklı tasarım kurallarına nasıl uyduğunu görelim.
Olarak da bilinir Altın Oran Deniz kabuğu şeklindeki bu matematiksel kabus, tatlı noktayı, bir sayfadaki maksimum ilgi alanını ve gözü ona doğru götürecek alanları keşfetmenin kaynağı olarak yüzyıllar boyunca kullanılmıştır.
Geometride, altın bir dikdörtgen, kenar uzunlukları altın oranda olan bir dikdörtgendir:
1: tfrac {1 + sqrt {5}} {2}, 1: varphi (Yunanca phi), burada varphi yaklaşık 1,618'dir.
Evet, matematik sizin kalenizse bir çırpıda. Değilse, dene bu web sitesi kapsamlı bir açıklama ve etkileşimli bir tablo için. Basit bir açıklama, temel şekle ve odak noktasına bakarsanız (tasarımdaki görüntü ve öğelere bağlı olarak şeklin ters çevrilebileceğini, düşebileceğini veya döndürülebileceğini unutmayın), tasarımı zihninizde kaplamanın kolay olmasıdır. .
Stok fotoğraf grubunu kullanarak, Altın Dikdörtgenin tasarıma nasıl uyduğunu ve maksimum dikkat alanını gösterdiğini görüyor musunuz?
Sadece arka plan resminde bu kuralı kullanmak, kullanıcıyı kesinlikle ona çekeceği herhangi bir öğeyi (yani metin bloğu, harekete geçirici mesaj, kullanıcı arayüzü vb.) Yerleştirmenize olanak tanır.
Zwart, Müller-Brockmann (Grid Layout'un babası olarak bilinir), Rand ve Bass'ın (aynı zamanda ızgaranın takipçileri) çalışmalarında Altın Dikdörtgeni kullanarak, önemli noktaları gösterirken dikkat edeceksiniz. tasarımı takip edecek, aynı 'sıcak' alanları gösteren diğer yerleşim düzenleri göz önüne alındığında bu gerçekten gerekli bir adım mı?
Son birkaç yıldır Pinterest düzeni, çok fazla içeriğe sahip siteler için çok popüler olmuştur. Temel tasarım akışı F modelini kullanır. Gözle tarandığında etkilidir ancak beyne heyecan vermez.
Gibi içerik ağırlıklı bir haber sitesi New York Times Gözü en önemli hikayeden en az parşömenin üstüne taşımak için sayfasını Altın Dikdörtgen ile tasarlar. Bu, bir web sitesine birden çok metin bloğu yerleştirmenin ve yine de her birinin sayfanın hiyerarşisinde yer almasını sağlamanın harika bir yoludur.
İşte matematik yapmak istemeyenler için küçük bir hile: sadece bir Altın Dikdörtgeni kopyalayın ve tasarımınızın üzerine bir katmana yerleştirin. Ayrıca, bir sayfadaki maksimum dikkat gerektiren alanları gösterir ve sayfayı tasarlarken zihninizde resmetmesi kolaydır.
Dik açı noktaları, kullanıcının gözleri için maksimum dikkat gerektiren iki alandır. Bir web sitesi sayfasının tasarımını planlamanın kolay ve hızlı bir yolu.
'Dokuz için tasarım' olarak da bilinen Üçte Bir Kuralı '(Ro3), web siteleri tarafından kullanılan en yaygın düzen modelidir. Tasarım alanının bölümlere ayrılması, tasarımcıya kesin önem alanları verir. Alanlar üst, orta ve alt bölümlere, sol, orta ve sağ bölümlere veya kenar çubuğu gibi ayrı bir alan olarak yalnızca üçte birine bölünebilir.
Bunun bu makaledeki örnek resimlerle nasıl çalıştığına baktığımızda, Ro3 ızgarasının kesişen çizgilerinin gözdeki en önemli alanları vurguladığını unutmayın. Örneğin, ilk stok fotoğrafta adamın yüzü ve ampulü etrafında çizgilerin nasıl kesiştiğine dikkat edin. Ayrıca, çizgilerin yazarın yüzünde ve hareket noktasında (tüy kalemiyle eli) nasıl kesiştiğini görün.
Şimdi web sitelerinde vurgulanan Üçte Bir Kuralı'na bakın. awwwards'dan trendler ve örnekler sayfası (yukarıda). Yine, kesişen alanların ne kadar büyük ilgi çekici noktalar olduğunu görüyor musunuz? Arayüzünüzün kompozisyonunu bir dahaki sefere planlarken bunu aklınızda bulundurun.
Tasarımda ızgara, içeriği yapılandırmak için kullanılan bir dizi kesişen düz veya eğimli kılavuz çizgisinden oluşan bir yapıdır. Izgara, bir tasarımcının grafik öğeleri akılcı, göz ve beyin için kolay anlaşılır bir şekilde organize edebileceği bir kılavuz görevi görür.
Kullanışlı prototip oluşturma aracı UXPin'den aşağıda gösterildiği gibi, bir ızgara grafik öğelerini buna göre düzenlemeye yardımcı olur:
Yine de ızgara, birçok kişinin anlaması için kafa karıştırıcı bir sistem olabilir. Bunun nedeni, tasarım öğretmenleri tarafından genellikle doğru bir şekilde öğretilmemesidir.
Daha önce de belirtildiği gibi, Josef Müller-Brockmann, modern ızgara yerleşim sisteminin babalarından biri olarak kabul edilir. Öyleyse 70 yıl sonra çalışmaları neden bu kadar taze ve yenilikçi?
Belki de ızgarayı oluşturmak, sınırlamaları ve özgürlüğü anlamasına da yardımcı oldu. Çoğu insan ızgaranın tasarım özgürlüğünü sınırladığını düşünüyor. Gerçekte, ızgara, tasarım seçimleri üzerinde bir sınırlama değil, tasarım sürecine bir yardımcıdır ve sayfanın tüm önemli hiyerarşisinde öğe ilişkisinin gösterilmesine yardımcı olur - tıpkı bu makalede tartışılan diğer tasarım düzeni kuralları gibi.
Google'da 'ızgara düzeni' araması on milyonlarca geri dönüş getiriyor. Google araması tarafından sağlanan resimleri taradığınızda, gözünüz genellikle tüm düzen boyunca eşit uzaklıkta olan blokları, yatay ve dikey çizgileri kaydedecektir.
Massimo Vignelli tarafından tasarlanan ünlü 1972 NYC Metro haritası, büyük bir ulaşım sistemi için yenilikçi bir tasarımdı. Tüm dünyada toplu taşıma haritalarına sahip ve hala ilham veriyor. Belli ki ızgaraya göre tasarlandı. Yolun kendisini yoğun bir şekilde kullanıyor, transit sistemini ve New York City'nin dört ilçesini, millerin ve mesafenin doğru bir tasvirinden ziyade (tasarımla ilgili başlıca şikayet buydu) bir tasarım olarak ele alıyor.
Bu iki web sitesi, kaydırmanın yukarısına bakarsanız Ro3'ü kullanıyor gibi görünüyor. ancak tüm sayfalar görüntülendiğinde, sayfaların ızgaraya göre tasarlandığı açıktır.
UI tasarımınızın temeli olarak ızgarayla ilgili hatırlamanız gereken bazı önemli noktalar:
Vizyon en güçlü insan duygusu olduğundan, bir web sayfası Bir hikaye anlatmak ilk görüşte.
Kullanıcınız 10-20 saniye içinde bilir eğer ayrılacaklarsa - onları olabildiğince çabuk ikna etmelisiniz. Genel tasarım bir hikaye anlatır ve kullanıcı bu hikayenin ilk bölümünden son bölümüne yönlendirilmelidir. Bu tasarım modelleri, bu zorluğun çözümüdür.
Tasarım tercihleri söz konusu olduğunda tüm yaratıcılar kendinden şüphe duyarlar. Bu doğru yerleşim mi? 'Bitirdim ama mutlu değilim' 'Doğru seçimleri yaptığımdan emin olmak için ne yapabilirim?' Düzen kalıpları, doğru kullanıldığında, maksimum verimlilik için kullanıcı arayüzünün (veya web ile ilgili herhangi bir tasarım sorununun) tasarlanmasına yardımcı olur ve görsel uyum yaratır. Dan beri güzel şeyler daha iyi çalışır tüm bu taktikler, mümkün olan en iyi kullanıcı deneyimini oluşturmaya yardımcı olur.
Daha fazla görsel UI tasarım ipucu için ücretsiz e-kitaba göz atın Web Kullanıcı Arayüzü Tasarımında En İyi Uygulamalar . Houzz, Fitbit, Google ve AIrbnb gibi şirketlerden 33 harika tasarım örneğini analiz ederek öğreten kapsamlı ama hızlı okunan bir kılavuzdur.
Kelimeler: İzci terzi
Speider Schneider, diğer önemli şirketlerin yanı sıra Disney / Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC ve Marvel Comics, Cartoon Network ve Nickelodeon için projeler üzerinde çalışan bir ürün tasarımcısıdır. Ayrıca web tasarımı ve UI / UX üzerine yüzlerce makale yazmıştır.
Bunu beğendin mi? Bunları dene...