Advertisement
  1. Web Design
  2. Inspiration

Les Tendances Design Actuelles du Web : Les pages d'accueil plein écran

by
Read Time:4 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

French (Français) translation by Daszie Chan (you can also view the original English article)

Le design plein écran est un des modèles les plus connus sur le web en ce moment. Certains l’adorent, d'autres le déteste, mais peu importe vos sentiments, nous allons jeter un œil à quelques exemples remarquables et parler des meilleures pratiques alors que nous y sommes.

Une Note sur le Design Convergence

Le terme « design convergence » se réfère à la façon dont les designs ont l’habitude de devenir semblables, convergent, au fil du temps. Récemment @jongold a tweeté ceci :

Son opinion était que les concepteurs manquent de créativité ces jours-ci, et au lieu de cela se plient à la norme lors de la conception de pages web. Le design plein écran est un parfait exemple de cela. Prenons-nous, en tant que designers, la voie la plus facile à l’aide de ce modèle ? Faisons-nous fi la possibilité de repousser les limites et d’innover ? Le web reste le même à cause de la paresse ?

Ou, comme le dit Paul Boag, faisons-nous simplement partie de ce qui est une scène de conception web arrivant à terme ? Construisons-nous ce que les utilisateurs veulent; ce qu’ils attendent et donc ce qui rend nos produits plus faciles à utiliser ?

« Plus un objet est présent de plus sa conception se standardise » – Paul Boag

Je vous laisse décider. Pendant ce temps, nous allons jeter un coup d’œil à certains web designs plein écran !

Haut en bas, Gauche, à Droite

Beaucoup de sites Web plein écran sont précis sur leurs dimensions, utilisant JavaScript ou CSS pour s’assurer que la première section visible est exactement de la même taille que la fenêtre courante du navigateur. Une fois cela fait, certains positionnement CSS peuvent placer les éléments aux extrêmes, même si la fenêtre est redimensionnée.

Makeshift utilise ce modèle pour coller une navigation secondaire en bas de l’écran, avec quelques liens précédent/suivant à gauche et à droite. L’image d’arrière-plan utilise background-size: cover; sur un massif élément figure.

Ideas est un thème plein écran WordPress avec différentes options pour les diaporamas, introductions, présentations etc. de la page d’accueil. Il utilise un dégradé positionné en bas de l’écran pour rendre le titre de l’image et la description plus lisible.

James Tupper pointe vers le haut du bas de l’écran en ayant son graphique de visage positionné avec background-position: center bottom; Le grand fond d'écran jaune est élégamment égalisé à la hauteur de la fenêtre d’affichage en utilisant le CSS  height: 100vh;.

En savoir plus sur ces deux techniques CSS :

Le magazine lifestyle Lagom, une idée originale de Elliot Jay et Samantha Stocks, utilise une page d’accueil qui remplit l’écran dans son intégralité. Aucun défilement ici (à moins que ce soit vu sur un petit écran). Lagom utilise le bord inférieur pour mettre ses liens sociaux.

Soul est un modèle Shopify, et une de ses dispositions est un slider plein écran avec des liens de navigation positionnés sur la droite.

Continuez de défiler s’il vous plaît ↓

Le danger avec l’aide de l’écran complet comme une forme d’introduction, c’est que les utilisateurs ne peuvent pas se rendre compte qu'il y a plus à trouver en faisant défiler. Notre propre page d’accueil de Envato nie cela avec une icône « défiler », suggérant que vous devriez jeter un coup d’oeil ci-dessous le pli.

Blandly, opte pour l'encourageante flèche pointant vers le bas  pour dire « regardez en bas ».

La page d’accueil de Kindeo utilise une technique que j’aime; veiller à ce qu’une petite tranche de la section suivante soit toujours visible au bas de la fenêtre d’affichage. Il y a aussi une flèche avec « En savoir plus » afin que l’utilisateur ne soit jamais en doute s’il y a ou pas quelque chose à trouver ci-dessous le pli.

Kilani a pris l’approche plutôt douteuse de la lecture automatique sonore ; Il y a un bouton de sourdine en bas à droite de l’écran. Leur façon de suggérer de faire défiler est également intéressante – épinglant une instruction « Défilez vers le bas » pour le curseur de la souris :

Video

Damir Kotorić, ancien designer UX chez Envato, a créé Falcon Films en raison de sa passion pour la photographie aérienne. Il est raisonnable que la vidéo joue un rôle important dans la page d’Accueil Films Falcon; jetez un œil au fond, puis regardez la vidéo de drone du showreel pour jucy Melbourne.

Encore une fois, Damir a utilisé le min-height: 100vh; : 100vh; pour créer une section plein écran.

Landscape réalise le même effet; plein écran, la lecture automatique vidéo avec showreel supplémentaire, mais utilise JavaScript pour obtenir le plein écran. Le fichier vidéo mp4 en lecture automatique fait 1,3 Mb, mais à part ça il n’y a rien d’autre qui peut encombrer votre bande passante.

Style

Une chose nous n’avons pas mentionné c’est encore ce que plein écran nous offre : un fond ! Utiliser l’espace pour présenter un produit, une entreprise, une idée, est le point de l’ensemble de ce modèle. Il supprime l’encombrement du reste du contenu et met l’accent sur le message et de la personnalité.

L’exemple de Landscape utilisé plut tôt utilise un beau bleu cobalt (une des raisons pour lesquelles j’adore ça) et Voog fait quelque chose de similaire, qui semble très bien.

Je le dis même si – cette image est bichrome, alors elle peut facilement avoir 540Kb de moins. Un flou léger, puis réduire la qualité de JPG à 50 % l’amène jusqu'à environ 50 Ko sans compromettre l’effet du tout.

Le Bloomberg Businessweek Design Conference (vous y allez ?) utilise une disposition typographique abstraite pour faire son rendu. Design convergence ? Pas ici, camarade.

Ai-je mentionné le projet de traduction Envato Tuts+ ? Peut-être... En tout cas, j’aime la démonstration du script RTL de ce thème – Découvrez Proland, un modèle de page  construit avec Bootstrap avec plusieurs options de mise en plein écran.

Vous avez fait le plein ?

La page d’accueil en plein écran est un modèle que nous ne sommes pas susceptibles de voir disparaître bientôt. Et pourquoi devrait-il ? C’est un moyen efficace d’introduire aux utilisateurs des sites Web de toutes sortes. Quels sont vos favoris ? Où avez-vous vu ce modèle utilisé, pour le meilleur ou le pire ? Faites-le nous savoir dans les commentaires !

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.