Title image

Mario Bros Tag

Home / Posts tagged "Mario Bros"

Ante la caída en desuso de Flash y el auge del Material Design, se han buscado alternativas para dotar a los sitios web de cierto dinamismo para contrarrestar su natural apariencia “plana”.

``Un diseñador sabe que ha alcanzado la perfección no cuando no le queda nada por agregar, sino cuando ya no le queda nada por añadir``- Antoine de Saint-Exupéry

Una de estas alternativas es optar por generar efectos y animaciones en JQuery, siendo el Efecto Parallax (en español paralaje), una tendencia cada vez más extendida en el mundo del diseño web y la animación.

Seguro que lo has visto miles de veces al entrar una web, hacer scroll y notar que el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías.

Y aunque parezca una tendencia muy actual, el Efecto Parallax es en realidad un truco con mucha historia. Por eso, en esta ocasión, haremos un reboot de nuestra anterior entrada y explicaremos más a fondo que es el parallax y cómo se utiliza en el Diseño.

El  moderno (pero común)  Efecto Parallax

El Parallax es un principio de diseño propio de la animación, que juega con la percepción humana,a fin de crear una ilusión de profundidad espacial con medios de representación bidimensionales. Para entenderlo mejor, hablaremos primero de sus orígenes.

La paralaje (del griego parállaxis para cambio, diferencia) define a un fenómeno de la percepción por el cual la posición de un objeto en el campo visual cambia en relación con el punto desde donde se observa.

Esto puede ejemplificarse si levantamos el pulgar a la altura del rostro, mientras abrimos y cerramos alternativamente el ojo derecho y el izquierdo. Notaremos que, mientras que el fondo permanece estático, nuestro pulgar aparentemente cambia de posición gracias a la distancia de nuestros ojos. ¿Sencillo no?

Visión estereoscópica

Si se observa el punto amarillo con el ojo izquierdo (posición A) parece que se encuentre sobre un fondo azul, pero si se observa con el ojo derecho (posición B), aparece sobre el fondo rojo.

Y aunque el Efecto Parallax apenas se aprecia en nuestro día a día, constituye uno de los fundamentos de la percepción espacial. De esta manera, los reflejos lumínicos de objetos cercanos se mueven más rápido en la retina que los de objetos a una cierta distancia, generando una ilusión de profundidad inducida por el movimiento.

Animando ratones y patrullando la luna

Como mencionamos en la introducción, el Efecto Parallax es en realidad un truco muy antiguo, inventado por Walt Disney para dotar a sus películas de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo.

El invento en sí, se llama “cámara multiplano”, ya que la superposición de planos para generar profundidad genera el Efecto Parallax. Les comparto un video que muestra el funcionamiento de la cámara multiplano de Disney.

Posteriormente, los programadores de videojuegos de los 80´s importaron este concepto con el fin de crear la ilusión de tridimensionalidad con medios bidimensionales. Juegos clásicos del tipo Jump’n’Run o Shoot’em up como Super Mario, Moon Patrol o Jungle Hunt, son un gran ejemplo de este efecto en acción:

Ideal para Storytelling y Diseño Web

Si bien desde finales de la década de los 2000 se utiliza el Efecto Parallax en el diseño web, no sería hasta que la página de Nike nikebetterworld.com (offline) causara un enorme impacto medial en 2011.

Sentando así, un precedente para la tendencia en diseño web que utiliza el Efecto Parallax para crear una impresión de profundidad en un medio bidimensional como es la web.

Sin embargo y aunque el Efecto Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera, no es conveniente usarlo por el simple hecho de seguir la tendencia. La presencia de este tipo de efectos puede ser tan sorprendente como cansina, para los usuarios.

Lo ideal es aprovechar este recurso como complemento narrativo. Esta posibilidad de storytelling del Parallax, lo vuelve perfecto para landing pages, o webs que intenten sumergir al usuario en una historia, causando una experiencia comunicativa mucho más divertida y cercana a otros medios como los videojuegos o los cómics.

Ejemplos destacables

El Efecto Parallax polariza las opiniones. Mientras que muchos usuarios aprecian el diseño con este tipo de efectos producidos por el movimiento, otros ya están cansados de un medio ya no tan moderno, sobre todo si se utiliza con el único fin de exhibirse sin un concepto que lo justifique.

¿Cuándo enriquece el Efecto Parallax a una web? Esto depende sobre todo de lo que se quiere conseguir con el proyecto y del público. Lo que no podemos negar es que ha demostrado ser un medio ideal para contar historias, por ello aquí te compartimos una recopilación de páginas con Parallax que seguro que terminan de convencerte, si aún tenías dudas, de lo increíble de este efecto.

The Hybrid Graphic Novel

Un proyecto con luz propia es la página de lanzamiento del Peugeot Hybrid4 que, camuflada como una novela gráfica de acción, presenta las características más importantes del vehiculo. Tan increíble, que incluso el proyecto fue galardonado por la página The FWA como FWA of the day.

