Boom! Web Tasarımında Patlamaların İncelenmesi

İzleyicinin dikkatini çekmenin birçok yolu vardır. Teknolojilerin mevcut durumu hala kusurlu olsa da, seçimlerle şımartıldık. Bazı tarayıcı uyumluluğu sorunları yaşıyoruz ve her cihaz, web geliştiricilerinin bize sunduğu tüm bu büyük çözümlerle başa çıkamaz.

Bununla birlikte, görüntülerin ana itici güç olduğu ve tek baharatın süslü geçişlere sahip kaydırıcılar olduğu statik web sitelerinin günleri geride kaldı. Cesur fikirlerin ve savurganlıkların çağına tanık oluyoruz.

En büyük yönlerden biri, geliştiricilerin odaklarını büyük şeylerle sınırlamamasıdır. Evet, çok sayıda tuval animasyonu, tam ekran modu gerektiren aşırı VR ve video deneyleri vb. görebiliriz. Ancak, bugün en küçük ayrıntılar bile kendi dozunu alıyor.

Web siteleri, özellikle fare imlecini temel alan mikroskobik çözümlerle dolup taşıyor. Çok sayıda akıllı fikirle karşılaşabiliriz. Harikalar, ancak çoğu durumda (aradığım kelime nedir?), “sessiz”. Bazı fare tabanlı çözümler aslında ses çıkardığı için ses çıkarmalarından bahsetmiyorum. Davranışlarından bahsediyorum.

Davranışları yumuşak, sakin ve naziktir. Bazı durumlarda, o kadar kusursuzdur ki zorlukla algılanabilir. Ve eğer içerikle çok meşgulseniz veya başka dikkat dağıtıcı unsurlar varsa, onları gözden kaçırma ihtimaliniz bile var. Öyleyse, kullanıcıların keyfini çıkarma fırsatını kaçırmamaları için neden onları biraz daha “yüksek sesle” yapmıyorsunuz?

Bu nasıl yapılır diye sorabilirsiniz. İyi bir çözümüm var: her şeyi gerçek anlamda ve mecazi olarak patlatın.

Dean Wagman tarafından uzaydaki parçacıklar

Örneğin, Dean Wagman tarafından oluşturulan bu harika kod parçasını ele alalım. Bu, Dean'in gerçekleştirdiği ilk tuval deneyi olmasına rağmen, yine de oldukça ilham verici. Tek yapmanız gereken ekranda herhangi bir yere tıklamak ve yüzünüzde uçan yüzlerce küçük parlak parçacık patlaması göreceksiniz. Ses çıkarmasa da kesinlikle çalkantılı bir his veriyor.

Kalemi Gör
Dean Wagman (@deanwagman) tarafından uzaydaki parçacıklar.

Patlama etkileri her zaman yüksek sesli bir şey olduğu hissini uyandırır. Öyleyse neden bunu kendi avantajımıza kullanıp gerçek bir ses çıkarmadan biraz gürültü eklemeyelim? Dahası, burada bir dizi harika kod parçacığımız var. Onları birlikte keşfedelim.

Aleksei / Kaboomerz tarafından Christopher Lis tarafından parçacık patlaması

Dean Wagman'ın çözümü biraz fazla görünüyorsa, her zaman Aleksei'nin Parçacık patlamasını deneyebilirsiniz. Ya da tam tersine, daha önemli bir etki yaratmanız gerekiyorsa, her zaman Christopher Lis'in Kaboomerz'ini benimseyebilirsiniz.

İlk kod parçacığı, Dean'in patlamasının "küçük kardeş" bir versiyonunu içeriyor; burada düzinelerce küçük parçacık, hızla ortaya çıkan ve ölen küçük bir patlama oluşturuyor. Christopher Lis örneğinde, parçacıkların boyutuna şaşıracaksınız. Fare imlecinden çıkan konfeti çok büyük. Bununla birlikte, kısa ömürleri sayesinde, genel etki bunaltıcı değildir. Bu sadece hoş.

Kalemi Gör
Aleksei (@alek) tarafından JS/CSS3 parçacık patlaması.

Kalemi Gör
#Codevember 5 – Christopher Lis (@chriscourses) tarafından yazılan Kaboomerz.

DOM patlamaları David A.

Bu fikri beğendiyseniz ancak daha dijital benzeri ve retrodan ilham alan bir şeye ihtiyacınız varsa, o zaman David tarafından yaratılmış harika bir çözüm var. 8 bitlik hoş bir dokunuş elde etmek için daireler yerine çeşitli boyutlarda dikdörtgenler kullanıyor. Sonuç olarak 80'ler karizması ile küçük bir patlamaya tanık olabiliriz.

Kalemi Gör
David A. (@meodai) tarafından DOM patlamaları.

CreateJS'den WebGL Sparkles

