Basit Bir Tasarım Oluşturmak için 7 Kural
Basit, aptalca tut. Bu kavram, ABD Deniz Kuvvetleri KISS prensibini uyguladığı 1960'lı yıllara dayanıyor ve bu da çoğu sistemin karmaşık olmak yerine basitse en iyi şekilde çalışmasını sağlıyor. Aynı şey hemen hemen her tasarım projesi için de geçerlidir.
Çoğu grafik tasarımcı KISS hakkında kariyerinin başlarında öğrenir. Peki bunu nasıl yapabilirsin? Basit bir tasarım oluşturmak düşündüğünüzden biraz daha karmaşıktır. İşte tüm dağınıklığı ortadan kaldırmanıza ve güzel ve basit bir hesap oluşturmanıza yardımcı olacak yedi tasarım kuralı.
Tasarım Kaynaklarını Keşfedin
1. Sayfa Başına Bir Hedef Belirleyin
Basit bir tasarımın başlangıcı, proje için bir hedef ve web sitesinin her sayfası için özel hedeflerle başlar. Her sayfa kullanıcıları gezinme ve altbilgi hariç bir eyleme yönlendirmelidir.
Bu, bir bağlantıyı tıklamak, bir forma bilgi girmek, video izlemek veya oyun oynamaktan herhangi bir şey olabilir. Ancak her sayfa tek bir kullanıcı işlemine veya dönüşümüne odaklanmalıdır.
Yapılacak çok fazla şey kullanıcıları bunaltabilir. Hangi eylemlerin tamamlanması gerektiğini gözden kaybedebilir ve daha az arzu edilen seçimi yapabilirler. Tasarımı, her sayfa kullanıcıları tek bir hedefe yönlendirecek şekilde planlayın. Kaydırma üzerindeki ve aynı sayfadaki kaydırma altındaki her işlem yapılabilir düğme aynı şeyi yapmalıdır. Bu tutarlılık, kullanıcıların sitenizde neden olduklarını ve ne yapmaları gerektiğini anlamalarına yardımcı olur; bu seçimlerin sadeliği tasarımı kolay ve ilgi çekici hale getirir.
2. İki Tip Aileye Yapışmak
Bir proje için üç yazı tipi öneren pek çok tasarım kılavuzu vardır. Bunu iki sağlam tip aile ile daha da kolaylaştırabilirsiniz.
Normal ve kalın veya siyah seçenekleri arasında çok fazla kontrast içeren birden fazla ağırlık içeren bir tip aile arayın. Daha da fazla yetenek için, büyük boyutlu başlıklarda kullanabileceğiniz birkaç alternatif karakter içeren bir ekran seçimini tercih edin.
Daha sonra tek yapmanız gereken, tüm tasarım için mükemmel yazı kombinasyonları elde etmek için bir gövde yazı tipi ve ekran yazı tipinden karıştırmak ve eşleştirmek. Belirli ağırlık veya stiller için belirli kullanımlarla daha fazla seçenek belirlediyseniz, iki tür aile kullanın.
Bunun, yönetilmesi kolay ve görsel tutarlılığa sahip son derece okunabilir ve kullanımı kolay bir tipografi paleti oluşturmanıza yardımcı olabileceğini göreceksiniz.
3. Tutarlı Hizalama kullanın
Sol, orta veya hatta sağa - istediğiniz hizalama ne olursa olsun, tasarım boyunca buna uyun. Bu, metin kutuları ve benzer olmayan ancak gruplamalara uyan öğeler gibi öğeleri hizalamayı içerir.
Uyarlanabilir, ana sayfa kaydırıcısındaki metinle bunun iyi bir iş çıkarır. Görüntüde farklı sayıda satır bulunan metne rağmen, her başlık harekete geçirici mesaj düğmesi ile hizalanır. Elemanlar arasındaki boşluk da tutarlıdır.
Dahası, bu tutarlı hizalamanın kaydırma üzerinde diğer başlık ve CTA çiftleriyle devam etmesidir.
Hizalama, aynı zamanda tamamlayıcı bir yönde hareket eden kaydırıcının akışıyla eşleşir. Metin öğeleri söz konusu olduğunda en çok okunan seçenek olduğu için sol ve orta hizalamalar en yaygın seçeneklerdir. Daha uzun metinlerde, sola hizalama tercih edilen seçenektir.
4. Hiyerarşi Oluşturun
Kullanıcılar neye bakacaklarını veya bir tasarımda nasıl hareket edeceklerini düşünmek zorunda kalmamalıdır. En basit görsel kompozisyonlar bile ayrı bir hiyerarşiye sahip olmalıdır.
Baskın bir görselle başlar. Bir görüntü veya video veya metin ekranı veya ilk izlenimi yaratacak herhangi bir şey olabilir.
Daha sonra, kullanıcıya tasarımın ve web sitesinin ne iletişim kurmaya çalıştığını söyleyen bir tür metin olmalıdır. Bu genellikle baskın görselle çalışan basit bir başlık biçimindedir.
Üçüncüsü, kullanıcıların tamamlaması gereken ikincil bir metin veya işlem parçasıdır. Son görsel öğe bir gezinme menüsüdür. Kullanıcılar tüm bu elementleri bulmayı bekler ve göz elementler arasında temelde bu sırayla hareket etmek üzere eğitilir. Bu şekilde tasarlayarak onlar için kolaylık sağlayın.
5. Elemanlara Boş Alan Verin
Şimdiye kadar bilmiyorsanız, bunu belleğe kaydedin: Beyaz boşluk arkadaşınızdır.
Tasarımdaki her öğeye bol yer verin. Uzay, tek tek unsurlara dikkat çekmeye, “alanı” ele geçirmeye yardımcı olacak, böylece tuvali dağınık hale getirmeye ve odaklanmaya sahip genel bir tasarım yaratmaya cazip olmayacaksınız.
Alanı iyi kullanma hilesi tutarlılıktır. Tek tek öğeleri çevreleyecek veya metin satırları arasına sığacak alan miktarı için kurallar belirleyin. Tasarım çok kısır görünüyorsa, biraz boşluk bırakmanız gerekebilir. Tasarımı yeni açtığınızda ve kullanıcıların önce görmesini istediğiniz yerlere gittiğinizde aralığın doğru olduğunu bilirsiniz. (Ne olduklarından emin değil misiniz? 4 numaralı bölüme geri dönün - Hiyerarşi Oluşturun.)
6. Amp Up Kontrastı
Yüksek kontrastlı tasarım öğeleri - renk seçimlerinden öğelerin boyutuna kadar - bir projeye en az çerçevede bile ihtiyaç duyduğu doğru görsel inceliği sağlayabilir.
Modaya uygun bir seçenek için, kullanıcının dikkatini çekmek için parlak bir kontrast renk paleti deneyin. Koyu renkler, basit bir tasarımın siyah ve beyaz bir seçenek olduğundan daha karmaşık ve ilginç hissetmesini sağlayacaktır. Kontrast renkten en iyi şekilde yararlanmak için renk tekerleğinde benzer doygunluklara sahip zıt konumlardan tonlar seçin. Bu seçenek beğeninize göre çok fazlaysa, diğer renk tekerleği tabanlı çiftleri deneyin. (Yukarıdaki mor ve deniz mavisi kombinasyonu gibi beklenmedik yeni bir favori bile bulabilirsiniz.)
7. Tutarlı Simgeler ve Öğeler Kullanın
Tasarımda tutarlılık, katil tasarımının en iyi (ve en kötü) saklanan sırlarından biridir. Tasarım projeleri, web sitesinin diğer ikonografisinin geri kalanıyla eşleşmeyen çoklu düğme stilleri veya sosyal medya simgeleriyle dolu olduğu için çok sık unutulan şeylerden biri.
Kullanıcı arabirimi öğeleri sonradan düşünülmemelidir.
Bir simge ve kullanıcı arabirimi öğe kümesi ve kuralları oluşturmak ve bunları proje boyunca aynı şekilde kullanmak önemlidir. (Bunları sıfırdan oluşturmak istemiyorsanız bir simge yazı tipi veya kullanıcı arabirimi öğesi kiti satın alabilir veya indirebilirsiniz.)
Öğeler için bir renk seçin, her biri için aynı fareyle üzerine gelme eylemini veya efekti kullanın (biri tıklanabilir öğeler için diğeri olmayan öğeler için) ve kullanıma dayalı öğeleri boyutlandırın. (Biraz daha grafiksel olan öğeler için hem simge boyutuna hem de büyük boyutlu bir seçeneğe sahip olmak kabul edilebilir.)
Praticca Otomat Makineleri, kullanıcıları daha fazla bilgi olduğu konusunda yönlendirmek için büyük boyutlu simgeler kullanır. A +, renkli bir simgenin içinde bulunur. Üç simgenin tümü renk dışında aynıdır. Fareyle üzerine gelindiğinde hepsi aynı şeyi yapar ve bir kullanıcı tıkladığında hepsi aynı şekilde davranır. Aynı simge, yeni içerik bitleri başlatmak ve kullanıcıların kopyayı taramasına yardımcı olmak için site genelinde daha küçük olarak kullanılır.
Sonuç
Basit bir tasarımın tamamen minimal olması veya eğlenceli elemanlardan veya kullanıcı arayüzü güzelliklerinden yoksun olması gerekmez. Basit bir tasarım, son derece kullanışlı ve sezgisel olan, kullanıcıların soru veya karmaşık talimatlar olmadan etkileşim kurmasına izin veren tasarımdır.
Daha karmaşık web siteleri veya kullanıcı etkileşimleri için bir yer olsa da, çoğu web sitesi tasarımı KISS yaklaşımından yararlanabilir. Bunu fazla düşünmeyin ve kullanıcıların da yapması gerekmez.
