Share
Le mode plein écran est l’un des motifs les plus connus du Web à l’heure actuelle. Certains l'adorent, d'autres le détestent, mais quels que soient vos sentiments, jetons un coup d'œil à quelques exemples remarquables et parlons des meilleures pratiques pendant que nous y sommes.
Le terme "convergence de conception" désigne la manière dont les conceptions ont l’habitude de devenir similaires, convergent, heures supplémentaires. @Jongold a récemment tweeté ce qui suit:
Lequel des deux sites possibles concevez-vous actuellement? pic.twitter.com/ZD0uRGTqqm
- gold (@jongold) 2 février 2016
Son point de vue était que les concepteurs manquent de créativité ces jours-ci, recherchant plutôt la convention acceptable la plus proche lors de la conception de pages Web. L'écran plein écran en est un parfait exemple. En tant que concepteurs, empruntons-nous l’itinéraire facile en utilisant ce modèle? Ignorons-nous la possibilité de repousser les limites et d'innover? La toile est-elle toujours immobile à cause de la paresse?
Ou, comme le dit Paul Boag, sommes-nous simplement une partie de ce qu’est une scène de web design en pleine maturité? Construisons-nous ce que veulent les utilisateurs? ce à quoi ils s'attendent, ce qui facilite l'utilisation de nos produits?
“Plus un objet dure longtemps, plus son design se normalise” - Paul Boag
Je vous laisse le soin de décider. En attendant, jetons un coup d'œil à certaines conceptions Web en plein écran!
De nombreux sites Web plein écran précisent leurs dimensions, en utilisant JavaScript ou CSS pour s’assurer que la section visible exactement la même taille que la fenêtre actuelle du navigateur. Une fois cela fait, certains positionnement CSS peuvent placer des éléments aux extrêmes, même si la fenêtre est redimensionnée.
Ideas est un thème WordPress en plein écran avec diverses options pour les diaporamas, les introductions, les présentations de page d'accueil, etc. Il utilise un dégradé placé au bas de l'écran pour rendre le titre et la description de l'image plus lisibles..
James Tupper jette un coup d'œil depuis le bas de l'écran en plaçant son graphique de visage avec position de fond: centre en bas;. L'immense splash jaune est élégamment rendu égal à la hauteur de la fenêtre d'affichage à l'aide de CSS natif. hauteur: 100vh;.
En savoir plus sur ces deux techniques CSS:
Le magazine de style de vie Lagom, idée originale d'Elliot Jay et de Samantha Stocks, utilise une page d'accueil qui remplit l'écran dans son intégralité. Pas de défilement ici (à moins d'être visionné sur un petit écran). Lagom utilise le bord inférieur pour héberger ses liens sociaux.
Soul est un modèle Shopify et l'une de ses dispositions est un curseur plein écran avec des liens de navigation positionnés à droite..
L'utilisation du plein écran comme forme d'introduction présente le danger que les utilisateurs ne se rendent pas compte que le défilement permet de trouver plus d'informations. Notre propre page d'accueil Envato résout ce problème avec une icône "défilement", suggérant que vous devriez jeter un coup d'oeil sous le pli..
Blandly opte pour la pointe de flèche encourageante pointant vers le bas pour dire «regarde en bas».
La page d’accueil de Kindeo utilise une technique que j’aime bien; en veillant à ce qu'une petite tranche de la section suivante soit toujours visible au bas de la fenêtre. Il y a aussi une flèche avec "En savoir plus" pour que l'utilisateur ne doute jamais qu'il y a quelque chose à trouver sous le pli.
Kilani a adopté l'approche plutôt douteuse de la lecture automatique du son; il y a un bouton muet en bas à droite de l'écran. Leur façon de suggérer de faire défiler plus loin est également intéressante: épingler une instruction «Défilement vers le bas» au curseur de la souris:
Damir Kotorić, ancien designer UX chez Envato, a commencé Falcon Films en raison de sa passion pour la photographie aérienne. Il n’est que raisonnable que la vidéo joue un rôle important dans la page d’accueil de Falcon Films; Découvrez le fond , puis regarder le showreel pour les images de drones juteux Melbourne.
Encore une fois, Damir a utilisé le CSS natif hauteur min .: 100vh; créer une section de héros en plein écran.
Le paysage atteint à peu près le même effet; une vidéo en plein écran, à lecture automatique, avec showreel supplémentaire, mais utilise JavaScript pour obtenir le plein écran. Le fichier vidéo mp4 en lecture automatique est de 1,3 Mo, mais rien d’autre ne peut encombrer votre bande passante..
Une chose que nous n'avons pas encore mentionnée est ce que le plein écran nous offre: une toile! Utiliser cet espace pour présenter un produit, une entreprise, une idée est l’intérêt de ce modèle. Il supprime le fouillis du reste du contenu et se concentre sur le message et la personnalité.
L’exemple précédent de Landscape utilise un beau bleu de cobalt (une des raisons pour lesquelles je l’aime) et Voog fait quelque chose de similaire, qui a génial.
Cependant, je le dis toujours - cette image est en bichromie, elle peut donc être facilement découpée à la taille courante (540 Ko). Un léger flou, puis la réduction de la qualité JPG à 50% la ramène à environ 50 Ko sans que l’effet en soit compromis.
La Bloomberg Businessweek Design Conference (allez-vous?) Utilise une mise en page typographique abstraite pour faire valoir son point de vue. Convergence de la conception? Pas ici, mon pote.
Ai-je déjà mentionné le projet de traduction Envato Tuts +? Peut-être… Quoi qu'il en soit, j'aime beaucoup la démonstration de ce thème sur RTL, consultez Proland, un modèle de page de renvoi construite par Bootstrap avec plusieurs options de disposition en plein écran..
La page d'accueil en plein écran est un motif que nous ne verrons pas disparaître de si tôt. Et pourquoi devrait-il? C'est un moyen efficace de présenter aux utilisateurs des sites Web de toutes sortes. Quels sont certains de vos favoris? Où avez-vous vu ce modèle utilisé, pour le meilleur ou pour le pire? Faites le nous savoir dans les commentaires!
Accentsconagua