Ajouter du style à vos Hero Section sur mobile, c’est possible ! 🤩

Avec l’espace restreint d’un écran de téléphone, on pense souvent qu’il est difficile de réaliser une mise en page visuellement originale et attrayante.

Car on voit souvent la même disposition malheureusement :

1. Titre
2. Paragraphe
3. CTA
4. Image

Cependant, il existe de nombreuses dispositions auxquelles on ne pense pas forcément, et je vais vous en présenter quelques unes dans cet article !

‍

Le youtubeur Payton Clark Smith a récemment sorti une vidéo présentant 13 styles différents de Hero Section sur mobile.

Ce qu’on appelle la “hero section” ou “hero header” c’est l’élément central de votre page. Celui que l’on voit lorsque l’on arrive sur votre site web. Il comporte généralement un titre H1, un sous-titre H2, une illustration ou une image et un bouton CTA (appel à l’action).

Dans cet article, je vous présente 12 Hero Header sur mobile plutôt originales, en espérant que vous changerez d’avis sur le fait qu’il est impossible de créer une hero sublime sur mobile.

‍

1) Musikly - Music Streaming Service Responsive Website Design

‍

‍

Ce premier exemple fait partie des mises en pages les plus classiques, et les plus utilisées. L’organisation de cette home page est assez simple : on a le titre principal, le sous-titre en dessous puis les boutons CTA et enfin l’image principale. C’est simplement une adaptation verticale d’une home page sur ordinateur, qui reste simple mais efficace.

‍

2) App UI

‍

‍

Ici également le style est assez simple. L’image est simplement placée en dessous de la navigation bar et au dessus des textes, à l’inverse du premier exemple. Cette mise en page permet de mettre plus en avant l’image, puisque ce sera le premier élément vu par l’utilisateur en arrivant sur la version mobile du site web.

‍

3) Responsive website design for WyeWorks

‍

‍

Cet exemple est un intéressant moyen de designer votre site sur mobile si vous ne possédez pas d’images fortes à mettre en avant. Le titre et le bouton CTA sont placés en bas de l’écran afin de prendre en compte tout l’espace du viewport. Et cela permet de rendre le site plus facile à utiliser sur mobile, tout en améliorant l’expérience utilisateur.

‍

4) Ahoyy - Digital Marketing Agency Responsive Landing Page

‍

‍

Cette hero section présente simplement le titre principal et le bouton CTA en haut du viewport mais à la différence des autres, elle permet de mettre en avant plusieurs images. On a l’image principale au centre, puis une image à gauche et une droite que l’on peut faire défiler. L’utilisateur peut ainsi swiper d’une image à l’autre facilement pour accéder au contenu, ce qui est très instinctif pour un utilisateur sur mobile.

‍

5) Architects Mobile

‍

‍

Cette home page est un autre exemple de présentation de galeries d’images sur mobile. On retrouve la hero section classique avec le titre principal et le bouton CTA. Les images prennent ensuite tout le reste du viewport et on voit clairement que l’on peut les faire défiler vers la gauche grâce à l’image située sur le côté droit. Les images sont bien mises en avant, et il est facile pour l’utilisateur de découvrir leur contenu en swipant.

‍

6) Apottery Landing Page - Mobile

‍

‍

Ce 6ème exemple reste assez classique avec le titre principal en haut, puis l’image et le sous-titre en dessous. Mais ce qui rend cette hero section originale, c’est les différences d’alignement entre les texte à gauche et l’image à droite. Ainsi, on peut facilement casser le côté un peu trop simple d’une home page en jouant avec l’alignement des éléments.

‍

7) Gin School Mobile Website

‍

‍

Cette hero section est pour le coup très originale ! Elle est divisée en deux partie : un background avec une couleur forte représentant la marque en haut du viewport, comprenant même la nav bar, et une image de fond mettant en avant le produit sur l’autre partie. Le titre principal est placé à la séparation entre les deux parties, et les autres éléments sont en dessous (sous-titre, bouton). Cette home page est une très bonne alternative, il faut simplement faire attention à ce que les éléments placés sur l’image soient assez lisibles par l’utilisateur.

‍

8) Fleet – Travel Shopping UI kit – Mobile

‍

‍

Dans cet exemple (image du milieu), une image est utilisée comme background de la hero section mais elle est fondue en haut du viewport ce qui permet de mieux faire ressortir les éléments. L’effet arrondi de l’image et des éléments ainsi que l’espace et le padding donnent un rendu très propre et unique, ainsi qu’une expérience utilisateur assez agréable sur mobile.

‍

9) Chalatix - Creative Design Agency Landing Responsive Version

‍

‍

Cette home page utilise des effets d’alignement pour rendre sa mise en page unique. On a tout d’abord le titre principal centré à gauche, ainsi que les éléments en bas du viewport, mais pour ce qui est du sous-titre, il est décalé vers la droite par une image de texture. Quand au bouton CTA, il est designé de manière arrondie afin de prendre moins d’espace, et il est également décalé par une image. Ce sont des petits détails mais ils permettent de donner un style original à la hero section.

‍

10) Nonconventional Show Mobile Website

‍

‍

Dans cette home page, on a un style plutôt différent avec une image intégrée directement dans le titre principal. Et on a une autre image plus large placée en dessous qui s’aligne avec les sous-titres et les icônes des réseaux sociaux. L’espace est très bien utilisé malgré que l’on soit sur mobile, et les images permettent d’attirer l’attention de l’utilisateur tout en donnant un côté artistique.

‍

11) Spa Space Mobile Website

‍

‍

Cette hero section présente une manière d’intégrer des onglets dans une hero section sur mobile (image de droite). Il faut surtout faire en sorte qu’ils ne dépassent pas du viewport. Ici, ils sont réalisés de façon à ce que la couleur du background change en fonction du choix de l’utilisateur et qu’une image spécifique apparaisse. Les informations sont donc claires et directement à portée de main sur la home page.

‍

12) AGBA

‍

Enfin, ce dernier exemple de hero section sur mobile est assez spécial. On trouve une image placée en haut à gauche du viewport, puis on a le titre principal et le sous-titre, et enfin une autre image qui vient prendre tout le bas de l’écran. L’image du bas en couleur vient contraster avec le reste de la hero section en noir et blanc.

Mais l’élément peu commun de cette home page est le texte vertical situé en haut à droite. Généralement, les textes placés verticalement sont peu utilisés car illisibles, mais lorsqu’il s’agit d’une date comme ici, ce n’est pas un élément très important donc cela permet simplement d’ajouter une touche originale à la mise en page.

‍

‍

Pour conclure

Comme vous le voyez, il y a pleins de différentes manières de rendre une hero section unique sur mobile, en jouant avec l’alignement et la disposition des éléments.

Alors laissez place à votre créativité ! 🖌

Et surtout ne vous gênez pas pour prendre de l’inspiration dans cet article 🥳

J’espère que cet article vous a plu, et à bientôt 😉👋🏼

‍