Deyiş gider gibi, ilk izlenim için ikinci bir şans yoktur. Bilinmeyen bir web sitesine gidin ve birkaç saniye içinde bu sayfanın "iyi" mi yoksa "kötü" olup olmadığına karar vereceksiniz. Özellikle kendi yarattıkları ile, objektif bir analiz yürütmek için sonsuz zordur. Neyse ki, takip edebilirsiniz zaman test tasarım ilkeleri vardır. Genel bir bakış.

"İyi" web tasarımı nedir?

Web tasarımı oldukça karmaşıktır: iyi tipografi ve çekici bir görsel düzenleme duygusu için sadece bir göz daha alır. Web tasarımı, kendinizi yaratıcı bir şekilde ifade etmek için son derece çok yönlü bir yol sunar. Ama aynı zamanda, tasarım sürecinden uzaklaşmak için en az bir çok fırsat sunuyor. Özellikle tasarım sürecinde köklü olduğunuzda, ağaçlar için orman görmek kolaydır. Sonuç, "kötü" bulduğumuz bir tasarım olabilir.

Derecelendirmemiz genellikle sezgiseldir, bu nedenle aynı tasarım öğesinin bir web sitesine neden mükemmel bir şekilde uyduğunu açıklamak zordur.

Ne başarılı bir web sitesi yapar?

İyi web siteleri, kullanıcıların sezgisel olarak site üzerinden kendi yolunu bulmak, böylece net ve verimli bir şekilde bilgi sağlar. Çoğu durumda, kullanıcı odaklı bir web sitesi tipografi, interaktif öğeler ve görsel ince ayar bir sürü dengeli bir etkileşim yoluyla başarılı olur. 

Ve bu yeterince karmaşık olmadığından, biz de bizim potansiyel kullanıcıların tarayıcılar ilk etapta temsil edebilirsiniz ne ile sınırlıdır. Gerekirse, geliştiricinin veya ilgili web sitesini oluşturmak için kullandığımız aracın teknik becerileri. 

Buna ek olarak, mevcut eğilimleri ve aynı zamanda müşteri kurumsal kimliğini dikkate almalıdır. Web tasarımı temelde UX, UI ve grafik tasarım, CI ve mevcut eğilimleri dikkate teknik koşulları alarak toplamıdır.

Web sayfası oluşturmak oldukça büyük bir projedir. Arkasında genelde koca bir takım olmasına şaşmamalı. Genellikle, bireyler (ve ne yazık ki, takımlar) özellikle güçlü olduğu alanlara daha fazla dikkat eğilimindedir. Diğer alanlarda daha az alırken - ya da aşırı durumlarda hiç - dikkat. Bu bir web sitesi aşağı ve uyumsuz bulmak yapabilir bir dengesizlik oluşturur.

"İyi" web tasarımı, farklı tasarım alanları ve teknik koşullar arasındaki dengenin bir sonucudur.

Tüm alanların ayrıntılı bir inceleme bu makalenin kapsamı ötesine gideceğinden, bugün kendimi ağırlıklı olarak görsel tasarıma adadım. 

Kontrast, Beyaz Boşluk ve Renk

Kontrast genellikle tasarımın birincil renklerinin seçimi ve kompozisyondaki beyaz boşlukla birleştirilir. Ancak, Whitespace mutlaka boşluk beyaz sol anlamına gelmez. Bunun yerine, öğeler arasındaki boşlukları ifade eder. Bu alan aynı zamanda "negatif alan" olarak da adlandırılır ve hala renkli olabilir.

Beyaz boşluk bir sürü nedeniyle, bir sayfa genellikle daha temiz ve net görünüyor. Bu yaklaşım da sık sık el ele gider Minimalizm. Bu, gereksiz olan ve tasarıma fark edilebilir bir katma değer getirmeyen her şeyi sürekli olarak düzenden kaldırmak anlamına gelir. Bu metin, dekoratif unsurlar veya CtAs bir sel olun.

Ipucu

Kontrast ve renk planlarken, aşağıdakileri aklınızda bulundurun: Okunması zor içerik görme bozukluğu olan kişilerin (örneğin renk tanıma) işitmeyi durdurmasına neden olabilir.

Özellikle büyük panoramik görüntüler ile web sitesi başlıkları doldurma eğilimi ile, sık sık deşifre etmek zor metin bindirmeleri bulabilirsiniz.

Çok fazla boşluk ve kontrastın başarılı bir örneği

Uyumlu web tasarımı için temel ilkeler
Uyumlu web tasarımı için temel ilkeler

https://aiven.io/

Kontrastın zayıf bir örneği

Aşağıda, özellikle mobil sürümde bir kontrast sorunu olan bir örnek verilmiştir. Eylem çağrısı tamamen huzursuz arka plan karşı sular altında.

