Progettazione di sfondi per siti Web

Una volta la parte più importante di qualsiasi progettazione di siti Web, lo sfondo di un sito può essere utilizzato in molti modi per contribuire a creare un'esperienza utente migliore.

Oggi, creare sfondi correttamente è più difficile di una volta e presenta alcune nuove sfide, limitando al contempo alcune delle potenzialità che gli sfondi avrebbero altrimenti.

Ad esempio, lo sfondo in epoche precedenti potrebbe effettivamente essere utilizzato come parte pratica del progetto. Potresti inserire delle frecce, ad esempio, per indirizzare l'attenzione dello spettatore su qualcosa di importante.

Perché le cose sono cambiate è dovuto alla necessità di un design reattivo e alla diversità delle diverse dimensioni dello schermo e dei tipi di schermo che le persone potrebbero utilizzare.

Di conseguenza, lo sfondo è diventato un elemento meno importante nella progettazione del sito oggi, e molti siti non hanno affatto un background ufficiale.

Gli sfondi sono davvero importanti? Per scoprirlo, abbiamo ispezionato i migliori siti web classificati 30 (escludendo le ripetizioni) ed i risultati sono molto interessanti.

Come puoi vedere dall'immagine qui sopra, i siti web migliori non si preoccupano affatto degli sfondi, e non sembra aver fatto loro il minimo danno per quanto riguarda l'accettazione da parte dell'utente.

Ciò sfugge al pensiero convenzionale riguardante il design del sito web, ma è difficile discutere con fatti freddi e duri. Sorprendentemente, il primo sito Web nell'elenco con uno sfondo non entra in gioco fino a quando non si raggiunge il numero 10, che è Twitter, e tale sfondo è visibile solo se non si è connessi.

Nei migliori siti Web 30 per 2017, gli unici siti con sfondi appropriati erano:

  • Twitter, con uno sfondo fotografico (classificato 10th)
  • Live (Outlook), con uno sfondo a tinta unita (12th classificato)
  • NetFlix, con uno sfondo di collage (classificato 21st)
  • WordPress, con uno sfondo a tinta unita (classificato 26th)
  • Bing, con uno sfondo fotografico (classificato 29th)
  • Tumblr, con uno sfondo fotografico (classificato 30th)

Quindi solo la percentuale 20 dei migliori siti Web 30 aveva uno sfondo e quelli che facevano erano in fondo alla lista.

L'unico vantaggio di uno sfondo del sito è che aiuta a mantenere un senso di identità del sito su più pagine, ma dal momento che ci sono altri elementi che possono raggiungere questo obiettivo altrettanto bene e forse meglio, questo non è davvero un grande vantaggio.

Gli svantaggi sono numerosi. Gli sfondi introducono ulteriori sfide quando si tratta di reattività del sito e possono richiedere aggiornamenti frequenti per evitare di diventare obsoleti.

Un'altra sfida per il designer moderno è che oltre agli sfondi statici, è ora possibile creare sfondi video. Se si opta per quest'ultimo, è fondamentale sapere cosa si sta facendo, perché molti utenti troveranno uno sfondo video mal concepito per essere noiosi.

Con così tanti motivi per non utilizzare gli sfondi, potresti decidere di seguire le orme di quei siti Web di prima qualità e abbandonare l'intera idea di fondo una volta per tutte. Ma se il brief insiste sul fatto che il sito deve avere uno sfondo, cosa puoi fare? Questo è ciò che tenteremo di risolvere nel resto di questo articolo.

Gli sfondi dovrebbero essere contenuti

Il contenuto deve essere sempre su un livello sopra lo sfondo della pagina. Se non separi gli elementi della pagina in livelli diversi, può creare problemi quando è necessario modificare qualcosa.

È buona pratica impiegare questa separazione di strati il ​​più possibile. Ad esempio, il logo del sito deve davvero essere incorporato direttamente sullo sfondo? Molto spesso sarebbe più sensato avere il logo in un livello separato. In questo modo se il logo deve essere aggiornato, può essere aggiornato indipendentemente dall'intero background.

L'utilizzo dei livelli in questo modo significa più lavoro per te dal lato della creazione delle cose, ma meno lavoro da parte della manutenzione. Ti dà anche il massimo controllo, in quanto puoi nascondere le cose, spostarle o comportarsi diversamente in base alle tue esigenze in qualsiasi momento.

Questa immagine mostra la struttura ideale per un modello di progettazione dello sfondo:

All'interno di ogni livello (eccetto il livello base) vi è lo scopo di creare livelli aggiuntivi per gradi di separazione ancora maggiori se necessario.

Più gradi di separazione crei, maggiore è il controllo che puoi ottenere. Potresti sentirti come se non fosse importante per la tua destra ora, ma spesso accade che diventi un fattore più tardi.

L'unica cosa più importante da capire è che lo "sfondo" è tutto ciò che non è contenuto. Quindi il testo o le immagini che devono essere sulla pagina ma non come contano i contenuti come parte dello sfondo, ma non tutti le classificheranno in questo modo.

Framing

