Küçük Detaylar: Hamburger Menü Gösterim Geçişlerine Bir Bakış

Hamburger menüsü yeni bir şey değil. “Ah, yine olmaz!” diyebilirsiniz. Ve bazı açılardan haklı olabilirsiniz. Bu konuyu daha önce Hamburger ve Mega-Menü Kombinasyonu Tasarım Trendi veya Hamburger Menüsünü Analiz Etme gibi çeşitli konuları inceleyerek tartışmıştık. Yani, her şeyi söylemişiz gibi görünebilir, yoksa söyledik mi?

Web tasarımında en çok tartışılan konulardan biri hakkında başka neler söylenebilir? Hamburger menüsü hakkında spekülasyon yapmak, Harry Potter kitaplarını okumak gibidir. Tüm yaygara ve filmlerden dolayı Yaşayan Çocuk ve arkadaşlarıyla maceraları hakkında her şeyi biliyormuşsunuz gibi geliyor. Ama gerçekten kitaplara burnunuzu gömdüğünüzde, bir anda satırları okumaya başlıyorsunuz ve küçük detayları fark ediyorsunuz. Ve bir şeyi gözden kaçırmış gibisin: Önemli bir şey.

Aynı durum hamburger menüsü için de geçerlidir. Oradaki tüm makalelerle, çevrilmemiş bir taş bırakmadığımızdan eminiz. Ancak, yüzeyi düzgün bir şekilde çizdik. Biraz daha derine inelim ve dikkatimizi üç satırlı simge ile menünün kendisi arasındaki geçiş gibi küçük ayrıntılara odaklayalım. Sadece bir veya iki saniye sürer, ancak bildiğiniz gibi, ayrıntılar tüm farkı yaratır - en küçük olanlar bile. Ve bu küçük etki, genel izlenime büyük ölçüde katkıda bulunabilir ve onu kolayca bir sonraki seviyeye taşıyabilir.

jismo

Tarihsel olarak, hamburger menüsünün iki durumu arasındaki geçiş bir kayma efektidir. Gismo bunun klasik bir örneğidir. Burada, bağlantıların bulunduğu bölüm, tüm ekranı kaplayarak üstten sorunsuz bir şekilde düşer. Güzel görünüyor, ama özel bir şey yok.

Fishfinger Yaratıcı Ajans / 6tematik

Ancak, hiç kimse sizi bu yaklaşımı geliştirmekten alıkoymaz ve böylece bozuk bir rekoru yeniden canlandırır. Örneğin, Fishfinger Creative Agency'nin arkasındaki ekip, açıları yumuşatarak ve genel kabarcıklı estetiğe uyması için dairesel bir şekil kullanarak geçişi biraz ilginç hale getirmeye çalışıyor.

Ve 6tematik ajansı geçişi iki bölüme ayırıyor – navigasyonun her bir parçasını karşı taraftan gelmeye ve ortak alanı oluşturmaya zorluyor. Sonuç olarak, bu basit fikir yalnızca deneyime biraz lezzet katmakla kalmaz, aynı zamanda doğal olarak dikkati menü bağlantılarının bulunduğu sayfanın kalbine çeker.

IGOODI / Neredeyse Öyleyiz / Dijital Tasarımcı / Senshu Reklam Oluşturucuları / Sihirbazlık / Blab Studio

Daha da heyecan verici ve göz alıcı örnekler var. Her şeyden önce, kutu estetiği ile en doğal hissi veren etkiler vardır.

IGOODI ile bir hafıza şeridinde yolculuk yapıyormuşsunuz gibi geliyor. Elbette web sitesi, siteye modern bir görünüm kazandıran üst düzey özelliklerle doludur. Yine de geçişler ve efektler kesinlikle eski ama ilham veren bir Flash kalitesine sahip. Fareyle üzerine gelindiğinde ses efektleri bile var.

We Virtually Are ayrıca bazı eski ama iyi hisler için de geçerli. Ekip, eski meme tüplerinde görülebilen bir etkiyi taklit ediyor. Burada bir resim belirir ve merkezdeki küçük noktadan kaybolur. Çözüm ayrıca tanınabilir TV gürültüsü ve bozulma ile renklendirilerek her şeyin inanılmaz görünmesini sağlar.

