Twitter ha recentemente implementato un design aggiornato per le pagine del profilo, che consente di inserire una nuova foto? che si trova in cima al tuo feed, proprio come l'immagine di copertina della timeline di Facebook.
Oggi ci tufferemo e vedremo alcuni esempi di buone immagini del profilo di Twitter e discuteremo su come progettare le vostre. Farò anche un modello gratuito in modo da poter iniziare subito.
Template gratuito!
Prima di immergerci nell'articolo, ecco un comodo modello gratuito che è possibile utilizzare per progettare la propria immagine di intestazione di Twitter. Il file fornito è un file PSD creato in Photoshop CS6.
Prendi il tuo PSD gratuito: Clicca qui per scaricare.
Come usarlo
Per utilizzare questo modello, è sufficiente sostituire l'immagine di sfondo. Il gruppo di livelli dell'interfaccia utente ha lo scopo di aiutarti a farti un'idea di come sarà l'immagine una volta implementata sul sito. Nascondere i livelli raggruppati prima di salvare.
Scopri il nuovo profilo Twitter
C'era una volta, Twitter era un servizio basato sul testo. Al giorno d'oggi, cercano costantemente di migliorare l'esperienza visiva integrando funzionalità e supporto multimediali.
La riprogettazione del profilo più recente spinge questa idea attraverso flussi fotografici più importanti e una funzione completamente nuova: l'intestazione del profilo Twitter.
Come puoi vedere, questa nuova immagine si trova in cima ai tuoi ultimi tweet e contiene l'immagine del tuo profilo e un breve testo su di te. Per aiutare a lanciare i nuovi profili, Twitter sembra aver stretto una partnership con NBC, quindi molti dei nostri esempi saranno dai loro vari account (non tutti gli utenti hanno ancora aggiornato).
In definitiva, questo non aggiunge un sacco di lavoro di progettazione al tuo profilo, è semplicemente un'immagine in più. Tuttavia, anche una piccola immagine può portare molte domande, quindi sono qui per rispondere ad alcune che potresti avere mentre ti avvicini alla costruzione della tua immagine di intestazione di Twitter.
Come si imposta l'intestazione del profilo?
La prima domanda che devi chiedere è: come accendi questa cosa? Se ti dirigi al tuo profilo, sembrerà come sempre. Attualmente, gli utenti che non hanno impostato un'immagine di intestazione conserveranno il vecchio design.
Per aggiornare il tuo profilo, fai clic sulla scheda Impostazioni in alto a destra nella pagina. Da qui, clicca sul? Design? scheda nella barra di navigazione sul lato sinistro.
Quando sei sulla pagina Design, scorri verso il basso fino a "Personalizza il tuo?" sezione. Qui vedrai un? Cambia intestazione? pulsante. Basta fare clic e caricare la tua immagine per impostare la tua intestazione.
Questo è tutto ciò che c'è da fare! Ora devi solo decidere cosa mettere lì!
Che misura?
La prossima domanda importante da porre quando si progetta l'intestazione del tuo profilo è ,? Che taglia? Se diamo un'occhiata alle immagini NBC che senza dubbio personalmente Twitter ha contribuito a creare, vediamo che la dimensione è di 520 px di larghezza per 260 px di altezza.
In definitiva, si riduce ad un rapporto 2: 1 tra larghezza e altezza con una dimensione massima di caricamento di 5 MB o 1252 px per 626 px.
Suggerimenti e considerazioni sulla progettazione
La dimensione dell'immagine che carichi non è l'unica considerazione da tenere a mente. Ho notato alcune stranezze che devi assolutamente sapere se stai per realizzare un design di successo.
Guarda la tua leggibilità
Per sperimentare lo spazio sul mio account personale, ho preso una foto a caso che ho scattato su un display digitale a New York City. Sembrava che avrebbe reso lo sfondo astratto perfetto. Ecco il risultato:
Come puoi vedere, è una grafica abbastanza attraente. Il problema però è che interferisce con il testo un po ', e io sono un pazzo per la leggibilità.
Ovviamente, con il testo bianco, vorrai uno sfondo che sia scuro. Il mio si adatta a questa descrizione, ma le luci fungono da punti luminosi che riducono il contrasto tra le lettere e lo sfondo e aggiungono troppe distrazioni.
La soluzione qui è piuttosto semplice, ho solo oscurato lo sfondo in cui si trova il testo in modo che le luci non interferiscano così tanto. Il risultato non è altrettanto bello visivamente, ma è molto più leggibile:
Viti di Twitter con la tua immagine
La gente di Twitter sa che il trucco che ho usato sopra, oscurando la parte inferiore dell'immagine, è qualcosa che dovrà essere fatto su molte immagini. In effetti, il sito lo fa automaticamente se lo vuoi o no.
Come test, ho preso questa immagine e l'ho preparata per l'intestazione Design Shack. Ecco cosa vedo in Photoshop:
Ora, se carico quell'immagine come la vedi sopra, ecco il risultato così come appare sulla nostra pagina del profilo:
Vedi la differenza? Un gradiente di sfondo è stato applicato automaticamente, oscurando notevolmente i colori originali. È un effetto sottile sulla maggior parte delle foto, ma quando si entra in qualcosa con meno dettagli, si distingue davvero.
Questo non è certamente un aspetto negativo, anzi aiuta il testo a risaltare, è solo qualcosa da tenere a mente mentre prepari la tua immagine. Inoltre, nota che Twitter applica automaticamente gli angoli arrotondati sia al profilo che all'immagine di testa.
Suggerimenti per la progettazione
Ora che sappiamo tutto su come creare e applicare la nostra immagine, diamo un'occhiata in giro e vediamo cosa stanno facendo gli altri con quest'area per qualche ispirazione.
Integra la tua immagine del profilo
Uno dei migliori che ho visto finora è quello di Ryan Seacrest. Adoro l'integrazione della foto del profilo nell'immagine dell'intestazione. Brillante. Puoi aspettarti di vedere completamente tonnellate di utenti che cercano di farlo in modi diversi.
Mostra il tuo lavoro
Graham Smith, il designer di logo preferito di tutti, ha colto l'occasione per aggiornare subito il suo profilo. La sua idea è semplice ed efficace: mette in risalto il suo lavoro in una griglia di loghi gradevole e discreta.
Abbina lo sfondo del tuo profilo
Una cosa da tenere a mente quando lavori sull'immagine di intestazione è che è in realtà parte di un design più grande e dovrebbe andare bene con la tua immagine di sfondo.
Lo vediamo bene sul conto delle ultime notizie qui sotto. L'immagine dell'intestazione è una mappa del mondo rossa composta da pixel.
Questa è in realtà la stessa immagine che hanno usato sullo sfondo della pagina, solo più piccola e di un colore diverso. Questo rende piacevole un aspetto coerente.
Mi piace come il grande background sia la versione più sottile mentre l'immagine dell'header attira davvero la tua attenzione con un colore audace.
Keep It Simple
Se hai problemi a trovare una buona intestazione, ricorda tre parole potenti: mantieni la semplicità. Anche a parte l'immagine, c'è molto da fare in questo spazio e il tuo obiettivo è legarlo tutto insieme, non complicarlo eccessivamente.
Nella famiglia estesa di Twitter vediamo alcuni buoni e cattivi esempi di questo. Il co-fondatore di Twitter Evan Williams ha decisamente scelto male con una grafica troppo impegnata per questo spazio.
Confronta questo con l'immagine utilizzata dal creatore di Twitter Bootstrap Mark Otto. La sua scelta è molto migliore:
Questo è bello, semplice e in realtà piuttosto sorprendente. La maggior parte dell'immagine è spazio bianco (spazio nero in questo caso) quindi non c'è molto da interferire con il testo. Il contenuto rappresenta un evento carico di emozione e meraviglia per tutti noi, il che rende un'esperienza indimenticabile.
Mostraci il tuo!
Ecco qua, tutto ciò che devi sapere sulla creazione della perfetta intestazione di Twitter. Ora che hai letto i miei consigli e hai visto una grande ispirazione, vai a crearne uno con il nostro modello gratuito!
Una volta che l'immagine dell'intestazione di Twitter è pronta, lascia un commento qui sotto con un link in modo che possiamo vedere cosa ti è venuto in mente.