Cinemagraphs i webbdesign

Om du läser några av de otaliga webbdesign trendrapporterna som kom ut tidigare i år, läser du sannolikt om löftet om stora, hjälmstora cinemagraphs placerade framträdande på hemsidor överallt. Så var är de?

Medan ett fåtal fashion-forward-företag använder dem på sina webbplatser har cinemagraph i stor utsträckning förskjutits för att visa upp rundartade artiklar och reddit-sidor.

Jo jag säger tillräckligt är nog. Det är dags att cinemagraphs stiger upp och tar sin ordinarie plats som webbsidan heros de var avsedda att bli.

Varför cinemagraphs fungerar

Tanken att följa en webbdesign trend bara för att det var prognostiserat aldrig verkligen upphetsad mig. Men vad händer om du verkligen kan bana en sådan trend? Och vad händer om det faktiskt hade ett syfte och löste ett problem samtidigt?

När det gäller cinemagraphs är alla ovanstående uttalanden sanna. Även om det verkligen har diskuterats, (och till och med prognostiserad som en trend i webbdesign), använder väldigt få webbplatser faktiskt dem. Som ett resultat har de inte ens kommit nära att nå en kritisk massa, så de är fortfarande fascinerande för de flesta webanvändare.

Inte riktigt ett fotografi, inte riktigt en video, cinemagraphs är inneboende snygging eftersom de lurar tittaren bara tillräckligt länge för att få dem att ta ett andra utseende. I ADD-eraen lever vi idag, allt du kan använda för att göra en paus för användaren - även för en stund - räknas som en liten vinst av en mycket viktig anledning:

Du har fått sin uppmärksamhet.

Ett särskilt effektivt sätt att locka lite uppmärksamhet på en webbplats har alltid varit video. Det mänskliga ögat älskar rörelse. Men en stor hjältevideo (även en kort) är så skrymmande . Visst kan du komprimera den inom en tum av sitt liv, men då ser det bara ut ... komprimerat. Eller du kan lämna den ensam och drabbas av konsekvenserna av en långsammare webbsida.

Men genom att använda en cinemagraph kan du spara mycket bandbredd medan du fortfarande uppfyller det rörelsebehovet. Egentligen är du uppe på ante, för att du kan dra nytta av nyheten i en filmtext. Folk ser dem inte så ofta och är imponerade när de gör det.

Så nu när du vet varför filmvärden förtjänar en plats av betydelse på webben, låt oss ta en överblick över hur man får en till liv.

Glendevon Motors använder en biograf i sitt hjälteområde för att förmedla en stämning och sticka ut som ett "premium varumärke" bland sina konkurrenter.

Alternativ 1: Använd en existerande filmtext

Det finns många fall då man köper en färdig CG, eller ens föredrar att göra egna. Jag skulle säga det om du kan hitta vad du behöver, och det är i din budget för att få rättigheterna till det, så är det vägen att gå. Den enda frågan är: var hittar du den?

Den goda nyheten är att du har alternativ. De kommer i stor utsträckning att bestämmas av din budget, (eller din kunds), men det finns många källor där ute. Det finns även några fria att välja ifrån. Om du har tjugo dollar att spendera, har Shutterstock dock ett ganska anständigt urval av high definition-CG.

(Tips: De har inte en fristående cinemagraph-sektion, så du behöver bara söka efter termen "cinemagraph" och dina andra söktermer inom avsnittet "Footage".)

Om du lyckas hitta vad du tänkte tänker du noga vill komprimera filen till viss del. Mer om det på lite.

Alternativ 2: Gör din egen

Kanske kunde du inte hitta vad du hade visat. Eller kanske är du bara en dö-hård DIY'er, och jag respekterar dig för det. Så hur exakt gör man en film från början?

Först hjälper det att ha rätt utrustning och en plan. Här är vad jag rekommenderar för att komma igång:

• En kamera som kan skjuta video
• Ett stativ
• En modell och / eller nödvändiga rekvisita
• En dator
• Tillgång till ett videoredigeringsprogram (tillval)
• Tillgång till Adobe Photoshop eller en mer dedikerad filmredigeringsprogramvara, som flixel

Det är vad du behöver för att göra en filmtext. Men för att göra det effektivt behöver du en bra idé.

Vad gör en stor hjälte Cinemagraph?

Medan det allmänna temat för din CG i stor utsträckning dikteras av webbplatsens nisch, finns det vissa universella punkter att komma ihåg när du ställer in scenen. Var säker på att:

