Trend projektowy: zdjęcia, które ożywają
Zdjęcie na żywo. Kinograf. Ruchome obrazki. Wciąż ruch. Jest tak wiele nazw tego trendu w projektowaniu stron internetowych, identyfikowanych przez wizerunek bohatera, który wydaje się ożywiać w subtelny sposób.
To nie do końca zdjęcie, ale też nie do końca wideo. Ruch jest często ograniczony do jednej akcji na obrazie, aby pomóc przyciągnąć uwagę użytkownika i przyciągnąć go do obrazu. Niezależnie od tego, jak to nazywasz, ten trend robi wrażenie i pojawia się wszędzie w projektowaniu stron internetowych, jako udostępniane gify i w mediach społecznościowych.
Ewolucja trendu
Trudno powiedzieć, skąd wziął się pomysł na „na żywo” zdjęcia, ale możesz argumentować, że Apple pomógł zwiększyć jego popularność. Firma wprowadziła zdjęcia, które obejmowały akcenty ruchowe w telefonie iPhone 6S. Ten dodatkowy moment zachwytu to ta sama koncepcja żywych zdjęć na stronach internetowych. W gwiezdnym obrazie jest coś ekstra, co sprawia, że patrzysz na to trochę dłużej.
Ta sama koncepcja ruchomych obrazów zaczęła pojawiać się w wielu miejscach. Pozornie nieruchome reklamy na cyfrowych billboardach obejmują kogoś, kto mruga lub mruga do ciebie. Nawet składy w Sunday Night Football obejmują strzały w głowę graczy, które migają po sekundzie, pokazując, że to tak naprawdę akcja na żywo.
Dlaczego warto korzystać z tej techniki? Dłużej utrzymuje uwagę użytkownika i zapewnia bardziej interesujący punkt odniesienia wizualnego. Flixel, firma zajmująca się tworzeniem obrazów kinograficznych dla klientów, twierdzi, że średnia ruchoma fotografia utrzymuje uwagę użytkowników 9 sekund, w porównaniu do 1 sekundy dla przeciętnego nieruchomego obrazu.
Zdjęcia lub ilustracje
Żywe obrazy lub kinografie mogą współpracować ze zdjęciami lub ilustracjami. Nie ma żadnej reguły, która mówi, że musisz użyć jednego lub innego rodzaju zdjęć. Patrząc na dwa powyższe zdjęcia, widać, że każdy styl może być dość skuteczny.
Inną kwestią jest to, że ruch nie musi ciągle zachodzić w pętli. Hillmann Living, powyżej, rzuca światło na produkty na stronie głównej podczas ładowania. To jedyny ruch, a potem zdjęcie jest właśnie tym, nieruchomym zdjęciem. Zaletą tego efektu jest to, że od razu patrzysz na krzesła, które firma sprzedaje. Technika pokazuje użytkownikom, co na stronie ma znaczenie i na czym powinni się skupić w subtelny i interesujący sposób.
Bar Z Wines ma inne podejście. Zilustrowana strona główna na początku wydaje się raczej prosta, ale niewielki samolot przelatuje przez górną środkową część ekranu w pętli. Ten ruch pomaga użytkownikowi spojrzeć na ważne słowa na ekranie: „Nasze wina są niefiltrowane”. Użytkownik od razu wie coś o wiadomościach na tej stronie, ponieważ dzięki ruchowi na ekranie przyciąga ich najważniejszy język.
Wskazówki na sukces
Ta technika może działać na wiele sposobów i do różnych zastosowań projektowych. Niektóre z najlepszych przykładów pochodzą z prostych scen lub krajobrazów, w których punktem wyjścia jest piękna fotografia.
Trawa może poruszać się na wietrze lub w krajobrazie. Osoba może mrugać, gdy jest prezentowana i ma powiększony strzał w głowę. Produkt może przechylić się, obrócić lub ukończyć działanie, do którego jest przeznaczony.
Najważniejszą rzeczą przy rozważaniu tego trendu jest prostota. Jeśli ruch jest zbyt duży, prawdopodobnie powinieneś wybrać wideo. Element zaskoczenia sprawia, że działa; użytkownicy oczekują nieruchomego obrazu, ale ożywa.
- Trzymaj się jednej rzeczy i jednego użycia na stronę.
- Musi wyglądać realistycznie.
- Ruch musi być zgodny z prawami fizyki.
- Ruch powinien być subtelny, ale zauważalny.
- Nie przesadzaj, dodając dźwięk lub wiele kliknięć.
- Rozważ subtelną kontrolę użytkownika, na przykład ruch, który występuje podczas ruchów myszy.
- Opracuj ruchomy obraz, który można wykorzystać w wielu kampaniach, nie tylko w witrynie.
Jak ty to robisz?
Istnieje wiele sposobów na stworzenie tego efektu w swoich projektach. Ta metoda naprawdę określa na poziomie umiejętności, w jaki sposób planujesz wykorzystać żywe obrazy i budżet.
Niektóre opcje tworzenia subtelnego ruchu obejmują:
- Utwórz gif.
- Skorzystaj z narzędzia online (jest dostępny numer o różnych kosztach).
- Utwórz obraz jako wideo z ograniczonym ruchem.
- Użyj aplikacji, a nawet telefonu iPhone.
- Połącz ze sobą zdjęcia w formacie wideo.
Wypróbuj ten samouczek YouTube, aby pomóc Ci zaplanować i stworzyć żywy obraz.
Idealny przykład
Strona internetowa Monochrome Paris jest doskonałym przykładem tego trendu w działaniu. Strona główna jest pozornie prostym obrazem płyty, ale sztywny element prawie wygląda na stopiony i przejmuje ruch tkaniny poruszającej się na wietrze. Efekt jest wciągający, przyciągający wzrok i przyciąga użytkowników do projektu.
Efekt pomaga subtelnie wzbudzić zainteresowanie. Wyobrażona grafika wygląda trochę bardziej realnie dzięki ruchowi. Przewiń stronę w dół, a inne ruchome elementy powitają użytkownika, w tym normalny widok obracającego się rekordu.
Ta strona jest świetnym studium przypadku w efektywny sposób wykorzystania tego trendu. Udaj się i kliknij, aby pobudzić inspirację.
Wniosek
Niezależnie od tego, jak to nazwiesz, żywe obrazy są jednym z tych trendów, które prawdopodobnie będą się utrzymywać. To jeszcze jeden sposób na dodanie animacji do projektu bez konieczności tworzenia rzeczywistego wideo. Jest skuteczny i może być o wiele tańszy niż produkcja wideo.
Sztuką tego trendu jest upewnienie się, że wygląda on celowo i naprawdę. Włączenie głupiego ruchu niekoniecznie da pożądany efekt. Wróć i naprawdę spójrz na powyższe przykłady, przejdź do stron internetowych i kliknij. Zobacz, do czego prowadzi ta animacja w projekcie. W każdym z przykładów ruch pomaga użytkownikowi dotrzeć do określonego elementu lub wykonać określone działanie. To celowe i ukierunkowane użycie ruchu jest kluczem do skutecznego projektowania kinografii.
