Il existe trois types d’en-têtes que je vois habituellement utilisés sur les anciens interwebs : les en-têtes de navigation, les en-têtes de photos complètes et les en-têtes de tapis de bienvenue. Si vous êtes intéressé par la création d’un en-tête de blog, vous devrez connaître les avantages et les inconvénients de chaque type avant de passer aux choses sérieuses de la création.

En-têtes de navigation

Les en-têtes de navigation ne sont pas basés sur des photos. Par exemple, tout en haut de mon site Web, j’ai mon logo, ainsi que des liens vers des pages importantes ou des formulaires d’inscription. Regarde.

Les en-têtes de navigation comme ceux-ci sont idéaux si vous êtes un fan du minimalisme et que vous souhaitez que les gens se concentrent vraiment sur votre écriture sans être distraits par les images.

C’est aussi un excellent chemin à parcourir si vous êtes nouveau, si vous n’avez pas compris votre image de marque ou si vous avez simplement besoin de vous lancer en ligne.

La mise en page n’est pas figée — les en-têtes de navigation peuvent être disposés de toutes sortes de manières. Vous en avez probablement vu où le logo est au centre au-dessus des liens de texte, ou il pourrait simplement avoir le logo sans liens (ou vice versa).

Cet en-tête vit souvent en harmonie avec des en-têtes de blog supplémentaires (mon site a également un autre en-tête en dessous), comme les en-têtes de photos complets et les tapis de bienvenue.

En-têtes de photo

Le style d’en-tête de photo est très accrocheur et vous attire vraiment. Si vous voulez un en-tête de photo sur votre blog, réfléchissez à ce que sera le sujet. Sera-ce une photo d’une personne? Comme vous, ou vous et votre famille, ou une représentation de votre client idéal? Ou s’agira-t-il d’une photo avec une sorte de paysage, de motif, de dessin animé / d’icônes ou même d’une vidéo?

Découvrez cet exemple à partir de AlexTooby.com . Alex utilise une photo d’elle-même et un peu de l’idée de tapis de bienvenue avec un appel à l’action fort pour s’inscrire à son cours.

La photo fonctionne, à la fois pour les nouveaux arrivants et les visiteurs qui reviennent. Pourquoi? Parce qu’elle utilise quelques éléments visuels subtils (plus sur ceux-ci plus loin) qui servent à renforcer la force de cet en-tête. Elle tient son téléphone, avec l’interface Instagram moquée dessus, et elle regarde vers le texte qu’elle veut que vous lisiez. Votre œil est naturellement attiré par son visage, puis par les mots, puis par le bouton rose vif pour cliquer. Ce serait moins efficace si elle regardait du côté gauche de l’écran.

Pointe de pro: Avoir quelqu’un face à « in » vers la copie ou le bouton est une astuce de conception ninja que vous pouvez également utiliser.

Les en-têtes de photos peuvent créer une ambiance et aider vos lecteurs à passer à l’action. Étant donné que les en-têtes de photos sont gros, ils bloquent les autres distractions sur la page et aident les lecteurs à se concentrer sur exactement ce que vous voulez qu’ils fassent (comme le bouton « Démarrer le cours gratuit » d’Alex).

En-têtes de tapis de bienvenue

Le « tapis de bienvenue » typique que vous pourriez voir sur Internet est une prise de contrôle en plein écran, et il existe des outils qui vous aident à le faire.

Ou, si vous ne souhaitez pas reprendre toute votre page, vous pouvez également configurer une partie pour agir comme un tapis de bienvenue ou un formulaire d’inscription pour un cadeau spécial que vous offrez. Vous ne savez pas à quoi cela ressemblerait? Consultez l’image ci-dessous de mon site Web. J’offre un cours en ligne gratuit que je souhaite que tous les visiteurs voient en premier afin que je puisse créer ma liste de diffusion avec le bon public pour les futurs e-mails et promotions. Mes entrées de blog apparaissent en dessous afin que les visiteurs puissent simplement faire défiler vers le bas pour voir mes derniers messages.

Maintenant que vous avez vu les trois styles différents, il est temps de parler de la création d’un en-tête de blog pour votre site Web.

Comment créer un en-tête de blog qui ressemble à une marque

Je sais que le terme « marque » semble officiel et intimidant, mais n’ayez jamais peur! C’est en fait assez facile si vous vous concentrez simplement sur quelques choses clés. À savoir, les couleurs (souvent trouvées dans votre logo) et les polices.

Astuce pro: Rassemblez un guide de marque pour vous-même dans un dossier afin que vous puissiez garder une trace de ces informations (avec votre logo) pour un accès facile à tout moment.