• Håll det subtilt: Hela poängen med att använda en CG istället för en video är att det är tänkt att vara lite av ett tänkande. Några av de bästa CG-serna ser väldigt stilla ut och överraskar tittaren med en subtil rörelse. Tala om subtilitet, se till att den övergripande kompositionen inte är alltför upptagen eller starkfärgad om du lägger text och en CTA ovanpå den. Kom ihåg att CG ska spela av de här elementen, inte distrahera dem. Talar om vilka…
• Lämna utrymme för den riktiga hjälten: Se till att du vet var du vill ha din rubrik, subheader och CTA-knapp för att gå inom filmfältet. Detta kommer att påverka var du placerar huvudåtgärden i kompositionen.
• Håll det förankrat: Naturligtvis har en CG viss rörelse, men scenen övergripande måste vara väldigt still för att korrekt kontrastera rörelsen. Ett stativ bör hjälpa till med bakgrundsrörelse och kamerastabilitet. Om modellens ögon är avsedda att röra sig från sida till sida, se till att hon håller huvudet väldigt stillsamt samtidigt.
• Gör det loop-able: Eftersom du vill att filen ska vara relativt liten måste du slingra åtgärden så att den upprepas så smidigt som möjligt. Planera för detta när du ställer in scenen. Idealt sett borde den första positionen mycket nära matcha den slutliga positionen och stänga slingan.
• Använd en person om möjligt: Studier har visat att bilder med människor i dem håller människors uppmärksamhet mycket mer än de som inte gör det. Detta gäller även för CG: er. Extra poäng om du lyckas få din modell att se i riktning mot CTA. Detta har visats att dra användarens öga där också.

När du har alla dina element på plats, försök att skjuta om 20-30 sekunder av video, upprepa önskad rörelse flera gånger, med ca 5 sekunder att hålla saker helt ändå kvar däremellan. Detta borde ge dig tillräckligt med råa bilder för att bli en iögonfallande filmtext.

Sätta ihop det

Medan jag inte kommer att gå in på steg-för-steg-processen för att göra en video till en film, finns det flera alternativ tillgängliga för dig. Du kan utropa $ 299 för att använda ett eget designprogram, men du kan lägga en bra CG tillsammans använder Photoshop , (som jag gissar att du redan använder.)

Komprimera filen

Oavsett huruvida du har gjort din CG från början eller fått en befintlig, vill du se till att den laddas snabbt. Huruvida din slutliga utdatafil är ett gif eller en video (som jag rekommenderar), kommer din kompression att förlita sig på två separata faktorer:

1. Kvalitet
2. Längd

Personligen försöker jag att gå till högsta möjliga kvalitet i alla stora format hjälte image, video eller cinemagraph. Enligt min uppfattning är det synd att offra kvaliteten på alla filer som är avsedda att göra en sådan visuell inverkan. För att balansera detta, försöker jag göra min filmlina så kort som mänskligt möjligt.

Åtgärden kommer att få effekt på hur kort slingan kan vara - ett tåg som surrar kan vara mycket kortare än en långsam, avsiktlig ögonblick som kan se lite spastisk om den upprepas för snabbt. Ta ned exemplet från webbbyrån Deep End . Eftersom allt som behövs här är att en tågbil ska matcha nästa för att få en ganska sömlös slinga lyckades jag klippa ner den till ungefär en sekund.

Trots att jag lyckades hålla åtgärden extremt kortfattad visste jag fortfarande att filstorleken kunde minskas för en ännu snabbare belastning. Jag slutade använda en gratis online videokompressor som heter ClipChamp . Jag kunde komprimera videon ner från flera megabyte till en svelte 319 KB. Kom ihåg att de flesta användare kommer studsa från din webbplats efter bara tre sekunder att vänta, så det lönar sig att vara snabb.

Och om ditt slutresultat är kvar med artefakter från extrem komprimering, kan du alltid använda ett försökt och sant trick som används på ofullkomliga hjältevideoer - maskera den med en halvtransparent mönstrad överlagring .

Intresserad av att se hur andra har använt cinemagraphs som hjältebilder? Jag har några goda nyheter och dåliga - Det finns inte så många fler att visa, vilka är de dåliga nyheterna. Men den goda nyheten är att om du skulle sätta denna plan i aktion skulle du vara i förgrunden av vad som lovar att vara en ganska stor trend.

Här är ett par som jag lyckades hitta på webben:

Gilt Taste [Redaktörens anteckning: Den här sidan stängs av.]

Naturskyddsområdet

Slutgiltiga tankar

En film kan inte bara sparka ett annat tråkigt webbprojekt upp några få skåror, men det kan faktiskt också påverka dess framgång också. Om du kombinerar det med en mördarerubrik och en tvingande uppmaning, kan du verkligen ta tag i dina användares uppmärksamhet. Vad du gör med den uppmärksamheten är upp till dig.

• ← 4 Moderna Bakgrundsmöjligheter att prova
• Poll: Ska kodare lära sig att designa? →