Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Başarılı Buton Tasarımı İçin Esaslar

by
Length:MediumLanguages:

Turkish (Türkçe) translation by Said Özcan (you can also view the original English article)

Buton üretmenin binlerce farklı yolu var ve yapmanız gereken tek şey az bir zaman ayırıp tasarımlardan ilham almak için Dribbble'a göz atmak. Dribbble'daki bu örneklerin büyük bir kısmı tam olarak aynı fakat bazılarının yapımında daha fazla özen ve dikkat olduğunu görebilirsiniz.

Harika yeni CSS3 özelliklerinden yararlanarak eski tarayıcılar için satırlarca kod yazmadan, bazı inanılmaz zarif ve şık düğme stilleri oluşturabiliriz. Butonlarınızı doğrduan CSS içinde üretmeyi seviyor olabilirsiniz. Ya da tasarımınızın sağladığı araçları direk olarak kullanabilirsiniz fakat öneml olan butonlarınızın tasarımlarının içerikte nasıl yaşayacağını dikkatlice düşünmektir.

Cömert birinin ücretsiz olarak paylaştığı, önceden tasarlanmış 'UI Elements PSD' (ve şüphesiz Apple'dan ilham alan butonları içeren set) gibi bir kaynağa ulaşmak artık çok kolay. Fakat neden bir dakika durup bu buton tasarımının içeriğiniz için en uygun tasarım olup olmadığını veya daha orjinal bir tasarım yapmak isteyip istemediğinizi düşünmüyorsunuz?

Başka birinin butonlarını yeniden kullanmak güzel, vakit kazandırıyor fakat kendi butonlarınızı biraz daha detaylı olarak düşünmenizin size hiçbir zararı olmaz. Nasıl tasarlandılar? Arayüze/içeriğe/markaya uyuyuorlar mı? Benzersiz bir şey üretme şansı var mı? Benim butonlarım yeterince önemli mi? Birincil, ikinicil ve hatta üçüncül butonlara ihtiyacım var mı? Bu butonlar gerçekten birbirinden farklı mı? Ustaca tasarlanmış görünüyorlar mı? (Neden olmasın, hepimiz güzel tasarlanmış şeyler üretmeye çalışıyoruz değil mi?!).

Burada buton tasarlarken düşündüğüm on basit ve hızlı yönetm var. Photoshop'ta katman efektlerini anlatmayacağım, aksine butonlarınızın tasarımını optimize etmenin ve genel kullanıcı arayüzü tasarlamanın esaslarından bahsedeceğim.

1. Markayla Bütünleşme

Butonlarınızın içerik ile uyuşması çok önemlidir. Bu bir renk paleti ile uyumlu olması olabilir, grafik stili olabilir, marka ilkelerinin veya logonun doğrultusunda bir tasarım olabilir. Muhtemelen burada benimseyebileceğiniz önemli şekiller, dokular veya tasarım stilleri vardır. Belki de dairesel yönü olan bir logo vardır ve bunu butonlarınıza uygulayabilir ya da potensiyel kullanıcı eylemlerinde kullanabilirsiniz.

Eğer bir arayüz büyük ölçüde flat renkler kullanıyorsa büyük, parlak Apple tarzındaki butonlar uymayabilir. Eğer yapabiliyorsanız uygun şekiller, efektler, renklendirmeler ve diğer formları kullanarak markanın tasarımlarını iyileştirme şansını yakalayabilirsiniz.

2. İçeriğin stilini yakalama

Yukarıdan devam etmek gerekirse, 'UI Elements PSD' kaynağını açmadan önce bir dakika durun. Efektleri bulmak kolay ancak bunların yalnızca marka için doğru seçim olup olmadığını değil aynı zamanda butonların bulunduğu arayüze de uyan doğru efekt olup olmadığını bir an düşünün.

Mesela bir uygulama ve mobil görünümünde butonlar, 'butonumsu'dan öteye bir his vermiyor olabilir ama web sitesinde butonlarınıza veya kullanıcı eylemlerini tetiklediğiniz yerlerde işler farklı yürüyebilir.

3. Butonlarınızın yeterli zıtlıkta olduğundan emin olun

Apple OS stilinden esinlenen birçok arayüz tasarımı ile birlikte, özellikle hazır UI Element PSD'lerinde olduğu gibi, butonlar arayüzdeki diğer elementlerin arasında kaybolabilir, sayfadaki önemlerini yitirebilirler. Butonlarınızın geri kalan arayüzde sahip olması gereken görsel ağırlığından emin olmak için renk, boyut, boşluk veya tipografiyi değiştirmeyi deneyin.

4. Yuvarlak veya biçimlendirilmiş butonlar düşünün

Yukarıdan devam etmek gerekirse, eğer tasarımınızda çok fazla yuvarlak köşeli arayüz elemanları varsa yuvarlak kıvrımlı veya daha farklı biçimde butonlar deneyin. Bu şekilde gerekli olan eylemin önemini belirten ekstra bir zıtlık sağlayabilirsiniz.

5. İkincil arayüz elemanlarını arka planda bırakın

Bir işletim sisteminden esinlenerek stil ortaya çıkarmak için uğraşıyorsanız ya da hazır PSD elemanları kullanıyorsanız, muhtemelen kullanmış olduğunuz elemanlar ağırlıklı olarak yuvarlak köşeli dörtgenler olacaktır. Daha az 'butonumsu' görünmeleri için, elemanlardaki abartılı süs oranını azaltmayı düşünebilirsiniz.

Örneğin, ısmarlama menüler, bölünmüş kontroller, özelleştirilmiş menü başlatıcılarının hepsi yuvarlak köşeli şekillerde olabilir. Ama farklı gölgeler, kenarlar, dolgu, gradyen veya diğer efektleri kullanarak elemanların zenginliklerini azaltabilir ve bu sayede buton stillerini geliştirebilirsiniz.

6. Kenarlardaki renk uyumu

Karşılaştığımız birçok butonda, bir takım kenarlıklar bulunmakta. Detaya girmeden bahsedecek olursak, butonunuzun rengi bulunduğu arkaplandan daha koyuysa, genel buton renginden daha koyu bir kenarlık rengi kullanın. Durum tam tersiyse de, kenarlık için arkaplandan daha koyu bir renk tercih edin. Önceki halinden vazgeçemiyorsanız ve daha koyu arkaplanda kullanıyorsanız, bu görüntü buton köşelerinin kirli bir görünmesine sebep olabilir. İkinci yöntemi kullanmak butonunuzun ortaya çıkmasını sağlayacaktır. Bu yöntemi web tasarımında kenarlıklarla uğraşmam gerektiğinde genel bir tasarım prensibi olarak benimsiyorum.

7. Bulanık gölgelere dikkat edin

Yıllarca 'Gölge Kuralı'na bağlılığımı sürdürdüm. 'Gölge Kuralı' ne diye soracak olursanız, bir eleman arkaplanından daha açık bir tonda ise aradaki katmana gölge düşürmek olarak tanımlayabilirim. Eğer bir element arkaplanından daha koyu tonlarda ise bu durumda gölgeleme oldukça kurnazca kullanılmalıdır. Kenarlıklardaki renk uyumunda da olduğu gibi, bunu tüm arayüz elemanlarına uygulayabilecek bir genel tasarım prensibi olarak benimsiyorum.

8. Ustaca tasarlanmış ikonlar işinize yarayabilir

Butonlarınızı benzer arayüz elemanlarından ayırabilecek başka küçük bir detay olmakla birlikte, ok gibi basit görüntüsel elemanları kullanmak yapılması beklenen eylem konusunda fikir ve tıklandığına ne olacağına dair bir sezi oluşturabilir.

Örneğin, yazının ardından gelen bir ok, kullanıcıya yazının bittiğini veya sayfayı değiştireceğini sezdirebilir. Aşağı doğru işaret eden bir ok, içeriğin aşağıda açıklanacağına dair veya bir menünün açılacağına dair ipucu olabilir.

9. Birincil, ikincil hatta üçüncül stiller düşünün

Eylemin ve fonksiyonalitenin çok fazla olduğu bir ekran tasarlıyorsanız, kullanıcı ile butonlarınız arasında görsel bir iletişim sağlamanız adına birincil, ikincil, üçüncül ve mümkün olduğu kadar çok sayıda stil kullanmanız sizin yararınıza olacaktır.

Öncelikli olan butonlarınız için en koyu ve güçlü rengi kullanın ve önemi azalan butonlarda daha az güçlü ve doygun renkleri tercih edin. Renk ve gölgede olduğu gibi ön planda olmayan butonların görsel ağırlığını azaltmak adına boyutu, beyaz alanı, metin boyutunu ve abartılı süs oranını da azaltmayı düşünebilirsiniz.

10. Her zaman geri bildirim senaryoları belirleyin

Üzerinde fazla düşünülecek bir nokta olmasa da tasarım sürecinin sonuna kadar göz önünde bulundurulması gereken bir maddedir. Kullanıcıya yeterli geri bildirimi sağlamak amacıyla butonlarınız için gerekli temel durumları her zaman düşünün. Kullanıcılar muhtemelen farklı durumlarda kullanılan butonların gerçek hayatta nasıl çalıştığının altında yatan sebebi biliyorlardır. Gölgeler, kenarlık, gradyen ve benzerleri ile kullandığınız CSS hoş bir görünüm elde etmenizi sağlayacak ve kullanıcıya güzel bir geri bildirim sunacaktır.

Sonuç

Tasarımcılar olarak hepinizin kendine has bir tasarım süreci var. Eminim ki, kafanızı ekrandan ayırıp yavaşça eğdiğinizde gözlerinizi kısıp 'Tam istediğim gibi!' dediğiniz çok zaman oldu. Bu da, tasarım yapmanın eğlenceli yanı ve yetenekli tasarımcıların sadece bunu yaparak istenilen şekilde işi tamamlaya eğilimi var. Ama biraz öz eleştri yapıp tasarım üzerine vermiş olduğunuz kararları sorgulamak her zaman iyidir.

Hazır tasarımları ve arayüz elemanlarını tekrar kullanmanın bir zararı olmaz, onlar açıkça çok ciddi bir zaman kazanmanızı sağlar. Hatta bazen tam aradığınız şeyi biri tarafından piksel piksel dokunmuş olarak ve üstüne üstlük ücretsiz olarak bulursunuz. Ancak, tasarım sürecini ve ürettiğiniz şeyi derinlemesine anlamak ve bunun hakkında bilgi sahibi olmanın da sizden götüreceği bir şey yoktur.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.