La conception de sites Web nécessite la prise en compte à la fois d’un design accrocheur et efficace, en restant le plus simple possible. La combinaison de Photographies et de Typographies contribue sans aucun doute à atteindre cet objectif.

L’utilisation de photographies accrocheuses ajoute souvent une sensation différente dans le site Web et le rend plus professionnel. L’omniprésence des « héros headers » de nos jours rend leur utilisation presque obligatoire.

La typographie quant à elle fournit des informations en accentuant également la conception. L’utilisation de belles polices contribue aussi à un design de qualité.

Mais la seule question maintenant est, comment les combiner ?

De belles photos

Les concepteurs de sites Web ne sont pas toujours forcément à l’aise avec l’utilisation de photographie, tout simplement parce que c’est un art à part entière, et qu’il demande du temps pour l’appréhender, voire le maitriser. De nombreux sites web proposent de nos jours des photographies libres de droit (The StocksUnsplashGratisography…) mais cela ne vous dispense pas de prendre en compte les bonnes pratiques de la photographie. En outre, il faut :

  • Discerner les bonnes photos pour votre design.
  • Avoir de la perception artistique et conditionner votre créativité.
  • Choisir les meilleures photos pour permettre d’envoyer le meilleur message.

Cela dit, en tant que concepteur, vous devriez savoir ce qui fait une bonne photo, mais la question est, comment le savez-vous?

Voici quelques lignes directrices sur la photographie pour le web :

  • Règle des tiers. Cette règle signifie que toute photographie est divisée en neuf zones égales formées par deux lignes verticales et deux lignes horizontales. Vous devez placer le sujet principal (ou l’élément le plus important) le long des lignes ou partout où elles se croisent. Placez le sujet sur le côté gauche ou droit. Le mettre dans le centre diminue parfois la puissance de la photographie.
  • La ligne d’horizon. La ligne d’horizon est une ligne horizontale (Ah bon ?) située en arrière plan et permet au spectateur d’évaluer la distance et la perspective. Cette ligne doit être au centre de l’image.
  • Les lignes de premier plan. Elles attirent l’attention de l’utilisateur d’un certain point de l’image vers l’object principal de cette dernière. C’est une sorte de ligne qui vous permet d’identifier facilement l’objet.

Enfin le fond de la photographie doit être le moins gênant possible et le mois distrayant possible afin de ne pas oublier l’objet principal

De belles typos

La typographie est l’un des sujets les plus abordés dans la conception de sites web.

Mais pour rafraîchir votre base de connaissances, voici quelques rappels :

  • Même au moment de la conception du site, préconiser d’y insérer le texte prévu au site définitif et non du Lorem Ipsum. Ce faux texte est un excellent outil pour avoir une idée de la place du contenu dans le site mais cela peut altérer le design et l’idée que l’on s’en fera une fois remplacé par le vrai texte.
  • Penser à donner des tailles différentes aux parties du contenu textuel, les titres, les sous titres, les paragraphes… en utilisant les balises adéquates (h1, h2, p etc …) afin de guider le lecteur et lui donner des points de repère pour ainsi faciliter sa compréhension.
  • Choisissez de bonnes couleurs. Elles sont essentielles pour dégager des messages subtils aux utilisateurs. Vos couleurs doivent refléter votre charte graphique pour rendre le texte plus lisible.

Combiner Photographie et Typographie

Voici maintenant la partie la plus amusante.

Contrairement aux illustrations graphiques, les photographies sont composées de multiples couleurs, de fonds différents et de lumières différentes. Y insérer du texte par dessus peut parfois entraver sa lisibilité. Voici quelques conseils :

Flou gaussien

A l’aide du logiciel Photoshop vous pouvez ajouter du Flou Gaussien afin d’estomper la photographie pour mettre en valeur la typographie.

texte_photo_flou

Boîtes

Vous pouvez placer le texte dans des boîtes dont le fond coloré contraste avec le fond de la photographie ou dans des cercles.

fond_texte

Utilisez le fond

Parfois on peut raisonner de manière intelligente et utiliser le fond de la photographie si elle le permet. En fonction de sa nature on peut y placer directement le texte et obtenir ainsi un design « naturel ».

texte_photo_nb

Texte plus grand, meilleur contraste

On peut parfois utiliser un texte plus grand, avec une couleur plus contrastante et ainsi le faire ressortir de l’image. Cela peut aussi contribuer à créer un motif de marque, dont on se souviendra.

Conclusion

Cette combinaison Photographie – Typographie prend tout son sens lors de la première visite d’un utilisateur sur votre site, sur la page d’accueil. Elle doit être épurée pour ne pas agresser sa visite mais doit surtout le convaincre d’observer plus en détails votre site. Une image valant mieux qu’un discours, pensez donc à ces quelques conseils en matière de Webdesign.