Même si vous ne faites pas de guide imprimé de fantaisie, vous pouvez noter ces informations sur une note collante et les garder sur votre moniteur. Cela vous fera gagner beaucoup de temps à long terme! Maintenant, décomposons quelques éléments de conception.

Choisissez vos couleurs

Vous avez peut-être choisi quelques couleurs pour votre marque, mais un bon point de départ est votre logo. La ou les couleurs de votre logo sont idéales à utiliser sur votre site Web, votre image de marque et l’en-tête de votre blog. La cohérence est la clé — si vous présentez un rose vif, alors peut-être que vos photos ont un élément de rose pour elles ou une distribution rose globale, ou peut-être que vous utilisez le noir et blanc et tirez la couleur d’une autre manière.

Aby de YouBabyMeMummy.com le fait magnifiquement en insérant une magnifique version en couleur sur son logo en superposition sur une photo en noir et blanc d’elle-même avec sa fille. Cet en-tête de photo vous entraîne vraiment dans son histoire d’une manière audacieuse et engageante. Cliquez sur son site si vous souhaitez voir plus d’exemples d’images époustouflantes en plein écran.

Et si vous essayez toujours de savoir quelles couleurs utiliser dans votre marque, cet article sur la psychologie des couleurs est très révélateur!

Sélectionnez une police

Incorporer une police élégante ou de marque directement dans votre en-tête peut être un moyen très pertinent et rapide de faire passer votre message. Comme dans cette image unique et accrocheuse de Luci ByLucinda.co.uk .

Ce paysage marin s’intègre parfaitement à sa marque, qui incorpore de nombreux éléments naturels et met en valeur son ambiance élégante et impertinente. Pas de Times New Roman pour cette dame! Elle a également une façon intelligente de montrer ses liens de médias sociaux sur le côté droit dans une bande rectangulaire vert clair. Il relie la navigation supérieure à la grande photo en gras et aide à tirer votre œil vers le bas de la page de manière intentionnelle.

Vous pouvez trouver des polices gratuites vraiment amusantes en ligne à partir d’endroits comme Font Squirrel et Dafont. Beaucoup de ces polices gratuites sont intégrées directement dans des programmes comme Canva et PicMonkey. Cependant, comme ils sont gratuits, il y a plus de chances que quelqu’un d’autre (même un concurrent) utilise celui que vous voulez.

Si vous souhaitez utiliser des polices plus sophistiquées dans le corps ou les titres de votre site Web (c’est-à-dire pas dans une image), vous devriez prendre le temps de vous renseigner sur les polices Google. Et pour savoir quelles polices utiliser pour la conception Web, consultez ces trois commandements.

Incorporer des éléments visuels

Lorsque vous composez l’en-tête de votre blog de marque, vous devez réfléchir aux éléments visuels que vous souhaitez inclure. Nous avons passé en revue des exemples utilisant un logo, une photo et un gros bouton clair.

Jen de ToastMeetsJam.com c’est exactement ça. Elle ne s’est pas contentée de tomber dans un tableau comme vous l’auriez fait dans une feuille de calcul ennuyeuse — elle a utilisé des bordures artistiques et de superbes polices avec ses champs de formulaire et un bouton circulaire « GO ».

Voyez comment elle intègre parfaitement son inscription par e-mail dans la conception? Non seulement elle vous engage avec la photo d’elle-même à la recherche animée et amicale, mais elle tire également parti d’un fond clair et gris pour vous garder concentré sur le texte et la forme. Pas de motifs ou d’images distrayants pour vous éloigner de la tâche clé de remplir ce formulaire et d’aller de l’avant. Il ne pourrait pas être plus clair ce que vous devez faire pour obtenir son cours gratuit de cinq jours.

Préparez-vous à concevoir

Vous avez vu quelques exemples d’en-têtes de blog géniaux, mais que faites-vous ensuite? Pour accéder à votre propre en-tête de blog, vous devrez rassembler des outils de conception et des informations sur la taille de l’image.

Outils de conception

Les outils de conception essentiels pour créer votre propre en-tête de blog personnalisé ne doivent pas nécessairement être difficiles à utiliser ou coûteux. Essayez-en quelques-uns et voyez avec quoi vous êtes à l’aise, puis foncez! Ne vous inquiétez pas s’ils se sentent maladroits au début — vous vous améliorerez plus vous les utiliserez. Voici quelques-uns que vous pouvez commencer à explorer, dans l’ordre du plus facile au plus difficile.

Canva. C’est probablement le plus facile sur le marché, et c’est gratuit! Il existe une version payante appelée Canva for Work si vous voulez plonger plus profondément, mais la version gratuite est vraiment amusante et facile à apprendre. Il s’agit d’un outil de conception basé sur le Web, il vous suffit donc de vous connecter au site Web et de l’utiliser directement dans votre navigateur.

