Share
Hele skjermen er et av de mest kjente mønstrene på nettet for øyeblikket. Noen elsker det, det er noe, men uansett dine følelser, la oss ta en titt på noen bemerkelsesverdige eksempler og snakke om beste praksis mens vi er på det.
Begrepet "konvergens" refererer til måten designene har en vane med å bli lik, konvergerende, over tid. Nylig @ jongold tweeted følgende:
hvilken av de to mulige nettstedene er du i ferd med å designe? pic.twitter.com/ZD0uRGTqqm
- gull (@ jongold) 2. februar 2016
Hans poeng var at designere mangler kreativitet i disse dager, i stedet når de nærmeste akseptable konvensjonen når du designer websider. Hele skjermen er et perfekt eksempel på dette. Er vi som designere den enkle ruten ved å bruke dette mønsteret? Vi ignorerer muligheten til å presse grenser og innovere? Er nettet stående stille på grunn av latskap?
Eller, som Paul Boag sier, er vi bare en del av det som er en moden webdesignscene? Bygger vi hva brukerne vil ha; hva de forventer, og dermed gjøre produktene enklere å bruke?
"Jo lenger en gjenstand er rundt jo mer dens design standardiserer" - Paul Boag
Jeg lar deg bestemme. I mellomtiden, la oss ta en titt på noen full-on fullskjerm webdesign!
Mange nettsider på fullskjerm er nøyaktige om deres dimensjoner, ved hjelp av JavaScript eller CSS for å sikre at den første synlige delen er nøyaktig samme størrelse som det nåværende nettleservinduet. Når dette er gjort, kan noen CSS-posisjonering plassere elementer i ytterpunktene, selv om vinduet er endret.
Ideer er et fullskjerm WordPress-tema med ulike alternativer for lysbildefremvisninger, intro, startsidepresentasjoner etc. Det bruker en gradient plassert nederst på skjermen for å gjøre bildetittel og beskrivelse mer lesbar.
James Tupper kikker opp fra bunnen av skjermen ved å ha ansiktet grafisk plassert med bakgrunnsposisjon: midtbunn;. Den store gule splashen er elegant gjort lik visningsporten ved hjelp av innfødt CSS høyde: 100vh;.
Lær mer om disse to CSS-teknikkene:
Livsstilmagasinet Lagom, brainchild av Elliot Jay og Samantha Stocks, bruker en hjemmeside som fyller skjermen i sin helhet. Ingen rulling her (med mindre det vises på en liten skjerm). Lagom bruker den nederste kanten til å huse sine sosiale lenker.
Soul er en Shopify-mal, og en av dens layout er en fullskjerm-glidebryter med navigasjons koblinger plassert til høyre.
Faren ved å bruke hele skjermen som en introduksjonsform er at brukerne kanskje ikke skjønner at det er mer å finne ved å bla. Vår egen Envato hjemmeside ignorerer dette med et "scroll" ikon, noe som tyder på at du bør ta en titt under folden.
Blandt velger den oppmuntrende nedadgående pekepinnen til å si "se ned her".
Kindeo-hjemmesiden bruker en teknikk jeg liker; sørge for at et lite stykke av neste del alltid er synlig nederst på visningsporten. Det er også en pil med "Finn ut mer", slik at brukeren aldri er i tvil om at det er noe å finne under folden.
Kilani har tatt den ganske tvilsomme tilnærmingen til autoplaying lyd; Det er en dempet knapp nederst til høyre på skjermen. Deres måte å foreslå deg å rulle videre er også interessant å peke på en "Scroll Down" instruksjon til musemarkøren:
Damir Kotorić, tidligere UX-designer hos Envato, begynte Falcon Films som et resultat av hans lidenskap for luftfotografering. Det er bare rimelig at videoen spiller en stor rolle i Falcon Films hjemmeside; sjekk ut bakgrunnen , så se showreel for saftig Melbourne drone footage.
Igjen har Damir brukt innfødt CSS Min høyde: 100vh; å opprette en helskjermseksjon.
Landskap oppnår mye den samme effekten; en full skjerm, autoplaying video med ekstra showreel, men bruker JavaScript for å få full skjerm. Autoplaying mp4-videofilen selv er 1,3 MB, men det er ingenting annet å tette opp båndbredden din.
En ting vi ikke har nevnt ennå, er hva fullskjerm gir oss: et lerret! Å bruke plassen til å presentere et produkt, et selskap, en ide, er hele poenget med dette mønsteret. Det fjerner rotet av resten av innholdet og fokuserer på melding og personlighet.
Landskapseksemplet fra tidligere bruker en vakker koboltblå (en av grunnene til at jeg elsker det) og Voog gjør noe lignende, som ser ut flott.
Jeg sier det alltid, men dette bildet er duotone, så det kan nå sin nåværende 540Kb, enkelt hakket ned til størrelse. Enkelte uskarphet, og deretter reduserer JPG-kvalitet til 50%, bringer den ned til rundt 50Kb uten å kompromittere effekten i det hele tatt.
Bloomberg Businessweek Design Conference (går du?) Bruker et abstrakt typografisk layout for å gjøre sitt poeng. Design konvergens? Ikke her, kompis.
Har jeg noen gang nevnt Envato Tuts + Oversettelsesprosjektet? Muligens ... Uansett, jeg elsker dette temaets demonstrasjon av RTL-skript-sjekk ut Proland, en Bootstrap-bygget landingssidemal med flere fulle skjermoppsettalternativer.
Hjemmesiden på hele skjermen er et mønster vi ikke sannsynligvis vil se forsvinne helst snart. Og hvorfor skal det? Det er en effektiv måte å introdusere brukere på på alle nettsteder. Hva er noen av dine favoritter? Hvor ellers har du sett dette mønsteret brukt, for bedre eller verre? Gi oss beskjed i kommentarene!
Accentsconagua