La vidéo dans le design web

La vidéo elle-même est dans les parages depuis longtemps ; dans les films, la télévision et maintenant disponible pour jouer sur nos téléphones, tablettes et autres appareils. La vidéo sur le web a également été dans les parages pendant longtemps. Nous avons commencé avec des fichiers flash poids lourds de vidéos et d’animations, alors que maintenant nous avons la vidéo HTML5 et beaucoup plus d’options pour la vidéo, y compris dans nos pages web. Zut, la moitié du temps c’est même juste aussi facile que de balancer certains des codes d’intégration dans un site Web. En bref, nous n'avons jamais eu la vie aussi facile quand il s’agit d’utiliser la vidéo sur le web.

L’évolution de la vidéo

Designer avec la vidéo a été beaucoup plus difficile dans le passé que maintenant. Prendre des séquences vidéo de bonne qualité implique souvent du matériel et des logiciels lourds et coûteux, alors que maintenant nous pouvons utiliser nos caméras numériques normales (ou même nos téléphones !) pour prendre des images de grande qualité. Et si vous vouliez des séquences animées sur votre site Internet, vous deviez être très bon en illustrant numériquement, connaître beaucoup d’ActionScript, ou bien Flash ou embaucher quelqu'un pour le faire. Maintenant, il y a des outils et des bouts de logiciels qui vous aident à créer des animations par eux-mêmes.

Aussi, pensez à la création de YouTube. Fondé en 2005, YouTube est le service le plus populaire que les gens utilisent pour télécharger et partager leurs propres vidéos. Même des entreprises et sociétés massives l’utilisent pour partager des clips populaires ou des nouvelles de leurs émissions de télévision.

À mon avis, YouTube a apporté un peu d'évolution dans la vidéo sur le web. Il a facilité la propagation rapide des campagnes virales et la vidéo rapidement explosé sur la scène. YouTube offre quelque chose que peu avaient été en mesure de faire avant : n’importe qui et tout le monde pourraient créer des vidéos et les partager à qui ils le voulaient, quel que soit leur expérience ou leur capacité technique.

La vidéo sur le web aujourd'hui

De nos jours, nous avons tellement de technologies à notre disposition que Flash est passé à la trappe. HTML5 rend beaucoup plus facile pour nous de développer des moyens pour afficher nos vidéos et autre animation, images visuelles dans nos sites Web. Avoir cette technologie est énorme, car cela signifie que nous avons de bien meilleures possibilités pour utiliser la vidéo dans nos designs et en fait l’utiliser pour améliorer les expériences de nos utilisateurs.

Mais je ne suis pas ici pour parler de YouTube et Vimeo toute la journée, ou même de vous parler de tous les progrès techniques et des techniques que vous pouvez utiliser afin d’inclure la vidéo dans vos sites web. Au lieu de cela, je vais vous guider à travers pourquoi il est bon d’inclure des vidéos dans votre design et ce qui rend les vidéos supers.

Comment pouvons-nous utiliser la vidéo