Nei primi giorni del web design, la creazione di cornici era semplicemente una questione di capire dove il contenuto dovrebbe essere in relazione con lo sfondo. In questo giorno di progettazione reattiva, tuttavia, è in genere più complicato di così.

Con la progettazione reattiva, hai solo due scelte per affrontare il problema del framing. La prima opzione consiste nel ridimensionare il contenuto e l'immagine di sfondo in relazione alle dimensioni dello schermo disponibili. Questo è ottimale quando l'integrità del design è il fattore più importante, anche se questa sarà una situazione abbastanza rara.

La seconda opzione è quella di eliminare gradualmente sezioni dello sfondo, o persino l'intero sfondo, nella situazione più comune in cui la leggibilità del contenuto è più importante dell'integrità del design.

Questo problema di "integrità del design", tra l'altro, significa semplicemente che il design sembra sempre lo stesso, indipendentemente dal tipo di schermo su cui è visualizzato. L'opposto è dove il contenuto appare sempre (più o meno) lo stesso indipendentemente dal tipo di schermo su cui è visualizzato.

Utilizzo del ridimensionamento per la reattività

Quando si utilizza il ridimensionamento per mantenere l'inquadratura uniforme tra diversi tipi di dispositivi e orientamento, mantiene l'integrità del design, ma il risultato potrebbe non essere sempre quello che ci si aspetterebbe o addirittura desidererebbe, soprattutto se si utilizza uno sfondo fotografico.

Esaminiamo un esempio di questa tecnica in azione. A partire dal Samsung Galaxy S5 in modalità verticale (nota che queste immagini sono ridimensionate per adattarsi all'articolo, quindi il testo che puoi vedere è effettivamente leggibile sul dispositivo stesso).

Ecco come appare in modalità orizzontale (è quasi sempre meglio tenere un telefono con orientamento orizzontale per tutto tranne che per effettuare chiamate telefoniche, ma le persone continuano a insistere nel mantenere il telefono in posizione verticale.

Come puoi vedere, il layout è perfettamente a posto quando viene ridimensionato, anche quando hai solo 640 x 360 pixel con cui lavorare. Avanti abbiamo l'iPad in orientamento verticale.

E il paesaggio.

La cosa che noterai quando viene usato il ridimensionamento è che c'è poca variazione tra i diversi dispositivi e risoluzioni, tranne che ci può essere molto spazio sprecato nella vista verticale.

In effetti sarebbe meglio usare diversi metodi sullo sfondo e sulle porzioni di contenuto, in modo che le voci di menu vadano a capo in una griglia 2 × 2 invece di rimanere sempre nel layout 1 × 4, ma la ragione per cui non viene eseguita in questo modo è perché è impossibile prevedere la quantità di spazio verticale disponibile.

Quindi il vantaggio del ridimensionamento è quando si vuole assicurarsi che qualche componente rimanga sempre in vista, indipendentemente dalle circostanze.

Usando il rivestimento a fasi e rivelare la reattività

Uno scenario più pratico, e quello che la maggior parte dei designer vorrebbe usare la maggior parte del tempo, è un progetto in cui lo sfondo (o parte di esso) può essere semplicemente eliminato se non c'è abbastanza spazio per mostrarlo, quindi il contenuto del sito è sempre ottiene la massima attenzione

Ecco un esempio della differenza quando si utilizza questo metodo. Useremo gli stessi dispositivi e gli stessi orientamenti per illustrare. Il primo è il ritratto Samsung Galaxy S5.

Paesaggio Samsung Galaxy S5.

ritratto iPad.

iPad Landscape.

Qui puoi vedere una notevole differenza tra i dispositivi. Il piccolo schermo del Samsung Galaxy S5 non consente la visualizzazione dello sfondo, indipendentemente dal fatto che il dispositivo sia tenuto in verticale o in orizzontale, e ciò che viene mostrato viene regolato per adattarsi allo spazio disponibile.

Quando lo stesso sito viene visualizzato su iPad, lo sfondo viene sempre visualizzato indipendentemente dall'orientamento, ma c'è una certa differenza in ciò che viene visto.

I migliori concetti per la progettazione dello sfondo (in ordine)

1. Tinta unita (o nessun colore)

2. Fotografico (allungato)

3. Piastrella piccola (perfetta senza cuciture)

4. Piastrella grande (perfetta senza cuciture)

Quello che dovresti evitare è la piastrellatura di sfondi fotografici a meno che ciò non possa essere fatto in modo tale da non essere percepibile. Lo stretching è normalmente il migliore per gli sfondi fotografici o per confinarli all'interno di uno spazio predefinito.

L'era del grande sfondo splashy è praticamente morta tranne che per i siti specializzati destinati alla visualizzazione su un desktop. La maggior parte degli sfondi progettati per i desktop non hanno un bell'aspetto se visualizzati sui telefoni.

Una soluzione alternativa è quella di impostare un numero enorme di punti di interruzione nel file CSS e progettare singoli sfondi per ogni punto di interruzione, ma come al solito si ha la sfida che lo spazio verticale disponibile non può mai essere calcolato, anche quando il tipo di dispositivo è noto .

immagine di cortesia per gentile concessione di

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.