Una delle domande più frequenti che riceviamo è una variante del tipo di background che qualcuno dovrebbe utilizzare per il proprio sito. Questi designer hanno il contenuto di base e il layout praticamente inchiodato, ma lo sfondo è troppo noioso o troppo occupato e non sanno come risolverlo.
Oggi daremo un'occhiata ad alcuni siti dal vivo per trarre qualche ispirazione su come aggiungere in modo efficace sfondi interessanti a una pagina web. Aggiungi questo articolo ai segnalibri e torna ad esso la prossima volta che sei bloccato su una decisione di sfondo.
# 1 Disegnalo
Questo tipo di background è diventato popolare alcuni anni fa e persiste ancora oggi. Nasce dall'idea di un quaderno pieno di scarabocchi, come quello del tuo tipico adolescente durante la lezione di inglese. Tutto ha un aspetto ruvido, rapidamente abbozzato e la pagina è una raccolta di idee abbastanza casuale che sono tutte disperse e poste a varie rotazioni.
NotchStudio estrae questa idea in modo discreto e discreto.
Anche se non riesci a disegnare, questo look è abbastanza facile da estrarre poiché i doodle sono in genere super base. Se hai un Wacom o un iPad, è abbastanza facile rintracciare alcune delle tue foto o testo stampato in un modo che rifletta questo stile. Ci sono anche un sacco di font gratuiti come Pointy che ti aiuteranno a creare fantastici sketch con il minimo sforzo.
# 2 Pergamena sottile
Le trame di carta hanno sempre affascinato i designer e probabilmente li useremo per secoli a venire. La tendenza attuale non è tanto l'intenso grunge di qualche anno fa, quanto piuttosto un effetto molto più sottile che potresti facilmente perdere se non lo cercavi.
Nota come la trama usata sul sito di Beautiful Type non distrae o esagerato, ma invece porta semplicemente una bella finitura a un sito che sarebbe già perfetto senza di esso.
Dai un'occhiata a Lost and Taken per tantissime trame che puoi usare in tutti i tuoi progetti.
# 3 Un gradiente radiale
I diplomati hanno subito un brutto colpo di recente da progettisti che pensano di essere abusati. Personalmente ritengo che siano facilmente abusati e mal eseguiti, ma non si vede mai un momento in cui tutti i design usano colori puramente solidi senza gradazioni. Poiché i gradienti riflettono la realtà (non vediamo mai i colori solidi puri e non adulterati nel mondo naturale) i designer continueranno a usarli per rendere i loro disegni più reali.
Con i gradienti, spesso è meglio mantenere le cose semplici. Non mescolare colori pazzi e creare transizioni fangose, optare invece per un gradiente semplice. Uno dei miei preferiti è il buon vecchio gradiente radiale dal grigio al nero (o grigio più scuro). È pulito e facile da implementare e sembra davvero di classe.
Potete vederlo in pratica sul sito Web di 177themes mostrato di seguito.
# 4 Two-Tone It!
Un'altra soluzione che trovo particolarmente elegante o audace (a seconda dell'esecuzione) è quella di passare una transizione dura attraverso la pagina. Questo è il più spesso fatto orizzontalmente ma può sentirsi più unico e accattivante se fatto verticalmente.
L'idea qui è di utilizzare la magia del contrasto. I nostri occhi sono naturalmente attratti dal contrasto, semplicemente non possiamo fare a meno di guardare! La chiave per eliminare questo metodo è assicurarsi che i due colori siano davvero in contrasto. Non scegliere nulla che sia in conflitto o in conflitto, prova invece un colore davvero scuro e poi una tonalità molto chiara dello stesso colore.
Il mio strumento preferito per la creazione di questi tipi di combinazioni è 0to255, che consente di acquisire rapidamente e facilmente valori Web per variazioni di qualsiasi colore.
# 5 Fotografie a schermo intero
Dico questa idea così tanto che probabilmente ne sei stufo, ma continuerò a dargli un taglio in testa il più a lungo possibile: una buona fotografia è sinonimo di grande design. È semplice e semplice. Tutti noi amiamo guardare una buona foto, quindi lavorare con il tuo design rende il sito web che tutti amano guardare. Facile vero?
Le foto forniscono ispirazione per l'intero design del sito. Puoi afferrare colori, trame e persino l'ispirazione tipografica da una fotografia e creare un bel tema coerente.
Scopri come la natura oscura degli elementi progettati nel sito sottostante riflette l'aspetto di molte delle foto utilizzate nella presentazione della home page.
Se ti stai chiedendo come codificare un sito come questo, consulta il nostro recente articolo, Crea facilmente un sito web di slideshow a schermo intero senza Flash.
# 6 Texture to Color Fade
Un trucco che mi piace molto che ho visto molto ultimamente è usare effetti di luce o qualcosa di simile per gettare solo un po 'di texture nella parte superiore di una pagina, che si dissolve rapidamente in un colore solido.
Le trame possono facilmente ridurre la leggibilità del testo e aggiungere inutili disturbi visivi a una pagina altrimenti utilizzabile. Accennare a una texture in una posizione ti consente di raccogliere i benefici dell'extra candy senza sacrificare l'estetica e / o la leggibilità complessiva del sito.
Troppo spesso ci sentiamo di scegliere una texture significa che dobbiamo inondare lo sfondo con esso utilizzando una ripetizione dell'immagine di sfondo CSS. Cerca di essere più selettivo con dove va la tua texture e troverai i tuoi disegni immediatamente più belli.
# 7 Look Up
Il cielo è una costante e fantastica distrazione per gli umani. Nuvole, raggi di sole, stelle, pianeti, la luna; tutti questi oggetti contengono una sorta di posto magico nella nostra mente che li rende irresistibili per gli occhi.
Fai molta attenzione quando incorpori questi elementi nel tuo background, è super facile creare qualcosa di brutto e / o cliché. Questa tecnica dovrebbe essere utilizzata solo dai designer che hanno un aspetto reale dell'estetica e come prendere un'idea come lo spazio? e non farlo sembrare qualcosa da un vecchio salvaschermo di Windows.
Il sito sottostante è un ottimo esempio di una scena di cielo davvero bella utilizzata come sfondo di un sito web forte. I pianeti sono resi magnificamente con una vibrazione di colore vintage e una trama sottile fornita da linee diagonali. Questo è il tipo di attenzione ai dettagli che dovresti avere familiarità prima di lanciare uno sfondo del cielo sul tuo sito.
# 8 Argyle
Posso sentirti ora,? Argyle? Sei pazzo?? Prima di lasciarmi nei commenti, i rombi possono dare dei risultati davvero interessanti. Ma, come con il suggerimento precedente, non dovrebbero essere provati da nessuno se non da esperti designer che sanno usare un modello pazzo senza creare un sito davvero brutto.
Scopri l'uso molto bello di questa idea nel sito web qui sotto. Il pattern in stile argyle modificato è solo lì per aggiungere alcuni accenti colorati e non fa davvero del suo meglio per attirare la tua attenzione.
# 9 Astratto e pazzo
Sei stufo dei miei suggerimenti per fare attenzione? e? prendersela comoda? con tocchi di design sottili? Bene, allora questo consiglio è per te. A volte lo sfondo migliore è qualcosa di pazzo e audace che non ha senso con il contenuto della pagina, ma attira e attira la tua attenzione.
Ho pensato che entrambi i siti web qui di seguito l'hanno migliorato molto bene. Notate come la seconda sembra particolarmente un pezzo dipinto ad acquerello. Questa è una tecnica molto popolare che puoi trovare molte risorse online da imitare.
Vai a cercare iStock con il termine? Acquerello astratto? per vedere cosa puoi trovare. Ci sono molte immagini economiche in questa categoria che aumenteranno di molto l'interesse visivo della tua pagina.
# 10 Non aver paura dei colori a tinta unita
Tutti i consigli sopra riportati sono pensati per soddisfare le tue richieste di idee di sfondo per i siti web. Tuttavia, è molto importante per te capire come designer che non c'è assolutamente nulla di sbagliato nello spazio bianco tinta unita. È un ingrediente chiave in molti dei miei progetti preferiti di tutti i tempi e imparare a maneggiarlo correttamente è una parte importante del diventare un designer.
Dai uno sguardo al sito web di Fuzion Ads. Il design è davvero una festa tipografica ed entrambi tengono la tua attenzione e comunicano efficacemente nonostante il fatto che lo sfondo sia solo un semplice e noioso colore solido!
Assicurati di controllare Piknik, uno strumento gratuito che devi aggiungere al tuo arsenale di design. Questo sito semplifica l'anteprima e seleziona i colori per riempire lo schermo. Basta spostare il mouse e lo sfondo cambia colore.
Conclusione
Lo sfondo che scegli imposta il tono e la personalità per l'intero sito. L'altro giorno stavo lavorando con un designer che voleva vedere il suo sito nella nostra galleria, ma aveva semplicemente scelto un'immagine di sfondo davvero scadente. Il design e il layout del sito erano fantastici, ma non riuscivo a superare il brutto background. Dopo averlo fatto notare, ha accettato e passato a qualcosa di molto più semplice che ha portato il sito a un livello completamente nuovo.
Come ho detto nei paragrafi di apertura, la prossima volta che sei bloccato in un solco di progettazione e non puoi scegliere un buon background per il tuo sito, torna su questo post e prova alcune delle idee che ho esposto qui. Prima o poi sarai obbligato ad atterrare su uno che è perfetto per il tuo progetto.
Come sempre, grazie per la lettura! Se ti è piaciuto l'articolo, dacci un tweet, inciampa, mi piace o qualsiasi altra cosa tu abbia!