Why your Brain Craves Infographics

Con un estilo visual retro de libro educativo, el sitio muestra algunos datos del porque las infografías son una buena forma de acercarse con la gente y comunicar ideas, a través de algunos datos sobre psicología y marketing. Un gran ejemplo de cómo se pueden volver una serie de datos ``duros`` más digeribles.

Firewatch

Utilizar el parallax scrolling cómo eyecatcher al inicio de una página también está justificado, pues si se hace bien este instrumento tiene una enorme capacidad para enganchar al usuario e interesarlo por el contenido que viene a continuación. Un ejemplo clásico lo encontramos en la página web para el videojuego Firewatch de Campo Santo.

Perspectiva que cambia la forma de ver

Aunque en principio atractivo, las páginas scroller con Efecto Parallax, encierran un innegable potencial para mejorar el storytelling de una marca, pero también ha provocado su uso masivo (y desmedido) desde 2011.

A final de cuentas, los efectos de paralaje o cualquier otro tipo de animaciones, deben de utlizarse cuando ayudan a mejorar la experiencia del usuario, destacar contenido, productos, servicios o animar al call to action. Va en ese sentido, muy de la mano de los principios del material design del cual ya hemos hablado en este blog.

Sin embargo es innegable el atractivo que genera el Efecto Parallax , pues ayuda a modificar la perspectiva que tienen las personas sobre lo que es un sitio web y cambia su forma de ver a una marca o producto. Y tú, ¿te animas a dar profundidad a tu web? Ya sea con una tienda en línea, landing page o blog, con nuestro servicio de Diseño Webolvídate de perder oportunidades y comienza a conectarte con todo el mundo. ¡Conócenos!

¿Ustedes conocen más ejemplo para compartir con nosotros?, ¿Les gustaría que habláramos de algunas formas de añadir este y otros efectos a sus páginas?

No olviden dejar sus comentarios.

¡Saludos!

A la hora de hablar, de escribir, de comunicarnos con palabras, solemos dejar un espacio a la imaginación del interlocutor. Damos por hecho, que lo que decimos se entiende, aunque no sea siempre cierto.

“Sueño con pintar y luego pinto mis sueños” - Vincent van Gogh

¿Qué diferencias pueden haber al decir “tenía los ojos cerrados”?. Ya que unos ojos cerrados, pueden ser de tristeza, de sorpresa, de sueño o incluso de muerte. Sin embargo, esto no pasa al usar imágenes, ya que con ellas podemos aclarar ideas, con un simple gesto o expresión.

Por ello, su importancia en el marketing es fundamental, ya que no pueden quedar espacios para la malinterpretación de ideas o para la falta de información que las palabras o textos, pueden generar.

Ya sea a través de un comercial, una portada de un disco, películas, series o libros, las ilustraciones, son una poderosa herramienta de marketing y posicionamiento para cualquier negocio o producto. Por ello, en esta entrada del blog, les compartimos algunos beneficios de utilizar ilustraciones como medio de comunicación.

Las ilustraciones: comunicación y aprendizaje

Dentro de la cultura de la imagen, las ilustraciones merecen especial atención. Se han considerado como una técnica artística, relacionada con la corriente filosófica que surgió en el siglo XVIII.

Podríamos definir la ilustración, como una imagen narrativa particularmente persuasiva. Un lenguaje que todos podemos entender e interpretar y que tiene el poder de acercarnos a las personas, de hablar sin tener que describir y de detallar todo lo que queremos expresar

La recepción del mensaje ilustrado, precisa de un proceso de aprendizaje. De ahí que resulte tan eficaz para educar tanto a niños como adultos. En el marketing, las ilustraciones imprimen cierto carácter a las marcas, lo que ayuda a los consumidores a recordarlas.

``Lo leo, si tiene dibujitos``

Es mucho más fácil generar el habito de la lectura durante la niñez, si elegimos libros con imágenes.
A prueba del tiempo

Las ilustraciones nos permiten comunicar y llegar al interés de publico con más facilidad. Por ello, forma nparte del diseño publicitario. Es así qué, con el paso de los años, sin darnos cuenta nos hemos encariñado con diversos personajes, campañas y dibujos  que representan en sí a una marca.

Personajes como El hombre Michelin, Ronald McDonald, Gorillaz, Mario bros, etc. son básicamente a prueba del tiempo, pues no pasan de moda y nunca caducan. Evolucionan sin perder su esencia y a la gente les encantan. A continuación, les compartimos algunos de los beneficios de usar ilustraciones, como forma de comunicación:

01_Los viejos tiempos

De niños crecimos rodeados de libros ilustrados y caricaturas. Usar a estos personajes (o algunos nuevos) nos hacen sentir nostálgicos y “como niños” de nuevo. De ahí el éxito de productos como Pokémon Go o las películas de superheroes.

My spider sense is tingling