PicMonkey. Si vous aimez vraiment éditer des photos et jouer avec des filtres, PicMonkey vaut la peine d’essayer. Il existe de nombreux effets amusants intégrés. Comme Canva, PicMonkey est basé sur le Web et dispose d’une version gratuite et d’une version payante avec des fonctionnalités supplémentaires.

Photoshop. Vous ne pouvez pas mentionner le logiciel de conception et ne pas faire apparaître Photoshop! C’est une centrale d’un programme et peut faire bien plus que simplement créer un en-tête de blog, mais c’est vraiment génial pour cela. C’est une application que vous téléchargez et que vous payez par abonnement mensuel (un essai gratuit est également disponible).

En tant que designer professionnel, j’ai utilisé Photoshop pendant toute ma carrière et j’adore ça. La plupart de mes lecteurs pensent que Photoshop est intimidant au début, mais c’est tout à fait faisable une fois que vous apprenez quelques bases. Je dois dire, cependant, depuis que j’ai découvert Canva, j’utilise souvent une combinaison de Photoshop et de Canva pour créer mes graphiques. Canva est tellement amusant!

Conseil de pro: si vous choisissez le plan de photographie d’Adobe, vous pouvez obtenir Photoshop + Lightroom pour un coût mensuel assez bas. Pas trop minable.

Mots-clés. Si vous aimez créer des graphiques sur votre téléphone, c’est pour vous. Cette application mobile n’est pas gratuite, mais ne coûte que quelques dollars et a une version iOS et Android. De plus, il est connecté à un site de photos libres de droits Creative commons, de sorte que vous n’êtes jamais à court de choix d’images dans l’en-tête de votre blog. Il a toutes sortes de couleurs, de textures et de polices parmi lesquelles choisir. Tout ce que vous avez à faire est d’enregistrer votre graphique final dans le « cloud » ou de le connecter à votre ordinateur afin de pouvoir le télécharger sur votre site.

Tailles d’image

Lorsque vous créez l’en-tête de votre blog, vous devez tenir compte de la taille de l’image par rapport à la plate-forme de votre site. La taille de votre thème WordPress peut être différente de la page Squarespace de la personne suivante ou du créateur de site Web GoDaddy GoCentral. Voici quelques éléments à garder à l’esprit:

Dimensions en pixels. Les tailles sont généralement répertoriées comme un certain nombre de largeur par un certain nombre de hauteur et en dimensions de pixels. Par exemple : 1000× 400 (ou 1000 pixels x 400 pixels) signifie que votre image mesure 1000 pixels de large par 400 pixels de haut.Résolution

. Pour Internet, votre résolution est facile — c’est toujours 72! Des résolutions plus élevées comme 300, 600 ou plus sont destinées à l’impression. Les résolutions d’écran pour les moniteurs ne sont toujours que de 72. Donc, en utilisant notre exemple de dimensions ci-dessus, votre image finale serait de 1000 pixels de large par 400 pixels de haut, 72 dpi (ou ppi).

Type de fichier. Les fichiers PNG ne perdent jamais de qualité, peu importe le nombre de fois que vous les enregistrez, mais sont plus volumineux en Mo (mégaoctet). Les fichiers JPG (jpeg) peuvent être enregistrés à différents niveaux de qualité afin que vous puissiez garder une taille de fichier (Mo) petite, mais chaque fois que vous les enregistrez, ils perdent un peu de qualité. A.le fichier jpg enregistré deux fois a l’air bien, mais après l’avoir enregistré cinq ou 10 fois, il commencera à avoir l’air pixélisé et granuleux.

Optimiser signifie les enregistrer pour être plus compacts avec une taille de fichier plus petite, mais avec soin pour ne pas perdre de qualité. Vous pouvez le faire facilement en utilisant un site Web gratuit appelé TinyPNG. Regardez le panda mignon compresser vos images d’une manière qui les garde fabuleuses mais vous fait économiser des mégaoctets!

Comment créer un en-tête de blog dans Canva

1. Créez un compte.

2. Utilisez des dimensions personnalisées.

3. Sélectionnez une photo gratuite.

4. Ajoutez du texte personnalisé.

5. Personnalisez votre design.

6. Ajoutez un logo.

7. Téléchargez l’en-tête de votre blog.

Maintenant pour la partie amusante! Creusons dans la création d’un en-tête de blog personnalisé à partir de zéro à l’aide de Canva. J’utilise des ressources disponibles gratuitement, vous pouvez donc le faire de votre propre chef avec moi. Inscrivez-vous simplement pour un compte gratuit et vous êtes prêt à partir.

Voici l’en-tête du blog que nous allons créer:

1. Créez un compte.

