Conception d'arrière-plans pour des sites Web

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'auparavant et présente de nouveaux défis, tout en limitant le potentiel que les arrière-plans auraient autrement.

Par exemple, l'arrière-plan des temps passés pourrait en réalité être utilisé comme une partie pratique de la conception. Vous pouvez par exemple y placer des flèches pour attirer l'attention du spectateur sur quelque chose d'important.

La raison pour laquelle les choses ont changé est due à la nécessité d'une conception réactive et à la diversité des tailles d'écran et des types d'écran que les utilisateurs peuvent 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 préoccupent pas du tout des antécédents, et ils ne semblent 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 discuter avec des faits difficiles. Étonnamment, le premier site Web de la liste avec un arrière-plan n’entre en jeu que lorsque vous atteignez le numéro 10, 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 arrière-plan photographique (classé 10th)
  • 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 aide à conserver un sentiment d’identité de site sur plusieurs pages, mais comme il existe d’autres éléments qui peuvent atteindre cet objectif aussi bien et peut-être mieux, ce n’est pas vraiment un gros avantage.

Les inconvénients sont nombreux. Les arrière-plans présentent des défis supplémentaires en termes de réactivité des sites et peuvent nécessiter des mises à jour fréquentes pour éviter leur détérioration.

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 pouvez décider de suivre les traces de ces sites Web parmi les meilleurs et d'abandonner une fois pour toutes l'idée d'arrière-plan. Mais si le mémoire insiste sur le fait que le site doit avoir un fond, que pouvez-vous faire? C'est ce que nous allons essayer de résoudre dans la suite de cet article.

Les fonds doivent être contenus

Le contenu doit toujours figurer sur un calque au-dessus du fond de la page. Si vous ne séparez pas les éléments de votre page en différentes couches, des problèmes peuvent survenir lorsque vous devez modifier quelque chose.

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 avez de contrôle. Vous pouvez avoir l’impression que ce n’est pas important pour le moment, mais il arrive souvent que cela devienne un facteur plus tard.

La chose la plus importante à comprendre est que le «fond» est tout ce qui n’est pas contenu. Par conséquent, le texte ou les images censées figurer sur la page, mais pas sous forme de contenu, comptent comme faisant partie de l'arrière-plan, mais tout le monde ne les classera pas ainsi.

Encadrement

À ses débuts en conception de sites Web, le cadrage consistait simplement à déterminer la position exacte de votre contenu par rapport à l'arrière-plan. En cette journée de conception sensible, cependant, il est généralement plus compliqué que cela.

Avec le responsive design, vous n’avez que deux choix pour régler le problème du cadrage. La première option consiste à redimensionner 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 d '«intégrité de la conception», par ailleurs, signifie simplement que la conception a toujours la même apparence, quel que soit le type d'écran sur lequel elle est visionnée. À l’inverse, le contenu est toujours (plus ou moins) identique, quel que soit le type d’écran sur lequel il est visualisé.

Utiliser la mise à l'échelle pour la réactivité

Lorsque vous utilisez la mise à l'échelle pour maintenir un cadrage uniforme sur différents types et orientations de périphériques, l'intégrité de votre conception est préservée, mais le résultat obtenu peut ne pas toujours correspondre à vos attentes ni même à vos attentes, notamment si vous utilisez un arrière-plan photographique.

Voyons un exemple de cette technique en action. En commençant par le Samsung Galaxy S5 en mode portrait (notez que ces images sont redimensionnées pour tenir dans l'article, de sorte que le texte que vous pouvez voir est réellement lisible sur l'appareil lui-même).

C’est à quoi ça ressemble en mode paysage (il est presque toujours préférable de garder un téléphone en orientation paysage pour tout, sauf pour passer des appels téléphoniques, mais les gens persistent à 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 vous utilisez la mise à l'échelle, c'est qu'il y a peu de différences entre les différents appareils et résolutions, à l'exception du fait qu'il peut y avoir beaucoup d'espace vertical gaspillé sur la vue Portrait.

En fait, il serait préférable d’utiliser différentes méthodes sur les portions d’arrière-plan et de contenu, afin que les éléments de menu s’enveloppent dans une grille 2 × 2 au lieu de toujours rester dans la présentation 1 × 4, mais la raison pour laquelle cela n’est pas fait est il est impossible de prédire combien d’espace vertical sera 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.

Utiliser la peau en phase et révéler la réactivité

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é s'il n'y a pas assez de place pour le montrer, afin que le contenu du site soit toujours disponible. attire le maximum d'attention.

Voici un exemple de la différence lorsque vous utilisez cette méthode. Nous utiliserons les mêmes dispositifs et orientations pour illustrer. Le premier est le portrait 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 l’affichage de l’arrière-plan, que l’appareil soit maintenu en mode portrait ou paysage, et ce qui s’affiche 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 de paver les fonds photographiques, à moins que cela ne puisse être fait de manière à ce que cela ne soit pas perceptible. L'étirement est généralement préférable pour les arrière-plans photographiques ou pour les confiner dans un espace prédéfini.

L'ère des grands fonds éclaboussés est quasiment morte, à l'exception des sites spécialisés destinés uniquement à l'affichage sur un ordinateur de bureau. La plupart des arrière-plans conçus pour les ordinateurs de bureau ne seront pas beaux lorsqu'ils seront visionnés sur des téléphones.

Une solution de contournement consiste à définir un grand nombre de points d'arrêt dans votre fichier CSS et à concevoir des arrière-plans individuels pour chaque point d'arrêt. Toutefois, comme d'habitude, vous devez faire en sorte que l'espace vertical disponible ne puisse jamais être calculé, même lorsque le type de périphérique est connu. .

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

Avatar

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.