Designtrend: foto's die tot leven komen
Een live foto. Cinemagraph. Bewegende beelden. Nog steeds beweging. Er zijn zoveel namen voor deze trend in webdesign, geïdentificeerd door een heldenbeeld dat op een subtiele manier tot leven lijkt te komen.
Het is niet echt een foto, maar ook niet echt een video. De beweging is vaak beperkt tot één actie in de afbeelding om de aandacht van de gebruiker te trekken en deze naar de afbeelding te trekken. Ongeacht hoe je het noemt, deze trend heeft impact en duikt overal op in webdesign, als deelbare gifs en op sociale media.
Evolutie van de trend
Het is moeilijk te zeggen waar het idee voor "live" foto's is ontstaan, maar je zou kunnen beweren dat Apple heeft geholpen het populairder te maken. Het bedrijf introduceerde fotografie met een vleugje beweging bij de iPhone 6S. Dat kleine extra moment van genot is hetzelfde concept voor levende foto's op websites. Er is iets extra's in een stellair beeld waardoor je er net iets langer naar blijft kijken.
Datzelfde concept van bewegende beelden begint op meer plaatsen te verschijnen. Schijnbaar stilstaande advertenties op digitale reclameborden zijn onder meer iemand die met je ogen knippert of knipoogt. Zelfs de line-ups voor Sunday Night Football bevatten headshots van spelers die na een seconde knipperen, wat aangeeft dat het eigenlijk live actie is.
Waarom deze techniek gebruiken? Het houdt de aandacht van de gebruiker langer vast en biedt een interessanter visueel referentiepunt. Flixel, een bedrijf dat cinemagraph-afbeeldingen voor klanten maakt, zegt dat de gemiddelde bewegende foto de aandacht van de gebruiker 9 seconden vasthoudt, vergeleken met 1 seconde voor het gemiddelde stilstaande beeld.
Foto's of illustraties
Levende beelden of filmbeelden kunnen werken met foto's of illustraties. Er is geen regel die zegt dat je een bepaald type beeldmateriaal moet gebruiken. Als je naar de twee bovenstaande afbeeldingen kijkt, kun je zien dat beide stijlen behoorlijk effectief kunnen zijn.
Een andere overweging is dat beweging niet in een lus hoeft te blijven plaatsvinden. Hillmann Living, hierboven, werpt licht op de producten op de startpagina tijdens het laden. Dat is de enige beweging en dan is de foto precies dat, een foto. Het mooie van het effect hier is dat je direct naar de stoelen kijkt die het bedrijf verkoopt. De techniek laat gebruikers zien wat op de pagina belangrijk is en waarop ze zich op een subtiele en interessante manier moeten concentreren.
Bar Z Wines pakt het anders aan. De geïllustreerde homepage lijkt in eerste instantie vrij eenvoudig, maar een klein vliegtuig vliegt in een lus door het midden bovenaan het scherm. De beweging helpt de gebruiker om belangrijke woorden op het scherm te bekijken: "Onze wijnen zijn ongefilterd." De gebruiker weet meteen iets van de berichten op deze website omdat ze dankzij beweging op het scherm naar de belangrijkste taal worden getrokken.
Tips voor succes
Deze techniek kan op een aantal manieren en voor verschillende ontwerptoepassingen werken. Enkele van de beste voorbeelden komen uit eenvoudige scènes of landschappen waar een mooie foto het uitgangspunt is.
Het gras kan bewegen in de wind of in een landschap. Een persoon kan knipperen wanneer hij wordt getoond in en een te grote headshot. Een product kan de actie waarvoor het is ontworpen kantelen, draaien of voltooien.
Het belangrijkste bij het nadenken over deze trend is eenvoud. Als er te veel beweging is, moet je waarschijnlijk voor een video kiezen. Het verrassingselement zorgt ervoor dat het werkt; gebruikers verwachten een stilstaand beeld, maar dan komt het tot leven.
- Blijf bij één ding en één gebruik per website.
- Het moet er realistisch uitzien.
- Beweging moet de wetten van de natuurkunde volgen.
- Beweging moet subtiel maar merkbaar zijn.
- Overdrijf het niet door geluid of veel klikacties toe te voegen.
- Overweeg subtiele gebruikerscontrole, zoals beweging die plaatsvindt met muisbewegingen.
- Ontwikkel een bewegend beeld dat kan worden gebruikt in meerdere campagnes, niet alleen uw website.
Hoe doe je het?
Er zijn tal van manieren om dit effect in je ontwerpen te creëren. De methode bepaalt echt op uw vaardigheidsniveau, hoe u van plan bent om de levende beelden en het budget te gebruiken.
Enkele van de opties om subtiele beweging te creëren zijn:
- Maak een gif.
- Gebruik een online tool (er zijn er een aantal beschikbaar met verschillende kosten.
- Maak de afbeelding als video met beperkte beweging.
- Gebruik een app of zelfs je iPhone.
- Rijg stilstaande beelden samen in een videoformaat.
Probeer deze YouTube-zelfstudie om u te helpen bij het plannen en creëren van een levend beeld.
Een perfect voorbeeld
De website van Monochrome Paris is een perfect voorbeeld van deze trend in actie. De homepage is een ogenschijnlijk eenvoudig beeld van een record, maar het stijve element ziet er bijna gesmolten uit en neemt de beweging aan van stof die in de wind beweegt. Het effect is aantrekkelijk, opvallend en trekt gebruikers naar het ontwerp.
Het effect helpt op subtiele wijze interesse te wekken. Het ingebeelde visueel ziet er door de beweging iets realistischer uit. Scroll naar beneden op de pagina en andere bewegende elementen begroeten de gebruiker, inclusief een normale weergave van het draaien van het record.
Deze website is een geweldige casestudy op effectieve manieren om deze trend te gebruiken. Ga naar en klik rond om je inspiratie op te doen.
Gevolgtrekking
Ongeacht hoe je het noemt, levende beelden zijn een van die trends die waarschijnlijk zullen blijven bestaan. Het is nog een manier om animatie aan een ontwerp toe te voegen zonder noodzakelijkerwijs een echte video te hoeven produceren. Het is effectief en kan een stuk goedkoper zijn dan videoproductie.
De truc van deze trend is ervoor te zorgen dat deze er opzettelijk en echt uitziet. Het opnemen van een dwaze beweging geeft niet noodzakelijkerwijs het gewenste effect. Ga terug en bekijk de bovenstaande voorbeelden echt, ga naar de websites en klik rond. Kijk waar die animatie je naar toe leidt in het ontwerp. In elk van de voorbeelden helpt beweging de gebruiker om naar een specifiek element te gaan of een bepaalde actie uit te voeren. Dat opzettelijk en gericht gebruik van beweging is de sleutel tot effectief cinemagraph-ontwerp.
