Twitter a récemment mis au point 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 timeline 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 afin que vous puissiez commencer tout de suite.
Modèle gratuit!
Avant de plonger dans l'article, voici un modèle pratique et gratuit que vous pouvez utiliser pour concevoir votre propre image d'en-tête Twitter. Le fichier fourni est un fichier 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 de l'interface utilisateur est destiné à vous aider à avoir une bonne idée de ce à quoi ressemblera l'image une fois qu'elle sera mise en œuvre sur le site. Masquer les couches groupées avant de sauvegarder.
Rencontrez le nouveau profil Twitter
Il était une fois Twitter était un service centré sur le texte. Ces jours-ci, ils cherchent constamment à améliorer l'expérience visuelle en intégrant des fonctionnalités et une assistance multimédia.
La refonte la plus récente des profils pousse cette idée à travers des flux de photos plus importants et une toute nouvelle fonctionnalité: l'en-tête de profil Twitter.
Comme vous pouvez le constater, cette nouvelle image s’affiche au-dessus de vos tweets récents. Elle contient l’image de votre profil ainsi qu’un bref texte vous concernant. Pour aider à lancer les nouveaux profils, Twitter semble avoir établi un partenariat avec NBC. Nombre de nos exemples seront donc issus de leurs différents comptes (tous les utilisateurs ne l’ont pas encore mise à niveau).
En fin de compte, cela n’ajoute pas une tonne de travail de conception à votre profil, mais simplement une image supplémentaire. Cependant, même une petite image peut apporter beaucoup de questions, je suis donc ici pour en répondre à quelques-unes de celles que vous pourriez avoir au moment de créer votre image d'en-tête Twitter.
Comment définissez-vous l'en-tête de votre profil?
La première question que vous êtes tenu de poser est la suivante: comment allumer cette chose? Si vous vous rendez sur votre profil, vous aurez l’impression que cela a toujours été le cas. Actuellement, les utilisateurs qui n'ont pas configuré d'image d'en-tête conservent l'ancien design.
Pour mettre à jour votre profil, cliquez sur le bouton Paramètres en haut à droite de la page. À partir de là, cliquez sur le bouton? Design? onglet dans la barre de navigation de gauche.
Une fois que vous êtes sur la page Conception, faites défiler jusqu’à la page? Personnaliser la vôtre? section. Ici, vous verrez un? Change header? bouton. 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 l’en-tête de votre profil est la suivante: "Quelle taille?" Si nous jetons un coup d'œil aux images NBC que Twitter a personnellement contribué à mettre en place, nous voyons que la taille est de 520 pixels de large par 260 pixels de haut.
En fin de compte, cela passe à un rapport largeur / hauteur de 2: 1 avec une taille de téléchargement maximale de 5 Mo ou de 1252 pixels par 626 pixels.
Conseils de conception et considérations
La taille de l'image que vous téléchargez n'est certainement pas la seule considération à prendre en compte. J'ai remarqué quelques problèmes que vous devez absolument savoir pour réussir votre projet.
Surveillez votre lisibilité
Pour expérimenter l’espace de mon compte personnel, j’ai pris une photo prise au hasard d’un affichage numérique à New York. Il semblait que cela ferait le fond abstrait parfait. Voici le résultat:
Comme vous pouvez le constater, le visuel est assez attrayant. Le problème, cependant, est que cela interfère assez souvent avec le texte, et je suis un fou de lisibilité.
De toute évidence, avec le texte en blanc, vous souhaiterez un fond 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, je viens d’obscurcir l’arrière-plan où se trouve le texte afin que les lumières ne gênent pas autant. Le résultat n'est pas aussi cool visuellement, mais c'est beaucoup plus lisible:
Vis Twitter avec votre image
Les utilisateurs de Twitter savent que le truc que j'ai utilisé ci-dessus, assombrir le bas de l'image, doit être effectué sur de nombreuses images. En fait, le site le fait automatiquement, que vous le vouliez ou non.
En guise de test, j'ai saisi cette image et je 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é de fond 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, cela se démarque.
Ce n'est certainement pas une mauvaise chose, cela aide effectivement 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 angles arrondis au profil et à l'image d'en-tête.
Conseils de conception
Maintenant que nous savons tout sur la création et l'application de notre image, jetons un coup d'œil autour de nous et voyons ce que les autres font de cette zone pour trouver l'inspiration.
Intégrez votre image de profil
L'un des meilleurs que j'ai vu jusqu'à présent est celui de Ryan Seacrest. J'aime l'intégration de la photo de profil dans l'image d'en-tête. Brillant. Vous pouvez vous attendre à voir des tonnes des utilisateurs essayant de le retirer de différentes manières.
Montrez votre travail
Graham Smith, le créateur de logo préféré de tous, a immédiatement saisi l’occasion de mettre à jour son profil. Son idée est simple et efficace: elle montre son travail dans une belle grille de logos sobre.
Correspondre à votre profil
Une chose à garder à l’esprit lorsque vous travaillez sur votre image d’en-tête est qu’elle fait partie d’une conception plus aboutie et qu’elle devrait s’harmoniser avec votre image d’arrière-plan.
Nous voyons cela bien faire sur le compte de nouvelles de dernière heure 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 que celle utilisée pour l’arrière-plan de la page, mais en plus petite taille et dans une couleur différente. Cela fait un beau look cohérent.
J'adore le fond large de la version plus subtile, tandis que l'image d'en-tête attire vraiment votre attention avec une couleur audacieuse.
Rester simple
Si vous ne parvenez pas à obtenir 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 les associer, sans les 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 fait le mauvais choix avec un graphique beaucoup trop chargé pour cet espace.
Comparez cela avec l'image utilisée par Mark Otto, créateur de Twitter Bootstrap. Son choix est bien meilleur:
C'est agréable, simple et en fait assez frappant. La plus grande partie de l'image est en blanc (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 les vôtres!
Voilà, tout ce que vous devez savoir sur la création de l'image d'en-tête Twitter parfaite. Maintenant que vous avez lu mes conseils et que vous avez trouvé une bonne source d'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é.