Design Trend: Fotografie, které ožívají
Živá fotka. Cinemagraph. Pohyblivé obrázky. Pohyb. Existuje tolik jmen pro tento trend ve webdizajnu, které jsou identifikovány obrazem hrdiny, který vypadá, že ožívá jemným způsobem.
Není to úplně fotka, ale ani video. Pohyb je často omezen na jednu akci v obraze, aby pomohl upoutat pozornost uživatele a vtáhnout je do obrazu. Bez ohledu na to, čemu říkáte, má tento trend vliv a objevuje se všude ve webdesignu, jako jsou gify pro sdílení a na sociálních médiích.
Vývoj trendu
Těžko říct, kde začal nápad na „živé“ fotografie, ale můžete tvrdit, že Apple pomohl zvýšit popularitu. Společnost představila fotografii, která zahrnovala dotyky pohybu s iPhone 6S. Tento malý okamžik potěšení je stejný koncept pro živé fotografie na webových stránkách. Ve hvězdném obrazu je něco navíc, díky kterému se na to díváte jen o něco déle.
Stejný koncept pohyblivého obrazu se začal objevovat na více místech. Zdánlivě statické reklamy na digitálních billboardech zahrnují někoho, kdo na vás poté bliká nebo mrkne. Dokonce i sestavy nedělního nočního fotbalu obsahují snímky hráčů, které po sekundě blikají, což ukazuje, že se jedná o živou akci.
Proč používat tuto techniku? Udržuje pozornost uživatele déle a poskytuje zajímavější bod vizuální reference. Společnost Flixel, která vyrábí snímky z kinematografie pro zákazníky, říká, že průměrná pohyblivá fotografie udrží pozornost uživatelů 9 sekund ve srovnání s 1 sekundou pro průměrný statický snímek.
Fotografie nebo ilustrace
Živé snímky nebo kinematografy mohou pracovat s fotografiemi nebo ilustracemi. Neexistuje žádné pravidlo, které říká, že musíte použít jeden typ snímků nebo jiný. Při pohledu na dva výše uvedené obrázky můžete vidět, že každý styl může být docela účinný.
Další úvahou je, že pohyb se nemusí opakovat ve smyčce. Hillmann Living, výše, vrhá světlo na produkty na domovské stránce při načítání. To je jediný pohyb a potom je fotka jen to, fotografie. Co je na tom pěkné, je to, že vás nutí podívat se přímo na židle, které společnost okamžitě prodává. Tato technika ukazuje uživatelům, na čem na stránce záleží a na co se mají zaměřit jemným a zajímavým způsobem.
Bar Z Wines zaujímá další přístup. Ilustrovaná domovská stránka se na první pohled jeví spíše obyčejně, ale malé letadlo letí smyčkou přes horní střed obrazovky. Tento pohyb pomáhá uživateli nasměrovat na důležitá slova na obrazovce: „Naše vína jsou nefiltrovaná.“ Uživatel okamžitě ví něco o zasílání zpráv na tomto webu, protože díky pohybu na obrazovce jsou přitahováni k nejdůležitějšímu jazyku.
Tipy pro úspěch
Tato technika může pracovat mnoha způsoby a pro různé aplikace designu. Některé z nejlepších příkladů pocházejí z jednoduchých scén nebo krajin, kde je krásná fotografie výchozím bodem.
Tráva se může pohybovat ve větru nebo v krajině. Osoba by mohla mrknout, když bude předvedena a nadměrně ostřelovaná. Produkt se může naklonit, otočit nebo dokončit akci, pro kterou je určen.
Při přemýšlení o tomto trendu je nejdůležitější jednoduchost. Pokud je příliš mnoho pohybu, měli byste se pravděpodobně rozhodnout pro video. Prvek překvapení je to, co dělá to funguje; uživatelé očekávají statický obrázek, ale pak ožije.
- Držte se jedné věci a jednoho použití na každém webu.
- Musí vypadat realisticky.
- Pohyb musí dodržovat fyzikální zákony.
- Pohyb by měl být jemný, ale znatelný.
- Nepřehánějte to přidáním zvuku nebo spoustou kliknutí.
- Zvažte jemné uživatelské ovládání, například pohyb, ke kterému dochází při pohybu myši.
- Vytvořte dojemný obraz, který lze použít ve více kampaních, nejen na vašem webu.
Jak to děláš?
Ve svých návrzích existuje mnoho způsobů, jak tento efekt vytvořit. Metoda skutečně určuje na vaší úrovni dovedností, jak plánujete používat živé obrazy a rozpočet.
Mezi možnosti vytvoření jemného pohybu patří:
- Vytvořte gif.
- Použijte online nástroj (je k dispozici číslo s různými náklady).
- Vytvořte obrázek jako video s omezeným pohybem.
- Použijte aplikaci nebo dokonce svůj iPhone.
- Spojte statické obrázky ve video formátu.
Vyzkoušejte tento tutoriál YouTube, který vám pomůže při plánování a vytváření živého obrazu.
Perfektní příklad
Web pro Monochrome Paris je dokonalým příkladem tohoto trendu v akci. Domovská stránka je zdánlivě jednoduchý obraz záznamu, ale tuhý prvek téměř vypadá roztavený a přijímá pohyb látky pohybující se ve větru. Tento efekt je poutavý, poutavý a přitahuje uživatele do designu.
Efekt pomáhá vytvořit zájem jemným způsobem. Představený vizuální vzhled je díky pohybu trochu reálnější. Posuňte stránku dolů a ostatní pohyblivé prvky pozdraví uživatele, včetně normálního zobrazení rotace záznamu.
Tento web je skvělou případovou studií efektivních způsobů využití tohoto trendu. Vydejte se a klikněte, abyste pomohli s inspirací.
Závěr
Bez ohledu na to, čemu říkáte, živé snímky jsou jedním z těch trendů, které pravděpodobně zůstanou. Je to ještě jeden způsob, jak do návrhu přidat animaci, aniž by bylo nutné vytvářet skutečné video. Je to efektivní a může být mnohem levnější než výroba videa.
Trik tohoto trendu je zajistit, aby to vypadalo úmyslně a skutečně. Začlenění hloupého pohybu vám nemusí nutně přinést požadovaný efekt. Vraťte se a podívejte se na příklady uvedené výše, přejděte na webové stránky a klikněte na ně. Podívejte se, k čemu tato animace vede v návrhu. V každém z příkladů umožňuje pohyb uživateli dostat se ke konkrétnímu prvku nebo provést určitou akci. Toto úmyslné a řízené používání pohybu je klíčem k efektivnímu návrhu kinematografie.