neden-ux-başarısız
https://www.opitz-consulting.com/

Bazen tasarımcılar için bir tasarım için doğru renkleri filtrelemek o kadar kolay değildir. Neyse ki, bize hızlı bir şekilde farklı kombinasyonları test izin olası araçlar da vardır - biz pahalı bir düzen oluşturmak için çok fazla zaman harcamadan önce.

Renk Teorisi: Bu araçlar renk seçmenize yardımcı olur

Malzeme Tasarım Renk Aracı

Malzeme Tasarım Renk Aracı İki ana renkte Düşük Sadakatli Tel Çerçeveler oluşturur.

malzeme-tasarım-renk-aracı

Adobe Renk Çarkı

Adobe Renk Çarkı yalnızca farklı renk paletleri oluşturmanıza yardımcı olmakla birlikte, aynı zamanda kullandığınız renk paletlerini de mevcut tasarımlardan ayıklar. Son zamanlarda, bu da renk degradeleri mümkündür.

kerpiç renkli tekerlek

Uygun renkleri seçerken, müşterinin markalarına yoğun bir göz atmak ta yarar: Hangi renk paletleri zaten kullanılıyor? Bundan ne ölçüde sapabilirim?

Renk teorisinin temelleri de kaçınılmazdır: Müşterinizin ilgili sektörüne göre, uygun psikolojik etkiye sahip bir renk seçilebilir. Bu mavi genellikle daha saygın şubelerde kullanılan bir tesadüf değildir - sigorta gibi, danışmanlık ve karşılaştırma web siteleri. Mavi güven uyandıran ve güven verici bir etkiye sahiptir. Ama burada çok genel olmamak gerekir, çünkü aynı renkteki nüanslar bile çok farklı duyguları kışkırtabilir.

60-30-10 kuralını biliyor musun?

Bu renk paletleri kullanımı için altın bir kural olarak önerilir. Burada uygulanan ilke: ana renk düzenin yaklaşık yüzde 60'ını oluşturan, tamamlayıcı bir renk içerir 30 yüzde ve üçüncü bir renk yüzde 10 ile daha fazla vurgular ayarlar. Bu düzenleme nin kullanıcı üzerinde özellikle dengeli bir etkisi vardır.

Tasarım elemanlarının simetrik veya asimetrik düzenlemesi

Kendi makalesinde "Tasarım İlkeleri ve Önemi" yazar ve tasarımcı Cameron Chapman web tasarımı dengelemek için onu iki en önemli yaklaşımlar açıklar. Böylece, onun göze çarpan göre içerik ayırır - yani, daha fazla göz alıcı ya da daha az belirgin olup olmadığını. 

Buna göre, aşağıdaki sorun, içeriği denge duygusunu aktaracak şekilde düzenlemektir. Tasarım kararı "simetrik veya asimetrik olarak düzenlemek" için yardımcı olabilir.

Her iki yaklaşım da nasıl çalışır?

Simetrik yaklaşımda, elementler benzer bir ünlü ile birlikte düzenlenir. Asimetrik yaklaşım, diğer taraftan, genellikle daha belirgin ve daha az dikkat çekici içerik düzenler. 

Örneğin, düzen temiz tutulabilir. Bunu yaparken, elemanlar açıkça birbirinden ayrılır, aynı şekilde Couro Azul durumda. Genellikle bu tür içerik zayıf eleman biraz daha fazla alan vermek ve bir denge oluşturmak için biraz ademi merkeziyetçi yerleştirilir.

Couro Azu

Sıfır aynı ilke, ama daha özgür bir düzenleme ile, aynı ilkeyi kullanır. Whitespace'in yüksek kullanımı sayesinde zarif ve çağdaş bir görünüme bilgilidir.

Bu yaklaşım büyük ekranlarda (tablet boyutundan) çok iyi çalışır. Akıllı telefonlar gibi daha küçük cihazlar ise açıkça ayrılmış, inter-düzenlenmiş modüllerden yararlanır.

Öncelikleri tanımlama ve ayarlama

Bir web sayfası tasarlamaya başlamadan önce, hangi mesajın iletilmesi gerektiği açıkça tanımlanmalıdır. Pazarlama konseptinde açıklık genellikle tasarım düzeninde de açıklık getirir.

Anahtar iletiler belirlendikten sonra, renk ve/veya tipografi kullanılarak bunları vurgulamak önemlidir.

Her ikisinin de nasıl birleştirilmiş olarak bu örnekte görünebileceğini görebilirsiniz:

Kovboy
https://cowboy.com

Ancak, bunu uygulamanın birçok yolu vardır. Çünkü içerik sadece Kalın Tipografi ve Renk ile vurgulanabilir. Ayrıca resimler aracılığıyla - olduğu gibi Jamie Oliver'ın Restoranı – ve farklı ilkelerin etkileşimi sayesinde, seçili içeriğe odaklanırsınız.

