Tendance du webdesign : écran divisé vertical

Appelez-la « split-screen », « divided-screen » ou écran divisé vertical. Cette nouvelle tendance se retrouve dans de nombreux web design : décryptage et exemples.

La tendance du webdesign à deux colonnes, a petit à petit fait son apparition avec l’utilisation du double scroll. Depuis un ou deux ans, de nombreux sites mettent en place ce genre d’effet pour présenter leur contenu.

Bien plus qu’un simple parti pris graphique, diviser l’écran en deux parties bien distinctes offre une manière originale de guider l’utilisateur dans votre site. En y regardant d’un peu plus prêt, on peux y trouver d’autres avantages :

  • Créer des mises en page minimalistes et efficaces.
  • Attirer l’attention de l’utilisateur vers une partie bien précise.
  • Jouer sur les contrastes.
  • Offrir une mise en page non conventionnelle.
  • Créer des sites plein écran.

Ce type de mise en page est particulièrement bien adaptée à une navigation sur grand écran ou encore sur tablette. En testant ces différents sites, j’ai pu cependant constater que les concepteurs trouvent d’intéressantes solutions pour adapter cette présentation à un support mobile. Je vous invite à tester par vous même, en navigant à travers ces quelques exemples :

Plastic Bionic

webdesign-vertical

Studio Meta

webdesign-vertical

Play Mag / Most Wanted 2015

webdesign-vertical

NightCall US

webdesign-vertical

Hello Monday

webdesign-vertical

London Art Weekend

webdesign-vertical

Parktavernsp

webdesign-vertical

Stolen Girl Friends Club

webdesign-vertical

La grande Evasion

webdesign-vertical

Desktime

webdesign-vertical

Formlets

webdesign-vertical

Fifty Five

webdesign-vertical

Rick And Drew

webdesign-vertical

Names for changes

webdesign-vertical

Comment créer deux colonnes en CSS ?

Pour mettre en place un layout à deux colonnes, rien de plus simple. Il suffit de définir deux blocs occupant chacun 50% de votre écran (logique me direz-vous). Fixez-les (avec position) à gauche puis à droite.

Pour la pratique, jetez un oeil au tutoriel « Spilt Layout » de chez Codrops.

Ressources :

Je vous propose deux petits templates (payants) basés sur ce principe :

MUMM | The Splitted Coming Soon

split-ressource

ATHOS – Innovative Coming Soon Template

split-ressource

[Edit : deux nouvelles ressources intéressantes à découvrir ci-dessous]

Moet Multiscrolling Coming Soon Template

Versatile Coming Soon Template

Pour conclure :

Avant de décider de créer un site utilisant le split-screen, je vous conseille de vous poser les bonnes questions :

  • Ce type de mise en page est-il compatible avec ma cible ?
  • Est-il adapté à mon contenu ?
  • Apporte-il vraiment une valeur ajoutée ?

Ne perdez pas de vue que le contenu est roi. Bien qu’un bon design et une bonne expérience utilisateur permettent de rendre le site inoubliable, n’oubliez pas que l’écran divisé est juste un simple moyen de faire passer différemment votre message.

Que pensez-vous de cette tendance ?

15 commentaires

Répondre Tendance du webdesign : écran divis&eacu... Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*