Share
El video en sí ha existido por mucho tiempo; en películas, en la televisión y ahora disponible para reproducir en nuestros teléfonos, tabletas y otros dispositivos. El video en la web también ha existido por mucho tiempo. Comenzamos con archivos flash de gran peso de videos y animaciones, mientras que ahora tenemos videos HTML5 y muchas más opciones para incluir videos en nuestras páginas web. Diablos, la mitad de las veces es tan fácil como colocar un código de inserción en un sitio web. En resumen, nunca lo hemos tenido tan fácil cuando se trata de usar videos en la web..
Diseñar con video era mucho más difícil en el pasado que ahora. Tomar imágenes de video de buena calidad a menudo involucraba equipo y software pesado y costoso, mientras que ahora podemos usar nuestras cámaras digitales normales (¡o incluso nuestros teléfonos!) Para tomar imágenes de gran calidad. Y si quería secuencias animadas en su sitio web, tenía que ser muy bueno para ilustrar digitalmente, saber mucho de Actionscript, o utilizar Flash, o contratar a alguien más para que lo hiciera. Ahora, hay herramientas y piezas de software que le ayudan a crear animaciones por sí mismos..
Además, piensa en la creación de YouTube. Fundada en 2005, YouTube es el servicio más popular que la gente usa para cargar y compartir sus propios videos. Incluso corporaciones y empresas masivas lo utilizan para compartir clips populares o noticias de sus programas de televisión.
En mi opinión, YouTube trajo un poco de una evolución del video en la web. Facilitaron la propagación rápida de las campañas virales y el video explotó rápidamente en la escena. YouTube ofreció algo que pocos habían podido hacer antes: nadie y todos podría crear video y compartirlo con quien quisiera, independientemente de su experiencia o capacidad técnica.
Hoy en día, tenemos tantas tecnologías a nuestra disposición que Flash se ha quedado en el camino. HTML5 hace que sea mucho más fácil para nosotros desarrollar formas de mostrar nuestros videos y otras imágenes visuales animadas en nuestros sitios web. Tener esta tecnología es genial, ya que significa que tenemos oportunidades mucho mejores para usar el video en nuestros diseños y usarlo para mejorar las experiencias de los usuarios..
Pero no estoy aquí para hablar de YouTube y Vimeo todo el día, ni siquiera para informarle sobre todos los avances técnicos y técnicas que puede usar para incluir videos en sus sitios web. En su lugar, te mostraré por qué es bueno incluir videos en tu diseño y por qué el video es genial.
El video se puede utilizar de muchas maneras para mejorar nuestros diseños y hacer que el viaje y la experiencia del usuario sean mejores. Al igual que lo haría con varias imágenes (ya sea fotografía, iconos o animaciones), debe apuntar a utilizar el video en sus diseños para mejorar tus diseños Tenga en cuenta que desea que su mensaje sea claro con o sin los videos.
Con cualquier video es importante que piense claramente sobre el mensaje que desea proyectar. Si bien esto puede depender totalmente de la marca, el producto o el servicio, use el video tan cuidadosamente como lo haría con cualquier otro elemento en su diseño..
Dicho esto, podemos usar videos ...
Los videos son excelentes para presentar a sus usuarios un producto o servicio sin sobrepasarlos con una lista de características de una milla de largo. Piense en muchos sitios web de SaaS; ¿Cuántos puedes ver con un video de introducción que explica un poco más el producto o servicio??
La clave de este video es convertirlo en el foco de su diseño. Si bien querrá mencionar las funciones en el texto y las imágenes a continuación, tener un video que muestre las funciones principales de una manera creativa es una manera segura de hacer que sus usuarios noten el producto y quieran probar más..
Un par de grandes ejemplos de esto están en los sitios web de la aplicación Clear y la aplicación Paper.
Clear es una aplicación para hacer y hacer frente a la lista. El sitio web de Clear es un gran ejemplo de cómo utilizar el video como enfoque, pero también garantiza que el mensaje sobre la aplicación se escuche en voz alta sin el video..
El video se coloca en el encabezado del sitio web, justo al lado de los enlaces de descarga de la aplicación, y cuando se hace clic, carga el video en una pequeña superposición.
Este video es solo una introducción al producto y la aplicación en sí, pero lo que funciona bien es la consistencia en la marca y los elementos visuales desde el diseño del sitio web hasta el video. Como habrá aprendido en artículos anteriores, la consistencia es clave para crear un mensaje de marca sólido y para unirlos tan bien, hará que los usuarios confíen más en la marca y, por lo tanto, compren la aplicación..
Paper es una aplicación que te permite dibujar y dibujar bellamente en tu iPad.
El enfoque en el video en el sitio web de Paper es aún más grande que en el sitio web de Clear, con una imagen de encabezado más grande y realmente llamativa en su lugar, con un icono de reproducción de video en la parte superior de la imagen. Sin embargo, al hacer clic para reproducir el video, también se abrió en una superposición sobre el resto del diseño del sitio web.
De nuevo, al igual que con Clear, el mensaje de marca, el estilo y el tono de voz se mantienen muy similares al resto del diseño del sitio web. Crear una consistencia como esta solo puede ayudarlo a ganar más confianza de los usuarios a largo plazo, así que asegúrese de no crear un desajuste en los estilos si decide incluir un video en los diseños de su sitio web.
Una gran cosa sobre el video (si se usa de manera inteligente) es que puede usarlo para deleitar a sus usuarios, introduciendo características ocultas en las que podrían no haber pensado. Casi como un pequeño huevo de pascua, pero un poco más visible y mucho más visual!
Este uso del video en los diseños es puramente subjetivo y dependería de nuevo de cómo se debe representar la marca. Esto podría no ser adecuado en diseños de sitios web que son para empresas profesionales, pero sería perfecto en algo un poco más informal en estilo.
Un par de sitios web que utilizan esto con gran éxito son Handheld Conf y Playground Inc.
Handheld Conf es una conferencia que se describe a sí misma como "grandes ideas para dispositivos pequeños". En la página de inicio del sitio web de Handheld Conf, hay una lista de increíbles oradores y sus temas, junto con una foto. Ahora, cuando pasas el ratón sobre las fotos de los altavoces, cobran vida.!
Este es un pequeño regalo increíble para los usuarios; Casi misteriosamente como fotografías en el mundo de Harry Potter, que se mueven. Tan pronto como el cursor se aleja de las fotos, se detienen en el punto donde el cursor dejó la foto. Y si vuelves a ellos, se reanudan..
Usar un video como este es una excelente manera de agregar un poco más de interactividad a sus sitios web, pero también crear pequeñas formas para que su usuario disfrute más navegando por el sitio..
Playground Inc es una agencia digital creativa con sede en Toronto. En su página de inicio, usan la animación de manera brillante para ilustrar sus ideas y creencias. Estas animaciones solo se activan una vez que se ha desplazado a esa parte de la página y antes de eso, se ven como ilustraciones estáticas.
Esta es una excelente manera de agregar interés a su sitio web que hará las delicias de los usuarios, ya que es algo totalmente inesperado pero que mejora la forma en que pueden interactuar con su sitio..
De la mano con el uso de video para deleitar a sus usuarios, también puede usar el video para agregar más peso e interés visual a sus elementos de diseño. Esta es una excelente manera de usar el video, ya que garantiza que pueda mantener el nivel de interés en su sitio web más alto que si tuviera muchos menos elementos visuales para captar la atención del usuario..
Un gran ejemplo de esto se ve en el sitio web de Symbolset..
Symbolset crea fuentes web de íconos para que todas las personas de Internet las usemos. Personalmente, creo que la forma en que funciona Symbolset es bastante inventiva y la forma en que usan el video en su sitio web no es diferente.
Si está utilizando las fuentes Symbolset en el escritorio (en Photoshop, por ejemplo), puede escribir la palabra clave para el icono que necesita y aparecerá para usted. De la misma manera, han utilizado esto en su video..
Los juegos de símbolos también hacen un uso inteligente del color junto con cada uno de los mensajes que escriben en su video, manteniendo el interés visual en un nivel masivo. Este tipo de video también es realmente inclusivo, ya que da la sensación de que el sitio web está hablando con usted y conectándose personalmente con usted; lo que nuevamente ayudará a construir la confianza entre el usuario y la propia compañía..
Una tendencia que ha existido durante mucho tiempo es la imagen de fondo grande, a menudo (aunque no restringida a) a pantalla completa. Algunas empresas ahora están utilizando esto como una oportunidad como espacio para colocar sus videos a pantalla completa..
Si bien esto no es nada nuevo, debe pensar detenidamente cómo utiliza este estilo de video en sus diseños. En lugar de solo una gran imagen de fondo a gran escala, que es relativamente fácil de solucionar con sus elementos de diseño, un video es algo que siempre se mueve y puede causar estragos en sus elementos de diseño (piense en tipografía, color, botones, otros elementos como que) cuando se mezcla con el video en movimiento. Es un nuevo desafío, pero se puede usar inteligentemente con un pensamiento cuidadoso.
Un par de grandes ejemplos de grandes videos de fondo son de Spotify y Slow Mo..
Spotify es un popular servicio de transmisión de música. La página de inicio de su sitio web utiliza el video de fondo a gran escala con un gran efecto, con un video en bucle con una cantidad mínima de otros elementos de diseño colocados en la parte superior.
Spotify también ha decidido incluir audio en este video (que puede desactivar muy fácilmente, algo que debe tener al incluir audio en cualquier sitio web), lo que mejora aún más el video.
El video, el audio y el diseño de la página de inicio en general ayudan a establecer el tono del servicio y ayudan a los usuarios a comprender un poco más sobre el servicio y su lema de "música para cada momento", todo sin decir directamente lo que hace Spotify en realidad..
Slow Mo son especialistas en cámaras de alta velocidad. Usan video en lugar de una imagen para el área del héroe en la parte superior de la página de inicio. Lo que es inteligente de Slow Mo es que en su esencia son una compañía que vende cámaras de alta velocidad, y usan video para ayudar a vender eso..
Los videos que usan en su página de inicio se reproducen automáticamente en un estilo de cámara lenta y combinan perfectamente con el nombre de la marca. También crea mucho interés visual, mientras que el contraste entre el video y el texto que se superpone siempre se mantiene fuerte.
Una última cosa que puede hacer al usar el video en sus diseños es usarlo para mejorar sus habilidades de narración. Contar historias no es nada nuevo, pero puedes usar el video para mejorarlo aún más. La narración de historias debe estar en el centro de sus diseños y el video es un paso que puede ayudar a mejorar la experiencia que sus usuarios tendrán en su sitio web.
Un gran ejemplo de esto en acción es el sitio web personal de Dan Eden..
Dan es un diseñador, quien recientemente ha sido contratado por Dropbox como el primer interno de diseño de Dropbox. En la sección de portafolio del sitio web de Dan, junto con el título del proyecto y las descripciones, también tiene videos (de aspecto hermoso) que guían al usuario a través del proyecto..
Esto es brillante. En lugar de mostrar capturas de pantalla simples o enlazar con el sitio web, Dan está mejorando la experiencia de sus usuarios al permitirles ver el proyecto en acción sin ir a ningún otro lugar. Esto es genial ya que agrega interés a la página, pero también alentará a los usuarios a visitar un sitio web si les gusta su aspecto..
A veces puede ser muy difícil obtener una idea de cómo funciona un sitio web sin navegar por él mismo, pero Dan ha logrado cruzar ese puente sin agregar ningún paso adicional para sus usuarios..
Así que el video es genial en diseño web, siempre y cuando lo uses bien. Lo que quiero que hagas ahora es mirar videos en la web. Encuentre tantos ejemplos como pueda y tómese el tiempo para ver qué funciona bien y qué no, en su opinión.
Luego, piense en cómo podría integrar el video en sus propios diseños y cómo puede usarlo para mejorar y mejorar tus diseños en el futuro.
Accentsconagua