Tasarım Trendi: Canlanan Fotoğraflar
Canlı bir fotoğraf. Sinemagraf. Hareket eden fotoğraflar. Hareketsiz hareket. Web tasarımında bu eğilim için, ince bir şekilde canlanan bir kahraman görüntüsü ile tanımlanan çok fazla isim var.
Bu bir fotoğraf değil, aynı zamanda bir video da değil. Hareket, kullanıcının dikkatini çekmek ve onları görüntüye çekmek için genellikle görüntüdeki bir eylemle sınırlıdır. Ne dediğinizden bağımsız olarak, bu trend, web tasarımında, paylaşılabilir gifler ve sosyal medyada her yerde bir etki yaratıyor ve ortaya çıkıyor.
Trendin Evrimi
“Canlı” fotoğraflar fikrinin nerede başladığını söylemek zor, ancak Apple'ın onu daha popüler hale getirmesine yardımcı olduğunu iddia edebilirsiniz. Şirket, iPhone 6S ile hareket dokunuşlarını içeren fotoğrafçılığı tanıttı. Bu küçük ekstra zevk anı, web sitelerinde fotoğraf çekmek için aynı kavramdır. Yıldız görüntüsünde biraz daha uzun bakmanızı sağlayan ekstra bir şey var.
Aynı hareketli görüntüler kavramı daha fazla yerde ortaya çıkmaya başladı. Görünüşe göre hala dijital reklam panolarında çerçeveli reklamlar, size yanıp sönen veya göz kırpan birini içerir. Sunday Night Football serileri bile, bir saniye sonra yanıp sönen ve gerçekte canlı bir eylem olduğunu gösteren oyuncu kafalarını içerir.
Neden bu tekniği kullanıyorsunuz? Kullanıcının dikkatini daha uzun süre tutar ve daha ilginç bir görsel referans noktası sağlar. Müşteriler için sinemagraf görüntüleri üreten bir şirket olan Flixel, ortalama hareketli fotoğrafın kullanıcıların dikkatini 9 saniye tuttuğunu, ortalama hareketsiz görüntü için ise 1 saniyeyi koruduğunu söylüyor.
Fotoğraflar veya İllüstrasyonlar
Canlı görüntüler veya sinemagraflar fotoğraf veya resimlerle çalışabilir. Bir tür görüntü kullanmanız gerektiğini söyleyen bir kural yoktur. Yukarıdaki iki görüntüye bakarak, her iki stilin de oldukça etkili olabileceğini görebilirsiniz.
Diğer bir husus, hareketin bir döngü içinde gerçekleşmesi gerekmediğidir. Hillmann Living, yukarıda, ana sayfadaki ürünler yüklenirken ışık tutar. Tek hareket bu ve sonra fotoğraf sadece bu, hareketsiz bir fotoğraf. Buradaki etki hakkında güzel olan şey, şirketin doğrudan sattığı sandalyelere doğrudan bakmanızı sağlamasıdır. Teknik, kullanıcılara sayfadaki neyin önemli olduğunu ve neye ince ve ilginç bir şekilde odaklanmaları gerektiğini gösterir.
Bar Z Wines başka bir yaklaşım daha getiriyor. Gösterilen ana sayfa başlangıçta oldukça düz görünüyor, ancak ekranın üst merkezinden küçük bir düzlem bir döngü üzerinde uçuyor. Hareket, kullanıcıyı ekrandaki önemli kelimelere bakmaya yönlendirmeye yardımcı oluyor: “Şaraplarımız filtrelenmiyor.” Kullanıcı, bu web sitesindeki mesajlaşma hakkında hemen bir şey biliyor çünkü ekrandaki hareket sayesinde en önemli dile çekiliyor.
Başarı için İpuçları
Bu teknik çeşitli şekillerde ve çeşitli tasarım uygulamaları için kullanılabilir. En iyi örneklerden bazıları, güzel bir fotoğrafın başlangıç noktası olduğu basit sahnelerden veya manzaralardan gelir.
Çim rüzgarda veya manzarada hareket edebilir. Bir kişi sergilendiğinde ve büyük boy headshot yaparken yanıp sönebilir. Bir ürün, tasarlandığı işlemi yatırabilir veya döndürebilir veya tamamlayabilir.
Bu eğilimi düşünürken en önemli şey basitliktir. Çok fazla hareket varsa, muhtemelen bir video seçmelisiniz. Sürpriz unsuru onu çalıştıran şeydir; kullanıcılar hareketsiz bir görüntü bekler, ama sonra hayat bulur.
- Bir şeye bağlı kalın ve her web sitesi için bir kullanım.
- Gerçekçi görünmesi gerekiyor.
- Hareketin fizik yasalarına uyması gerekir.
- Hareket ince ama göze çarpmalıdır.
- Ses veya çok sayıda tıklama işlemi ekleyerek aşırıya kaçmayın.
- Fare hareketlerinde meydana gelen hareket gibi ince kullanıcı denetimini düşünün.
- Yalnızca web sitenizde değil, birden çok kampanyada kullanılabilecek hareketli bir resim geliştirin.
Bunu nasıl yapıyorsun?
Bu efekti tasarımlarınızda yaratmanın birçok yolu vardır. Yöntem, beceri seviyenizi, canlı görüntüleri ve bütçeyi nasıl kullanmayı planladığınızı gerçekten belirler.
Hafif hareket oluşturma seçeneklerinden bazıları şunlardır:
- Bir gif oluşturun.
- Çevrimiçi bir araç kullanın (değişen maliyetlerde bir sayı vardır.
- Görüntüyü sınırlı hareketli video olarak oluşturun.
- Bir uygulama veya hatta iPhone'unuzu kullanın.
- Hareketsiz görüntüleri video formatında bir araya getirin.
Canlı bir resim planlamanıza ve oluşturmanıza yardımcı olması için bu YouTube eğiticisini deneyin.
Mükemmel Bir Örnek
Monochrome Paris'in web sitesi, bu eğilimin mükemmel bir örneğidir. Ana sayfa, bir kaydın görünüşte basit bir görüntüsüdür, ancak sert eleman neredeyse erimiş görünüyor ve rüzgarda hareket eden kumaşın hareketini üstleniyor. Etkisi ilgi çekici, göz alıcı ve kullanıcıları tasarıma çekiyor.
Etki, ince bir şekilde ilgi yaratmaya yardımcı olur. Hayal edilen görsel, hareket nedeniyle biraz daha gerçek görünüyor. Sayfayı aşağı kaydırın ve kayıt döndürmenin normal bir görünümü de dahil olmak üzere kullanıcıyı hareket eden diğer hareketli öğeler.
Bu web sitesi, bu trendi kullanmak için etkili şekillerde harika bir örnek olaydır. İlham almak için başınıza dönün ve tıklayın.
Sonuç
Ne dediğinizden bağımsız olarak, canlı görüntüler muhtemelen etrafta dolaşacak olan trendlerden biridir. Gerçek bir video üretmek zorunda kalmadan bir tasarıma animasyon eklemenin bir yoludur. Etkili ve video üretiminden çok daha az maliyetli olabilir.
Bu trendin püf noktası, kasıtlı ve gerçek görünmesini sağlamaktır. Aptalca bir hareket eklemek, size istenen etkiyi vermez. Geri dönün ve yukarıdaki örneklere gerçekten bakın, web sitelerine gidin ve tıklayın. Bu animasyonun sizi tasarımda neye götürdüğünü görün. Örneklerin her birinde hareket, kullanıcının belirli bir öğeye ulaşmasına veya belirli bir eylem gerçekleştirmesine yardımcı olur. Bu kasıtlı ve yönlendirilmiş hareket kullanımı etkili sinemagraf tasarımının anahtarıdır.