Hoy en día, la marca MARVEL se ha posicionado como #1 en la lista de películas más taquilleras. Todo esto, gracias al uso de sus personajes que nacieron en cómics. ¡Las ilustraciones pueden transpasar barreras!
02_Imagina mundos

A diferencia de la fotografía (que esta ligada al mundo real), las ilustraciones permiten la posibilidad de dar vida a los más increíbles mundos fantásticos. Jugar (por el puro gusto) Super Mario Bros, sería mucho menos divertido si las cosas no sucedieran en el “Mushroom Kingdom”.

Una princesa... de Marte

Gracias al poder de la Ilustración, somos capaces de imaginar como serían las ciudades en otros planetas.
03_Viaja en el Tiempo

Como su capacidad de plantear mundos fantásticos, las ilustraciones, tienen la posibilidad de mostrarnos periodos de tiempo remotos. De esta forma, podemos conocer cómo eran las civilizaciones antiguas o incluso a los dinosaurios.

¿El huevo o la gallina?

En conjunto con los estudios científicos, hoy en día podemos saber como lucían los dinosaurios, en las Eras Prehistóricas.
04_Con mucha personalidad

Desde principios del s. XX, se demostró la eficacia de usar personajes en publicidad, para recordar a las marcas. Personajes como el Tigre Toño o Bibendum, forman parte de nuestra cultura y son amados por generaciones.

Antes y después

Muchos personajes de comerciales, han cambiado su apariencia con el paso del tiempo. Evolucionan pero sin perder su esencia, ya que de lo contrario habría un rechazo por parte del publico.
05_Rompe el molde

Las imágenes de stock son muy prácticas, pero las usan todos y se notan estereotipadas. Saludos falsos, likes falsos y sonrisas montadas. Sin embargo, las ilustraciones pueden ser únicas y comunicar algún mensaje o representar a una marca.

Libera el potencial

Marcas como Redbull o American Express, han basado sus campañas en contenidos ilustrados en los últimos años. Y sin embargo, no ha disminuido su publico (al contrario).
06_Resistiendo el paso del tiempo

¿Recuerdas la apariencia de El Principito o los dibujos de Alicia en el País de las Maravillas? Porque de ser así, recuerdas imágenes creadas en 1943 y 1865 respectivamente. Lo que demuestra la capacidad de la ilustración, de resistir el paso del tiempo.

Dibújame un borrego...

Personajes como Superman, Bugs Bunny o El Grinch, han permanecido prácticamente inalterables, aunque algunos tengan cerca de 100 años de haber sido creados.
07_Tu parles français?

Imagina que llegas al aeropuerto de París y no encuentras la salida. Obviamente la mayoría de personas hablan francés y tal vez tu no, ¿que hacer?. Tan simple como ubicar la señalización de un “monito” dirigiéndose hacia una puerta o las flechas de indicación. Los símbolos ilustrados, pueden ser una forma de comunicación internacional.

Con ``bolitas y palitos``

Utilizando elementos básicos en la comunicación visual, somos capaces de entender indicaciones.
08_Tan fácil como el A,B,C

Durante la Edad Media, la mayoría de las personas no sabían leer ni escribir, sin embargo la religión católica logro instaurarse. ¿Cómo?, pues a través de imágenes religiosas dentro de las catedrales. Las ilustraciones tienen tal poder educativo.

La luz en el arte

Misticismo, arte, religión e historia con unos cuantos cristales.
El lenguaje universal

Una imagen puede transmitir un cúmulo de emociones en poco espacio, lo que permite generar una mejor conexión con los usuarios, que la que logra un gran bloque de texto. Muchas veces decimos que “una imagen vale más que mil palabras” y es cierto.

Actualmente, las plataformas digitales son cada vez más visuales. Por esto, si acompañamos nuestros contenidos con una ilustración, animará a nuestros seguidores a que los compartan con los suyos. No gastes tu tiempo buscando en internet, fotos que se parezcan a tus ideas. Nosotros te ayudamos a darle vida a tu nuevo producto, personaje o publicación. Nuestro servicio de Ilustración no tiene límites y tus ideas tampoco. ¡Conócenos!

En definitiva, debemos ser conscientes de la importancia de las ilustraciones como herramientas de comunicación. No sólo porque aportan calidad y valor añadido, sino porque agilizan el proceso de entendimiento entre los usuarios. Por ello, es recomendable utilizarlas, en cualquier estrategia de Marketing.

¿Conocen algún caso de éxito donde las ilustraciones jueguen un papel importante?, ¿Les parecen más efectivas las fotografías?

No olviden dejar sus comentarios.

¡Saludos!

Abrir chat
1
¿Dudas? ¡Hagamos tu proyecto realidad!
¡Saludos Capitán!

Soy Avalon IV, tu asistente virtual a bordo de Galahad Studio...

¿Tienes un proyecto en mente? ¡Déjanos orientarte! y recibe un descuento especial, en el primer proyecto que desarrollemos juntos.

Envíanos un mensaje y ¡Comencemos!