Buton Tasarım İpuçları : Basit, Küçük ve Hayati Öneme Sahip | Grafik Tasarım Notları | Tasarım Yarışmaları | Freebies
close
Buton-Tasarim-ipuclari

Merhaba arkadaşlar bu yazımızda web sitenizde kullanacağınız butonların hayati öneme sahip olduğunu Buton Tasarım İpuçları başlıklı yazıda anlatmaya çalışacağım. Anlatılan yöntemler ile kendi sitenizde tıklanabilir butonlar oluşturarak ziyaretçilerinizi memnun edebilirsiniz.

Tasarımda detaylar hakkında çok fazla konuşuyoruz. Tabiki iyi sebeplerden dolayı. En ufak ayrıntı bile bir tasarımı iyi yapabilir ya da bozabiliriz buna dikkatinizi çekmek istedim.

Bugün, bu ayrıntılardan birine daha da derinlemesine dalacağız ve kullanıcıların tıklamak (veya hafifçe vurmak) istediği düğmeleri tasarlama yollarına bakacağız. Butonlar tasarımınızdaki en küçük unsurlardan biri olabilir, ancak en önemlilerinden biridir de. Başka nasıl olur da bir etkileşimi kullanıcıya iletebilirsiniz? Geribildirim döngüsünde başka nasıl bilgi sağlayabilirsiniz?

Flat tasarımların ilk zamanları hakkında yapılan büyük şikayetlerden biri: Kullanıcılar, tasarımda interaktif olanın ne olduğunu ve neyin etkisiz olduğunu bilemiyorlar. Bu nedenle, mükemmel buton tasarımının önemini kavramalıyız.

Aşağıdaki bilgiler ışığında sitenizdeki butonları mükemmelleştirebilir ve kullanıcıya hitap eden butonlar tasarlayabilirsiniz.

Butonunuz Dokunulabilir Görünmeli

Kullanıcılar tasarımın içindeki butonu görebilmeli, ona ulaşma ve dokunma ihtiyacı hissetmeli. Herhangi bir büyüklüğe sahip neredeyse bütün butonlar ekran üzerinde tıklanabilir. Büyüklük ve buton etrafındaki boşluk dokunmatik ekranlarda ayrıca hayati bir öneme sahip.

Ortalama bir kullanıcının parmak ucu dokunma alanı 8 ile 10 milimetre arasındadır. Dokunmatik ekranlar için buton boyutunuzun en az 10 milimetre olması oldukça ideal.

Dokunmatik ekranlar için aklınızda bulundurmanız gereken birkaç nokta daha var.

  • Arkaplana konulacak ufak bir gölge kullanıcıya daha yakın hissettirebilir.
  • Butonların etrafındaki boşluk artışı tıklama kolaylığı sağlar ve kullanıcıyı öğeye yönlendirmeye yardımcı olur.
  • Hower efekti ile kullanıcılara gercek zamanlı olarak neler yaptıklarını gösterebilir ve eylem belirtir.

Renk Olayları

Web tasarımı içerisinde buton tasarımları özel olma ihtiyacı hisseder. Belirli bir rengi buton eylemlerini vurgulamak için kullanmalısınız.

Buton renkleri canlı, goz alıcı ve çekici olmalı. Bu yüzden birçok tasarımcı sarı, mavi ve yeşil renkleri kullanmakta. Bu renkler kolayca algilanabilmekte ve tasarımın geri kalanından sıyrılabilmekte. Butonlarınız için genel tasarımda kullandığınız rengin zıttı bir renk seçmelisiniz.

Diğer renk kaygısı ise markadır. Renk paletinizle ve marka kimliğinizle çalışan bir buton rengi seçmek istiyorsunuz. Tasarımda öne çıkması gereken bir buton rengi sizin çok istemenize bağlı değil, ana renk düzeninizle ve marka renginiz ile birlikte çalışmalı.

Boyut Çok Önemli

Büyük yap!

Butonların, kullanıcıları ekranda kendilerine çekebilmesi için biraz ağırlığa sahip olması gerektirir. Hayalet buton eğilimi, piksel sayısı bakımından büyük butonlara yoğunlaştı ancak görsel ağırlıktan yoksundu. Ölçü bakımından, her iki durumda da bir düğmenin büyük olması gerekir. (Buda, trendin düşmesinin bir nedeni.)

Yerleşimin Önemi

