Skrolovanje može da bude mnogo više od običnog kretanja kroz stranicu.
Kada sajt određuje tempo kojim posetilac prima sadržaj, poruka obično deluje snažnije. Upravo zato je scrollytelling odlična tehnika veb dizajna. Stvara zamah dok posetioci skroluju niz stranicu i važne informacije predstavlja na zanimljiviji način.
U nastavku saznajte kako scrollytelling izgleda i šta može da donese vašem sajtu. Pogledajte i primere iz prakse, a zatim savete kako da ovaj element dizajna primenite na pravi način.
Scrollytelling je tehnika veb dizajna koja pomoću skrolovanja otkriva priču ili složenu poruku određenim redosledom. Dok se posetilac spušta niz stranicu, tekst i multimedija zajedno ga vode od jedne ideje do druge.
Obična stranica ima sadržaj raspoređen u statične sekcije. To je sasvim u redu, ali čitaoca ne uvlači aktivno u sadržaj. Ako na stranici ima mnogo toga, posetilac ponekad ne zna na šta prvo da obrati pažnju pa se lako izgubi. Scrollytelling takve stranice pretvara u upečatljiv doživljaj, a kretanje i ritam oblikuju način na koji ljudi razumeju priču.
Ova tehnika se oslanja na vizuelne obrasce i interaktivne elemente koji ideje otkrivaju jasnim redom. Pogledajmo najčešće elemente scrollytelling dizajna.
Detaljne informacije se pretvaraju u vizuale, kao što su
Ovi prikazi se često menjaju tokom skrolovanja, pa svaka nova sekcija donosi dodatni kontekst ili ističe važnu misao. Uz slike je priču lakše pratiti, jer one prenose značenje koje sam tekst ne može uvek jasno da izrazi, naročito kada je tema složena.
Kod parallax efekta prednji plan i pozadina se pomeraju različitom brzinom ili u različitim smerovima dok korisnik skroluje. Tako nastaje utisak dubine, kao da slike iskaču sa ekrana.
Parallax najbolje funkcioniše kao suptilan dodatak. Previše pokreta odvlači pažnju i otežava pristupačnost, jer mozak mora da obradi više informacija odjednom.
Prelazi i animacije privlače pogled pokretom i povezuju sekcije, pa skrolovanje deluje kao jedna neprekinuta celina. Scrollytelling se u velikoj meri oslanja na sledeće efekte.
Ovi elementi ostaju na mestu tokom celog skrolovanja ili jednog njegovog dela, dok se ostali sadržaj kreće oko njih. Sticky dizajn možete koristiti za grafikone, prikaze proizvoda i druge važne vizuale koji treba da ostanu u kadru dok se tekst pored njih menja. Posetiocima je tako lakše da shvate kako su pojedini delovi ili koraci povezani.
Primena scrollytellinga na sajtu donosi nekoliko koristi.
Evo pet sajtova koji različitim tehnikama skrolovanja stvaraju zanimljiv doživljaj za posetioce.
Dok skrolujete kroz početnu stranicu firme Cula, koju je dizajnirala agencija Refokus, priča se otkriva deo po deo. Stranica počinje predstavljanjem šire misije kompanije, a zatim posetioca postepeno uvodi u stilizovano 3D okruženje koje kroz faze objašnjava kako funkcioniše njihov proces uklanjanja ugljenika.
Fiksirani tekst i pažljivo vođene promene scena drže tempo usporenim, a slojevito kretanje određuje ritam. Zahvaljujući tome, čitaoci jasnim redom razumeju složen tehnički proces i ne osećaju se zatrpano. Uglađene, pomalo crtane ilustracije čuvaju lagan ton i objašnjenja vezuju za prizore iz stvarnog sveta.
Početna stranica sajta Agile by Design, koju je dizajnirao Diego Toda de Oliveira, otvara se smelom tvrdnjom da agilni pristup više ne funkcioniše. To odmah privlači pažnju, a ostatak stranice gradi ubedljiv argument uz pomoć nekoliko elemenata.
Umesto da tvrdnje stoje kao odvojeni blokovi, svaka sekcija se nadovezuje na prethodnu i priča prirodno prelazi od kritike, preko objašnjenja, do ponude. Na kraju je poruka potpuno jasna, Agile by Design će vam pomoći da unapredite agilne procese rada.
Ovi saveti će vam pomoći da napravite scrollytelling stranicu koja posetioce glatko vodi kroz sajt.
Odaberite platformu na kojoj raspored i efekte skrolovanja dodajete vizuelno, pa odmah vidite kako će izgledati posetiocima. Webflow, na primer, podržava okidače vezane za skrolovanje i vremenske linije animacija. Pomoću njih lako pravite postepeno otkrivanje sadržaja, fiksirane sekcije i animirane prelaze. Pre objavljivanja možete u probnom okruženju proveriti kako se sekcije uklapaju jedna u drugu.
Isplanirajte stranicu kao priču pre nego što dodate bilo kakve složene elemente. Odlučite šta posetilac prvo treba da shvati, gde treba da raste napetost ili interesovanje i kojim redom ćete izložiti ideje da bi sve bilo jasno.
Animacije treba da budu glatke, a fajlovi lagani, kako bi se stranica brzo učitavala i ostavila željeni utisak. Vodite računa i o ljudima kojima pokreti na ekranu smetaju. Smernice W3C konzorcijuma za pristupačnost preporučuju opciju za smanjeno kretanje, kako bi sajt odgovarao svim posetiocima.
Previše pokreta i efekata čini stranicu pretrpanom i težom za razumevanje. Odmerene interakcije stvaraju ritam koji čitaocu pomaže da se usredsredi na jednu stvar u isto vreme. Zato scrollytelling tehnike dodajte tamo gde objašnjavaju važne pojmove ili određuju tempo priče, a ne samo zato što lepo izgledaju.
