Share
La vidéo elle-même existe depuis longtemps; dans les films, à la télévision et maintenant facilement disponible pour jouer sur nos téléphones, tablettes et autres appareils. La vidéo sur le Web existe également depuis longtemps. Nous avons commencé avec des fichiers flash lourds de vidéos et d'animations, alors que nous avons maintenant la vidéo HTML5 et bien d'autres options pour inclure la vidéo dans nos pages Web. Heck, la moitié du temps, c'est même aussi facile que de déposer du code intégré dans un site Web. En bref, l’utilisation de la vidéo sur le Web n’a jamais été aussi simple..
Concevoir avec une vidéo était beaucoup plus difficile dans le passé que maintenant. Prendre des séquences vidéo de bonne qualité impliquait souvent du matériel et des logiciels lourds et coûteux, alors que nous pouvons maintenant utiliser nos appareils photo numériques normaux (ou même nos téléphones!) Pour réaliser des séquences de grande qualité. Et si vous vouliez des séquences animées sur votre site Web, vous deviez soit être très doué pour illustrer numériquement, connaître beaucoup d'ActionScript, soit connaître Flash, soit embaucher quelqu'un d'autre pour le faire. Maintenant, il existe des outils et des logiciels qui vous aident à créer des animations par vous-même..
Pensez également à la création de YouTube. Fondé en 2005, YouTube est le service le plus populaire utilisé par les internautes pour télécharger et partager leurs propres vidéos. Même les grandes entreprises et les entreprises l'utilisent pour partager des clips populaires ou des nouvelles de leurs émissions télévisées.
À mon avis, YouTube a entraîné une légère évolution de la vidéo sur le Web. Ils ont permis aux campagnes virales de se propager rapidement et la vidéo a rapidement explosé. YouTube proposait quelque chose que peu de gens avaient pu faire auparavant: n'importe qui et Tout le monde pourrait créer une vidéo et la partager à qui ils voudraient, quelles que soient leur expérience ou leurs capacités techniques.
De nos jours, nous avons tellement de technologies à notre disposition que Flash est en grande partie tombé à l'eau. Grâce au HTML5, il est beaucoup plus facile pour nous de développer des moyens d’afficher nos vidéos et d’autres images animées et visuelles sur nos sites Web. Avoir cette technologie est formidable, car cela signifie que nous avons de bien meilleures opportunités d'utiliser la vidéo dans nos conceptions et de l'utiliser réellement pour améliorer l'expérience de nos utilisateurs..
Mais je ne suis pas ici pour parler de YouTube et de Vimeo toute la journée, ni même pour vous parler de tous les progrès techniques et techniques que vous pouvez utiliser pour inclure la vidéo dans vos sites Web. Au lieu de cela, je vais vous expliquer pourquoi il est bon d'inclure des vidéos dans votre conception et en quoi une vidéo est géniale..
La vidéo peut être utilisée de nombreuses façons pour améliorer nos conceptions et améliorer le parcours et l'expérience de l'utilisateur. Comme vous le feriez avec différentes images (qu'il s'agisse de photographies, d'icônes ou d'animations), vous devriez viser à utiliser la vidéo dans vos conceptions pour: améliorer vos dessins. N'oubliez pas que vous voulez que votre message soit clair avec ou sans les vidéos.
Dans toute vidéo, il est important que vous réfléchissiez clairement au message que vous souhaitez projeter. Bien que cela dépende totalement de la marque, du produit ou du service, utilisez la vidéo avec autant de soin que tout autre élément de votre conception..
Cela dit, nous pouvons utiliser des vidéos…
Les vidéos sont idéales pour présenter à vos utilisateurs un produit ou un service sans les surcharger avec une liste de fonctionnalités d'un kilomètre de long. Pensez à de nombreux sites Web SaaS; combien pouvez-vous voir avec une vidéo d'introduction qui explique un peu plus le produit ou le service?
La clé de cette vidéo est d’en faire le centre de votre conception. Bien que vous souhaitiez mentionner les fonctionnalités de texte et d'images ci-dessous, le fait de visionner une vidéo présentant les fonctionnalités principales de manière créative est un moyen sûr de faire en sorte que vos utilisateurs remarquent le produit et souhaitent l'essayer davantage..
Quelques exemples intéressants sont disponibles sur les sites Web de l'application Clear et de l'application Paper..
Clear est une application pour les tâches et les listes. Le site Web de Clear est un excellent exemple d'utilisation de la vidéo en tant que cible, mais garantit également que le message à propos de l'application est clair et clair sans la vidéo..
La vidéo est placée dans l'en-tête du site Web, juste à côté des liens de téléchargement d'applications, et lorsque vous cliquez dessus, la vidéo est chargée en superposition..
Cette vidéo n'est qu'une introduction au produit et à l'application elle-même, mais ce qui fonctionne bien est la cohérence de la marque et des éléments visuels, de la conception du site Web à la vidéo. Comme vous l'avez appris dans de précédents articles, la cohérence est essentielle pour créer un message de marque fort et pour faire correspondre si bien les deux, les utilisateurs auront davantage tendance à faire confiance à la marque et donc à acheter l'application..
Paper est une application qui vous permet de dessiner et de dessiner magnifiquement sur votre iPad..
L'accent mis sur la vidéo sur le site Web Paper est encore plus important que sur le site Web Clear, avec une image d'en-tête plus grande et réellement frappante, avec une icône de lecture vidéo au-dessus de l'image. En cliquant pour lire la vidéo, il s’est également ouvert en superposition sur le reste de la conception du site Web..
Encore une fois, comme pour Clear, le message de la marque, le style et le ton de la voix restent très similaires au reste de la conception du site Web. Créer une telle cohérence ne peut que vous aider à gagner plus de confiance des utilisateurs sur le long terme. Veillez donc à ne pas créer de discordance dans les styles si vous décidez d'inclure une vidéo dans la conception de votre site Web..
Un grand avantage de la vidéo (si elle est utilisée intelligemment) est que vous pouvez l’utiliser pour le plus grand plaisir de vos utilisateurs en leur proposant des fonctionnalités cachées auxquelles ils n’auraient peut-être pas 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 conceptions est purement subjective et dépendrait encore une fois de la manière dont la marque doit être représentée. Cela pourrait ne pas convenir aux conceptions de sites Web destinées aux entreprises professionnelles, mais conviendrait parfaitement pour un style un peu plus décontracté..
Handheld Conf et Playground Inc sont quelques-uns des sites Web qui y ont recours..
Handheld Conf est une conférence qui se décrit comme «de grandes idées pour les petits appareils». Sur la page d'accueil du site Web de Handheld Conf, vous trouverez une liste de conférenciers incroyables et leurs sujets, avec une photo. Maintenant, lorsque vous survolez les photos du haut-parleur, elles prennent vie!
C'est un petit régal pour les utilisateurs. presque étrangement comme des photographies dans le monde de Harry Potter, ça bouge. Dès que votre curseur s'éloigne des photos, celles-ci font une pause à l'endroit où il a quitté la photo. Et si vous revenez sur eux, ils reprennent.
Utiliser de la vidéo comme celle-ci est un excellent moyen d'ajouter un peu plus d'interactivité à vos sites Web, mais également de créer de petits moyens pour que vos utilisateurs profitent davantage de la navigation sur le site..
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 illustrer leurs idées et leurs croyances. Ces animations ne s'activent qu'une fois que vous avez fait défiler cette partie de la page et auparavant, elles ressemblent à des illustrations statiques..
C'est un excellent moyen d'ajouter de l'intérêt à votre site Web qui ravira les utilisateurs, car c'est quelque chose de totalement inattendu mais qui améliore la façon dont ils peuvent interagir avec votre site..
Parallèlement à l'utilisation de la vidéo pour le plaisir de vos utilisateurs, vous pouvez également utiliser la vidéo pour ajouter un intérêt visuel et du poids supplémentaires à vos éléments de conception. C'est un excellent moyen d'utiliser la vidéo car cela vous permet de maintenir le niveau d'intérêt de votre site Web plus élevé que si vous aviez beaucoup moins d'éléments visuels pour attirer l'attention des utilisateurs..
Un excellent exemple de ceci est vu sur le site Web de Symbolset.
Symbolset crée des icônes de polices Web pour chacun de nous, adorables internautes. Personnellement, je pense que la façon dont fonctionne Symbolset est assez inventive et que la manière dont ils utilisent la vidéo sur leur site Web n’est pas différente..
Si vous utilisez les polices Symbolset sur le bureau (dans Photoshop, par exemple), vous pouvez taper le mot-clé correspondant à l'icône souhaitée et il apparaîtra pour vous. De la même manière, ils l'ont utilisé dans leur vidéo.
Symbolset utilise également la couleur de manière intelligente, ainsi que chacun des messages qu’ils taperont dans leur vidéo, ce qui maintient l’intérêt visuel de l’entreprise. Ce type de vidéo est également vraiment inclusif car il donne l’impression que le site Web vous parle et vous connecte personnellement avec vous; ce qui encore aidera à établir la confiance entre l'utilisateur et la société elle-même.
Une tendance qui perdure depuis longtemps est la taille de l’image d’arrière-plan en plein écran, souvent volumineuse. Certaines entreprises utilisent maintenant cette opportunité pour placer leur vidéo en plein écran..
Bien que cela ne soit pas nouveau, vous devez bien réfléchir à la manière dont vous utilisez ce style de vidéo dans vos conceptions. Au lieu d’une simple image d’arrière-plan à grande échelle - ce qui est relativement facile à utiliser avec vos éléments de conception - une vidéo est quelque chose qui bouge en permanence et peut causer des ravages à vos éléments de conception (pensez à la typographie, à la couleur, aux boutons, etc. que) lorsque mélangé avec la vidéo en mouvement. C'est un nouveau défi, mais qui peut être utilisé intelligemment en réfléchissant bien.
Quelques excellents exemples de grandes vidéos d'arrière-plan sont de Spotify et Slow Mo.
Spotify est un service populaire de diffusion de musique en streaming. La page d'accueil de leur site Web utilise très largement la vidéo d'arrière-plan à grande échelle, avec une vidéo en boucle avec un minimum d'éléments de conception superposés..
Spotify a également décidé d’inclure de l’audio dans cette vidéo (que vous pouvez désactiver très facilement, un atout indispensable lorsque vous incluez de l’audio sur un site Web), ce qui améliore encore la vidéo..
La vidéo, l'audio et la conception de la page d'accueil permettent de donner le ton au service et d'aider les utilisateurs à en comprendre un peu plus sur le service et leur slogan «musique pour chaque instant», le tout sans dire directement ce que fait réellement Spotify..
Slow Mo sont des spécialistes des caméras haute vitesse. Ils utilisent la vidéo à la place d'une image pour la zone des héros en haut de la page d'accueil. Ce qui est intelligent à propos de Slow Mo, c’est qu’il s’agit essentiellement d’une entreprise qui vend des caméras haute vitesse et qui utilise la vidéo pour aider à le vendre..
Les vidéos qu'ils utilisent sur leur page d'accueil sont toutes lues automatiquement au ralenti et correspondent parfaitement au nom de la marque. Cela crée également beaucoup d’intérêt visuel, tandis que le contraste entre la vidéo et le texte qui la recouvre reste toujours fort..
Une dernière chose que vous pouvez faire en utilisant la vidéo dans vos conceptions est de l’utiliser pour améliorer vos compétences en narration. La narration n'est pas une nouveauté, mais vous pouvez utiliser la vidéo pour l'améliorer encore plus. La narration doit être au cœur de vos conceptions et la vidéo est une étape à franchir qui peut aider à améliorer l'expérience de vos utilisateurs sur votre site Web..
Le site Web personnel de Dan Eden en est un bon exemple..
Dan est un designer récemment recruté par Dropbox en tant que premier stagiaire en design Dropbox. Dans la section portefeuille du site Web de Dan, à côté du titre et des descriptions du projet, il propose également de belles vidéos qui guident l'utilisateur tout au long du projet..
C'est génial. Au lieu d'afficher de simples captures d'écran ou de créer des liens 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 formidable, car cela ajoute de l’intérêt à la page, mais cela encouragera également les utilisateurs à visiter un site Web s’ils apprécient son apparence..
Il peut parfois être très difficile de comprendre le fonctionnement d'un site Web sans le parcourir vous-même, mais Dan a réussi à franchir ce pont sans ajouter d'étape supplémentaire à ses utilisateurs..
Donc, la vidéo est excellente dans la conception Web, tant que vous l'utilisez bien. Ce que je veux que vous fassiez maintenant, c'est regarder des vidéos sur le Web. Trouvez autant d'exemples que possible et prenez le temps de voir ce qui fonctionne et ce qui ne fonctionne pas, selon vous..
Ensuite, réfléchissez à la manière dont vous pourriez éventuellement intégrer la vidéo dans vos propres conceptions et à la façon dont vous pouvez l’utiliser pour: améliorer et améliorer vos créations à l'avenir.
Accentsconagua