Her Proje için 10 Web Tasarım Komutu
Web sitesi tasarımı söz konusu olduğunda bir kural kitabınız var mı? Hemen hemen her web tasarım projesi için geçerli olan bazı kurallar vardır - onlara “web tasarım komutları” diyelim.
Web sitesi ne kadar büyük veya küçük olursa olsun, bu kurallar iyi tasarımın temelidir. Bu temel yönergeleri takip ederseniz ve başlattığınız her proje için onları düşünmenizin bir parçası yaparsanız, tasarımcıların karşılaşabileceği tuzaklardan kaçınacaksınız!
1. Tutarlı Olacaksınız
Kullanıcıların etkileşim kurması için tasarımı mümkün olduğunca kolay hale getirin Tutarlı tasarımın tasarımı ve kullanımı kolaydır. Kullanıcı etkileşimleri ve eylemlerinin yanı sıra görseller de tek bir tasarım boyunca görünüm ve kullanım açısından benzer olmalıdır.
Bu, düğmelerin aynı renkte olduğu ve kullanıcıların etkileşimde bulunmalarını bilmelerine yardımcı olmak, başlıkların aynı boyutta ve tasarım boyunca aynı yazı tipini kullanmasına yardımcı olmak için aynı fareyle üzerine gelme durumlarını kullandıkları ve renkler gibi öğelerin tanımlanabilir ve ilişkilendirilmiş bir paleti izlediği anlamına gelir marka.
Diğer görsel öğeler de simgeler veya fotoğraf, video veya çizimler gibi öğeler için bir stil ve kullanım planıyla tutarlı bir stil izlemelidir. Tasarım, genel estetiğe uyan kopya blokları için kullanılan bir sese sahip olmalıdır.
Tutarlılığın tüm bu unsurları genel kullanılabilirliğe katkıda bulunarak tasarımı kullanıcıların etkileşimde bulunmasını mümkün olduğunca kolaylaştırır.
2. Boşluk Kullanacaksınız
Elemanlar etrafındaki ek alan, ayırma oluşturmaya ve bunların okunmasını kolaylaştırabilir. Her bir elemanı kaydırma üstündeki boşluğa sıkıştırmaya gerek yoktur. Ritim ve akış oluşturmak, görsel hiyerarşi oluşturmak ve kullanıcıların tasarımda ilerlemelerine yardımcı olmak için boşluk kullanın.
İçerik iyi ise, kayarlar.
Ve beyazlık aslında gözü ekrandan aşağı çekerek bu kullanıcı eylemini teşvik etmeye yardımcı olabilir.
Beyaz boyutlar, ekran boyutları küçüldükçe daha da önemlidir. Elemanlar etrafındaki ek alan, ayırma oluşturmaya ve bunların okunmasını kolaylaştırabilir. (Düğmelere kolaylıkla dokunulduğunda biraz ekstra alanın ne kadar yararlı olabileceğini düşünün.)
Tasarımda boşluk nereye ekleneceğinden emin değil misiniz? Buradan başlayın:
- Düğmelerin veya diğer etkileşimli öğelerin etrafında
- Okumayı kolaylaştırmak için yazı satırları arasında satır aralığı olarak
- Öğeler arasında, metin bloklarına gömülü fotoğrafların sarılması gibi, farklılıklar söylenecek doğu
- Form alanlarında, mobil ekranlara kolayca dokunabilmeleri için
- Kullanıcıların odaklanmasını istediğiniz herhangi bir öğenin etrafında
3. Bir Izgara Kullanacaksınız
Bir ızgara, kullanıcı deneyiminin temelidir. Bir ızgara ile tasarladığınızda, son web sitesi daha hassas, tutarlı ve görsel açıdan anlamlı bir sıraya yerleştirilir.
Izgaralar hem yatay hem de dikey olmakla birlikte, en iyi bilinen web tasarım ızgarası, öğelerin hizalanması için sütunların 12 sütun dikey ızgarası olabilir.
Izgara, yalnızca tasarım sürecinde gördüğünüz bir şeydir ve öğeler için yerleşimleri bulma veya organize bir anahat oluşturmada sorun yaşıyorsanız, ızgara toplam bir cankurtaran olabilir.
4. Kullanıcı Kalıplarını Unutmayacaksınız
Kullanıcılar işleri belirli bir şekilde yapar ve tasarımınızdan belirli şeyler bekler. Mümkün olduğu kadar çok başarı elde etmek için tasarım, genel olarak kabul edilen kullanıcı kalıplarını (tasarım sorunlarına tekrar eden çözümler) kullanmalıdır, böylece insanlar tasarımın tam olarak nasıl çalıştığını bilirler.
Yaygın kullanıcı kalıpları şunları içerir:
- Bir ad veya e-posta ile başlayan ve “gönder” ile biten formlardaki bilgi sırası
- Gezinme menülerinin yerleştirilmesi
- E-ticaret için alışveriş sepeti simgesinin konumu ve tıklanabilir yapısı
- Bildirimler nasıl çalışır?
- Diğer şeylerin yanı sıra arama ve sohbet için simgeler
UI Tasarım Desenleri, tüm tasarım durumları için uzun bir kullanıcı desenleri listesine sahiptir.
5. Kullanıcı Arayüzü Eylemlerinde Benzerlik Kullanacaksınız
Bir web sitesi tasarımındaki her öğe, aynı türdeki diğer tüm öğeler gibi çalışmalıdır. Bu öğelerin aynı zamanda görsel bir kimliğe sahip olması gerekir, böylece kullanıcılar ne olduklarını ve bir bakışta ne yaptıklarını bilirler.
Gestalt benzerlik ilkesine uymak için bir tasarıma yerleştirilebilecek çok sayıda kullanıcı arayüzü eylemi vardır. Görsel öğelerin ve eylemlerin görsel olarak tanımlanabilmeleri için gruplandırılması, kullanıcılar için daha iyi bir genel deneyim oluşturulmasına yardımcı olacaktır.
6. Tipografiyi İyi Kullanacaksınız
Tasarımdan geri adım atın ve yazıların uzaktan okunmasının kolay olup olmadığını görün. Usta bir tipograf olmak zorunda değilsiniz, ama kesinlikle yardımcı oluyor.
İyi tasarımı oluşturan şeylerin çoğu, okunabilirlik ve okunabilirliğe dayanır. Ve bu kavramlar yazı biçimlerini nasıl seçtiğinize ve kullandığınıza bağlıdır.
Şüphe duyduğunuzda, serif ve sans serif gibi basit yazı tipi çiftlerini seçin. Tasarımdan geri adım atın ve yazıların uzaktan okunmasının kolay olup olmadığını görün. Daha sonra, oraya bir bakışta kolayca okunmasını sağlamak için telefon ekranı gibi küçük bir tuval üzerindeki harflere bakın.
Yazıyı, koyu renkli bir arka plan üzerinde açık renkli veya açık bir arka plan üzerinde koyu renkli gibi yüksek kontrastlı bir ortamda kullanmaya çalışın, böylece her kelimenin okunması kolay olur.
7. Retina Ekranlarını Unutmayacaksınız
En küçük ekranlar bile piksel yakınlığına sahip öğeler ve görüntüler oluşturabilir.
Ekran boyutundan bağımsız olarak her şeyin güzel bir şekilde görüntülenmesi için görüntüleri, simgeleri ve diğer öğeleri nasıl ele alacağınızı düşünmeniz gerekir. Mümkün olduğunda, bir vektör formatı kullanmak ideal bir çözüm olabilir, bu da SVG'nin her zaman popülerlik kazanmasının bir nedenidir.
Yaygın ekran boyutlarına uyacak çözünürlüğe sahip bir görüntünüz yoksa, kullanmayın. Hiçbir resim kötü veya pikselli bir görüntüden daha iyi değildir.
8. Dürüst Olacaksınız
Tasarımınız küçük işletmenize, bilgilerinize veya markanıza sadık olmalı ve yaptığınız işte şeffaf olmalıdır. Bir tasarım veya resim çalmayın, trafiği artırmak ve içeriğinizin kim ve ne hakkında olduğunu doğrulamak için yanlış anahtar kelimeler kullanmayın.
Çok fazla web karmaşası ile, kullanıcılar özgün tasarımlarla etkileşim kurmak istiyor. Kullanıcıları bir şey yapmak için kandırmak veya bir ürün veya hizmete kaydolmak veya sadece bir konu veya bilgi hakkında yanıltmak kişisel etik kurallarınıza aykırı olmalıdır. Bunu tasarımdan bekleyecek projeleri üstlenmeyin.
9. Erişilebilirliği Gözardı Etmeyeceksiniz
Web mümkün olduğunca çok kişi tarafından kullanılabilir olmalıdır. Ve tasarımın erişilebilir olmasını sağlamak zor gibi görünse de, düşündüğünüz kadar karmaşık değil.
Google'ın web sitesi erişilebilirliği konusunda aşağıdaki gibi tanımladığı harika bir kılavuzu vardır:
Genel olarak, bir sitenin erişilebilir olduğunu söylediğimizde, sitenin içeriğinin kullanılabilir olduğunu ve işlevselliğinin kelimenin tam anlamıyla herkes tarafından çalıştırılabileceğini kastediyoruz. Geliştiriciler olarak, tüm kullanıcıların bir klavye, fare veya dokunmatik ekranı görebildiğini ve kullanabildiğini ve sayfa içeriğinizle aynı şekilde etkileşime girebileceğini varsaymak kolaydır. Bu, bazı insanlar için iyi çalışan bir deneyime yol açabilir, ancak basit sıkıntılardan diğerleri için gösteri durduruculara kadar çeşitli sorunlar yaratır.
Bu durumda erişilebilirlik, 'tipik' kullanıcının dar aralığının dışında olabilecek ve beklediğinizden farklı şeylere erişebilecek veya bunlarla etkileşime girebilecek kullanıcıların deneyimini ifade eder. Özellikle, bir tür bozulma veya sakatlık yaşayan ve bu deneyimin fiziksel olmayan veya geçici olabileceğini akılda tutan kullanıcılarla ilgilidir.
Boyut, kontrast ve alan gibi iyi tasarım ilkelerinin çoğu genel erişilebilirliğe katkıda bulunur.
WebAIM, tasarımınızın erişilebilir olup olmadığını belirlemenize yardımcı olacak bir kontrol listesi ve diğer araçlara sahiptir. Kontrol listesi erişilebilirlikle ilgili olarak dört alanı kapsamaktadır: Tasarım algılanabilir, çalıştırılabilir, anlaşılabilir ve sağlam mı?
10. Duyarlı Olacaksınız
2018'de söylemeden hemen hemen gitmeli, ancak web siteniz duyarlı olmalı. Bu, metinden görüntülere ve düğmelere, genel çerçeveye kadar her öğeyi içerir.
Her tasarım her cihazda çalışmalıdır. Dönemi.
Sonuç
Sağlam bir kurallar dizisi, bir tasarım projesine daha hızlı girmenize ve daha tutarlı çalışmanıza yardımcı olabilir. Bu komutların hiçbirinin size bir projenin nasıl görünmesi gerektiğini söylemediğini unutmayın; her web sitesini nasıl çizdiğinizi ve oluşturduğunuz teorisine dayanırlar.
Bu komutlara eklemek için ek web tasarım kurallarınız var mı? Sosyal medyada ne olduklarını bize bildirin. Sadece Tasarım Shack'i etiketlediğinizden emin olun!
