Un viaje a través de las tendencias del diseño moderno

Comienzos esqueomórficos

El diseño skeuomorphic comenzó a ser tendencia con la introducción de aplicaciones móviles en un nivel de interacción que nunca antes se había visto: usar la calculadora de iOS se sentía como si estuviera sosteniendo una calculadora real en la mano, y la experiencia era tocar botones físicos. No hubo quejas masivas sobre esta tendencia en ese momento, de hecho, mucha gente se enamoró de ella. Muchos diseñadores se esforzaron por lograr elementos e íconos hiperrealistas, mientras que los usuarios disfrutaban interactuando con pantallas táctiles que podían transformarse en un controlador de juego, la página de un libro o incluso una bebida malteada.

Con esto vino un aumento exponencial en las aplicaciones móviles y de escritorio, lo que llevó a avances en teléfonos, tabletas, computadoras portátiles y dispositivos de escritorio utilizados por personas de todos los grupos demográficos. Además, las señales de diseño skeuomorphic se volvieron menos vitales a medida que las personas se familiarizaban con el medio. En pocas palabras: surgieron argumentos en contra del realismo exagerado, y el skeuomorphism pesado se convirtió rápidamente en una cosa del pasado reciente.

Dicho esto, muchos diseñadores todavía están creando hermosos diseños esqueomórficos muy bien, pero no tanto para elementos de la interfaz de usuario como botones y barras de navegación. Los skeuomorfos se utilizan mejor en ilustraciones de acento, íconos de aplicaciones y presentaciones de productos. Ahora, muchos diseñadores se están aprovechando de una generación de usuarios educados digitalmente y utilizan mucha menos textura, sombra y dimensión en sus diseños. Esto hace que las interfaces tengan menos detalles que enturbien el contenido, más centradas en el color, la tipografía y la animación sutil para enriquecer la experiencia del usuario, todo lo que esencialmente condujo a este movimiento «plano» tan popular.

Por ahora, el diseño plano es la comidilla de la ciudad y es una gran solución para una interfaz de usuario simple. También puede estar compuesto casi por completo de CSS, lo que se traduce en tiempos de carga más rápidos, diseños receptivos que no dependen de cientos de imágenes y es independiente de la resolución por naturaleza. Por ejemplo, el botón de la izquierda (plano) está hecho de CSS y se ve increíble en todos los diseños y resoluciones, mientras que el botón de la derecha (skeuomorphic) es una imagen que se vuelve borrosa en varios tamaños.

17% del tráfico web desde dispositivos móviles

Mucha gente argumentaría que tomar decisiones de diseño basadas en las limitaciones móviles es un compromiso indigno, pero a medida que avanzamos, los usuarios se sienten cada vez más cómodos accediendo a sitios web sobre la marcha. A medida que los dispositivos se vuelvan más rápidos, las resoluciones de pantalla sean más altas y la tecnología multitáctil avance, será pertinente tener su contenido igual de comprensible en un dispositivo móvil.

Según una encuesta realizada por Mashable.com, “las personas de todo el mundo acceden a la web a través de sus teléfonos inteligentes con más frecuencia que nunca. En lo que va de 2013, el 17,4 % del tráfico web provino de dispositivos móviles, lo que representa un aumento de más del 6 % desde 2012, cuando el 11,1 % del tráfico provino de dispositivos móviles”.

No hace mucho tiempo, usar la web en un teléfono era casi imposible, si no al menos frustrante. Ahora, con diseños responsivos, la expectativa es no tener que acercar y alejar, sino abrazar la acción de desplazarse. Según nuestra encuesta reciente de WordPress , el 62% de las personas solo comprará un tema receptivo. A medida que las personas se sienten más cómodas con el desplazamiento en dispositivos móviles, también se sienten más cómodas con el desplazamiento a través de páginas web de escritorio más largas. Aquí hay un ejemplo de cómo se pudo haber visto nuestro tema, Vertex, en un dispositivo móvil en los últimos años (izquierda) y cómo se ve ahora (derecha). Hay muy poca información en la parte superior de la página, pero está diseñada de una manera que fomenta el desplazamiento en lugar de presentarle una página web reducida.

