Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Video en Diseño Web

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
CSS3, Web Fonts and Icons
Responsive Web Design

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

El video ha estado presente por mucho tiempo en; películas, en la televisión y ahora, prontamente disponible para reproducirse en nuestros teléfonos, tabletas digitales, así como otros dispositivos. También en la web el video ha estado presente por mucho tiempo. Comenzamos con archivos de videos y animaciones en flash muy pesados, aunque ahora tenemos video HTML5 y muchas opciones más para incluir video en nuestras páginas web. Toma la mitad del tiempo, esto es incluso más rápido que bajar algunos códigos dentro de un sitio web. En resumen, nunca antes había sido tan fácil usar video en la web.


La Evolución del Video

En el pasado, diseñar sitios con video era una tarea muy dura de lo que es ahora. Tomar secuencias de video de buena cualidad a menudo implicaba utilizar equipos y programas pesados y costosos, aunque ahora podemos usar nuestras cámaras digitales normales (¡o incluso nuestros teléfonos!) para tomar imágenes de alta calidad. Y si querías secuencias animadas en tu sitio web, tenías que, ya sea; ser bueno en la ilustración digital, tener mucho conocimiento de Actionscript o manejar Flash, o contratar a alguien más para hacerlo. Ahora, hay herramientas y piezas de programas por ahí que te ayudan a crear animaciones y de todo por sí solas.

También, piensa sobre la creación de YouTube. Fundado en 2005, YouTube, es el servicio más popular que las personas usan para subir y compartir sus videos. Incluso las grandes corporaciones y negocios lo usan para compartir clips populares o noticias de sus programas de Televisión.

En mi opinión, YouTube nos trajo una pizca de una evolución de video en la web. Ellos hicieron fácil las campañas virales para propagarse rápidamente y el video se apareció en escena. YouTube, ofreció algo que muy pocos habian sido capaces de hacer anteriormente: todos o cualquiera podría crear videos y compartirlos con quién ellos prefirieran.


El Video en la Web hoy.

Hoy en día, tenemos tantas técnicas a nuestra disposición que el uso de Flash a quedado fuera del camino. HTML5 hace mucho más fácil para nosotros desarrollar formas para presentar nuestros videos y otros tipos de animaciones e imágenes visuales en nuestros sitios web. Tener esta tecnología es maravilloso, ya que significa que tenemos mejores oportunidades para usar video en nuestros diseños y de hecho, usarlos para hacer que la experiencia de nuestros usuarios sea mucho mejor.

Sin embargo, no estoy aquí para hablar sobre YouTube o Vimeo durante todo el día o, incluso, para contarte sobre todos los avances técnicos y las técnicas que puedes usar para incluir video en tus sitios web. En vez de eso, te conduciré a través de porqué es bueno incluir videos en tu diseño y qué es lo que hace que un video sea estupendo.


¡Cómo podemos usar Video!

El video puede utilizarse en muchas formas para para mejorar nuestros diseños y hacer el viaje y la experiencia de los usuarios algo mucho mejor. De la misma forma como lo harías con varias imágenes (ya sea si es fotografía, iconos o animaciones) el objetivo de usar videos en tus diseños debería ser para mejorar tus diseños. Recuerda que quieres que tu mensaje sea claro con o sin los videos.

Con cualquier video es importante que pienses claramente sobre el mensaje que quieres proyectar. Si bien esto puede depender totalmente de la marca, el producto o servicio, cuando uses videos deberás ser tan cuidadoso como lo harías con cualquier otros elementos en tus diseños.

Dicho eso, podemos usar videos

…Para presentar

Los vídeos son magníficos para presentar a los usuarios un producto o servicio sin abrumarlos con una lista de características que tenga una milla de largo. Piensa en muchos sitios web SaaS, ¿cuánto puedes ver con un video de introducción que explique el producto o servicio un poco más?

La clave con este video es hacer que se enfoque en tu diseño. Mientras tú quieres mencionar las características en textos y imágenes abajo, tener un video que muestre las características principales en una manera creativa es un método infalible para conseguir que tus usuarios noten el producto y hasta quieran probas más.

Un par de brillantes ejemplos de esto son las aplicaciones de los sitios web Clear y Paper app.

Clear

Clear, es una aplicación de una lista de cosas por hacer. El sitio web Clear es magnifico ejemplo de usar video como un foco, pero también asegurarse que el mensaje sobre la aplicación sea alto y claro sin el video.

clear-1

El video esta colocado en el header (encabezado) del sitio web, justo a la par del enlace para descargar la aplicación, y cuando haces clic carga el video en una capa superpuesta sobre el sitio.

