Una guida completa alla progettazione di sfondi nel 2024

Se ti abboni a un servizio da un link in questa pagina, Reeves and Sons Limited potrebbe guadagnare una commissione. Vedi il nostro Dichiarazione etica.

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 correttamente gli sfondi è più difficile di una volta e presenta alcune nuove sfide, limitando alcune delle potenzialità che hanno altri sfondiwise avrebbe.

For example, the background in previous times could actually be used as a practical part of the design. You could put arrows on it, for example, to direct the viewer’s attention to something important.

Perché le cose sono cambiate è a causa della necessità responsive design e la diversità delle diverse dimensioni e 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.

As you can see from the image above, the top ranked websites don’t bother with backgrounds at all, and it doesn’t seem to have done them the slightest bit of harm with regard to user acceptance.

This flies in the face of conventional thought concerning website design, but it’s hard to argue with cold hard facts. Amazingly enough, the first website on the list with a background doesn’t kick in until you reach number 10, which is Twitter, and that background is only visible if you’re not logged in.

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

  • Twitter, con uno sfondo fotografico (classificato 10)
  • 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.

The sole advantage of a site background is that it helps maintain a sense of site identity across multiple pages, but since there are other elements that can achieve this aim just as well and maybe better, that isn’t really a big advantage.

Gli svantaggi sono numerosi. Gli sfondi introducono ulteriori sfide quando si tratta di sito responsiveness e potrebbe richiedere frequenti aggiornamenti per evitare che diventi obsoleto.

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.

With so many reasons not to use backgrounds, you might decide to follow in the footsteps of those top-ranked websites and ditch the whole background idea once and for all. But if the brief insists that the site needs to have a background, what can you do? That’s what we’ll try to solve in the rest of this article.

Gli sfondi dovrebbero essere contenuti

Content must always be on a layer above the page background. If you don’t separate your page elements into different layers, it can create problems for you when something needs to be changed.

È 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.

The more degrees of separation you create, the more control you can gain. You may feel like that’s not important to your right now, but it often happens that it becomes a factor later.

La 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 contenuto contano come parte dello sfondo, ma non tutti li classificheranno in questo modo.

Framing

Agli albori del web design, l'inquadratura era solo una semplice questione di capire dove dovevano trovarsi i tuoi contenuti in relazione allo sfondo. In questo giorno di responsive il design, tuttavia, è in genere più complicato di così.

Con responsive design, hai solo due scelte per affrontare il problema dell'inquadratura. La prima opzione consiste nel ridimensionare il contenuto e l'immagine di sfondo rispetto alle dimensioni dello schermo disponibili. Questo è ottimale quando l'integrità del progetto è il fattore più importante, anche se questa sarà una situazione piuttosto 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", a proposito, significa semplicemente che il design sembra sempre lo stesso, indipendentemente dal tipo di schermo su cui viene visualizzato. L'opposto è dove il contenuto sembra sempre (più o meno) lo stesso, indipendentemente dal tipo di schermo su cui viene visualizzato.

Utilizzo del ridimensionamento per responsiveness

When you use scaling to keep uniform framing across different device types and orientation, it maintains the integrity of your design, but the result may still not always be what you’d expect or even desire, especially if you use a photographic background.

Let’s check out an example of this technique in action. Starting with the Samsung Galaxy S5 in portrait mode (note that these images are scaled to fit in the article, so the text you can see there is actually legible on the device itself).

This is what it looks like in landscape mode (it’s nearly always better to hold a phone in landscape orientation for everything except making phone calls, yet people still insist on holding their phones in portrait orientation.

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.

The thing you will notice when scaling is used is that there’s little variation between different devices and resolutions, except that there can be a lot of wasted vertical space on the portrait view.

In realtà sarebbe meglio utilizzare metodi diversi sullo sfondo e sulle parti di contenuto, in modo che le voci di menu si avvolgano in una griglia 2 × 2 invece di rimanere sempre nel layout 1 × 4, ma il motivo per cui non è fatto in questo modo è perché è impossibile prevedere quanto spazio verticale sarà disponibile.

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

Utilizzo graduale di nascondi e rivela responsiveness

A more practical scenario, and the one most designers will want to use most of the time, is a design where the background (or portions of it) can simply be phased out if there’s not enough room to show it, so the site content always gets maximum attention.

Here is an example of the difference when using this method. We’ll use the same devices and orientations to illustrate. First is Samsung Galaxy S5 portrait.

Paesaggio Samsung Galaxy S5.

ritratto iPad.

iPad Landscape.

Here you can see a considerable difference between devices. The small screen of the Samsung Galaxy S5 doesn’t allow the background to be displayed, regardless of whether the device is held in portrait or landscape orientation, and what is shown is adjusted to fit the available space.

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)

What you should avoid is tiling of photographic backgrounds unless that can be done in such a way that it’s not noticeable. Stretching is normally best for photographic backgrounds, or to confine them within a predefined space.

L'era del grande sfondo splashy è praticamente morta, fatta eccezione per i siti specializzati destinati solo alla visualizzazione su a desktop. La maggior parte degli sfondi progettati per desktopI messaggi non avranno un bell'aspetto se visualizzati sui telefoni.

Una soluzione alternativa che puoi fare è impostare un numero enorme di punti di interruzione nel tuo file CSS e progettare in formatodividoppi sfondi per ogni punto di interruzione, ma come al solito hai 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.

Commenti Risposte 0

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

Valutazione *

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.