Jamie Oliver'ın Restoranı

Oran, Birliktelik ve Hiyerarşi

Bir sayfanın içeriği, hiyerarşisinde anlamlı olacak şekilde sunulmalıdır. En önemli şey seni en tepeye yerleştirmek. Önemi azalan, aşağı yol unuzu çalışmalısınız. Bu yüzden kendinize sormalısınız: Hangi bilgi sitemin ziyaretçi için en önemlidir? Yalnızca ek bilgi nedir? 

Bu da gezinti menüsü çoğu durumda üst olmasının nedenidir. Bir UI desen olmanın yanı sıra, sadece bir sayfanın en önemli yönlerinden biridir. Sonuçta, menü orada sunduğunuz temel içeriğin genel bir bakış başka bir şey değildir. Tabiri caizse, web sitenizin içeriği.

Görsel Hiyerarşi: Gerçekten Önemli Olan

Hiyerarşi de sözde hareket tarafından oluşturulabilir. Bunu yaparken, sayfanın içeriğini gözün içinden geçecek şekilde düzenleriz. Bu, örneğin, şekil ve düzenleme yoluyla elde edilebilir. Bu Portföy böyle bir şey gibi görünebilir ilginç bir örnektir:

Portföy

Göz soldan sağa doğru ekran üzerinden yönlendirilir. Nokta 01 açıkça burada en büyük hiyerarşiye sahiptir - tüm öğeler aynı boyutta ve şimdilik eşdeğer görünüyor olsa da. 

Oran da bir rol oynar: aynı boyut, renk, şekil öğeleri temelde bize birlikte aidiyet hissi vermek ve aynı işlevi sahip. Bu özellikle etkileşimli öğeler için önemlidir.

Yukarıdaki örnek, tutarlı bir tasarımın görsel uyuma büyük ölçüde katkıda bulunabileceğini göstermektedir: 

  1. tüm görüntüler için tek düze şekiller kullanılır,
  2. tüm görüntüler renk uyumlu, 
  3. toplamda, sadece iki farklı yazı tipleri ve boyutları kullanılır, 
  4. yazım hatası ve ayırıcılar için yalnızca bir renk kullanılır,
  5. ayırıcılar yinelenen bir tasarım öğesidir ve görüntüyü ve iki başlığı görsel olarak birleştirirler.
FREE DEV blog lightblue

Web Tasarımında Temel İlkeler - Sonuç

Yukarıdaki tüm temel ilkelere rağmen, kurallar çiğnenmek için vardır. Bu ilginç, yeni bir tasarım oluşturmak için tek yoldur!

Burada kısaca sunduğum yaklaşımlar, tabii ki, yeni değil. Bunun yerine, modern iletişim medyamıza aktarılan bilimsel ve/veya psikolojik araştırma varyasyonlarıdır. Ben şahsen bu teorileri ve yöntemleri bilmek önemli buluyorum. Yaratıcı gözümüz bunu çok "öğrendiği" için çoğu zaman kuralları sezgisel olarak uyguluyoruz.

Buna ek olarak, tasarımda farklı yaklaşımlar bilgisi kendi projelerinizin değerlendirilmesine yardımcı olur. Bir şeyin henüz görsel olarak tam olarak çalışmadığını fark ettiğinizde geri dönebileceğiniz bir kontrol listesi gibi görünün. Genellikle bir objektif değerlendirmek için kendi proje için gerekli mesafe bulamaz. 

Burada belirtilen tasarım ilkeleri tamamlanmaktan çok uzaktır. Eğer konunun daha derine inmek istiyorsanız, bu makaleler ve e-kitaplar bir göz atmak için bekliyoruz: 

Tasarım prensipleri hakkında ne düşünüyor? Sonja için ne gibi soruların var? Lütfen yorum işlevini kullanın. Ajanslar ve serbest çalışanlar için web tasarımı ve gelişimine yapılan yeni katkılar hakkında bilgi sahibi olmak ister misiniz? O zaman bizi takip et. TwitterFacebook ya da bizim aracılığıyla Bülten.

Yapraklı Auckland'da oyun tasarımı ve yaratıcı yazarlık eğitimi aldıktan sonra, Sonja Hoffmann web ve uygulama tasarımı ve geliştirme konusunda uzmanlaşmıştır. Onun odak gamification ve kullanıcı motivasyonu ve deneyimi keşfetmek, teknolojik eğilimler için bir tutku ve merak ile birleştiğinde.

Benzer makaleler

Bu makaledeki yorumlar

Yorum yaz

E-posta adresiniz yayınlanmayacaktır. Gerekli alanlar * Işaretlenmiş.