Une fois que vous vous êtes inscrit à Canva, vous accéderez à la page Créer un design où vous voudrez cliquer sur Utiliser les dimensions personnalisées dans le coin supérieur droit.

Utilisez des dimensions personnalisées.

Remplissez la largeur et la hauteur souhaitées dans les champs qui apparaissent et sélectionnez « px » pour les pixels. Après cela, cliquez sur le design! bouton.

Un nouveau projet apparaît avec un écran vide et l’onglet Mises en page sélectionné à gauche. Notez que le nom du projet n’a pas été spécifié, il se nomme donc « 1000px x 400px — Design sans titre » en haut à côté du bouton Partager.

Sélectionnez une photo gratuite.

Cliquez sur Éléments et choisissez une photo gratuite parmi celles fournies. Tous les gratuits disent « GRATUITS » dans le coin inférieur. Vous pouvez également télécharger votre propre photo, mais pour notre tutoriel, nous travaillerons avec l’une de ces photos gratuites.

Une fois que vous cliquez sur la photo, elle apparaît instantanément dans la zone de conception de votre projet. Allons de l’avant et renommons ce projet pendant que nous y sommes. Cliquez sur le nom temporaire en haut à côté du bouton Partager et saisissez-en un nouveau. J’appelle cela des « carnets de voyage » pour mon prétendu blog de voyage.

Une fois que votre image est assise dans la zone de conception, vous pouvez l’agrandir en faisant glisser les cercles dans les coins. Allez-y et redimensionnez cette image pour l’adapter au document.

Ajouter du texte personnalisé.

Super! Maintenant, nous avons besoin d’un texte. Cliquez sur l’onglet Texte dans la colonne de gauche et vous verrez quelques options parmi lesquelles choisir. Vous pouvez cliquer sur arrangements de texte prédéfinis dans la section inférieure de cette fenêtre ou sur des lignes de texte individuelles en haut. Allez-y et cliquez sur Ajouter un en-tête. Ce texte apparaît dans l’image, par défaut en noir.

Maintenant pour vous amuser! Choisissons une police différente. Parcourez les choix de polices et choisissez tout ce qui vous plaît. J’ai choisi un pinceau. Il est difficile de voir en noir au-dessus de cette image, alors changeons-la en blanc. Cliquez sur la boîte colorée en haut pour afficher les choix de couleurs et choisissez le carré blanc. J’ai également ajusté la taille à 104.

Ensuite, allez-y et faites glisser ce cap en place sur l’image pour qu’il soit plus centré.

Personnalisez votre design.

Il est un peu difficile de lire et de se concentrer sur le texte sur cet arrière-plan occupé, alors ajoutons un effet de flou. Cliquez simplement sur la photo d’arrière-plan pour la sélectionner, puis choisissez Filtre et cliquez sur Options avancées.

La fenêtre de filtre se développe pour vous montrer d’autres choses que vous pouvez faire. Vous pouvez jouer avec la saturation, la coloration des couleurs, ajouter une vignette, etc.

Cliquez sur le point noir dans la section Flou et faites-le glisser vers la droite. J’ai choisi +22 sur l’échelle de flou.

Ajoutez un logo.

Maintenant, cliquez sur cette fenêtre pour voir votre conception. J’ai l’air bien! Maintenant, marquons-le en ajoutant un logo. Vous pouvez télécharger votre logo en cliquant sur l’onglet Téléchargements à gauche, puis sur le grand bouton vert Télécharger vos propres images.

Choisissez un transparent.version png de votre logo afin qu’il ne soit pas aplati sur une couleur unie (sauf si votre style de logo est à l’intérieur d’un rectangle blanc ou quelque chose comme ça).

Lorsqu’il est chargé, vous le verrez dans la zone sous le bouton vert. Il reste là pour que vous puissiez l’utiliser sur de futurs projets. Pratique ! J’avais déjà mon faux logo téléchargé, alors j’ai juste fait défiler vers le bas pour le trouver.

Cliquez sur le logo, puis il apparaîtra dans votre design.

Maintenant, vous pouvez le redimensionner, le déplacer et même obtenir de la fantaisie et jouer avec la transparence si vous le souhaitez.

Téléchargez l’en-tête de votre blog.

Ouai! Maintenant que votre design est prêt, il ne reste plus qu’à le télécharger. Cliquez sur le bouton Télécharger en haut de l’écran et choisissez votre type de fichier. Je vais généralement avec le type PNG recommandé.

Une fois votre design téléchargé sur votre ordinateur, vous pouvez l’ouvrir et l’admirer, puis le charger sur votre blog.

Et c’est tout ce qu’il y a à faire! J’espère que vous avez une bonne idée de la façon de créer un en-tête de blog et de l’importance d’une image stellaire. Maintenant, vous pouvez en ajouter un à votre blog. Bonne image de marque!