Title image

Material Design Tag

Home / Posts tagged "Material Design"

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!

¡Hola que tal chicos!

Hoy en día es imposible concebir nuestros días sin nuestros dispositivos móviles. En ellos almacenamos (y en muchas ocasiones pasamos) gran parte de nuestras vidas. Teléfonos de contacto, juegos, mensajes, fotografías y un sinnúmero más de información generamos día con día, la cual convive a través de diversas plataformas y aplicaciones, dispuesta de la manera más práctica para compartirla con quienes queramos a lo largo de todo el mundo.

“A diferencia del papel, el Material Design, se puede ampliar y re-dimensionar de manera inteligente” - Matías Duarte

Sin embargo, pocas veces nos detenemos a pensar en el esfuerzo que ha significado, así como las innumerables pruebas y errores que se han hecho, para lograr que la experiencia de los usuarios (concepto mejor conocido en sus siglas en inglés, UXD) sea la mejor, al utilizar distintas aplicaciones y navegar por sitios web. En gran medida Google, ha destinado buena parte de sus esfuerzos en mejorar continuamente sus aplicaciones, para garantizar la funcionalidad de cada uno de sus productos. En esta entrada del blog, vamos a hablar un poco del Material Design, la gran apuesta de Google para unificar la experiencia de los usuarios a través de distintos dispositivos y plataformas.

El buen diseño y las posibilidades tecnológicas

En pocas palabras, el Material Design, es un lenguaje visual pensado en los usuarios, que sintetiza los principios clásicos del buen diseño y los mezcla con la innovación y las posibilidades que brinda la tecnología y la ciencia. Fue desarrollado por Google y anunciado en la conferencia Google I/O del 2014. Busca mejorar la visualización de Android (obviamente), pero también generar una experiencia unificada de la web en cualquier plataforma y tamaños de dispositivos. Todo esto, a través de una interfaz basada en tarjetas, como se vio por primera vez en Google Now.

Quien sepa de diseño web o de desarrollo de apps, sabrá lo difícil que es lograr hacerlas funcionar correctamente, considerando todos los tamaños de dispositivos y resoluciones que existen actualmente en el mercado. De ahí la importancia y utilidad de esta propuesta de Google.

Experiencia unificada

La división en bloques o tarjetas, juega un papel importante en el Material Design
La materia como metáfora

La realidad es que, por más “digitalizada” que sea nuestra vida hoy en día, nuestra concepción y entendimiento del mundo, lo realizamos a través de todo el conjunto de sentidos que tenemos. Es decir, tenemos la capacidad de anticipar circunstancias gracias a la apariencia (o sonido, olor o sabor, etc.) de las mismas.

Por ejemplo, sabemos que algo está a punto de caer, cuando detectamos una falta de estabilidad en el objeto. Esta lógica, ha sido llevada al desarrollo del Material Design, al buscar generar una analogía entre un espacio real y el “espacio” que tenemos dentro de una web o aplicación.

De esta manera, las superficies y los bordes de los elementos dentro de una app o web, buscan proporcionar pistas visuales basadas en la realidad, ayudando a los usuarios a comprender rápidamente las posibilidades. Sin embargo, la flexibilidad del Material Design, permite también la creación de nuevas posibilidades que reemplazan a aquellas en el mundo físico, sin romper las reglas de la física misma. Se trata de la posibilidad de volver un espacio digital bidimensional, en uno tridimensional.

La luz crea espacio

En el Material Design, al generar luces realistas en los objetos, podemos definir jerarquías o insinuar ``interactividad``
Nada es dejado a la suerte

El fundamento básico del Diseño, es la composición, así como sus elementos formales (tipografía, cuadrículas, espacio, escala, color, imágenes, etc.) y estos guían las desiciones visuales dentro del Material Design.

Pues justo son estos elementos los que crean jerarquía, significado y enfoque. Las elecciones de color, las imágenes de borde a borde, la tipografía a gran escala y el espacio en blanco intencional, crean una interfaz gráfica que sumerge al usuario en la experiencia. Una buena composición logra mucho más que simplemente agradar a la vista.

La interacción de la forma

Al resaltar elementos con colores contrastantes, se genera una respuesta en el usuario para interactuar con ellos
El movimiento, significa

Dentro del Material Design, se considera al movimiento como el motor principal de la experiencia de usuario, pues las interacciones dentro de una app transforman y refuerzan todo el diseño en ella, buscando siempre no romper la continuidad de la experiencia misma.

De esta manera, el movimiento no sólo atrae la atención, si no que se vuelve un elemento significativo, permitiendo enfocar la atención y mantener la continuidad del usuario.

Transformaciones activas

El movimiento dentro de una app, puede facilitar la lectura del contenido de la misma

Como podemos ver, el Material Design no se trata de código o lenguajes de programación, sino de diseñar para personas reales. Esta propuesta de lenguaje visual, nos permite regresar a los principios básicos del Diseño, en dónde menos es más. Es por ello que en Galahad Studio creemos que el diseño importa, porque importan las personas para las que es creado.

¿Ustedes conocían este desarrollo?, ¿Creen que la unificación en el lenguaje visual, es una oportunidad o una limitante?

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!