Tasarım içerisinde buton nereye konulmalıdır? Tıklamalara diğerlerinden daha fazla yardımcı olabilecek bir yerde mi?

Çoğu durumda butonlar, tamamlayacakları içeriği takip etmelidir.

  • Bir formun sonunda
  • Eyleme geçirecek bir mesajın sağında
  • Sayfanın veya ekranın alt kısmında
  • Bir mesajın altında ortalanmış bir şekilde

Kontrasta Odaklanmak

Tüm tasarım öğeleri ile kontrast önemli bir konudur. Bu, öğenin kendisinde kullanılan teknikler için de geçerlidir; aynı zamanda, öğe ile tasarımdaki yerleşimi ve çevresi arasındaki ilişki için de geçerlidir.

Bu ikili ortamda aşağıdaki teknikleri düşünmeyi unutmayın:

  • Renk
  • Ağırlık ve boyut yazın
  • Elemanların büyüklüğü
  • Arka planla ilgili olarak şekli
  • Şeffaflık veya animasyon
  • Gölgeler veya gradyanlar
  • Boşluk ve dolgu

Standart Şekilleri Kullanmak

Butonlar söz konusu olduğunda, dikkate almanız gereken sadece iki şekil vardır:

  1.  Daireler. Material Tasarımı ve Material Lite konseptleri sayesinde dairesel butonlar popüler hale geldi. Benzer bir estetik ile, yuvarlak bir düğme tasarım ile çalışır ve kullanıcının kullanımına uygundur.
  2.  Dikdörtgenler. Yukarıdaki örnekte bir daire kullanmadığınız sürece, varsayılan şekil olarak dikdörtgen tüm butonları temsil eder. Kullanıcıların bildiği ve kullandığı şey budur. Çoğu buton dikdörtgendir, uzunluğunun en az iki katı genişliktedir. Kullanıcılar bu şekli görünce hemen ne yapacaklarını bilirler.

Kullanıcılara Ne Yapması Gerektiğini Söylemeli

Her buton, kullanıcılara butonun ne yapacağını tam olarak bildiren bir metin talimatı içermelidir. Dili kısa ve basit tutmak ve web sitesi tasarımının geri kalanının tonuyla eşleşmesi gerek. Daha sonra, sözünü verdiği şeyi yapsın. İster bir form gönderiyor olsun,  yada bir satın alma işlemi yapıyor veya sadece başka bir bağlantıya geçiyorsa, kullanıcı buton ile etkileşime geçtiğinde istenilen sonuca ulaştırmalı.

Buton mesaj örnekleri şunları içerir:

  • Buraya Tıkla
  • Şimdi bir hesap oluştur
  • Ücretsiz deneyin
  • Sepete ekle
  • Daha fazla oku

Butonlara Yüksek Görsellik Ver

Çoğu tasarım küçük UI öğeleri ile doldurulur. Olması gereken bir durum, proje tamamlanıncaya kadar bu unsurları tasarımı desteklemelidir. Ve sonra tüm UI öğeleri için birkaç küçük farklara sahip bir tasarım seçersiniz.

Bu tehlikeli durumda sıkışmayın.

Tasarımda butonlar sadece buton gibi görünmelidir! Tasarımda başka hiçbir öğe butonlar ile aynı şekle ve renge sahip olmamalıdır. Farklı olması gerekir. Tasarımdaki herhangi bir öğeden daha büyük butonlar için farklı bir stil oluşturun veya sadece butonlar için ayrı bir renk değeri belirleyin. Bu teknikler, bir butonun özel görünmesine ve kullanımını vurgulamasına yardımcı olabilir.

Web sitenizin analizine göz atarken kullanıcının hangi değişikliğe nasıl tepki verdiğini analiz edin ve bu analize göre butonların şeklini rengini veya boyutunu belirleyin. Gelecekteki projeler için daha fazla tıklanabilir buton oluşturmanıza yardımcı olmak için bu bilgileri kullanın.

Buton Tasarım İpuçları başlıklı yazımızı beğendi iseniz aşağıdaki paylaşım butonlarını kullanarak daha fazla kişiye ulaşmamıza yardımcı olunuz lütfen. Bilgi çoğaldıkça değer kazanır.

Tags : buton tasarım ipuçlarıbuton tasarımıbuton yerleşimidokunulabilir butonweb buton

Leave a Response