Una delle prime cose che fai nella progettazione di un sito è decidere quale sarà il primo frammento di pixel che gli utenti vedranno. Devi attirare la loro attenzione e comunicare il tuo messaggio above the fold o rischiare che la persona passi alla successiva scheda aperta.
Sfortunatamente, molti di noi cadono in schemi prevedibili per questo pezzo del sito. Usiamo gli stessi vecchi trucchi, forme e plugin e abbiamo un risultato che potrebbe sembrare fantastico, ma non è poi così eccitante. Oggi esamineremo brevemente come rendere più interessanti le tue immagini di intestazione. Lungo la strada vedremo alcuni esempi dal vivo da siti che hanno implementato con successo queste tecniche.
L'immagine standard, noiosa dell'intestazione
Troppo spesso, quando inizio a fare il wireframe di un progetto, comincio con qualcosa del genere:
Non fraintendetemi, questo è un layout solido, e la ragione per cui è così popolare è che funziona molto bene. Tuttavia, c'è un tempo per percorrere la via sicura e un momento per espandersi in modo creativo ed esplorare nuove idee.
In particolare, la parte che mi annoia è l'immagine di intestazione (sto usando il termine? Header?) Per indicare la parte superiore della pagina). È solo un grande rettangolo statico. Se è dinamico, di solito è qualcosa di semplice come un cursore di immagine jQuery. Ancora una volta, uno dei miei trucchi di design preferiti, tuttavia, non è esattamente una buona rappresentazione di "out of the box"? pensando a questo punto nel tempo.
Quindi, come possiamo uscire dalla routine di correre verso il rettangolo stanco ogni volta che abbiamo bisogno di un'immagine grande e audace nella nostra intestazione? Se davvero diamo il problema a qualsiasi pensiero, alcune soluzioni si presentano facilmente.
Cambiandolo
Ecco alcuni pensieri rapidi su come aggiungere una certa varietà alle immagini di intestazione. Puoi pensare ad altre idee?
Cambia la forma
La prima cosa che viene in mente è quella di abbandonare il rettangolo. Prova a usare un quadrato, un cerchio, un triangolo o anche una serie di immagini. Puoi anche mollare il contenitore tutti insieme e provare a posizionare un'icona o un'immagine direttamente sullo sfondo del tuo sito web.
Inoltre, non lasciarti coinvolgere dalle forme standard. Prova a creare un'immagine che utilizza una forma più astratta e fluida. Piegalo intorno ai tuoi contenuti per una vera creatività.
Rendilo più dinamico
Vai oltre il dispositivo di scorrimento delle immagini jQuery. Prova a pensare a un nuovo modo in cui puoi far interagire un utente con l'immagine. Usa clic, scorrimento, movimenti del mouse e altro per trasformare l'immagine in qualche modo interessante.
Scoppiare
Un altro modo molto semplice per rendere l'immagine dell'intestazione più interessante è consentire al contenuto all'interno di esso di emergere o al contenuto esterno di entrare in esso.
Ho usato questa tecnica con un'app screenshot in un recente articolo di Design Tricks.
Qualcosa di diverso ogni volta
Un trucco popolare che vedi Apple che usa spesso nella loro homepage è di avere una serie di immagini di intestazione a rotazione. Quando aggiorni la pagina, prende in mano un insieme di tre o quattro diverse opzioni.
Ciò non solo rende il tuo sito più coinvolgente per gli utenti, ma ti aiuta a monitorare ciò che funziona meglio e ciò che gli utenti sembrano più interessati. Osservando le tue statistiche, puoi monitorare quale immagine sta ottenendo il maggior numero di clic e quindi creare una nuova strategia basata su tale conoscenza.
Esempi in natura
Ora che abbiamo alcune idee sul tavolo per approcciare le immagini di intestazione in un modo più interessante, vediamo se possiamo trovare qualche esempio di designer che segua queste tecniche.
Co-Work
Uno dei miei esempi preferiti che ho visto di recente è sul sito Co-Work. Il cursore dell'immagine nella parte superiore di questa pagina è, a memoria, la stessa vecchia tecnica standard. Tuttavia, il progettista ha aggiunto alcune tacche che gli conferiscono una forma irregolare.
Nota quanto più integrata questa immagine si percepisce con il resto del contenuto rispetto al tipico rettangolo. Curva attorno al logo, alla navigazione e alla copia del corpo in un modo che conferisce al sito un tocco di arte moderna quasi astratta, perfetto per gli spazi di lavoro puliti e ben progettati che il sito sta pubblicizzando.
Ciò non richiede un'immaginazione eccessiva o anche molto lavoro da implementare, è solo il risultato di un piccolo sforzo extra che conferisce al sito un aspetto tutto suo.
Adrian Baxter
Lo sviluppatore web Adrian Baxter ha un altro grande esempio di un'immagine di intestazione unica sul suo sito.
A parte l'incredibile idea di combattere un'orda di zombi con solo una tastiera Mac Bluetooth, questa immagine è diversa perché è stata suddivisa in quattro pannelli separati. Funzionalmente, non c'è davvero alcun motivo per questo, ma dal punto di vista del design, è un bel tocco. Si noti come rispecchia la disposizione dei collegamenti sottostanti, un classico esempio di ripetizione nel design.
Il divertimento non finisce qui, Adrian ha fatto un passo in più aggiungendo un effetto di parallasse che sposta la scena mentre muovi il mouse intorno al sito. Man mano che la scena si sposta, le immagini scompaiono da una cornice all'altra. È davvero un bell'effetto!
Sony Tablet S
L'esempio più straordinariamente innovativo che sono riuscito a trovare è stato il sito per il tablet Sony. Iniziando, il sito sembra abbastanza semplice, l'immagine dell'intestazione mostra una sorta di flusso piegato che termina nel tablet. A questo punto non sono rimasto molto colpito e ho persino pensato che il sito fosse un po 'troppo ingombrante.
Mentre scorri verso il basso (o premi il pulsante Giù), il sito diventa davvero fantasioso molto rapidamente. Il tablet rimane nel mezzo dello schermo mentre il resto del contenuto si sposta. Si disconnette dal flusso piegato e inizia a girare e capovolgere nello spazio 3D.
Quando arrivi a una nuova sezione di contenuti, il tablet si trasforma in una posa che si integra con il design di quell'area.
Va sotto alcuni contenuti, sopra le altre parti, le sovrapposizioni si aprono e puntano a funzioni, le mani escono e usano il touchscreen; il risultato è super impressionante e rende un'esperienza di navigazione impressionante, dinamica e interattiva che richiede solo lo scorrimento.
Kyan
Questo sito è molto simile nel concetto alla pagina Tablet Sony, solo in modo orizzontale. La posizione iniziale del cursore dell'immagine mostra uno schermo di iPhone, tablet e computer seduto attorno a vari strumenti di progettazione. Adoro lo stile di illustrazione piatto simile alla carta.
Quando si preme il pulsante freccia sulla destra, ciascuno degli oggetti che circondano i dispositivi nel centro vola su e fuori dallo schermo uno per uno, quindi lo schermo si sposta e porta i dispositivi in una nuova scena:
Questo è molto più impressionante, unico e coinvolgente del tuo tipico cursore. Quando vedi per la prima volta l'effetto, non puoi fare a meno di premere il pulsante ancora qualche volta per vederlo di nuovo.
Conclusione
Lo scopo qui è quello di aiutare il cervello a uscire dal solco di inserire la stessa vecchia immagine grande rettangolo nella parte superiore dei tuoi progetti. Con un po 'di pensiero e impegno puoi facilmente realizzare qualcosa di più unico e coinvolgente.
Questo a malapena graffia la superficie di ciò che viene fatto attualmente con le immagini di intestazione. Hai visto altri esempi interessanti? Inoltre, hai ideato grandi idee tu stesso? Lascia un commento e facci sapere.