La vidéo peut être utilisée de bien des façons pour améliorer nos créations et rendre le trajet de l’utilisateur et son expérience meilleurs. Tout comme vous le feriez avec des images différentes (qu’il s’agisse de photographie, d'icones ou des animations) vous devriez viser à utiliser la vidéo dans vos créations pour améliorer vos créations. Gardez à l’esprit que vous voulez que votre message soit clair avec ou sans les vidéos.

Avec n’importe quelle vidéo, c'est important que vous pensiez clairement au message que vous voulez projeter. Tandis que ceci peut dépendre entièrement de la marque, du produit ou du service, utilisez la vidéo aussi soigneusement que vous le feriez pour tout autre élément dans votre design.

Cela dit, nous pouvons utiliser des vidéos...

... Pour introduire

Les vidéos sont géniales pour présenter un produit ou service à vos utilisateurs sans les submerger avec une liste de fonctionnalités longue d'un kilomètre. Pensez à beaucoup de sites web SaaS (Software As A Service, ndlt) ; combien pouvez vous en voir avec une intro vidéo qui explique un peu plus le produit ou service ?

La clé avec cette vidéo est de faire la mise au point de votre design. Si vous voulez mentionner les fonctionnalités dans le texte et les images ci-dessous, avoir une vidéo qui montre les principales fonctionnalités d’une manière créative est un moyen infaillible d’obtenir de vos utilisateurs qu'ils remarquent le produit et souhaitent l'essayer.

Quelques bons exemples de ceci sont sur les sites web Clear app et Paper app.

Clear

Clear est un app de liste de rappel et de gestion de tâche. Le site de Clear est un excellent exemple de l’utilisation de vidéo comme une mise au point, mais veille aussi à ce que le message concernant l’application passe fort et clair sans la vidéo.

La vidéo est placée dans l’en-tête du site, juste à côté des liens de téléchargement d'app et lorsque vous cliquez dessus il charge la vidéo en une superposition miniature.

Cette vidéo est juste une introduction du produit et de l’application elle-même, mais ce qui fonctionne bien est la cohérence de la marque et les effets visuels du design du site web à la vidéo. Que vous l'avez appris dans de précédents articles, la cohérence est essentielle à la création d’un message de marque fort et à la correspondance à cet ensemble, elle rendra les utilisateurs plus susceptibles de faire confiance à la marque et donc d’acheter l’app.

Paper

Paper est une application qui permet d'esquisser et de dessiner joliment sur votre iPad.

L’accent mis sur la vidéo sur le site web de Paper est encore plus grand que sur le site de Clear, avec une image d’en-tête plus grande, vraiment visuellement frappante, avec un icone play sur le dessus de l’image. En cliquant sur Lire la vidéo, cependant, elle s'ouvre également en superposition sur le dessus du reste du design de site web.

Encore une fois, comme pour Clear, le message de la marque, le style et le discours restent très similaire au reste du design du site web. Créer de la cohérence comme ceci peut seulement vous aider à gagner plus de confiance d’utilisateurs à long terme - alors n’oubliez pas de ne pas créer un décalage dans les styles si vous décidez d’inclure une vidéo dans vos designs de site web.

... Pour enchanter

Une chose super au sujet de vidéo (si utilisée intelligemment) est que vous pouvez l’utiliser pour ravir vos utilisateurs, en introduisant des fonctions cachées auxquelles ils ne pourraient pas avoir pensé. Presque comme un petit oeuf de Pâques, mais un peu plus visible et beaucoup plus visuel !

Cette utilisation de la vidéo dans les créations est purement subjective et dépend encore une fois comment la marque doit être représentée. Cela peut ne pas convenir à des designs de site web qui sont des entreprises professionnelles, mais ce serait parfait dans quelque chose d’un peu plus décontracté dans le style.

Quelques sites utilisant ceci à bon escient sont Handheld Conf et Playground Inc.

Handheld Conf

Handheld Conf est une conférence qui se décrit comme « grandes idées pour petits appareils ». Sur la page d’accueil du site web Handheld Conf, il y a une présentation des conférenciers incroyables et de leurs sujets, accompagnée d’une photo. Maintenant, lorsque vous survolez les photos des intervenants, elles prennent vie !

Il s’agit d’une incroyable petite gâterie pour les utilisateurs ; à presque s’y méprendre comme les photographies dans l’univers de Harry Potter, qui se bougent. Dès que le curseur s'éloigne des photos, elles font une pause à l’endroit où votre curseur a quitté la photo. Et si vous revenez à elles, elles reprennent.

Se servir de la vidéo comme c’est une excellente façon d’ajouter un peu plus d’interactivité dans vos sites web, mais aussi créer des petits moyens pour votre utilisateur d’apprécier plus la navigation sur le site.

Playground Inc

Playground Inc est une Agence de création numérique basée à Toronto. Sur leur page d’accueil, ils utilisent l'animation avec brio pour aider à illustrer leurs idées et leurs convictions. Ces animations s'activent seulement une fois que vous avez navigué jusqu'à cette partie de la page, avant qu’elles ne ressemblent à des illustrations statiques.

Il s’agit d’une excellente façon d’ajouter de l'intérêt sur votre site qui ravira les utilisateurs, comme c’est quelque chose qui est tout à fait inattendu mais qui améliore la façon dont ils peuvent interagir avec votre site.

... Pour ajouter de l’intérêt

Main dans la main avec l’aide de vidéo pour le plaisir de vos utilisateurs, vous pouvez également utiliser la vidéo pour ajouter un intérêt supplémentaire visuel et poids à vos éléments de design. Il s’agit d’une excellente façon d’utiliser la vidéo car elle garantit que vous pouvez conserver le niveau d’intérêt plus élevé dans votre site web que si vous aviez beaucoup moins d’éléments visuels pour attraper l'œil de l'utilisateur.

Un bon exemple de ceci est vu sur le site web de Symbolset.

Symbolset

Symbolset crée des polices icone web pour que chacun d'entre nous sur le web, puissions les utiliser. Personnellement, je pense que la façon dont Symbolset fonctionne est assez inventive et la façon dont ils utilisent la vidéo sur leur site web n’est pas différente.

Si vous utilisez les polices Symbolset sur l'ordinateur de bureau (dans Photoshop, par exemple) alors vous pouvez taper le mot clé pour l’icone que vous voulez et il apparaîtra pour vous. De la même manière, ils ont utilisé cela dans leur vidéo.

Symbolset a aussi très habilement faire usage de la couleur aux côtés de chacun des messages qu'ils vous transmettent dans leur vidéo, en gardant un intérêt visuel à un sommet massif. Ce genre de vidéo est également vraiment inclusive, car elle donne l’impression que le site vous parle et se lie personnellement à vous ; ce qui permettra à nouveau d’établir la confiance entre l’utilisateur et l'entreprise elle-même.

... Pour remplacer les grandes images d'arrière-plan

Une tendance qui existe depuis longtemps est la grande, souvent (mais pas limitée à) image d'arrière-plan plein écran. Certaines entreprises au lieu d’utiliser cela comme une opportunité d'espace pour placer leur vidéo plein-écran.

Bien qu'il ne s’agisse de rien de nouveau, vous devez réfléchir à la façon dont vous utilisez ce style de vidéo dans vos créations. Au lieu de simplement une image grandeur nature d'arrière-plan - ce qui est relativement facile à contourner avec vos éléments de design - une vidéo est quelque chose qui est toujours en mouvement et peut provoquer des ravages avec vos éléments de design (pensez typographie, couleurs, boutons, autres éléments comme ça) lorsqu’il est mélangé avec la vidéo. C’est un nouveau défi, mais ça peut être utilisé intelligemment avec une réflexion approfondie.

Un couple de grands exemples de vidéos d'arrière-plan sont Spotify et Slow Mo.

Spotify

Spotify est un service populaire de streaming de musique. Leur page d’accueil de site web utilise une vidéo d'arrière-plan à grande échelle avec de supers effets, avec une vidéo en boucle avec un minimum d’autres éléments de design posés sur le dessus.

Spotify a également décidé d’inclure des fichiers audio sur cette vidéo (que vous pouvez désactiver très facilement, un must lorsqu'on intègre de l'audio sur un site web), ce qui améliore encore la vidéo.

La vidéo, l’audio et le design de la page d’accueil entière aide à donner le ton pour le service et aide les utilisateurs à comprendre un peu plus sur le service et leur slogan « musique pour chaque moment », tout cela sans dire directement ce que Spotify fait.

Slow Mo

Slow Mo sont des spécialistes de caméra haute vitesse. Ils utilisent la vidéo à la place d'une image pour la région de héros en haut de la page d’accueil. Ce qui est astucieux sur Slow Mo, c’est à leur essence, ils sont une compagnie qui vend des caméras à haute vitesse, et ils utilisent la vidéo pour aider à vendre ça.

Les vidéos qu’ils utilisent sur leur page d’accueil sont toutes jouées automatiquement dans un style de ralenti et se nouent parfaitement au nom de la marque. Ça crée également beaucoup d’intérêt visuel, tandis que le contraste entre la vidéo et le texte qui se superposent, c’est toujours gardé fort.

... Pour améliorer votre storytelling

Une dernière chose que vous pouvez faire en utilisant la vidéo dans vos créations est de l’utiliser pour améliorer vos compétences de storytelling. Le storytelling n’est pas quelque chose de nouveau, mais vous pouvez utiliser la vidéo pour l'améliorer encore plus. Le storytelling devrait être au cœur de vos créations et la vidéo est une étape à franchir qui peut aider à améliorer l’expérience de vos utilisateurs sur votre site web.

Un bon exemple de cela en action est sur le site personnel de Dan Eden.

Daneden.me

Dan est un designer, qui a récemment été embauché par Dropbox comme premier stagiaire de design. Dans la section portfolio du site web de Dan, près du titre du projet et des descriptions se trouve aussi (belle apparence) des vidéos qui accompagnent l’utilisateur à travers ce projet.

C’est génial. Au lieu de montrer des captures d’écran simple ou un lien vers le site web, Dan améliore l’expérience de ses utilisateurs en leur permettant de voir le projet en action sans aller nulle part ailleurs. C’est très bien comme ça ajoute de l’intérêt à la page, mais ça encouragera également les utilisateurs à visiter un site web s’ils aiment le look de celui-ci.

Ça peut parfois être très difficile d’avoir une petite idée de comment un site web fonctionne sans le naviguer vous-même, mais Dan a réussi à traverser ce pont sans ajouter des étapes supplémentaires pour ses utilisateurs.

Devoirs

La vidéo est incroyable dans le design web, aussi longtemps que vous l’utilisez bien. Ce que je veux que vous fassiez maintenant est de regarder des vidéos sur le web. Trouvez autant d'exemples que possible et prenez le temps de voir ce qui fonctionne bien et ce qui ne fonctionne pas, à votre avis.

Alors, pensez à comment vous pourriez peut-être passer à l’intégration de vidéo dans vos propres créations et comment vous pouvez l’utiliser pour accroître et améliorer vos créations à l’avenir.