Share
Al momento lo splash a schermo intero è uno dei pattern più familiari sul web. Alcuni lo adorano, altri lo odiano, ma qualunque siano i tuoi sentimenti diamo un'occhiata ad alcuni esempi degni di nota e parliamo delle migliori pratiche mentre ci siamo.
Il termine "convergenza progettuale" si riferisce al modo in cui i disegni hanno l'abitudine di diventare simili, convergente, col tempo. Recentemente @jongold ha twittato quanto segue:
quale dei due possibili siti web stai attualmente progettando? pic.twitter.com/ZD0uRGTqqm
- oro (@jongold) 2 febbraio 2016
Il punto era che ai designer mancava la creatività in questi giorni, invece di raggiungere la convenzione accettabile più vicina durante la progettazione di pagine web. Lo splash a schermo intero è un perfetto esempio di questo. Siamo, come designer, prendendo la via facile usando questo modello? Stiamo ignorando l'opportunità di spingere i confini e innovare? La rete è ancora ferma a causa della pigrizia?
Oppure, come afferma Paul Boag, siamo semplicemente parte di quella che è una scena del web design in fase di maturazione? Stiamo costruendo ciò che gli utenti vogliono; cosa si aspettano, e quindi rendere i nostri prodotti più facili da usare?
"Più un oggetto è lungo e più il suo design si standardizza" - Paul Boag
Lascerò decidere a te. Nel frattempo, diamo un'occhiata ad alcuni progetti web completi a schermo intero!
Molti siti Web a schermo intero sono precisi sulle loro dimensioni, utilizzando JavaScript o CSS per assicurarsi che la sezione iniziale sia visibile Esattamente la stessa dimensione della finestra del browser corrente. Una volta eseguita questa operazione, alcuni posizionamenti CSS possono posizionare elementi agli estremi, anche se la finestra viene ridimensionata.
Ideas è un tema WordPress a schermo intero con varie opzioni per presentazioni, introduzioni, presentazioni della home page ecc. Utilizza una sfumatura posizionata nella parte inferiore dello schermo per rendere più leggibile il titolo e la descrizione dell'immagine.
James Tupper sbircia dalla parte inferiore dello schermo posizionando il suo viso con la grafica posizione di sfondo: fondo centrale;. L'enorme splash giallo è elegantemente uguale all'altezza del viewport usando il CSS nativo altezza: 100VH;.
Ulteriori informazioni su queste due tecniche CSS:
La rivista di lifestyle Lagom, nata da un'idea di Elliot Jay e Samantha Stocks, utilizza una homepage che riempie lo schermo nella sua interezza. Nessuno scorrimento qui (se non visualizzato su un piccolo schermo). Lagom usa il bordo inferiore per ospitare i suoi collegamenti sociali.
Soul è un modello di Shopify e uno dei suoi layout è un dispositivo di scorrimento a schermo intero con collegamenti di navigazione posizionati sulla destra.
Il pericolo con l'utilizzo dello schermo intero come una forma di introduzione è che gli utenti potrebbero non rendersi conto che c'è molto altro da trovare scorrendo. La nostra home page Envato lo nega con un'icona a forma di "scroll", suggerendo di dare una sbirciata below the fold.
Blandly opta per l'incoraggiante punta di freccia rivolta verso il basso per dire "guarda qui".
La home page di Kindeo usa una tecnica che mi piace; assicurando che una piccola porzione della sezione successiva sia sempre visibile nella parte inferiore della finestra. C'è anche una freccia con "Scopri di più" in modo che l'utente non abbia mai dubbi sul fatto che ci sia qualcosa da trovare below the fold.
Kilani ha preso l'approccio piuttosto discutibile del suono autoplaying; c'è un pulsante muto in basso a destra dello schermo. Il loro modo di suggerire di scorrere ulteriormente è anche interessante: appuntare un'istruzione "Scroll Down" al cursore del mouse:
Damir Kotorić, ex progettista di UX presso Envato, ha iniziato Falcon Films come risultato della sua passione per la fotografia aerea. È ragionevole che il video abbia un ruolo importante nella home page di Falcon Films; controlla lo sfondo , quindi guarda lo showreel per il succoso filmato dei droni di Melbourne.
Ancora una volta, Damir ha usato CSS nativi altezza minima: 100vh; per creare una sezione di eroi a schermo intero.
Il paesaggio ottiene lo stesso effetto; a schermo intero, riproduzione automatica di video con showreel aggiuntivo, ma utilizza JavaScript per ottenere lo schermo intero. Il file video mp4 autoplaying è di per sé 1,3Mb, ma non c'è nient'altro che intasare la larghezza di banda.
Una cosa che non abbiamo ancora menzionato è ciò che ci offre lo schermo intero: una tela! Usare lo spazio per presentare un prodotto, un'azienda, un'idea è il punto centrale di questo schema. Rimuove il disordine del resto del contenuto e si concentra sul messaggio e sulla personalità.
L'esempio Landscape di precedenti utilizza un bellissimo blu cobalto (uno dei motivi per cui lo adoro) e Voog fa qualcosa di simile, che sembra grande.
Lo dico sempre però: questa immagine è a due tonalità, quindi è possibile ridurre il suo attuale 540Kb alle dimensioni. Qualche lieve sfocatura, quindi la riduzione della qualità JPG al 50% lo riduce a circa 50 Kb senza compromettere l'effetto.
La Bloomberg Businessweek Design Conference (stai andando?) Usa un layout tipografico astratto per esprimere il suo punto di vista. Convergenza di design? Non qui, amico.
Ho mai menzionato il progetto Envato Tuts + Translation? Forse ... Ad ogni modo, adoro la dimostrazione di questo tema dello script RTL: controlla Proland, un modello di pagina di destinazione creato da Bootstrap con diverse opzioni di layout a schermo intero.
La home page a schermo intero è uno schema che probabilmente non vedremo scomparire presto. E perché dovrebbe? È un modo efficace per introdurre gli utenti a siti Web di tutti i tipi. Quali sono alcuni dei tuoi preferiti? In quale altro luogo hai visto questo modello usato, nel bene o nel male? Fateci sapere nei commenti!
Accentsconagua