21 utilisations créatives de la vidéo en Web design
Sélection d'exemples récents de sites Internet utilisant la vidéo comme principale source de contenus – saupoudrés de quelques astuces.

Certaines créations sont surprenantes, d'autres un peu trop originales pour que je comprenne le concept. Mais j'espère que vous y trouverez de quoi alimenter votre créativité.
J'ai complété cette sélection avec 6 conseils pour que l'insertion d'une vidéo dans votre design ne tourne pas au fiasco.
En guise de contre exemple, je vous offre un ticket pour embarquer dans ma way back machine : année 2012 – la vidéo et le Web design. C'est folklo en terme de parti-pris créatifs. D'autres inspirations sont disponibles dans les collections du Magazine du Webdesign et au sein de la section Inspirations Site Web.
Projet Tsunami
Armoury
One shared house
Conseil #1
Mettez en scène vos emplacements dédiés à vos vidéos en les habillant d'éléments graphiques. Superposez un filtre de couleur, un dégradé, une texture, afin d'habiller davantage le look de votre lecteur vidéo.
Conseil #2
Affichez l'interface du lecteur et les contrôles associés (volume du son, piste de lecture, etc.) uniquement lorsque l'utilisateur le demande. Par exemple, n'affichez qu'un aperçu image de la vidéo et une icône Play pour le lecteur en pause. Si l'utilisateur clique sur l'aperçu, la vidéo et les contrôles du lecteur peuvent être affichés. Grâce à ces 2 états pause/play, le design de votre interface s'en trouvera allégée.
Kaseta
An deiner Seite
Real time
Trump’s America 2024
A Bear’s-Eye View of Yellowstone
21 dimes
Cassius – The missing
Conseil #3
Créer un site Web avec de la vidéo est un excellent moyen pour injecter du mouvement. Néanmoins, si l'utilisateur ne réalise aucune action, les vidéos sont bien souvent figées. Un clic ou un tap est nécessaire pour lire une vidéo. Pour capter l'attention de vos visiteurs vers vos vidéos, une solution peut être une image au format .gif ou une boucle vidéo de quelques secondes. Cette mise en scène permet d'en montrer plus à vos visiteurs et de les inciter à voir vos vidéos.
Conseil #4
Prenez garde à ne pas étouffer votre message avec une quantité trop importante de vidéos. Le texte permet d'aérer votre structure de page. Et pour des raisons d’ accessibilité Web, il est nécessaire de proposer une alternative texte aux contenus de vos vidéos (sous-titres inclus).
Amur Tiger
Brut Magazin 5
Inside Channel
The Fine Line: What Makes Simone Biles the World’s Best Gymnast - The New York Times
How Robert Glasper sampled Miles Davis on “Ghetto Walkin”
Conseil #5
La base : le contraste – l’opposition de deux choses dont l’une fait ressortir l’autre. Comme toutes les évidences, c'est évident pour personne. Proposez un contraste fort entre votre vidéo en arrière-plan et le texte superposé à l'image. Deux outils pour tester les contrastes pour vos couleurs de premier plan et d'arrière plan : Colorable et Contrast ratio.
Conseil #6
Coupez le son. N'imposez pas à vos visiteurs des sons intrusifs. Si votre site Internet est constitué en grande partie de contenus vidéos – type web-documentaire – avertissez vos visiteurs avant de débuter l'expérience. Le message type est “Avec un casque, c'est encore mieux”. Et proposer un accès rapide pour couper le son.
Le grand orchestre des animaux
Apollo 11 – Travel to the moon
Sing movie
Wheelchair dance
Bangui l'oubliée
Transformez la création de votre site Web en entreprise rentable
La plupart des sites Web présentés dans cet article ont été réalisés avec l'aide de développeurs talentueux. Mais il n'est pas toujours nécessaire de passer par un expert pour obtenir un site Web de qualité. Des outils tels que Webflow, Squarespace ou Wix offrent un moyen simple et accessible à toutes les bourses pour créer un site.
En parlant de Wix, leur approche du design se base sur un principe simple : proposer une plateforme de développement Web basée sur le Cloud utile à des millions d’utilisateurs à travers le monde. Wix permet à chacun de créer facilement un site web de qualité. Ils font partie des leaders de la création de site Internet pour présenter ses travaux, créer sa boutique en ligne ou exprimer simplement sa créativité.
Wix propose des modèles de page entièrement personnalisables, permettant d’ajouter en quelques clics vos textes, images et autres contenus. Pour rester dans le sujet, essayez les templates Wix avec un arrière-plan vidéo !
On en parle ?!
Avez-vous des commentaires, des questions, de l’amour ou de la haine ? Envoyer tout ça à guillaume@magazineduwebdesign.com.
Si vous avez apprécié cet article, vous pourriez être intéressé(e) par :
- Vidéo 360/VR – Exploration des nouvelles réalités à travers la narration immersive ;
- ThreeJs en action ;
- 15 designs de site web ecommerce plus cool que Tobias van Schneider ;
- Les meilleurs sites Web portfolio perso et d'agence – Juin 2016 ;
- Meilleures UI Animations – juin 2016 ;
- 30 Portfolios de graphiste et Webdesigner – design inspiration ;
- 50 exemples de landing pages – design inspiration ;
- 17 expériences ecommerce élégantes – novembre 2016 ;
- 56 approches créatives de portfolios – sélection automne 2016.
Prenez soin de vous. A bientôt — @guillaumpalayer.