Kapatmak için Esc tuşuna basın

Hayalet Butonlar

3D, parlak, patlamalı, yansımalı, flat derken butonlar konusunda yeni bir trend aldı yürüdü. Hayalet Butonlar!

Özellikle   yeni dönem minimalist bakış açısının ürünleri olan flat ve materyal tasarımın bir unsuru olarak hayalet butonlar gözde hale geldi. Bakalım bu yeni trendde avantajlarımız, var ise dezavantajlarımız neler?

Kodlaması Kolay

Kodlama yaparken normal bir butondan daha fazla ve enerji harcamazsınız. Basit bir kod ile hayalet butonları sitelerde görüntülemek mümkün. (Konumuz ön yüz kodlama olmadığı için detaya girmiyorum.)

h2

Arkaplan Değer Kazanır

Hayalet butonlar, minimalist tasarımın parçalarından biri olan büyük resim kullanan giriş sayfalarında fark yaratır. Bir renk tonu ile alan kaplamaz aksine arka planda bulunan görseli daha çok ortaya çıkararak değerli kılar.

“Hero” alanlar olarak tanımladığımız bölgelerde daha fazla etki yaratırlar.

h3

Detaylarınızı ve İkonlarınızı Parlatır

Tasarımlarınızda sadece hayalet butonlar değil, hayalet ikonlarda oluşturabilirsiniz. Bu noktada kullanacağınız çarpıcı ikonlar kendini iyice göstererek daha etkileyici bir tasarım sunmanıza yardımcı olur.

 

h4Hayalet Butonlar Sadece Link Değildir

Biraz kıvrak bir zeka ile bu hayalet konusunda yeni ve farklı alternatifler üretmeniz mümkün olabilir. Sadece tıklayınca sizi bir yerlere yollayan bir buton değil, kullanıcının çeşitli seçenekler yapmasını sağlayacak radyo buton ve benzeri fonksiyonları da bu stile uygulamanız mümkün.

h5

Dezavantajları

Genelde çok hoş minimal ve çekici görünseler de hayalet butonların sayfa içerisinde klasik formuyla bir butonun yarattığı algıyı yaratmaları zaman zaman güç olabiliyor. Eh ne de olsa adı üzerinde: Hayalet!

Sayfa içinde kaybolmayı önlemek için ise bir arka plan üzerinde kullanılıyorsa, konumlamasını doğru yapmak gerekebilir. Özetle hayalet buton kullanacağınız zaman, en görünen ve iyi algılanabilecek bölgeye yerleştirmeniz en iyi sonucu verecektir.

Hepinize keyifli tasarımlar :)

İlham: Noupe

Yorumlar (9)

  • Umut Çağdaş Coşkundiyor ki:

    2 Mart 2015 1:04 pm

    Teşekkürler gayet açıklayıcı ve ilham verici bir yazı olmuş.

  • Ömerdiyor ki:

    3 Mart 2015 3:59 am

    Daha az kod ile oluşturuluyor fakat iyi sabitlemek gerekiyor. farklı ekran çözünürlüklerinde cover vb bir arkaplan kullanmamak klasik sabit bgackground lar kullanmak gerek ki gerçekten hayalete dönüşüp sayfada kaybolmasın. Hayalet modası derken detaylarda da boğulmamak gerek. Görsel olarak ele alırsak çok hoş.

  • Filmizlebak.orgdiyor ki:

    7 Mart 2015 10:53 am

    Dediğiniz gibi fark edilmesi biraz zor olabiliyor ama bence çok hoş duruyorlar :D

  • Sametdiyor ki:

    1 Nisan 2015 9:10 am

    Üstad güzel bir yazı olmuş. Eline sağlık. Dediğin gibi konumlandırılması önemli… Yalnız Mobil tasarımda masaüstündeki gibi lezzet bir hal almıyor.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir