Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)
Fullscreen splash je trenutno jedan od najpoznatijih obrazaca na webu. Neki ga vole, neki preziru, ali neovisno o tome, pogledajmo neke primjere koje vrijedi spomenuti i, kad smo već ovdje, porazgovarajmo o najboljim praksama.
Napomena o Konvergentnom Dizajnu
Pojam 'konvergencija dizajna' odnosi se na način na koji dizajni tijekom vremena imaju naviku postati slični, konvergentni. Nedavno je @jongold objavio sljedeći tweet:
koju od dvije moguće web stranice trenutno dizajnirate? pic.twitter.com/ZD0uRGTqqm
— gold (@jongold) 2. Veljače, 2016
Njegova je tvrdnja bila da dizajnerima nedostaje kreativnosti ovih dana, umjesto da dostižu najbližu prihvatljivu konvenciju prilikom oblikovanja web stranica. Zahvaćanje na cijelom zaslonu savršen je primjer toga. Jesmo li, kao dizajneri, odabrali jednostavan način koristeći ovaj obrazac? Zanemaruju li se prilike za preusmjeravanje granica i inovacije? Stoji li web na istom mjestu zbog lijenosti?
Ili, kako kaže Paul Boag, jesmo li samo dio onoga što razvija web dizajn scenu? Gradimo li ono što korisnici žele; što oni očekuju i time olakšavamo korištenje naših proizvoda?
"Što dulje je objekt u upotrebi, to se više njegov dizajn standardizira" - Paul Boag
Tu odluku ću prepustiti Vama. U međuvremenu, pogledajmo neke full-on-full screen web-dizajne!
Od vrha do dna, s lijeva na desno
Mnoge web stranice na cijelom zaslonu precizne su u svojim dimenzijama, koristeći JavaScript ili CSS kako bi se osiguralo da je početni vidljivi dio točno jednake veličine kao trenutni prozor preglednika. Kada je to izvršeno, malo CSS pozicioniranja može staviti elemente na krajnosti, čak i ako je prozor smanjen.
Makeshift koristi ovaj uzorak da zadrži sekundarnu navigaciju na dnu zaslona da stavi sekundarnu navigaciju na dno zaslona, s nekim prethodnim/sljedećim brojem veza lijevo i desno. Pozadinska slika koristi background-size: cover; na masivnom figure elementu.
Ideas je full screen WordPress tema s raznim mogućnostima za slideshow prikaze, intro, prezentacije na početnoj stranici itd. Koristi gradijent postavljen na dnu zaslona kako bi naslov i opis slike bili čitljiviji.
James Tupper viri s dna zaslona sa grafikom njegova lica pozicioniranom sa background-position: center bottom;. Ogromna žuta površina elegantno je smještena u visini prikaza koristeći izvorni CSS height: 100vh;.
Naučite više o ove dvije CSS tehnike:
Lifestyle časopis Lagom, zamisao Elliot Jaya i Samanthe Stocks, koristi početnu stranicu koja ispunjava zaslon u cijelosti. Ovdje nema pomicanja (osim ako se gleda na malom zaslonu). Lagom koristi donji rub za poveznice na društvene mreže.
Soul je Shopify predložak, a jedan od njegovih izgleda je slajder na cijelom zaslonu s navigacijskim poveznicama smještenima s desne strane.
Molim Vas, Nastavite Skrolati ↓
Opasnost kod korištenja cijelog zaslona kao oblika uvoda je da korisnici možda ne shvaćaju da ih se može pronaći pomicanjem. Naša vlastita Envato početna stranica to negira sa "scroll" ikonom, što sugerira da biste trebali zaviriti ispod.
Blandly se odlučio za ohrabrujuću strelicu okrenutu prema dolje kako bi vam rekli 'pogledajte dolje'.
Početna stranica Kindeo koristi tehniku koja mi se sviđa; osiguravajući da se na dnu okna uvijek vidi mali dio sljedećeg odjeljka. Tu je i strelica 'Saznajte više' pa korisnik nikada ne sumnja da postoji nešto što se nalazi ispod donjeg dijela.
Kilani je prihvatio prilično dubiozan pristup automatski pokrenutog zvuka; u donjem desnom kutu zaslona nalazi se gumb za isključivanje zvuka. Zanimljiv je i njihov način na koji je predloženo da nastavite skrolati: dodana 'Scroll Down' uputa na kursoru miša:
Video
Damir Kotorić, bivši UX dizajner u Envatu, započeo je Falcon Films kao rezultat svoje strasti prema zračnoj fotografiji. Razumljivo je da videozapis igra veliku ulogu na Falcon Films početnoj stranici; Pogledajte video u pozadini <video>, zatim pogledajte showreel za sočne Melbourne dron snimke.
Opet, Damir je koristio izvorni CSS min-height: 100vh; da kreira full screen hero odjeljak.
Landscape postiže uglavnom isti efekt; puni zaslon, automatsko pokretanje videa uz dodatni showreel, ali koristi JavaScript za puni zaslon. mp4 video datoteka koja se automatski reproducira sama ima 1.3Mb, ali nema ničeg drugog što će vam opteretiti bandwith.
Stil
Jedna stvar koju još nismo spomenuli je ono što nam full-screen može omogućiti: platno! Koristeći prostor da prezentira proizvod, tvrtku, ideju, je cijeli smisao ovog uzorka. Uklanja nered ostatka sadržaja i usredotočuje se na poruku i osobnost.
Prethodno navedeni primjer Landscape koristi prekrasnu kobaltno plavu (jedan od razloga zašto mi se sviđa) a Voog čini nešto slično, što izgleda odlično.
Uvijek to kažem - ova slika je dvotonska, tako da može trenutnih 540Kb lako sasjeći u manju veličinu. Nešto blagog zamućenja, a zatim smanjenje JPG kvalitete na 50% smanjuje ga na oko 50 Kb bez da ikakvog ugrožavanja učinka.
Bloomberg Businessweek Design Conference (idete li?) koristi apstraktan tipografski izgled. Konvergentni dizajn? Ne ovdje, prijatelju.
Jesam li ikada spomenuo Envato Tuts+ Translation Project? Moguće... Uglavnom, obožavam ovu demonstraciju RTL skripte - pogledajte Proland, Bootstrap predložak za lansirnu stranicu s nekoliko opcija full-screen izgleda.
Je li Vam Ovo Bilo Dovoljno?
Full-screen početna stranica je uzorak koji najvjerojatnije neće nestati u skorije vrijeme. A i zašto bi? To je učinkovit način da se korisnicima predstave web stranice svih vrsta. Koji su vaši favoriti? Gdje ste još vidjeli upotrijebljen ovaj uzorak, bolje ili lošije? Javite nam u komentarima!
