L'une des premières choses que vous faites dans la conception d'un site consiste à décider de l'aspect du premier bloc de pixels visible par les utilisateurs. Vous devez attirer leur attention et communiquer votre message au-dessus du pli, sinon vous risquez que cette personne ne passe à son prochain onglet ouvert.
Malheureusement, beaucoup d’entre nous se retrouvent dans des schémas prévisibles pour cette partie du site. Nous utilisons les mêmes astuces, formes et plugins et obtenons un résultat qui peut sembler génial, mais qui n’est pas vraiment excitant. Aujourd'hui, nous examinerons brièvement comment rendre les images d'en-tête plus intéressantes. En cours de route, nous verrons des exemples en direct de sites ayant implémenté ces techniques avec succès.
The Standard, Boring Header Image
Bien trop souvent, lorsque je commence à encadrer un projet, je commence par quelque chose comme ceci:
Ne vous méprenez pas, cette présentation est solide comme un roc, et la raison pour laquelle elle est si populaire est qu'elle fonctionne extrêmement bien. Cependant, il y a un temps pour emprunter la voie de la sécurité et un temps pour se diversifier de manière créative et explorer de nouvelles idées.
En particulier, la partie qui m'ennuie est l'image d'en-tête (j'utilise le terme "en-tête" pour signifier la partie supérieure de la page). C'est juste un grand rectangle statique. Si c'est dynamique, c'est généralement quelque chose d'aussi simple qu'un curseur d'image jQuery. Encore une fois, l’un de mes trucs préférés en matière de design, cependant, n’est pas exactement une bonne représentation de "out of the box". penser à ce moment.
Alors, comment pouvons-nous sortir de l'ornière de courir vers le rectangle fatigué chaque fois que nous avons besoin d'une grande image en gras dans notre en-tête? Si nous pensons vraiment au problème, certaines solutions se présentent facilement.
Le changer
Voici quelques idées pour vous aider à ajouter de la variété à vos images d’en-tête. Pouvez-vous penser à d'autres idées?
Changer la forme
La première chose qui me vient à l’esprit est d’abandonner le rectangle. Essayez d’utiliser un carré, un cercle, un triangle ou même une série d’images. Vous pouvez même abandonner le conteneur tous ensemble et essayer de placer une icône ou un graphique directement sur l'arrière-plan de votre site Web.
En outre, ne vous contentez pas des formes standard. Essayez de créer une image qui utilise une forme plus abstraite et fluide. Inclinez-le autour de votre contenu pour une réelle créativité.
Le rendre plus dynamique
Allez au-delà du curseur d'image jQuery. Essayez de penser à une nouvelle manière d’amener un utilisateur à interagir avec l’image. Utilisez le clic, le défilement, les mouvements de la souris et plus pour transformer l'image de manière intéressante.
Éclater
Un autre moyen très simple de rendre l’image d’en-tête plus intéressante est de permettre la diffusion du contenu qui se trouve à l’intérieur ou du contenu qui se trouve à l’extérieur.
J'ai utilisé cette technique avec une capture d'écran d'application dans un article récent de Design Tricks.
Quelque chose de différent à chaque fois
Une astuce populaire fréquemment utilisée par Apple sur leur page d'accueil consiste à avoir une série d'images d'en-tête en rotation. Lorsque vous actualisez la page, une sélection de trois à quatre options différentes est effectuée de manière aléatoire.
Cela rend non seulement votre site plus attrayant pour les utilisateurs, mais vous aide également à déterminer ce qui fonctionne le mieux et ce qui semble le plus intéresser les utilisateurs. En regardant vos statistiques, vous pouvez déterminer quelle image génère le plus de clics, puis créer une nouvelle stratégie basée sur ces connaissances.
Exemples à l'état sauvage
Maintenant que nous avons quelques idées sur la table pour aborder les images d'en-tête d'une manière plus intéressante, voyons si nous pouvons trouver des exemples de concepteurs appliquant ces techniques.
Co-travail
L’un de mes exemples préférés que j’ai vu récemment est sur le site Co-Work. Le curseur d'image en haut de cette page est, au fond, la même vieille technique standard. Cependant, le designer a ajouté quelques encoches qui lui donnent une forme irrégulière.
Notez à quel point cette image est plus intégrée au reste du contenu que votre rectangle typique. Il entoure le logo, la navigation et la copie du corps de manière à conférer au site une impression d'art moderne presque abstrait, idéale pour les espaces de travail propres et joliment conçus que le site représente.
Cela ne nécessite pas d'imagination débordante ni même beaucoup de travail à mettre en œuvre, c'est simplement le résultat d'un petit effort supplémentaire qui donne au site une apparence qui lui est propre.
Adrian Baxter
Le développeur Web Adrian Baxter a un autre excellent exemple d'image d'en-tête unique sur son site.
Outre l’idée géniale de combattre une horde de zombies avec un clavier Bluetooth Mac, cette image est différente car elle a été divisée en quatre panneaux distincts. Fonctionnellement, il n'y a vraiment aucune raison pour cela, mais du point de vue du design, c'est une bonne idée. Remarquez comment cela reflète la disposition des liens ci-dessous, un exemple classique de répétition dans la conception.
Le plaisir ne s’arrête pas là cependant, Adrian va encore plus loin en ajoutant un effet de parallaxe qui modifie la scène lorsque vous déplacez votre souris sur le site. Au fur et à mesure que la scène se déplace, les images coulent d'une image à l'autre. C'est un très bel effet!
Sony Tablet S
L'exemple le plus innovant que j'ai pu trouver est le site de la tablette Sony. Pour commencer, le site a l'air assez simple, l'image d'en-tête montre une sorte de flux plié qui se termine dans la tablette. À ce stade, je n'étais pas vraiment impressionné et je pensais même que le site avait l'air un peu trop encombré.
Lorsque vous faites défiler l'écran (ou appuyez sur le bouton bas), le site devient vraiment très chic. La tablette reste au milieu de votre écran lorsque le reste du contenu est déplacé. Il se déconnecte du flux plié et commence à tourner et à basculer dans l'espace 3D.
Lorsque vous arrivez dans une nouvelle section de contenu, la tablette se transforme en une pose qui s’intègre à la conception de cette zone.
Il y a du contenu, des parties, des incrustations et des fonctionnalités, les mains sortent et utilisent l’écran tactile; le résultat est vraiment impressionnant et procure une expérience de navigation impressionnante, dynamique et interactive qui ne nécessite que le défilement.
Kyan
Le concept de ce site est très similaire à celui de la page Sony Tablet, mais uniquement de manière horizontale. La position initiale du curseur d'image montre un iPhone, une tablette et un écran d'ordinateur assis autour de divers outils de conception. J'aime le style d'illustration plat ressemblant à du papier.
Lorsque vous appuyez sur le bouton fléché à droite, chacun des objets entourant les périphériques au centre disparaît et sort de l'écran l'un après l'autre, puis l'écran se décale et place les périphériques dans une nouvelle scène:
C'est beaucoup plus impressionnant, unique et attrayant que votre slider typique. Lorsque vous voyez l'effet pour la première fois, vous ne pouvez pas vous empêcher de cliquer plusieurs fois sur le bouton pour le voir à nouveau.
Conclusion
Le but ici est d’aider votre cerveau à sortir de l’ornière d’insertion de la même grande image rectangle ancienne en haut de vos créations. Avec un peu de réflexion et d’effort, vous pouvez facilement accomplir quelque chose de plus unique et d’attrayant.
Cela efface à peine la surface de ce qui se fait actuellement avec les images d'en-tête. Avez-vous vu d'autres exemples intéressants? Aussi, avez-vous eu de bonnes idées vous-même? Laissez un commentaire et faites le nous savoir.