Este video es solamente una introducción para el producto y la aplicación en si, 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. Tal como aprendiste en artículos anteriores, la consistencia es la clave para crear un mensaje de la marca sólido y en gran medida esos funcionan bien juntos, lo más probable es que esto hará que los usuarios confien en la marca y además vayan a comprar la aplicación.

clear-2

Paper

Paper es una aplicación que te permite hacer bocetos y dibujos bonitos en tu iPad.

El enfoque en el video en el sitio web Paper es incluso más grande que el sitio web Clear, con un una imagen mucho más grande y visualmente espectacular colocada en el header (encabezado), y con un icono para reproducir video en la parte superior de la imagen. Cuando haces clic para reproducir el video, este además se abre en una capa superpuesta en la parte superior del resto del diseño del sitio web.

paper-1

Nuevamente, como con Clear, el mensaje de la marca, el estilo y tono de voz es muy similar al resto del diseño del sitio web. Al crear una consistencia como esta, pues, solamente puede ayudarte a conseguir más usuarios que tengan la confianza de conectarse —asegúrate de no crear un desajuste en los estilos si es que decides incluir un video en los diseños de tu sitio web.

paper-2

…para disfrutar

Algo que no deja de fascinar sobre los videos (si se usan ingeniosamente) es que puedes usarlos para el encanto de los usuarios, presentándoles características ocultas en las que no podrían haber pensado antes. Casi como un huevo de pascua, pero un poquito más visible, de hecho, ¡un poco más visual!

Este uso de video en diseños es puramente subjetiva y, otra vez, dependería de cómo la marca necesita ser representada. Esto no podría ser apropiado en los diseños de sitios web que son para compañías profesionales, sin embargo, serían perfectos en algo un poco más casual en estilo.

Un par de sitios web usando este efecto estupendo son Handheld Conf y Playground Inc.

Handheld Conf

Handheld Conf es una conferencia que se describe así misma como “grandes ideas para dispositivos pequeños”. En la página de inicio de el sitio web Handheld Conf, hay una alineación de oradores impresionantes y sus temas junto con una foto. Ahora, cuando pasas el puntero sobre la foto de los oradores, ellos… ¡cobran vida!

handheldconf

Esto es un poquito de placer asombroso para los usuarios, casi resulta tan extraño como las fotografías en el mundo de Harry, ellas se mueven. Tan pronto como tu cursor se aleja de las fotos, los protagonistas en el video se quedan pausados en el punto donde tu cursos dejo la foto. Y si vuelves a la foto, ellas se reanudan.

Usar videos como este es una estupenda manera para añadir un poco de más interactividad dentro de tu sitio web, pero también crea pequeñas formas para que tus usuarios disfruten navegar en tu sitio web durante más tiempo.

Playground Inc

Playground Inc. son una agencia creativa digital situada en Toronto. En su página de inicio, usan animaciones brillantes para ayudar a ilustrar sus ideas y creencias. Estas animaciones solamente se activan una vez que has bajado a esa parte de la página y antes de eso, esas animaciones tienen la apariencia de ilustraciones estáticas.

playgroundinc

Esta es una manera brillante para añadir interés a tu sitio web que resultará en una delicia para los usuarios, como algo que es totalmente inesperado pero que mejora la manera en la que los usuarios pueden interactuar con tu sitio.

…Añadir interés

Mano a mano con el uso de videos para el encanto de los usuarios, también puedes usar video para añadir una cantidad de interés visual extra a los elementos de tu diseño. Esta es una magnifica manera de usar videos y así aseguras que puedas conservar el nivel de interés en tu sitio web más alto que si tuvieras pocos elementos visuales para captar la atención de los usuarios.

Un magnifico ejemplo de esto es lo que ves en el sitio web Symbolset.

Symbolset

Symbolset, crea fuentes de iconos web para todos nosotros, a las personas en la web que nos encanta usarlas. Personalmente, creo que la forma en que trabaja Symbolset es muy ingeniosa y la forma en la que ellos usan el video en su sitio web es igual.

symbolset

Si estás usando las fuentes Symbolset en el Desktop (en Photoshop, por ejemplo) entonces puedes teclear en el teclado y buscar el icono que necesitas y aparecerá para ti. En la misma manera, han usado esto en sus videos.

Symbolset, también usan ingeniosamente el color junto a cada uno de los mensajes que ellos teclean para ti en sus videos, conservando el interés visual en una alta proporción. Esta clase de videos es también inclusiva, es decir, como si hiciera sentir como si el sitio web está hablando contigo y conectándote personalmente contigo, lo cual, una vez más, te ayudará a construir la confianza entre los usuarios y la misma empresa.

