Un guide complet pour la conception d'arrière-plans en 2024

Si vous vous abonnez à un service à partir d'un lien sur cette page, Reeves and Sons Limited peut gagner une commission. Voir notre déclaration éthique.

Une fois la partie la plus importante de toute conception de site Web, l’arrière-plan d’un site peut être utilisé de différentes manières pour aider à créer une meilleure expérience utilisateur.

Aujourd'hui, créer correctement des arrière-plans est plus difficile qu'autrefois et présente de nouveaux défis, tout en limitant une partie du potentiel que les arrière-plans d'autreswise aurait.

Par exemple, l’arrière-plan des époques précédentes pouvait en fait être utilisé comme élément pratique de la conception. Vous pouvez par exemple y placer des flèches pour attirer l'attention du spectateur sur quelque chose d'important.

Si les choses ont changé, c'est à cause de la nécessité de responsive la conception et la diversité des différentes tailles d'écran et des types d'écran que les gens pourraient utiliser.

Par conséquent, l'arrière-plan est devenu un élément de moindre importance dans la conception des sites et de nombreux sites n'ont pas d'arrière-plan officiel.

Les arrière-plans sont-ils vraiment importants? Pour le savoir, nous avons inspecté les meilleurs sites Web classés 30 (sans les reprises) et les résultats sont très intéressants.

Comme vous pouvez le voir sur l'image ci-dessus, les sites Web les mieux classés ne se soucient pas du tout des arrière-plans, et cela ne semble pas leur avoir fait le moindre mal en ce qui concerne l'acceptation des utilisateurs.

Cela va à l’encontre de la pensée conventionnelle concernant la conception de sites Web, mais il est difficile de contester des faits concrets et froids. Étonnamment, le premier site Web de la liste avec un arrière-plan n'apparaît que lorsque vous atteignez le numéro 10, qui est Twitter, et cet arrière-plan n'est visible que si vous n'êtes pas connecté.

Dans les principaux sites Web 30 pour 2017, les seuls sites possédant les antécédents appropriés étaient:

  • Twitter, avec un fond photographique (classé 10e)
  • Live (Outlook), avec un arrière-plan de couleur unie (classé 12th)
  • NetFlix, avec un fond de collage (classé 21st)
  • WordPress, avec un fond de couleur unie (classé 26th)
  • Bing, avec un fond photographique (classé 29th)
  • Tumblr, avec un arrière-plan photographique (classé 30th)

Ainsi, seuls X% des sites Web 20 les plus performants ont des antécédents et ceux qui le sont se situent bien en bas de la liste.

Le seul avantage d'un arrière-plan de site est qu'il permet de maintenir un sentiment d'identité du site sur plusieurs pages, mais comme il existe d'autres éléments qui peuvent tout aussi bien et peut-être mieux atteindre cet objectif, ce n'est pas vraiment un gros avantage.

Les inconvénients sont nombreux. Les arrière-plans introduisent des défis supplémentaires en ce qui concerne le site responsiveness, et peut nécessiter une mise à jour fréquente pour éviter de devenir obsolète.

Un autre défi pour le concepteur moderne est qu’outre les arrière-plans statiques, il est également possible de créer des arrière-plans vidéo. Si vous optez pour cette dernière solution, il est essentiel de savoir ce que vous faites, car de nombreux utilisateurs trouveront un fond vidéo mal conçu gênant.

Avec autant de raisons de ne pas utiliser d’arrière-plans, vous pourriez décider de suivre les traces de ces sites Web les mieux classés et d’abandonner une fois pour toutes l’idée d’arrière-plan. Mais si le brief insiste sur le fait que le site doit avoir un arrière-plan, que pouvez-vous faire ? C'est ce que nous tenterons de résoudre dans la suite de cet article.

Les fonds doivent être contenus

Le contenu doit toujours se trouver sur un calque au-dessus de l’arrière-plan de la page. Si vous ne séparez pas les éléments de votre page en différentes couches, cela peut vous créer des problèmes lorsque quelque chose doit être modifié.

Il est recommandé d’utiliser cette séparation de couches autant que possible. Par exemple, le logo du site doit-il vraiment être incorporé directement à l'arrière-plan? Le plus souvent, il serait plus judicieux d’avoir le logo dans un calque séparé. Ainsi, si le logo doit être mis à jour, il peut être mis à jour indépendamment de l’arrière-plan.

Utiliser des couches de cette manière signifie plus de travail pour la création, mais moins pour la maintenance. Il vous donne également un contrôle maximal, car vous pouvez masquer des éléments, les déplacer ou les faire se comporter différemment selon vos besoins et à tout moment.

Cette image montre la structure idéale pour un modèle de conception d’arrière-plan:

Au sein de chaque couche (sauf la couche de base), il est possible de créer des couches supplémentaires pour des degrés de séparation encore plus grands si vous en avez besoin.

Plus vous créez de degrés de séparation, plus vous pouvez gagner en contrôle. Vous avez peut-être l'impression que ce n'est pas important pour vous en ce moment, mais il arrive souvent que cela devienne un facteur plus tard.

La chose la plus importante à comprendre est que «l'arrière-plan» est tout ce qui n'est pas contenu. Ainsi, le texte ou les images qui sont censés être sur la page mais pas en tant que contenu comptent comme faisant partie de l'arrière-plan, mais tout le monde ne les classera pas de cette façon.

