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.