Comment concevoir l'image d'en-tête Twitter parfaite
Twitter a récemment déployé une conception mise à jour pour les pages de profil, qui vous permet d'insérer une nouvelle «photo d'en-tête» qui se trouve au-dessus de votre flux, un peu comme l'image de couverture de la chronologie de Facebook.
Aujourd'hui, nous allons plonger et voir quelques exemples de bonnes images de profil Twitter et discuter de la façon dont vous pouvez concevoir la vôtre. Je vais même lancer un modèle gratuit pour que vous puissiez commencer immédiatement.
Explorez Envato Elements
Modèle gratuit!
Avant de nous plonger dans l'article, voici un modèle gratuit pratique que vous pouvez utiliser pour concevoir votre propre image d'en-tête Twitter. Le fichier fourni est un PSD créé dans Photoshop CS6.
Prenez votre PSD gratuit: Cliquez ici pour télécharger.
Comment l'utiliser
Pour utiliser ce modèle, remplacez simplement l'image d'arrière-plan. Le groupe de couches d'interface utilisateur est destiné à vous aider à avoir une bonne idée de l'apparence de l'image une fois qu'elle sera implémentée sur le site. Masquez les calques groupés avant d'enregistrer.
Rencontrez le nouveau profil Twitter
Il était une fois, Twitter était un service centré sur le texte. De nos jours, ils cherchent constamment à améliorer l'expérience visuelle en intégrant des fonctionnalités multimédias et un support.
La refonte du profil la plus récente pousse cette idée à travers des flux de photos plus importants et une toute nouvelle fonctionnalité: l'en-tête du profil Twitter.
Comme vous pouvez le voir, cette nouvelle image se trouve au sommet de vos tweets récents et contient votre image de profil ainsi qu'un bref texte à votre sujet. Pour aider à lancer les nouveaux profils, Twitter semble avoir établi un partenariat avec NBC, donc beaucoup de nos exemples proviendront de leurs différents comptes (tous les utilisateurs n'ont pas encore mis à niveau).
En fin de compte, cela n'ajoute pas une tonne de travail de conception à votre profil, c'est simplement une image supplémentaire. Cependant, même une petite image peut apporter beaucoup de questions, donc je suis ici pour répondre à quelques-unes que vous pourriez avoir à l'approche de la création de votre image d'en-tête Twitter.
Comment définissez-vous l'en-tête de votre profil?
La première question que vous devez vous poser est la suivante: comment allumez-vous cette chose? Si vous vous dirigez vers votre profil, il ressemblera à toujours. Actuellement, les utilisateurs qui n'ont pas configuré d'image d'en-tête conserveront l'ancien design.
Pour mettre à jour votre profil, cliquez sur l'engrenage Paramètres en haut à droite de la page. De là, cliquez sur l'onglet «Conception» dans la barre de navigation de gauche.
Une fois sur la page Conception, faites défiler la page jusqu'à la section «Personnalisez la vôtre». Ici, vous verrez un bouton «Changer l'en-tête». Cliquez simplement dessus et téléchargez votre image pour définir votre en-tête.
C'est tout ce qu'on peut en dire! Il ne vous reste plus qu'à décider quoi y mettre!
Quelle taille?
La prochaine question importante à poser lors de la conception de votre en-tête de profil est «Quelle taille?» Si nous jetons un coup d'œil aux images NBC que Twitter a sans doute personnellement aidé à mettre en place, nous voyons que la taille est de 520 pixels de large par 260 pixels de haut.
En fin de compte, cela se décompose en un rapport largeur / hauteur de 2: 1 avec une taille de téléchargement maximale de 5 Mo ou 1252 pixels par 626 pixels.
Conseils et considérations de conception
La taille de l'image que vous téléchargez n'est certainement pas la seule considération que vous devez garder à l'esprit. J'ai remarqué quelques bizarreries que vous devez absolument savoir si vous allez réussir un design réussi.
Surveillez votre lisibilité
Pour expérimenter l'espace sur mon compte personnel, j'ai pris une photo aléatoire que j'ai prise d'un affichage numérique à New York. Il semblait que cela ferait le fond abstrait parfait. Voici le résultat:
Comme vous pouvez le voir, c'est un visuel assez attrayant. Le problème est cependant qu'il interfère un peu avec le texte, et je suis un écrou de lisibilité.
De toute évidence, avec le texte blanc, vous aurez besoin d'un arrière-plan qui est décemment sombre. Le mien correspond à cette description, mais les lumières servent de points lumineux qui réduisent le contraste entre les lettres et l'arrière-plan et ajoutent trop de distractions.
La solution ici est assez simple, j'ai juste assombri cet arrière-plan où se trouve le texte pour que les lumières n'interfèrent pas tellement. Le résultat n'est pas aussi cool visuellement, mais il est beaucoup plus lisible:
Vis Twitter avec votre image
Les gens de Twitter savent que l'astuce que j'ai utilisée ci-dessus, assombrir le bas de l'image, doit être effectuée sur un grand nombre d'images. En fait, le site le fait automatiquement, que vous le vouliez ou non.
Comme test, j'ai saisi cette image et l'ai préparée pour l'en-tête Design Shack. Voici ce que je vois dans Photoshop:
Maintenant, si je télécharge cette image comme vous le voyez ci-dessus, voici le résultat tel qu'il apparaît sur notre page de profil:
Regarde la différence? Un dégradé d'arrière-plan a été automatiquement appliqué, assombrissant considérablement les couleurs d'origine. C'est un effet subtil sur la plupart des photos, mais lorsque vous entrez dans quelque chose avec moins de détails, il se démarque vraiment.
Ce n'est certainement pas une mauvaise chose, cela aide en effet le texte à se démarquer, c'est juste quelque chose à garder à l'esprit lorsque vous préparez votre image. Notez également que Twitter applique automatiquement des coins arrondis au profil et à l'image d'en-tête.
Conseils de conception
Maintenant que nous savons tout sur la façon de créer et d'appliquer notre image, jetons un coup d'œil et voyons ce que les autres font avec cette zone pour une inspiration.
Intégrez votre image de profil
L'un des meilleurs que j'ai vu jusqu'à présent est celui de Ryan Seacrest. J'adore l'intégration de la photo de profil dans l'image d'en-tête. Brillant. Vous pouvez vous attendre à voir des tonnes d'utilisateurs essayer de réaliser cela de différentes manières.
Montrez votre travail
Graham Smith, le créateur de logo préféré de tous, a saisi l'opportunité de mettre à jour son profil immédiatement. Son idée est simple et efficace: elle montre son travail dans une belle grille de logos discrète.
Faites correspondre l'arrière-plan de votre profil
Une chose à garder à l'esprit lorsque vous travaillez sur votre image d'en-tête est qu'elle fait en fait partie d'un plus grand design et devrait bien aller avec votre image d'arrière-plan.
Nous voyons cela bien fait sur le compte des dernières nouvelles ci-dessous. L'image d'en-tête est une carte du monde rouge composée de pixels.
Il s'agit en fait de la même image qu'ils ont utilisée sur l'arrière-plan de la page, seulement plus petite et dans une couleur différente. Cela donne un joli look cohérent.
J'adore la façon dont le grand arrière-plan est la version plus subtile tandis que l'image d'en-tête attire vraiment votre attention avec une couleur audacieuse.
Rester simple
Si vous rencontrez des difficultés pour créer une bonne image d'en-tête, souvenez-vous de trois mots puissants: restez simple. Même en dehors de l'image, il se passe beaucoup de choses dans cet espace et votre objectif est de tout lier ensemble, pas de le compliquer.
Dans la famille élargie de Twitter, nous en voyons de bons et de mauvais exemples. Le co-fondateur de Twitter, Evan Williams, a définitivement mal choisi avec un graphique beaucoup trop occupé pour cet espace.
Comparez cela avec l'image utilisée par le créateur de Twitter Bootstrap Mark Otto. Son choix est bien meilleur:
C'est agréable, simple et en fait assez frappant. La plupart de l'image est constituée d'espaces (espace noir dans ce cas), il n'y a donc pas grand-chose à interférer avec le texte. Le contenu représente un événement chargé d'émotion et d'émerveillement pour nous tous, ce qui en fait une expérience mémorable.
Montrez-nous le vôtre!
Voilà, tout ce que vous devez savoir pour créer l'image d'en-tête Twitter parfaite. Maintenant que vous avez lu mes conseils et que vous avez vu une grande inspiration, allez créer le vôtre avec notre modèle gratuit!
Une fois que votre image d'en-tête Twitter est prête, laissez un commentaire ci-dessous avec un lien afin que nous puissions voir ce que vous avez trouvé.