…Para reemplazar grandes imágenes de fondo

Una tendencia que ha sido como una tradición durante mucho tiempo, a menudo (aunque no restringida) son las imágenes de fondo con un tamaño que acapara la pantalla completa. Algunas empresas están ahora usando esto como una oportunidad así como un espacio para colocar sus videos a un tamaño de la pantalla completa.

Aunque esto no es nada nuevo, tienes que ser cuidadoso al respecto de como tú usas este estilo de video en tus diseños. En lugar de solamente colocar una imagen al tamaño completo de la pantalla -lo cual es relativamente fácil y se ajusta bien con los elementos de tu diseño - un video es algo que siempre está en movimiento y puede causar estragos con los elementos de tu diseño (nada más piensa en la fotografía, el color, los botones y otros elementos como esos) cuando los mezclas con los movimientos del video. Es un desafío nuevo, aunque puede ser utilizado ingeniosamente con cuidado.

Un par de magnificos ejemplos de fondos grandes de videos son Spotify y Slow Mo.

Veamos Spotify

Spotify, son un popular servicio de transmisión de música. La página de inicio de su sitio web utiliza el video de fondo al tamaño de la pantalla completa para lograr un efecto magnífico, con una repetición del video con una cantidad mínima de otros elementos de diseño encima de la parte superior.

spotify

Spotify también ha decidido incluir audio en este video (el cual puede apagarse con mucha facilidad, y que debe tener cuando se incluye audio en cualquier sitio web), lo cual aumenta el video incluso mucho más.

El vídeo, el audio y el diseño de la página de inicio en general sólo ayudan a establecer el tono para el servicio y ayuda a los usuarios a entender un poco más sobre el servicio y su lema de “música para cada momento”, todo esto sin directamente decir que Spotify es lo que hace.

Ahora veamos Slow Mo

Slow Mo, son especialistas en camáras de alta velocidad. Usan vídeo en lugar de una imagen para el área del héroe en la parte superior de la página de inicio. Lo que queda claro acerca de Slow Mo es que en su esencia ellos son una empresa que vende cámaras de alta velocidad, y usan el vídeo para ayudar a decir eso.

slowmo

Los vídeos que ellos usan en su página de inicio son reproducidos automáticamente en un estilo de movimiento lento y se une perfectamente con el nombre de la marca. Además crea mucho interés visual, mientras que el contraste entre el vídeo y el texto que se superponer esta siempre intenso.

…para mejorar tus historias

Ya para finalizar hay una última cosa que puedes hacer cuando uses vídeos en tus diseños es usarlos para mejorar la habilidad para contar historias. Las historias no son nada nuevo, sin embargo puedes usar vídeo para mejorarlo, incluso, mucho más. Las historias deberán ser el corazón de tus diseños y el vídeo es un paso que debes tomar y que puede ayudarte a mejorar la experiencia que tendrán tus usuarios cuando visiten tu sitio web.

Un magnífico ejemplo de esto en acción es en el sitio web personal de Dan Eden.

Veamos el sitio web de Daneden.me

Dan es un diseñador, que recientemente ha sido contratado por Dropbox como el primer diseñador interno de Dropbox. En la sección de portafolio del sitio web de Dan, junto al título de los proyectos y las descripciones, él también tiene vídeos (de bonita apariencia) que llevan a los usuarios a través de los proyectos.

daneden

Esto es brillante. En lugar de mostrar simples capturas de pantalla o enlazar al sitio web, Dan está mejorando la experiencia de sus usuarios al permitirles ver el proyecto en acción sin ir a ninguna otra parte. Esto es algo magnífico que añade interés a la página, pero también alentará a los usuarios a visitar un sitio web por lo que ellos puedan ver.

Algunas veces puede ser muy difícil conseguir imaginarlo cómo un sitio web funciona sin navegar en el tú mismo, sin embargo, Dan ha logrado cruzar ese puente sin añadir ningún paso extra a sus usuarios.


Asignación

Ya que los vídeos son magníficos en el diseño web, siempre y cuando los uses bien. Lo que quiero que hagas ahora es que busques vídeos en la web. Encuentra tantos ejemplo como puedas y toma el tiempo necesario para lo que hace que funcione bien y lo que no, según tu opinión.

Luego, piensa acerca de cómo harías posible integrar vídeos en tus propios diseños y cómo puedes usarlos para mejorar e incrementar tus diseños en el futuro.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.