Descoperiți cum să spuneți o poveste convingătoare și dinamică folosind întreaga putere a designului web pentru povestirea interactivă în website-ul dvs..
Povestirea interactivă transformă o poveste lungă într-o experiență unică. Conținutul audio și vizual adaugă un sens profund, comunicând ceea ce nu poate fi surprins doar în cuvinte. Povestirea interactivă prezintă detaliile unei povești într-un mod captivant pentru a-i face pe oameni să citească. Folosește tehnicile utilizate în crearea paginilor web pentru a spune povești convingătoare.
Povestirea interactivă: când vrei să spui o poveste bogată în detalii
Povestirea interactivă este potrivită pentru o poveste cu o cronologie distinctă. Pe măsură ce evenimentele se desfășoară, puteți folosi designul pentru a da viață acesteia. Povestirea interactivă poate fi gândit ca o poveste vizuală care te agață de narațiunea ei. Împrumutul elementelor de design face ca detaliile să vă determine să derulați în continuare.
Mai jos veți regăsii câteva exemple care utilizează povestirea interactivă în website-ul lor
1. Snowfall: Avalanșa de la tunelul Creek
Snowfall: Avalanșa de la tunelul Creek este o capodoperă de poveste. Este istorisirea îngrozitoare a unei avalanșe din Washington în anul 2012. Fiecare parte a acestei povești are propria pagină individuală, împărțită în blocuri ușor de gestionat.
Este o lectură convingătoare, cu mijloace audio și vizuale, pentru a oferi o imagine a ceea ce s-a întâmplat. Putem citi poveștile celor implicați dar și despre terenul și condițiile meteorologice care au dus la această avalanșă.
Este o abordare multimedia a povestirii care dezvăluie ce a mers prost și ceea ce îi împinge pe cei care caută senzații tari să treacă pe acolo, în ciuda pericolelor.
2.Huffposts: Highline
Cu toți am făcut glume despre mileniali. Pâine prăjită cu avocado, Coachella și cuvântul „literal” toate fac să fie luați în râs. Dar această generație se confruntă de fapt cu provocări grele. Povestită chiar de un milenar, povestea îmbină umorul cu informații concrete despre luptele financiare cu care se confruntă. Există mult umor combinat cu realitățile serioase ale acestei generații.
Povestea este spusă cu ajutorul animațiilor nostalgice ale jocurilor video, ale graficelor pixelate și a altor imagini ciudate. Captează sensibilitățile ciudate ale mileniilor, rămânând în același timp accesibil celor năuciți de memele lui SpongeBob SquarePants.
Nu se poate să nu aveți mai multă compasiune pentru mileniali după ce citiți acest eseu. Este un bun exemplu de utilizare a unui design web inteligent și interesant pentru a intra în legătură cu un public mai larg.
3. UTC
Pentru majoritatea dintre noi, subiectul codurilor temporale universale (UTC) nu este un subiect deosebit de convingător. Dar Zach Holman a creat un site web care explică modul în care funcționează și complexitatea programării cu ei.
Există schimbări plăcute în videoclipurile de fundal de culoare și monocromatice care descompun conținutul. Ciocnirea fascinantă a culorilor vă va atrage atenția și vă va face să vă întrebați ce imagini uluitoare vor urma.
Oricine a citit orice fel de bucată de programare tehnică a fost probabil adormit. Acest eseu demonstrează că creativitatea și povestirea grozavă pot aduce la viață chiar și cele mai uscate subiecte. Pentru cei care nu sunt interesați de programare, informația la timp este o lectură fascinantă.
4. Time in Perspective
Povestirea interactivă este mijlocul perfect pentru a spune o poveste liniară. Și ce este mai liniar decât mersul timpului? De la 24 de ore până la sfârșitul universului, derularea animațiilor declanșate în Time in Perspective extinde cronologia, dezvăluie reperele și arată cum fiecare eră se încadrează în istorie. Acesta este un exemplu grozav de utilizare a designului web pentru mai mult decât marketing. Designul este un instrument puternic de educare în moduri inovatoare.
5. If the moon were only 1 pixel
If the moon were only 1 pixel, este un sul orizontal care te aruncă prin imensitatea universului. Josh Worth a făcut site-ul după ce s-a străduit să-i explice fiicei sale cât va dura până ajunge pe Marte, întrebându-se dacă ar putea folosi un ecran de computer pentru a mapa spațiul. Site-ul face o treabă frumoasă de a se concentra asupra golului spațiului, ajutându-ne să înțelegem cât de extins este universul nostru. Josh a folosit un singur pixel pentru a reprezenta luna și arăta totul în legătură cu ea.
Acest proiect este un alt exemplu genial al modului în care un design bun poate face învățarea captivantă.
6. The Islamic State Track
Sunt atât de multe știri care ne vin în cale. Și cu această masă de informații, poate fi greu să rămâneți la curent. The Islamic State Tracker de la Washington Post arată istoria și evoluțiile actuale ale Statului Islamic.
Partea dreaptă a ecranului derulează printr-o cronologie de povești, în timp ce o hartă din partea stângă a ecranului evidențiază locul unde s-au întâmplat. Făcând clic pe punctele de pe hartă, vă aduceți la povestea specifică a acelei locații.
7. Ali Wong Structura stand-up comedy
Mark Twain ar fi spus în mod celebru: „A explica umorul este foarte asemănător cu disecția unei broaște, înveți multe în acest proces, dar în cele din urmă îl ucizi.” Dar, din păcate, pentru bătrânul Samuel Clemens, el nu a apucat să vadă era digitală.
Am vorbit mai devreme despre modul în care povestirea interactivă poate fi folosit pentru poveștile care au o cronologie puternică.
Ali Wong Structure of Stand-Up Comedy este o analiză a comediei speciale a lui Ali Wong.. Se analizează clipă de clipă, glumă cu glumă, pentru a arăta unde sunt cele mai mari râsete. Este un studiu fascinant despre modul în care sincronizarea și configurația sunt cheia pentru a obține replici eficiente și ne oferă o perspectivă asupra a ceea ce o face pe Ali Wong un scriitor și interpret atât de strălucit.
Instrumente pentru povestirea interactivă
Am văzut cum povestirea interactivă poate fi folosită pentru a spune diferite tipuri de povești. Pentru a vă ajuta să începeți să folosiți povestirea interactivă, am adunat câteva instrumente utile.
Mișcarea parallax pe scroll
Elementele care se mișcă la viteze diferite pe măsură ce cineva derulează este o modalitate de a crea iluzia de adâncime. Parallax este un efect simplu pentru a crea dimensionalitate și mișcare în povestea dvs., determinând oamenii să continue să privească.
Indicatorul de progres
Folosirea unei bare de progres declanșată de derularea în design este o modalitate de a arăta oamenilor unde se află. Această bară de progres albastră rămâne ancorată în partea de sus a paginii cu o animație liniară care se întinde de la 0 la 100% din aspect. Acesta adaugă mișcare designului și ca navigarea să fie ușoară.
Apariția elementelor în timpul derulării
Când un design are prea mult conținut static, poate fi obositor de citit. În povestirea interactivă, unde sunt spuse povești lungi, animațiile oferă o pauză plăcută de la text și fotografii. Efectul poate fi aplicat textului sau imaginilor.
Mișcare orizontală pe scroll
Dacă aveți un element de design care este inactiv pe pagină, cum ar fi un titlu, de ce să nu îl animați? Mișcarea orizontală pe scroll oferă un aspect vizual interactiv povestirii. Luați exemplul de mai sus din tutorialul nostru. Mișcarea orizontală semnalează începutul poveștii și face ca „Let’s Go Outside” să aibă un aspect interesant.
Defilarea orizontală
Defilarea orizontală poate fi o schimbare plăcută. Atrage atenția asupra conținutului dvs. și se eliberează de un aspect vertical tipic. Aceasta reprezintă o altă modalitate de a menține oamenii activi și implicați pe site-ul dvs.
Proud and Torn, un site web despre istoria Ungariei folosește derularea orizontală pentru a evidenția diferitele epoci pe care le acoperă.
Poziția Sticky
Poziția sticky preia un element și îl poziționează într-un design temporar, atrăgând atenția asupra acestuia. Suntem fani ai tutorialelor care descompun un proces într-un mod ușor de înțeles. Și totul se face prin povestirea interactivă.
După un pic de derulare, bara laterală ia o poziție stabilită. O puteți folosi pentru a menține aceeași poziție până la alte părți din poveste sau din site-ul web.
Designul web vă permite să folosiți povestirea interactivă în povestire
Web-ul a transformat povestirea. Povestirea interactivă este o experiență multimedia, care provoacă o gândire și o înțelegere mai profundă. Iluminează ceea ce nu poate fi comunicat numai prin cuvinte și face cititorul un participant activ la poveste.
Dacă v-a fost util acest ghid vă invităm să vedeți și restul articolelor postate pe blogul nostru.
Pingback: 5 mari predicții de desgin web pentru 2022 - Wizard Web Design