Gerçekçi bir sürüm arıyorsanız, WebGL Sparkles by CreateJS dikkate alınması gereken mükemmel bir örnektir. Buradaki tüm parçacıklar beyaz olsa da, iyi düşünülmüş davranış sayesinde ekrana tıkladığınızda gerçek bir kutlama silahı sesi gibi görünüyor. Dahası, imleç, sahneye bir sihir dokunuşu veren hoş bir ize sahiptir.

Kalemi Gör
CreateJS: CreateJS (@createjs) tarafından hazırlanan WebGL Sparkles.

Christopher Lis tarafından Otomatik Havai Fişek Fırlatıcı

Bundan bahsetmişken, patlama koleksiyonumuz bir doz piroteknik çılgınlığı olmadan tamamlanmayacaktır. Christopher Lis'in Otomatik Havai Fişek Fırlatıcı, dikkate alınması gereken harika bir örnek. Bu karikatürize bir havai fişek fırlatıcıdır. Renkli parçacıklar ve karanfil benzeri şekiller sayesinde yıldızlı gökyüzünü aydınlatan gerçek havai fişekleri hatırlatıyor.

Kalemi Gör
29. Gün – Christopher Lis (@chriscourses) tarafından hazırlanan Otomatik Havai Fişek Fırlatıcı.

LegoMushroom'dan kalıcı pencere yok etme konsepti

Listemizdeki sadece tuval deneyleri değil. Patlama efektleri, kalıcı bir pencere gibi arayüzün çeşitli öğelerine uygulanabilir. LegoMushroom'un bunun canlı bir kanıtı var. Kalıcı pencere konseptine bir göz atın. Pencereyi kapattığınızda, kaybolmak yerine birkaç parçaya bölünür. Bu günlerde oldukça popüler olan tüm bu süslü, tam resimli web sitelerine mükemmel bir ektir.

Kalemi Gör
LegoMushroom (@sol0mka) tarafından tasarlanan kalıcı pencere yok etme konsepti.

Sylvain Garnot'tan SCSS Patlama Etkisi / Kacper Bawol'dan SVG metin patlaması / Tim Horwood'dan Tuval metin patlaması

Patlama efektleri tipografi için de faydalı olabilir. Sylvain Garnot'un SCSS Patlama Etkisini, Kacper Bawol'un SVG metin patlamasını ve Tim Horwood'un Canvas metin patlamasını düşünün.

Üçü de metne uygulanan bir patlama efektini gösterir. Tahmin edilebileceği gibi, fare imleci her birini tetikler.

Sylvain Garnot, kullanıcıların her harfi yüzlerce küçük kareye üflemesine izin veriyor. Kacper Bawol'un konsepti hemen hemen aynı görünüyor, ancak bu sefer sembol küçük üçgenlere bölünüyor. Ve Tim Horwood, kullanıcıların tüm metni, sonunda geri gelen ve her şeyi orijinal durumuna döndüren küçük parçacıklara üflemelerine olanak tanır. Üç fikir de inanılmaz.

Kalemi Gör
SCSS – Sylvain garnot (@sylvaingarnot) tarafından Patlama Etkisi.

Kalemi Gör
Kacper Bawol (@Casperovic) tarafından svg metin patlaması.

Kalemi Gör
Tuval metin patlaması, Tim Horwood (@tdhorwood) tarafından görüntülemek için tıklayın.

Ko.Yelie'den Ev Patlaması

Patlama efekti, görüntülere de uygulanabilir. Ko.Yelie'nin bu konsepti harika bir örnek. Resme tıklayarak onu küçük parçalara ayırıyorsunuz. Gerçek hayattaki arayüzlerde bunun için bir uygulama bulmak zor olsa da, parmaklarınızın ucunda sıradan şeyleri benzersiz gösterebilecek bazı olağanüstü çözümlere sahip olmak her zaman harikadır.

Kalemi Gör
Ev Patlaması, Ko.Yelie (@ko-yelie).

Patlayıcı Özellik

Bir patlama etkisi tartışmalı bir araçtır. “Patlayıcı” doğası ve güçlü karizması nedeniyle her arayüz için uygun değildir. Fare imleci ile birlikte uygulandığında zararsız ve hatta nötr gibi görünse de, oldukça "gür" - bu yüzden dikkatli olmalısınız.

Unutmayın, tüm insanlar web sitelerinden eğlence aramaz. Ve herkes savurganlıklara ve ezici izlenimlere bağlı değil. Günün sonunda, içerik her zaman kral olarak kalır.

Bununla birlikte, eğlenceli ve deyim yerindeyse "yüksek", heyecan verici bir kullanıcı etkileşimi yaratmanın bazı alışılmadık yollarını arıyorsanız, o zaman bir patlama efekti şüphesiz işinize yarayabilir.