Encadrement

Au début de la conception Web, le cadrage consistait simplement à déterminer où votre contenu devait se trouver par rapport à l'arrière-plan. En ce jour de responsive conception, cependant, il est généralement plus compliqué que cela.

Avec responsive conception, vous n'avez que deux choix pour régler le problème de cadrage. La première option consiste à mettre à l'échelle le contenu et l'image d'arrière-plan par rapport à la taille d'écran disponible. Ceci est optimal lorsque l'intégrité de la conception est le facteur le plus important, bien que ce soit une situation assez rare.

La deuxième option consiste à supprimer progressivement des parties de l’arrière-plan, voire l’ensemble, dans la situation la plus courante où la lisibilité du contenu est plus importante que l’intégrité de la conception.

Ce problème de «l'intégrité du design» signifie simplement que le design est toujours le même, quel que soit le type d'écran sur lequel il est visualisé. Le contraire est où le contenu est toujours (plus ou moins) le même, quel que soit le type d'écran sur lequel il est visualisé.

Utilisation de la mise à l'échelle pour responsiveness

Lorsque vous utilisez la mise à l'échelle pour conserver un cadrage uniforme sur différents types d'appareils et orientations, cela préserve l'intégrité de votre conception, mais le résultat peut ne pas toujours être celui auquel vous vous attendez ou même ce que vous désirez, surtout si vous utilisez un arrière-plan photographique.

Voyons un exemple de cette technique en action. À commencer par le Samsung Galaxy S5 en mode portrait (notez que ces images sont mises à l'échelle pour tenir dans l'article, de sorte que le texte que vous pouvez y voir est réellement lisible sur l'appareil lui-même).

Voici à quoi cela ressemble en mode paysage (il est presque toujours préférable de tenir un téléphone en orientation paysage pour tout sauf pour passer des appels téléphoniques, mais les gens insistent toujours pour tenir leur téléphone en orientation portrait.

Comme vous pouvez le constater, la mise en page est parfaitement adaptée à la mise à l’échelle, même lorsque vous ne disposez que de pixels 640 x 360. Ensuite, nous avons l'iPad en orientation portrait.

Et le paysage.

Ce que vous remarquerez lorsque la mise à l'échelle est utilisée, c'est qu'il y a peu de variation entre les différents appareils et résolutions, sauf qu'il peut y avoir beaucoup d'espace vertical perdu en vue portrait.

Il serait en fait préférable d'utiliser différentes méthodes sur les parties d'arrière-plan et de contenu, de sorte que les éléments de menu s'enroulent dans une grille 2 × 2 au lieu de toujours rester dans une disposition 1 × 4, mais la raison pour laquelle ce n'est pas fait de cette façon est que il est impossible de prévoir la quantité d'espace vertical disponible.

Ainsi, l’avantage de la mise à l’échelle est que vous voulez vous assurer que certains composants restent toujours visibles, quelles que soient les circonstances.

Utilisation du masquage et de la révélation par phases responsiveness

Un scénario plus pratique, et celui que la plupart des concepteurs voudront utiliser la plupart du temps, est une conception dans laquelle l'arrière-plan (ou des parties de celui-ci) peut simplement être supprimé progressivement s'il n'y a pas assez de place pour l'afficher, de sorte que le contenu du site soit toujours obtient une attention maximale.

Voici un exemple de la différence lors de l’utilisation de cette méthode. Nous utiliserons les mêmes dispositifs et orientations pour illustrer. Le premier est le portrait du Samsung Galaxy S5.

Paysage Samsung Galaxy S5.

portrait d'iPad.

Paysage iPad.

Ici, vous pouvez voir une différence considérable entre les appareils. Le petit écran du Samsung Galaxy S5 ne permet pas d'afficher l'arrière-plan, que l'appareil soit tenu en orientation portrait ou paysage, et ce qui est affiché est ajusté en fonction de l'espace disponible.

Lorsque le même site est visualisé sur l'iPad, l'arrière-plan est toujours affiché quelle que soit l'orientation, mais il y a une différence dans ce qui est vu.

Meilleurs concepts pour la conception de fond (dans l'ordre)

1. Couleur unie (ou pas de couleur)

2. Photographique (étiré)

3. Petite tuile (parfaite sans couture)

4. Grand carreau (parfait sans couture)

Ce que vous devriez éviter, c'est le carrelage d'arrière-plans photographiques, à moins que cela ne puisse être fait de manière à ce qu'il ne soit pas visible. L'étirement est normalement préférable pour les arrière-plans photographiques ou pour les confiner dans un espace prédéfini.

L'ère du grand fond splashy est quasiment révolue sauf pour les sites spécialisés destinés uniquement à être visionnés sur un desktop. La plupart des arrière-plans conçus pour desktops ne seront pas beaux lorsqu'ils sont affichés sur les téléphones.

Une solution de contournement que vous pouvez faire est de configurer un grand nombre de points d'arrêt dans votre fichier CSS et de concevoir dansdivideux arrière-plans pour chaque point d'arrêt, mais comme d'habitude, vous avez le défi que l'espace vertical disponible ne peut jamais être calculé, même lorsque le type d'appareil est connu.

image d'en-tête avec la permission de

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.

Commentaires Réponses 0

Soyez sympa! Laissez un commentaire

Votre adresse email n'apparaitra pas. Les champs obligatoires sont marqués *

Note *

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..