Designtrend: bilder som kommer levende
Et levende bilde. Cinemagraph. Bevegende bilder. Fremdeles bevegelse. Det er så mange navn på denne trenden innen webdesign, identifisert av et heltebilde som ser ut til å bli levende på en subtil måte.
Det er ikke helt et bilde, men heller ikke en video. Bevegelsen er ofte begrenset til en handling i bildet for å hjelpe deg med å fange brukerens oppmerksomhet og trekke dem inn i bildet. Uansett hva du kaller det, gjør denne trenden en innvirkning og dukker opp overalt i webdesign, som delbare gif og på sosiale medier.
Evolusjonen av trenden
Det er vanskelig å se hvor ideen til “live” bilder startet, men du kan hevde at Apple var med på å gjøre den mer populær. Selskapet introduserte fotografering som inkluderte innslag av bevegelse med iPhone 6S. Det lille ekstra gledeøyeblikket er det samme konseptet for levende bilder på nettsteder. Det er noe ekstra i et fantastisk bilde som gjør at du ser på det bare litt lenger.
Det samme konseptet med bevegelige bilder har begynt å vises flere steder. Tilsynelatende reklamefilmer på digitale reklametavler inkluderer noen som deretter blinker eller blunker på deg. Selv lineups for Sunday Night Football inkluderer hodeskudd fra spilleren som blinker etter et sekund, og viser deg at det faktisk er live action.
Hvorfor bruke denne teknikken? Det holder brukeroppmerksomheten lengre og gir et mer interessant synspunkt. Flixel, et selskap som lager filmbilder for kunder, sier at det gjennomsnittlige bevegelige bildet holder brukerne oppmerksomhet 9 sekunder, sammenlignet med 1 sekund for det gjennomsnittlige stillbildet.
Bilder eller illustrasjoner
Levende bilder eller filmavsnitt kan fungere med fotografier eller illustrasjoner. Det er ingen regel som sier at du må bruke en type bilder eller en annen. Når du ser på de to bildene over, kan du se at begge stilene kan være ganske effektive.
En annen vurdering er at bevegelse ikke trenger å fortsette å skje i en loop. Hillmann Living, over, kaster lys over produktene på hjemmesiden mens den laster. Det er den eneste bevegelsen, og da er bildet bare det, et stillbilde. Det som er fint med effekten her er at det får deg til å se direkte på stolene selskapet selger med en gang. Teknikken viser brukerne hva på siden som betyr noe og hva de skal fokusere på på en subtil og interessant måte.
Bar Z Wines tar en annen tilnærming. Den illustrerte hjemmesiden virker til å begynne med ganske ren, men et lite fly flyr gjennom midten av skjermen på en løkke. Bevegelsen hjelper brukeren til å se på viktige ord på skjermen: "Vinene våre er ufiltrerte." Brukeren vet øyeblikkelig noe om meldingene på dette nettstedet fordi de trekkes til det viktigste språket takket være bevegelse på skjermen.
Tips for suksess
Denne teknikken kan fungere på en rekke måter og for en rekke designapplikasjoner. Noen av de beste eksemplene kommer fra enkle scener eller landskap der et vakkert fotografi er utgangspunktet.
Gresset kan bevege seg i vinden eller et landskap. En person kan blinke når den blir vist frem og med stort hodeskudd. Et produkt kan vippe eller vri eller fullføre handlingen det er designet for.
Det viktigste når du tenker på denne trenden er enkelhet. Hvis det er for mye bevegelse, bør du sannsynligvis velge en video. Elementet med overraskelse er det som får det til å fungere; brukere forventer et stillbilde, men da kommer det til live.
- Hold deg til en ting, og en bruk per nettsted.
- Det må se realistisk ut.
- Bevegelse må følge fysikkens lover.
- Bevegelse skal være subtil, men merkbar.
- Ikke overdriv ved å legge til lyd eller mange klikkhandlinger.
- Vurder subtil brukerkontroll, for eksempel bevegelse som skjer med musebevegelser.
- Utvikle et bevegelig bilde som kan brukes i flere kampanjer, ikke bare nettstedet ditt.
Hvordan gjør du det?
Det er mange måter å skape denne effekten i designene dine. Metoden bestemmer virkelig på ferdighetsnivået ditt, hvordan du planlegger å bruke levende bilder og budsjett.
Noen av alternativene for å lage subtil bevegelse inkluderer:
- Lag et gif.
- Bruk et online verktøy (det er et antall tilgjengelige med varierende kostnader.
- Lag bildet som video med begrenset bevegelse.
- Bruk en app eller til og med din iPhone.
- Streng stillbilder sammen i et videoformat.
Prøv denne YouTube-opplæringen for å hjelpe deg med å planlegge og lage et levende bilde.
Et perfekt eksempel
Nettstedet for Monochrome Paris er et perfekt eksempel på denne trenden i aksjon. Hjemmesiden er et tilsynelatende enkelt bilde av en plate, men det stive elementet ser nesten smeltet ut og tar på seg bevegelsen av stoff som beveger seg i vinden. Effekten er engasjerende, iøynefallende og trekker brukere inn i designet.
Effekten er med på å skape interesse på en subtil måte. Det forestilte visuelle ser litt mer ekte ut på grunn av bevegelsen. Bla nedover siden og andre bevegelige elementer hilser brukeren, inkludert en normal visning av posten som snurres.
Dette nettstedet er en flott case study på effektive måter å bruke denne trenden. Gå over og klikk rundt for å hjelpe deg med å jogge inspirasjonen din.
Konklusjon
Uansett hva du kaller det, er levende bilder en av de trendene som sannsynligvis vil feste seg rundt. Det er en måte til å legge til animasjon til et design uten nødvendigvis å produsere en faktisk video. Den er effektiv og kan være mye rimeligere enn videoproduksjon.
Trikset med denne trenden er å sørge for at den ser intensjonell og ekte ut. Å innlemme en tullete bevegelse vil ikke nødvendigvis gi deg ønsket effekt. Gå tilbake og se virkelig på eksemplene over, gå til nettstedene og klikk rundt. Se hva den animasjonen fører deg til i designen. I hvert av eksemplene hjelper bevegelse brukeren til å komme til et bestemt element eller utføre en viss handling. Den forsettlige og rettede bruken av bevegelse er nøkkelen til effektiv design av filmtalen.