Por encima y más allá del pliegue

Este enfoque de diseño de página larga ha llevado a un debate sobre cuánta información debe vivir en la parte superior de la página, dejando a los diseñadores con el desafío de decidir qué y cuánto contenido debe ser visible antes de desplazarse.

• Los profesionales

• El usuario obtiene todo lo que necesita saber o hacer a primera vista

• Los contras

• Tener una cantidad abrumadora de contenido desorganizado en la mitad superior de la página
• Requerir a los usuarios que hagan clic en muchas páginas con muy poco contenido
• Reduce la posibilidad de desplazarse por la totalidad de su página

En general, los diseños se están volviendo menos sobre el pliegue y más sobre cómo el contenido engancha al espectador a las recompensas de la página donde sea que esté. En última instancia, desea contar una historia que interese a las personas. Algunas tendencias de diseño actuales que se utilizan para hacer esto son:

• Imágenes grandes, audaces y atractivas.
• Sutiles animaciones en carga.
• Mucho espacio en blanco que permite que se destaque el contenido principal.
• Encabezados fijos para una navegación instantánea sin importar dónde se encuentre en la página.
• Desplazamiento infinito de imágenes y publicaciones.
• Colocando sorpresas de contenido y Call to Action a lo largo de la página.

Una ventaja de un diseño vertical largo es una transición más fluida entre los diseños para dispositivos móviles y de escritorio; sin embargo, puede perder fácilmente la atención de un lector si se desplaza demasiado. A medida que sigamos avanzando, veremos que los diseños móviles serán menos una idea tardía y tendrán más influencia en los diseños de escritorio. Debido a las restricciones en los estándares actuales de HTML y CSS, la reorganización del contenido de los diseños de escritorio a dispositivos móviles no siempre es perfecta, por lo que es importante encontrar un buen equilibrio entre los dos al planificar su sitio. Aquí hay un ejemplo de un diseño de escritorio que no responde a un dispositivo móvil tan claramente como uno podría pensar a primera vista: las imágenes se emparejan más entre sí, en lugar de con sus párrafos correspondientes.

Es posible que el diseño receptivo aún no sea una práctica perfeccionada, pero la industria está dando pasos en la dirección correcta. Teniendo en cuenta que los dispositivos de escritorio siguen siendo la forma principal de acceder a Internet, probablemente no valga la pena comprometerse demasiado por el bien de un diseño móvil, pero el refinamiento de ida y vuelta siempre conducirá a una mejor solución.

Avanzando

A medida que la industria del diseño avanza y las personas se familiarizan más con la forma de interactuar con la web, las tendencias seguirán evolucionando. Por ahora, aproveche la oportunidad de innovar a través de una industria tan emocionante y vertiginosa. La próxima vez, tal vez intente diseñar sus diseños móviles antes que sus diseños de escritorio, o pida una crítica de diseño de alguien que no sea diseñador. Las tendencias cambian día a día, por lo que es vital mantenerse al día. Si algo es seguro, las personas aprenden rápidamente cuando se trata de nuevos diseños y tecnologías. Más pronto que tarde, los gestos con las manos y los comandos de voz eliminarán la necesidad de muchos elementos de la interfaz de usuario y el diseño seguirá siendo más una experiencia.

La próxima vez que se encuentre luchando con un desafío de diseño, qué tema usar o tendencia de diseño seguir, comience por pensar en cómo su usuario interactuará con su contenido en múltiples dispositivos. Organice su contenido para que cuente una historia: deje que influya en cómo un espectador experimenta el contenido en lugar de hacer que lo descubra. Un ‘diseño limpio’ no siempre puede aclarar su contenido, pero una historia organizada puede fomentar un diseño hermoso y crear una experiencia memorable.