Sfondi siti web – Suggerimenti importanti per designers

Condividi

SOMMARIO ARTICOLO – La maggior parte delle volte non ci prestiamo attenzione e, a meno che non ci sia qualcosa di visibilmente sbagliato, li ignoriamo completamente: parliamo di sfondi, parte integrante del suo successo e della sua vita, nonché del funzionamento di ogni parte del nostro sito web. Oggi parliamo di sfondi siti web, del loro utilizzo a livello di UI e delle funzionalità principali.

Sfondi siti web e design

Gli sfondi rappresentano le immagini, le macchie di colore e design che riempiono lo schermo del sito web; spesso, anche se non ci se ne rende conto come dicevamo nelle righe sopra, è la prima impressione che l’utente ha del nostro sito – quindi anche del nostro marchio o della nostra attività – una volta entrato dentro, quindi è bene realizzarlo come si deve.

All’interno di questo aspetto apparentemente basilare del nostro design c’è molto più di quanto possiamo immaginare; non è soltanto una questione di bellezza, lo sfondo dovrà trasmettere al visitatore qualcosa, dovrà raccontare una storia e dovrà assicurarci che la persona con la quale stiamo comunicando si stia godendo l’esperienza che noi desideriamo. Dovranno offrire una buona UX (esperienza utente) e dovranno essere leggibili.

sfondi sito web

Sfondi siti web : nozioni di base

Prima di snocciolare i suggerimenti per un migliore sfondo, andiamo a conoscerne e approfondirne le basi:

I due tipi di sfondi siti web

Sfondo del corpo

Si tratta dell’area che copre la maggior parte dello schermo, dove troveremo sfondi composti da trame, illustrazioni, sfumature colore, immagine completa. Spesso lo troviamo semplicemente bianco.


Sfondo del contenuto

Questo fa da contorno ad un’immagine o un testo, quindi circonda l’area attorno ad altre sezioni. Il suo scopo è quello di fornire struttura e aiutare a sottolineare e separare le diverse sezioni del nostro sito web.

Usiamo le intestazioni

Uno dei metodi migliori per mostrare agli utenti la personalità del nostro sito web è quella di utilizzare l’intestazione, la parte superiore della pagina. Un ottimo posto per utilizzare illustrazioni o un tocco di colore, che non distrarranno dal contenuto sottostante.

sfondo sito web intestazione
un esempio di sfondo nella sola intestazione del sito web

Attenzione al contrasto

Cerchiamo di prendere in considerazione anche il contrasto dei colori; cerchiamo sì di utilizzarlo ma anche di controllarne il rapporto, perché un contrasto sbagliato può rendere difficile la lettura del contenuto, quindi sarebbe inaccessibile all’utente.

Andiamo di grafica!

Gli elementi grafici renderanno il nostro sito web unico, gli conferiranno un aspetto distintivo raccontando una storia per mezzo soltanto degli elementi visivi. Ricordiamoci soltanto di essere coerenti, che l’utilizzo dei vari elementi sia in linea con l’atmosfera generale del nostro sito web.

Rafforziamo il background

Gli sfondi bianchi sono un’ottima scelta, e lo sono da tempo immemore. Ma gli sfondi full body, come un solido blocco di colore, un’immagine intera o una sfumatura, se eseguiti bene possono creare un forte impatto visivo. Nel caso di un’immagine, assicuriamoci che questa non sia troppo luminosa, che non abbia punti scuri per evitare che possa distrarre il visitatore dal contenuto. Il nostro obiettivo è quello di arrivare dritti all’utente e comunicare loro il tema della nostra attività, cosa vendiamo o cosa offriamo.

Highligths

Gli highlights, delle linee molto sottili composte da diversi colori atte a separare le varie sezioni del nostro sito, aiutano a separare i blocchi e ad aumentare la leggibilità del sito.

Suggerimenti per creare ottimi sfondi siti web

UI e scelta intelligente di colori

Quando parliamo di web design e di sfondi, la scelta dei colori e delle combinazioni è molto importante perché segnano il modo in cui il visitatore leggerà il nostro sito; è statisticamente provato che il colore, nel web design, oltre ad attirare l’attenzione innesca emozioni (per approfondire leggi la sezione “Colori” del nostro articolo sulla Brand Identity), guida le conversioni e trasforma un visitatore in un cliente fedele.

Rendiamo leggibile la nostra immagine di sfondo

L’immagine di sfondo, oltre ad avere un bell’aspetto, deve valorizzare i nostri contenuti; non c’è alcun senso nel piazzare una bella immagine di sfondo se poi non si riesce a leggere il testo sopra di essa. Se abbiamo una bella immagine che non vogliamo sostituire ma non riusciamo a leggere il testo posto sopra, possiamo utilizzare CSS o un software di fotoritocco al fine di modificarne l’opacità o il contrasto. Potremmo scegliere carattere e dimensione giusti per il contenuto stesso se quanto sopra non dovesse bastare.

Proviamo sfondi siti web a tinta unita

