Daha İyi Duyarlı Fotoğraf Galerileri için 7 İpucu
Duyarlı bir platformda web sitesi tasarlamanın önemini hepimiz biliyoruz ve anlıyoruz, değil mi? Bu, resimler ve fotoğraf galerileri için de geçerlidir.
Güzel bir web sitesine gitmekten ve yerine düzgün bir şekilde "kilitlemeyen" görüntüler görmekten daha kötü bir şey yoktur. Neredeyse tasarımcının bir şeyi unuttuğunu veya bir adımı kaçırdığını düşünmenize neden oluyor.
Bugün, daha iyi duyarlı fotoğraf galerileri oluşturmak için tasarım sürecinde yapabileceğiniz yedi şeye bakacağız. (Burada koddan bahsetmiyoruz; bunlar, ister aynı olsun ister olmasın, size ve geliştiriciye yardımcı olabilecek tasarım süreçleridir.)
Envato Elements'i keşfedin
1. En Boy Oranlarını Düşünün
Masaüstü görüntüleme deneyimi, bir mobil cihazdakinden oldukça farklı olabilir. Ancak çoğu web sitesi için resim yerleşimleri aynıdır. İşiniz, aynı iletinin her iki ortamda da iletildiğinden ve görüntünün farklı ekran boyutlarında kaybolmadığından emin olmaktır.
En boy oranını (görüntünün yatay ve dikey düzlemleri arasındaki ilişki) düşünmek burada devreye giriyor.
Bu masaüstü web sitesine geri dönersek, süper ince yatay bir fotoğraf web sitenizin tasarımının en üstünde şaşırtıcı görünebilir. Ancak daha kare bir ortamda daha küçük ekranda bu görüntüye ne olur? Fotoğraf görülmesi zor bir boyuta küçülüyor mu? Yoksa fotoğrafın yarısı kayboluyor mu?
En boy oranı burada devreye girer. Benzer fotoğraf boyutları için yatay-dikey bir ilişki seçildiğinde, cihazlar arasında geçiş yapılırken daha az görüntü içeriği kaybolur. Ayrıca, görüntü yerleşimleriyle çalışmanızı kolaylaştırır ve farklı kesme noktaları için birden fazla boyut yükleme konusunda endişelenmenize gerek kalmaz.
2. Boyut ve Ölçek Sürekli
Fotoğrafları kırpmaya, boyutlandırmaya ve karşıya yüklemeye gösterdiğiniz özen iş akışınızı önemli ölçüde etkileyebilir.
Kaçınız sadece CMS'ye fotoğraf yüklüyor ve en iyisini umuyor? Evet yanlış cevap.
Her fotoğraf kırpılmalı ve web sitesi tasarımına yerleştirilmek üzere boyutlandırılmalıdır. Bu, fotoğrafların amaçlanan şekilde görünmesini sağlar ve fotoğrafların veya bir (veya her iki) tarafın dışında bırakılan öğelerin üst kısımlarında eksik kafalarla karşılaşmazsınız.
Projenin arka ucunda biraz daha zaman alır, ancak çabaya değer. (Özellikle kaydırıcılar veya galerilerle çalışıyorsanız.)
3. Bir Kaydırıcı veya Galeri kullanın
Kaydırıcı veya galeri gibi görüntüler için bir kap kullanmak, web sitesi tasarımınızdaki duyarlı görüntüleri daha iyi yönetmenize yardımcı olabilir. Özellikle tanınmış ve yerleşik bir üçüncü taraf aracı kullanıyorsanız, bu öğelerin amaçlandığı gibi çalışmasını sağlamak için ağır kaldırma işlemlerinin çoğu sizin için yapılır.
Önceki ipuçlarından ikisi, kaydırıcı veya galeri öğelerini kullanırken bile hayati önem taşımaktadır; en-boy oranları ve boyutlandırma ve ölçeklendirme kavramları hala geçerlidir.
Hangi seçeneği kullanacağınızdan emin değil misiniz? Daha büyük boyutlarda çalışacak bir avuç harika görüntünüz varsa kaydırıcıyı seçin. Bir web sayfasının üst veya “kahraman” bölümü için popüler bir seçenektir. Okunabilirlik sorunu olmadan küçük resimler oluşturabilecek çok sayıda resminiz olduğunda galeriyi seçin. Bu, gösterilecek çok sayıda resim içeren portföyler veya web siteleri için iyi çalışır.
4. Mümkün Olduğunda Altyazılardan Uzak Durun
Altyazılar, bir resimdeki bilgilere değer katmak için harika bir araç olabilir, ancak web sitesinin nasıl çalıştığını gerçekten engelleyebilir. Geleneksel bir altyazı şeklinde olmayan alternatif bir çözüm bulabilirseniz veya bunlardan kaçının.
Altyazılar gibi büyük metin blokları, büyük ekranlarda güzel bir şekilde görüntülenebilir, ancak daha küçük ortamlarda büyük sorunlar yaratabilir. Sonuçta ortaya çıkan etki sarsıcı olabilir ve kullanıcıların sitenizi terk etmesine neden olabilir. (Ve çoğu web sitesi için mobil cihazlardan gelen çok fazla trafik olduğunda, bu felaket olabilir.)
5. Video ve Görüntüleri Karıştırırken Dikkat Edin
Açık olalım: Web sitenizde video ve görüntü öğelerinin olması kesinlikle kabul edilebilir. Muhtemelen yapmanız gereken bir şey.
Ancak video ve görüntüleri, aynı kaydırıcıya yerleştirmek gibi tasarımın aynı öğelerinde karıştırmayın. Bazen şanslı olursunuz ve bu bir cazibe gibi çalışır. Diğer zamanlarda, garip görünen bazı cihazlarda boş kutular bırakacaksınız.
En iyi seçenek, her farklı öğeye tasarımda kendi alanını vermektir. Bu hemen hemen tüm tasarım öğeleri, özellikle görüntüler ve videolar için geçerlidir.
6. Gereksiz Elemanları Kes
Kaydırıcılar ve galerilerle ilgili en büyük sorunlardan biri, tasarımcının çoğu zaman kabın içine çok fazla önemsiz girmesi. Gezinme okları, gezinme düğmeleri, metin, harekete geçirici mesajlar var ve liste devam ediyor.
Genellikle, kullanıcılar bir kaydırıcıyla nasıl etkileşime gireceğini anlar. Tamamen duvardan bir şey yapmadığınız sürece, kullanıcılara ne yapacaklarını gösteren iki gezinme katmanına ihtiyacınız yoktur. Tek bir düğme veya ok sırası bol (onlara ihtiyacınız varsa).
Yalnızca kullanıcıların etkileşimde bulunması gereken öğeleri ekleyin. Bir resim galerisinin veya kaydırıcısının amacı, kullanıcının bir harekete geçirici mesajı tıklamasını / dokunmasını sağlamaksa, fotoğraftaki tek seçenek bu olmalıdır. Basit tutun. Çok fazla seçenek sunmayın. Aslında dönüşüm oranlarınıza yardımcı olabilir.
7. Yalnızca Yüksek Kaliteli Görüntüler Kullanın
Neredeyse söylemeye gerek yok, ama yine de çok sık oluyor. Mükemmel bir görüntünüz yoksa, hiç bir görüntü kullanmayın. Yüksek kaliteli, yüksek çözünürlüklü görüntüler her zamankinden daha önemli. Kullanıcılar pikselli veya kötü görüntüler içeren bir web sitesine bakmak için zaman kaybetmeyeceklerdir (ve kalite düşükse muhtemelen size güvenmeyecektir).
Çok sayıda kullanıcı, yüksek çözünürlüklü ekranlara sahip cihazlar kullanarak web sitenizin tasarımına bakıyor; birinci sınıf görseller bekliyorlar. Teslim etmeniz gerekiyor.
Bazı görüntü formatları, daha yüksek sıkıştırılmış görüntüler sunarken bu yüksek çözünürlüklü ihtiyaçları karşılayacak şekilde değişmektedir. Kendinizi biçimlerde ayirin - Google Developers, başlamak için harika bir yerdir - en çok hangi ekran çözünürlüklerinin kullanıldığını bilin ve dosyaları kullanıcılara en iyi şekilde sunulabilecek şekilde kaydetme alışkanlığına sahip olun.
Sonuç
Hepimiz, kullanıcıların etkileşim kurması gerektiğini düşündüğü web siteleri oluşturmak istiyoruz. Güçlü görüntüler bu denklemin önemli bir parçasıdır. Aynı derecede önemli olan, cihazdan bağımsız olarak onları iyi bir şekilde işlemek.
Bir web sitesi tasarım projesinin tel çerçeve aşamalarındayken çeşitli cihaz boyutlarında çalışacak görüntü alanları için plan yapın. Özellikle görüntü şekli açısından bazı ver ve alların olduğunu görebilirsiniz, ancak uzun vadede bu kararları erkenden vermek ve bu tutarlılığı oluşturmak uzun vadede site tasarımınıza fayda sağlayacaktır.
