.design .design

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.

Capture - 21 utilisations créatives de la vidéo en Web design

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

Exemple vidéo site Internet - Projet Tsunami
Source – http://mdw.design/2mbdUj5

Armoury

Exemple vidéo site Internet - Armoury
Source – http://mdw.design/2lKTKz9

One shared house

Exemple vidéo site Internet - One shared house
Source – http://mdw.design/2lngsfL

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.

.design
.design

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

Exemple vidéo site Internet - Kaseta
Source – http://mdw.design/2mbeE7I

An deiner Seite

Exemple vidéo site Internet - An deiner Seite
Source – http://mdw.design/2luiqtc

Real time

Exemple vidéo site Internet - Real time
Source – http://mdw.design/2lKOFXE

Trump’s America 2024

Exemple vidéo site Internet - Trump's America 2024
Source – http://mdw.design/2mkNQkY

A Bear’s-Eye View of Yellowstone

Exemple vidéo site Internet - A Bear's-Eye View of Yellowstone
Source – http://mdw.design/2m6Z7t6

21 dimes

Exemple vidéo site Internet - 21 dimes
Source – http://mdw.design/2mkH4eT

Cassius – The missing

Exemple vidéo site Internet - Cassius – The missing
Source – http://mdw.design/2m6Waso

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

Exemple vidéo site Internet - Amur Tiger
Source – http://mdw.design/2m6Zdkb

Brut Magazin 5

Exemple vidéo site Internet - Brut Magazin 5
Source – http://mdw.design/2luj5L8

Inside Channel

Exemple vidéo site Internet - Inside Channel
Source – http://mdw.design/2lu1z9R

The Fine Line: What Makes Simone Biles the World’s Best Gymnast - The New York Times

Exemple vidéo site Internet - The Fine Line: What Makes Simone Biles the World’s Best Gymnast - The New York Times
Source – http://mdw.design/2lEUAx4

How Robert Glasper sampled Miles Davis on “Ghetto Walkin”

Exemple vidéo site Internet - How Robert Glasper sampled Miles Davis
Source – http://mdw.design/2mkHBgT

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.

.design
.design

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

Exemple vidéo site Internet - Le grand orchestre des animaux
Source – http://mdw.design/2lupeHj

Apollo 11 – Travel to the moon

Exemple vidéo site Internet - Apollo 11 – Travel to the moon
Source – http://mdw.design/2kKWLQs

Sing movie

Exemple vidéo site Internet - Sing movie
Source – http://mdw.design/2lul16l

Wheelchair dance

Exemple vidéo site Internet - Wheelchair dance
Source – http://mdw.design/2luc4di

Bangui l'oubliée

Exemple vidéo site Internet - Bangui l'oubliée
Source – http://mdw.design/2l758Sj

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 :

Prenez soin de vous. A bientôt — @guillaumpalayer.

.design
.design

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer

Développez vos talents en explorant ces collections

3 sections à explorer. Des centaines de conseils & d'astuces pour rendre le monde meilleur, pixel après pixel, balise après balise.