Se non riuscissimo ad adattare la fotografia potremmo utilizzare un colore solido per lo sfondo del nostro sito web; solitamente è un’ottima scelta al fine di garantire la leggibilità del sito, a patto che il contrasto sia giusto (assicuriamoci soltanto che il colore sia in linea con il nostro marchio; ad esempio, i colori caldi come rosa e rosso hanno un effetto energico, quindi sono perfetti per siti di palestre o fitness, mentre quelli freddi come blu e verde, tendenzialmente calmanti, sono perfetti per i siti web tant’è che sono i colori comuni più utilizzati).

Evitiamo le immagini disordinate

Messaggio particolarmente consigliato quando si ha l’intenzione di aggiungere testo ad un’immagine; anche quella più sorprendente non deve andare ad incidere sul messaggio che vogliamo trasmettere o sulla storia che vogliamo narrare. Ad esempio, i paesaggi: visto che sono sia accattivanti che ordinati, potrebbero creare fantastiche immagini di sfondo nel nostro sito web.u

Un esempio di sfondo per sito web ordinato e pulito

Rendiamolo trendy

Lo sfondi siti web cosiddetti trendy potrebbero rendere il nostro design nuovo e contemporaneo; proviamo ad utilizzare le tendenze più influenti del web design come elementi 3D coinvolgenti, forme geometriche, schemi di colori luminosi e modalità scura, oppure utilizziamo il colore dell’anno Pantone nel nostro design. teniamo a mente soltanto che, utilizzare qualcosa di trendy su di un design senza tempo, potrebbe obbligarci a cambiare lo sfondo il prima possibile.

Animazione

Quello di fornire sfondi siti web animati è un ottimo modo per dare vita al nostro sito web, cerchiamo soltanto di tenere presente questi consigli: creiamo, o piazziamo, un’animazione “sottile”, in modo che non distragga dai messaggi o dall’immagine principale e che non vada a sopraffare il primo piano del design e, visto che l’animazione ha un aspetto così generico, potremmo incorporare una sottile tavolozza di colori.

Back to ’90: il gradiente

Già, a volte ritornano; è il caso dei gradienti, che stanno conquistando il mondo del design. I gradienti, o transizioni di colore, sono una fusione graduale da un colore ad un altro, sono visivamente accattivanti e hanno un doppio utilizzo: come sfondo autonomo o sovrapposti ad una foto, in modo da far risaltare il nostro sito web.

sfondo sito gradiente
un esempio di gradiente molto utilizzato negli ultimi anni

Rendiamolo mobile friendly

Come abbiamo più volte evidenziato nelle nostre guide e nei nostri articoli, la percentuale di accesso al web dai dispositivi mobili è esponenzialmente aumentata e questo dato è destinato ad aumentare considerevolmente; vale a dire che gli utenti accedono al web da tablet e smartphone, principalmente, mentre sono sempre meno gli accessi (se comparati ai mobili naturalmente) da desktop. Considerando questi dati, i progettisti si concentrano principalmente nella creazione del sito web partendo dai parametri mobile e, successivamente, per il desktop. Mentre i già possessori di un sito web hanno dovuto ingaggiare nuovamente dei professionisti per renderlo mobile friendly, al fine di evitare un netto calo negli accessi o un’avanzata della concorrenza.

Assicuriamoci quindi di prendere in considerazione questi parametri per rendere mobile friendly il nostro sito web:

  • Rendiamolo responsive
  • Più semplice la ricerca delle informazioni da parte dell’utente
  • Non utilizziamo Flash
  • Includiamo il metatag viewport
  • Attiviamo il completamento automatico per i moduli
  • Dimensioni grandi per i pulsanti
  • Caratteri di grandi dimensioni
  • Comprimiamo immagini e CSS

Se scegliamo un’immagine di sfondo per il nostro sito assicuriamoci che possa ridimensionarsi ottimamente per gli schermi più piccoli (un’immagine molto ampia potrebbe non funzionare sui dispositivi mobili)

Come ottenere lo sfondo adatto al nostro sito web

La scelta giusta può portare un sito web da mediocre a straordinario; l’esperienza utente non è tutto, scegliamo quindi colori e immagini che possano comunicare qualcosa al visitatore, assicurandoci che il testo sia chiaro e leggibile quando scegliamo l’immagine di sfondo. Consideriamo i colori a tinta unita, evitiamo immagini disordinate e teniamo in considerazione il gradiente, o una forma geometrica, per rimanere aggiornato alle ultime tendenze.

Assicuriamoci che lo sfondo si adatti perfettamente agli schermi più piccoli e, se volessimo distinguerci dalla massa, potremmo implementare l’animazione. Ricordiamoci infine che nel design non vi sono regole fisse, tant’è che i migliori designer non si attengono affatto alle regole e questo accade spesso. Ciò che conta maggiormente è l’esperienza utente. Utilizziamo dunque questi consigli come base di partenza senza aver paura di fidarci dei nostri riflessi artistici.

Buona fortuna!

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo