27/04/2016

Aplicando la dinámica de los videojuegos al diseño web

Aplicando la dinámica de los videojuegos al diseño web

Desde las máquinas de arcade de los años 70 hasta los actuales smartphones y tablets, pasando por las consolas y las computadoras, los videojuegos fueron adaptándose a una creciente variedad de plataformas hardware y software. Por ejemplo, desde 1997 podemos jugar ciertos videojuegos desde nuestro navegador web, sin necesidad de instalar ningún programa adicional. Y no solo eso: existen sitios web comunes que, aprovechando las más recientes tecnologías de desarrollo, se inspiran en esos videojuegos para presentar el contenido o los elementos de su interfaz. En otras palabras, no son juegos online, pero se parecen a ellos, ya que emplean las mismas reglas de interacción pero con un propósito práctico (navegar por las páginas, completar formularios, etc.), que va más allá del simple entretenimiento.

Para ilustrar este concepto, a continuación ofrecemos cinco sitios web cuyo diseño se inspira en los videojuegos.

Robby Leonardi

Multipremiado currículum interactivo de un diseñador multimedia de Nueva York. El propio autor se presenta como un superhéroe al que debemos ayudar a atravesar distintos niveles, donde conoceremos sus aptitudes, datos personales, antecedentes laborales y distinciones recibidas. Con una estética que mezcla el pixel art y el flat design, y elementos del clásico Super Mario Bros., este juego de plataformas es considerado por muchos como el currículum más original de la Red.

The Scruud

Creado para promocionar un videojuego italiano, este sitio web nos presenta a sus protagonistas (tres artistas de circo) y nos permite probar algunas de las interacciones que encontraremos en la app, como atrapar zanahorias. Así, mientras recorremos el contenido, podemos obtener una pequeña muestra de cómo es el juego antes de descargarlo.

Thunderdome

Riot Games, empresa creadora del exitoso League of Legends (o LoL), suele organizar un desafío llamado Thunderdome, donde sus empleados deben completar un proyecto de software en un lapso de tres días y sin restricciones que puedan limitar su creatividad. Este sitio web, creado para promocionar tal evento, emplea elementos que recuerdan a los videojuegos de ciencia ficción, como sonidos robóticos, displays interactivos propios de naves espaciales y secuencias de video.

Salus Kids

El sitio web de esta marca de bebidas orientada a niños, con sede en Uruguay, nos permite navegar por las distintas secciones manejando un submarino a través las flechas del teclado. Con un diseño de personajes simple pero atractivo, el sitio ofrece una modalidad de interacción fluida y, sobre todo, fácilmente comprensible para el público infantil al que apunta la marca.

Daniel Sternlicht

Otro diseñador que se inspiró en los videojuegos para crear su currículum en línea. En este caso, para conocer la biografía, aptitudes y antecedentes laborales del autor debemos llevarlo (con las flechas del teclado) por diferentes sectores de una ciudad que nos recuerda a los viejos juegos de rol y aventuras de Game Boy; especialmente, las series Zelda y Pokémon.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce