Share
De splash op het volledige scherm is momenteel een van de bekendste patronen op internet. Sommigen zijn er dol op, sommigen verafschuwen het, maar wat je gevoelens ook mogen zijn, laten we eens kijken naar enkele opmerkelijke voorbeelden en praten over de beste werkwijzen terwijl we bezig zijn.
De term 'ontwerpconvergentie' verwijst naar de manier waarop ontwerpen de gewoonte hebben om soortgelijk te worden, convergerende, na een tijdje. Onlangs twitterde @jongold het volgende:
welke van de twee mogelijke websites ben je momenteel aan het ontwerpen? pic.twitter.com/ZD0uRGTqqm
- goud (@jongold) 2 februari 2016
Zijn punt was dat ontwerpers tegenwoordig niet creatief zijn, maar in plaats daarvan naar de dichtstbijzijnde acceptabele conventie zoeken bij het ontwerpen van webpagina's. De splash op het volledige scherm is daar een perfect voorbeeld van. Gebruiken we, als ontwerpers, de gemakkelijke route door dit patroon te gebruiken? Gaan we voorbij aan de mogelijkheid om grenzen te verleggen en te innoveren? Staat het web stil vanwege luiheid?
Of, zoals Paul Boag zegt, maken we slechts deel uit van een volwassen webdesign-scene? Zijn we aan het bouwen wat gebruikers willen; wat ze verwachten, en daardoor onze producten gebruiksvriendelijker maken?
"Hoe langer een object rond is, hoe meer het ontwerp standaardiseert" - Paul Boag
Ik laat het aan jou om te beslissen. Laten we ondertussen eens kijken naar enkele full-on-schermvullende webontwerpen!
Veel full-screen websites zijn nauwkeurig over hun afmetingen, met behulp van JavaScript of CSS om ervoor te zorgen dat de eerste zichtbare sectie is precies dezelfde grootte als het huidige browservenster. Als dit eenmaal is gebeurd, kan een CSS-positie elementen tot het uiterste plaatsen, zelfs als het formaat van het venster wordt gewijzigd.
Ideeën is een WordPress-thema op volledig scherm met verschillende opties voor diavoorstellingen, intro's, startpaginapresentaties, enz. Het maakt gebruik van een verloop onderaan het scherm om de titel en beschrijving van de afbeelding leesbaarder te maken.
James Tupper gluurt omhoog vanaf de onderkant van het scherm door zijn gezicht grafisch te laten plaatsen achtergrondpositie: midden onder;. De enorme gele plons is op elegante wijze gelijk gemaakt aan de hoogte van de viewport met behulp van native CSS Hoogte: 100vh;.
Meer informatie over deze twee CSS-technieken:
Leefstijlmagazine Lagom, geesteskind van Elliot Jay en Samantha Stocks, gebruikt een startpagina die het scherm in zijn geheel vult. Geen scrollen hier (tenzij bekeken op een klein scherm). Lagom gebruikt de onderkant om zijn sociale links te huisvesten.
Soul is een Shopify-sjabloon en een van de lay-outs is een schuifregelaar op volledig scherm met rechts geplaatste navigatielinks.
Het gevaar bij het gebruik van het volledige scherm als een vorm van introductie is dat gebruikers zich misschien niet realiseren dat er meer te vinden is door te scrollen. Onze eigen Envato-startpagina ontkent dit met een "scroll" -pictogram, wat suggereert dat je een kijkje onder de vouw moet nemen.
Kies Blandly voor de bemoedigende naar beneden wijzende pijlpunt om te zeggen "kijk hier beneden".
De startpagina van Kindeo maakt gebruik van een techniek die ik leuk vind; ervoor zorgen dat een klein deel van het volgende gedeelte altijd zichtbaar is onderaan het kijkvenster. Er is ook een pijl met "Meer informatie", zodat de gebruiker nooit twijfelt of er onder de vouw iets te vinden is.
Kilani heeft de nogal dubieuze benadering van het geluid van autoplaying genomen; onder aan het scherm bevindt zich een knop voor dempen. Hun manier om te suggereren dat je verder scrolt is ook interessant - een instructie "naar beneden scrollen" naar de muiscursor vastzetten:
Damir Kotorić, voormalig UX-ontwerper bij Envato, begon Falcon Films als resultaat van zijn passie voor luchtfotografie. Het is alleen maar redelijk dat video een grote rol speelt op de startpagina van Falcon Films; bekijk de achtergrond , Bekijk dan de showreel voor sappige Melbourne drone footage.
Nogmaals, Damir heeft native CSS gebruikt min-hoogte: 100vh; om een hero-sectie op volledig scherm te maken.
Landschap bereikt vrijwel hetzelfde effect; een volledig scherm, autoplaying video met extra showreel, maar gebruikt JavaScript om het volledige scherm te krijgen. Het autoplaying mp4-videobestand zelf is 1,3 Mb, maar er is niets anders om je bandbreedte te verstoppen.
Een ding dat we nog niet hebben genoemd, is wat volledig scherm ons biedt: een canvas! Het gebruik van de ruimte om een product te presenteren, een bedrijf, een idee, is het hele punt van dit patroon. Het verwijdert de rommel van de rest van de inhoud en richt zich op boodschap en persoonlijkheid.
Het Landscape-voorbeeld van vroeger gebruikt een prachtige kobaltblauw (een van de redenen waarom ik er van houd) en Voog doet iets soortgelijks, wat lijkt Super goed.
Ik zeg het altijd - dit beeld is duotoon, dus de huidige 540Kb kan eenvoudig op maat worden gesneden. Enige lichte vervaging, en vervolgens de JPG-kwaliteit tot 50% verminderen, brengt het terug tot ongeveer 50Kb zonder het effect te compromitteren.
De Bloomberg Businessweek Design Conference (ga je?) Gebruikt een abstracte typografische lay-out om zijn punt te maken. Ontwerpconvergentie? Niet hier, maat.
Heb ik ooit het Envato Tuts + Vertaalproject genoemd? Misschien ... Hoe dan ook, ik ben dol op de demonstratie van dit thema van RTL-script - bekijk Proland, een door Bootstrap gemaakte sjabloon voor bestemmingspagina's met verschillende opties voor een volledig scherm.
De startpagina van het volledige scherm is een patroon waarvan we niet snel zullen zien dat het verdwijnt. En waarom zou het? Het is een effectieve manier om gebruikers kennis te laten maken met allerlei soorten websites. Wat zijn enkele van je favorieten? Waar heb je dit patroon nog meer gezien, voor beter of slechter? Laat het ons weten in de comments!
Accentsconagua