Digital Designer'ın arkasındaki ekip, ilhamlarını klasik bir yatay pencere jaluzisinden aldı. Bindirme ekranı, dikey bir blok açığa çıkarma efektiyle renklendirilmiş üç geniş şeride bölünmüştür. Ekip, iki durum arasında geçişe büyüleyici ve en önemlisi göz alıcı bir görünüm kazandırmayı başardı.

Önceki fikri beğendiyseniz, ancak onu 90 derece döndürmek istiyorsanız, şüphesiz Senshu Ad Creators'ın yaklaşımını takdir edeceksiniz. Tokyo merkezli bu yaratıcı ajansın kurumsal web sitesinde de jaluzi etkisi görülüyor. Ancak bu sefer panjurlar dikey ve yatay eksen boyunca açılıp kapanıyor.

Wizardry ajansının ekibi, gelişmiş özelliklerle süslenmiş fantastik, iyi düşünülmüş kozmik bir temayla müşterilerini kazanıyor. Bu nedenle, bazı teknik titreşimlerin, hamburger düğmesinin arkasına tahmin edilebileceği gibi, menülerinin geçişini de işaretlemesi şaşırtıcı değil. Çözüm, kayma efektine dayanmasına rağmen, kesinlikle kalabalığın arasından sıyrılıyor ve temaya mükemmel bir şekilde katkıda bulunuyor.

Blab Studio bir tür origami efekti kullanır. Gezinme ekranlarının her bloğu, kademeli ve tutarlı bir şekilde kutu şeklinde açılır ve bir sonraki alanı tetikler. Menüyü açsanız da kapatsanız da, her şey bir menü simgesini temsil eden sol alt kareden başlar ve kademeli olarak sağ üst köşeye hareket ederek bir uyum ve tutarlılık hissi yaratır. Genel tasarım karelere ve dikdörtgenlere dayanmaktadır, bu nedenle kutulu estetik burada ideal bir seçenektir.

Rüya Digital / Bebold / Die ANTWORT

Keskin ve keskin köşeli çözümlerden bir adım uzaklaşalım ve Rüya Digital, Bebold ve Die ANTWORT'ta görülebilen bazı pürüzsüz ve süslü sanatsal yaklaşımları ele alalım. İlgili tüm ekipler, su sıçramalarından ve boyalardan ilham alarak geçişlere sanatsal bir dokunuş kazandırmayı başardı.

Rüya Digital'deki ana menü, üstten düşen sıçrama benzeri bir efektle açılır. Fareyle üzerine gelme efektinde de görülen belirgin bir degrade arka planı vardır. Geçiş, sahneyi sorunsuz bir şekilde değiştirir ve doğal olarak bir ziyaretçinin dikkatini çeker.

Önceki örnekte olduğu gibi, Bebold ekibi aynı etkiyi tercih ediyor. Ekranın parlak yüzeyinde hızla akan bir suluboya resmini andırıyor. Bu sefer ekip, güzel gradyanlar halinde bir araya getirilen uçuk mavi, neon yeşili ve yumuşak pembeyi kullanarak gerçekleştirmeye canlılık katıyor. Birkaç katman birbiri ardına gider ve hoş bir boyut hissi yaratır.

Die ANTWORT'un çözümü sanat dünyasından da ödünç alındı. Geçiş, siyah boya damlasının dikkatsizce aşağı atıldığı küçük bir animasyon. Navigasyon bölümünü açar. Çözüm yalnızca derin bir etki yaratmakla kalmaz, aynı zamanda web sitesindeki diğer her şeyle de uyumludur. Ana sayfa ve ana menü alanı arasında mantıklı bir geçiş görevi görür.

Ayrıntılar Önemlidir

Beğenin ya da beğenmeyin, çoğu durumda bir web sitesinin düzeninin köşeli yapısı, efektlerin seçimini etkiler. Şüphesiz, Blab Studio veya Wizardry'de görülebilen blok ortaya efekti ve kutu estetiği harika görünüyor ve hatta bize daha doğal geliyor. Ancak Bebold ve Die ANTWORT örneğindeki gibi sanatsal yaklaşımlar her zaman rekabette öne çıkıyor ve dikkat çekiyor.

Önemli olan o takımların yaptığı gibi en ufak ayrıntıya bile dikkat etmeniz. Banal bir hamburger menüsüne, göze çarpacak ve izlenimi zenginleştirecek sıra dışı geçişler kullanarak yeni bir soluk verin.