İmlecinizi Şekilden Şekle Sokacak 20 Yaratıcı Site

12
5
4
2
1
Bazı tasarım fikirleri, internet sitelerinin diğer örneklerinden daha öne çıkmasına neden olabiliyor. Ufak detaylar sitelerden bilgi alışverişi sağlarken en göz zevkini beslemeyi, hem de kullanım kolaylığı elde etmeyi sağlayabiliyor. Biz de bu detaylardan birine sahip bazı siteleri sizler için derledik.

İnternet sitesi tasarımında en küçük detay bile ziyaretçinin site üzerindeki tecrübesini derinden etkileyebiliyor. Bu detay bir hata efekti, bir sıçrama efekti ya da basit bir ses efekti bile olabilir. Son zamanlarda bu gibi detaylardan en çok kullanılanı MouseOver efekti olarak kabul ediliyor. Hover adı da verilen bu özelliğin kullanımında sitenin kullanımını kolaylaştırmak amaçlanıyor.

Sitede bulunan belli elementlerin üzerine gelindiğinde çeşitli hareketlenmesini, renk değiştirmesini, öne çıkmasını sağlayan bu özellik; bilgilere ulaşmada kolaylık sağlamanın yanında sitelere şık bir görünüm sunuyor. Bu yaratıcı özelliğin kullanıldığı siteler gün geçtikçe artıyor. Biz de size bu özelliğin kullanıldığı en iyi 20 siteyi derledik. Alt başlıklara tıklayarak bahsi geçen sitelere ulaşabilirsiniz. İşte MouseOver efektini kullanan birbirinden yaratıcı 20 site:

Pixels by Tomer Lerner

mouseover efekti site tasarım imleç

Siyah beyaz arka plana sahip bu site, imleci hareket ettirdiğinizde farklı geometrik şekillerin hareket etmesini ve dönüşmesini sağlıyor.

Haus

mouseover efekti site tasarım imleç

Teknoloji ve mizahı seven interaktif bir ajansın sitesi olan Haus, imleci üzerlerinde kullandığınızda hareket eden çizgi film karakterlerini dahilinde barındırıyor.

Canva

mouseover efekti site tasarım imleç

Metin odaklı resimler oluşturmayı sağlayan sitenin ana sayfasında buğulu bir filtre kullanılıyor. İmlecin ilerlediği bölgeler ise berraklaşarak buğudan kurtuluyor.

Mainworks

mouseover efekti site tasarım imleç

Yaratıcı medya prodüksiyon stüdyosu Mainworks’ün portföy sitesi, üzerine tıkladığınızda projeler gösteren noktalar barındırıyor.

Cedric Pereira

mouseover efekti site tasarım imleç

Yine bir portföy sitesi olan Cedric Pereira, ekranı aşağı kaydırdığınızda renk değiştiren kategoriler içeriyor.

Bullmonk

mouseover efekti site tasarım imleç

Bullmonk adlı işletmecilik sitesi, ana sayfasında basit bir SVG animasyonu bulunduruyor. İmleci hareket ettirdiğinizde ekranda yeni delikler oluşuyor.

InSymbiosis

mouseover efekti site tasarım imleç

Biyoeczacılık şirketi InSymbiosis'in sitesinde bulunan buton ve yazılar, fare imleciyle etkileşime geçebiliyor.

OUI R Creative Studio

mouseover efekti site tasarım imleç

OUI R adlı tasarım şirketinin sitesi, imleci üzerine getirdiğinizde bilgi veren fotoğraflar içeren bir tasarıma sahip.

Minnim

mouseover efekti site tasarım imleç

Minnim'in sitesine girince sizi ilk olarak renkli çizgilerden oluşmuş daireler karşılıyor. Sayfada imleç kullanılarak yeni logolu daireler yaratılabiliyor.

Full Bundle

mouseover efekti site tasarım imleç

Yaratıcı bir dijital ajans olan Full Bundle’ın sitesi, mavi ve kırmızı nesneler içeren iki bölmeden oluşuyor. Mavi mantığı, kırmızı ise yaratıcılığı temsil ediyor. Bu renkli nesneler fare imleciyle kontrol edilebiliyor.

FS Untitled

mouseover efekti site tasarım imleç

Bu site, ziyaretçilere yazı tipi seçimi için bir sürü seçenek sunuyor. Elementler tablosu gibi dizilmiş yazı tiplerinden birini seçtiğinizde o yazı tipini tanıtan bir animasyon ortaya çıkıyor.

Trainrobber

mouseover efekti site tasarım imleç

Bir AR ve VR ajansı olan Trainrobber’ın sitesinde imleci hareket ettirdiğinizde nesneler, bir Western filmini andıran bir şekilde hareket ediyor.

Sakura International Inc.

mouseover efekti site tasarım imleç

İnsan ağ iletişimi üzerine çalışan bu şirketin sitesindeki noktalar, imleç yardımıyla kolayca birleştirilebiliyor.

Fan Studio

mouseover efekti site tasarım imleç

Bu mobil oyun ve uygulama üreten şirketin sitesinde imleci hareket ettirdiğinizde, sitenin arka planı bu hareketlere göre değişiyor.

Studio Rotate

mouseover efekti site tasarım imleç

Bu şirket, marka ve tasarım üzerine çalışıyor ve müşterilerinin sanal ortamda yer almasına yardımcı oluyor. Şirketin sitesi imlecinize göre hareket eden bir daire bulunduruyor ve menü seçeneğine tıklandığında gösterilecekler bu dairenin içinde gösteriliyor.

TheMcBrideCompany

mouseover efekti site tasarım imleç

Bu site de aynı Canva sitesi gibi buğulu bir filtre içeriyor ve fare imleci bu buğulu bölgelerin berraklaşmasını sağlıyor.

Clever Franke

mouseover efekti site tasarım imleç

Bu tasarım şirketinin sitesinin ana sayfasında bulunan yazılar, fare imleciyle birlikte hareket ediyor ve tekrar yerine yerleşiyor.

Message Design Center

mouseover efekti site tasarım imleç

Message Design Center adlı tasarım şirketinin sitesinde bulunan yazılar, imleç yardımıyla büyüyor ve bozuluyor.

Just Coded

mouseover efekti site tasarım imleç

Bu sitenin karanlık tonlardaki tasarımı, fare imleciyle birlikte perspektifi değişen nesneler içeriyor.

Kinetic Apps

mouseover efekti site tasarım imleç

Android ve iOS cihazlar için uygulamalar geliştiren şirketin internet sitesi gökyüzü temalı bir arka plan içeriyor. Fare imleci kullanıldığında bu gökyüzünde uçulacak yön seçilebiliyor.

Kaynak : https://www.hongkiat.com/blog/websites-creative-mouse-over-effects/
12
5
4
2
1
Emoji İle Tepki Ver
12
5
4
2
1