Web tasarımlarınızı daha sezgisel hale getirmenin 5 yolu

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.



01. Önce beyin için tasarım

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.

Nielsen Norman Group

Nielsen Norman Group'un izniyle: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

* İ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.

gönderdikten sonra tik tok videosu nasıl düzenlenir

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.

Resim http://speckyboy.com/ üzerinden Jerry Cao

Resim http://speckyboy.com/ üzerinden Jerry Cao'nun izniyle kullanılmıştır.

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.

Resim http://mailchimp.com/ üzerinden Jerry Cao

Resim http://mailchimp.com/ üzerinden Jerry Cao'nun izniyle kullanılmıştır.

02. Kuralları ve ne zaman ihlal edeceğinizi öğrenin

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.

Görüntüler GL Stock Images

Görüntüler GL Stock Images'in izniyle, http://graphicleftovers.com/

Piet Zwart (sol üst), Josef Müller-Brockmann (sağ üst), Paul Rand (sol alt), Saul Bass (sağ alt)

Piet Zwart (sol üst), Josef Müller-Brockmann (sağ üst), Paul Rand (sol alt), Saul Bass (sağ alt)

03. Altın dikdörtgeni kullanma

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.

Altın dikdörtgen, yani altın oran

Altın dikdörtgen, yani altın oran

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?

Görüntüler GL Stock Images

Görüntüler GL Stock Images'in izniyle, http://graphicleftovers.com/

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.

Görüntü http://zergnet.com/ izniyle

Görüntü http://zergnet.com/ izniyle

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.

facebook resimleri nasıl özel yapılır

Resim http://www.nytimes.com/ izniyle sağlanmıştır

Resim http://www.nytimes.com/ izniyle sağlanmıştır

İş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.

  1. Sol üst köşeden (soldan sağa okuyan bir kitle için tasarlıyorsanız, bu adımı tersine çevirin) sağ alt köşeye çapraz bir çizgi çizerek başlayın.
  2. Sol alt köşeden, dikdörtgeni ikiye bölen köşegene bir çizgi çizin ve bu çapraz çizgiyi 90 derecelik bir açıyla karşılamasını sağlayın.
  3. Aynısını sağ üst köşeden tekrarlayın.

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.

04. Üçte bir kuralı uygulamak

'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.

McDonalds.com

McDonalds.com'un izniyle

Bu akımda McDonald's ana sayfası (onların sitesi düzenli olarak değişiklikler ), Ro3, gözleriniz aşağıdaki alanlara gidebilecek şekilde yer açar:

  1. Ön ve merkez CTA, kullanıcıyı daha fazlasını keşfetmeye ikna etmek için içerikten yararlanır. Ürüne odaklanmadığı için, bu CTA muhtemelen daha az sürtünme yaşar.
  2. VAOV! Tüm yemek için sadece 2,50 dolar mı? Sağ üst köşedeki alaycı adamın aksine gerçek kullanıcı deneyimimi daha keyifli hale getirecek, ancak o bölgenin göz taramama yaptığı etki sayesinde o kadar fark edilmeyen gülümseyen çalışana daha gitmeden bağlandım. .
  3. Ah-HA! Bu harekete geçirici mesaj düğmesiyle diğer lezzetli yemek kombinasyonlarını görebiliyorum. Bakalım şu anki evrenimin - bu web sayfasının - merkezindeki bu düğmeye tıklayarak daha yüksek satış yapıp yapamayacağım.
  4. Ama önce bu renkli kutular beni baştan çıkarıyor. Evet, ızgara tavuk iyidir ve ağzımdaki bu şeylerin gerçek patates olup olmadığını merak ediyorum, ama en önemlisi, 'sevme' eylemine girme vaadi beni garip bir şekilde ilgilendiriyor.
  5. Sürekli bir hatırlatma olarak, logo ve yiyecekler sol üstte görülebilir. Ne istediğimi ve onu nereden alabileceğimi görüyorum!

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.

Görüntüler GL Stock Images

Görüntüler GL Stock Images'in izniyle, http://graphicleftovers.com/

Görüntü www.awwwards.com

Görüntü www.awwwards.com'un izniyle

Ş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.

05. Kılavuza hakim olmak

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:

  • Bir sayfa ile ilgili olarak
  • Sayfadaki diğer grafik öğelerle ilgili olarak
  • Bir sayfayla ilgili olarak aynı grafik öğesinin diğer bölümleriyle, sayfadaki diğer grafik öğeleriyle veya aynı grafik öğesinin diğer bölümleriyle ilişkili olarak.

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.

Resim UXPin

Resim UXPin'in izniyle

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.

New York City Transit Authority

New York City Transit Authority'nin izniyle, http://www.mta.info/nyct

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.

GeneralAssembly.com ve TreeHouse.com

aptallar için adobe yaratıcı bulut tasarım araçları hepsi bir arada
GeneralAssembly.com ve TreeHouse.com'un izniyle görüntü

UI tasarımınızın temeli olarak ızgarayla ilgili hatırlamanız gereken bazı önemli noktalar:

  • Izgara bir rehberdir ve çizgiler ve küplerden oluşan bir hapishane değildir.
  • F-kalıbı, Z-kalıbı, 3 Kuralı ve Altın Dikdörtgenin yaptığı gibi tasarımınızı ve yerleşiminizi düzenlemenize yardımcı olacaktır.
  • Öğelerin bölümlerini üzerine yerleştirmenize yardımcı olan yalnızca bir başlangıç ​​katmanıdır.
  • Mükemmel bir şekilde istiflenebilirler veya sayfanın etrafında dönebilirler, ancak gözün taraması ve beynin tepki vermesi için mantıklı bir sırada.

Bu neden önemli

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...

  • 11 harika UI tasarımı
  • Kullanıcı deneyimini etkilemek için 10 adım
  • En iyisini indirin ücretsiz yazı tipleri