Las tendencias en diseño web van y vienen. Las cosas siempre se mantienen en movimiento en la dinámica industria del diseño web. Nuevos y excitantes conceptos, técnicas y herramientas son constantemente introducidas. Mentes originales mantienen fresca a la industria desafiando normas e ideando estilos innovadores.

Como marca, se necesita ser relevante. Si no ha sido actualizada la apariencia del sitio web por cinco años o más, ahora es un buen momento para hacerlo. De otra manera, se corre el riesgo de caer detrás de los competidores que también tienen sitio web y están en sintonía con las necesidades de los consumidores de hoy.

Echemos un vistazo a algunas de las tendencias más populares para el próximo año.

Iteraciones de Tendencias Anteriores

Naturalmente, si ciertas tendencias funcionaron bien en el pasado, probablemente también lo harán en el presente. Estas tendencias incluyen:

Diseño Web Adaptativo

El diseño web adaptativo o adaptable (DWA) - Responsive Web Design (RWD), en su terminología inglesa - ha ganado una increíble popularidad en los últimos años gracias al incremento del uso de Internet en dispositivos móviles. Es responsable decir que el DWA no irá a ninguna parte por lo pronto, debido a que para los negocios representa una manera relativamente simple y económica de construir un sitio totalmente funcional y amigable con los dispositivos móviles. Pero el DWA trae consigo algunos inconvenientes de no llevarse a cabo apropiadamente, siendo el desempeño uno de los más importantes.

Desplazamiento Infinito

Como en el caso del diseño web adaptativo, esto fue diseñado para los usuarios móviles. El visitante solo tiene que desplazarse hacia abajo y hacia abajo para encontrar lo que busca.

Desplazamiento Tipo Parallax

En un sitio web que utiliza desplazamiento tipo parallax, los elementos de fondo se mueven más lentamente que los elementos de primer plano, dando la ilusión de movimiento. Esto realmente aviva el sitio web, siempre que sea bien usado.

Proliferación de los Patrones de Interfaz de Usuario (IU)

Uno de los efectos secundarios del diseño adaptativo ha sido que muchos, muchísimos sitios tienen apariencia similar. Pero el diseño adaptativo no es el único culpable. El incremento del número de sitios basados en WordPress y el explosivo mercado de sus temas y plantillas tienen también parte de la responsabilidad.

Pero tener una apariencia similar no es necesariamente algo malo. Es debido a que hemos cambiado en la manera como consumimos la web, lo que ha dado como resultado la gran cantidad de patrones comunes de diseño de IU. Los patrones de diseño han madurado y, como tal, hay muy poco en el camino de la innovación cuando se trata de patrones de IU.

En otras palabras, una interfaz de pago en línea seguirá permaneciendo y funcionando como tal. Lo mismo sucede con un modelo de acceso de usuario. No hay realmente una razón para reinventar la rueda. Los patrones de IU deben guiar a los usuarios a través de una experiencia fluida.

Estos son algunos patrones con los cuales se debe estar familiarizado:

Menú Hamburguesa

Mientras algunos critican el uso de este patrón, no hay dudas que su uso a todo lo largo y ancho hace a la función fácilmente reconocible para los usuarios.

Parece haber sido una buena idea en su momento, sin embargo, lo cierto es que hay mejores alternativas allá afuera. A diferencia de la bendita “hamburguesa”, los menús visibles han demostrado ser beneficiosos, en términos de comprensión del usuario, enganche, y logro de las metas. Varias de las más grandes compañías web han retirado sus menús “hamburguesa” durante el año transcurrido, en favor de algo un poco más obvio. YouTube, por ejemplo, agrupó su menú “hamburguesa” hace unos meses. Google, Apple y Microsoft han dejado atrás también su menú “hamburguesa”.

Contenido Centrado

Un estilo poderoso que seguirá prevalenciendo en diseños de páginas de inicio, el cual coloca el mensaje principal de la página justo en el centro de la pantalla, rodeado de una composición de alto impacto visual o una suave textura que crea un efecto dramático. Esta distribución funciona brillantemente en páginas que quieren enfatizar una mínima cantidad de contenido.

Contenido Dividido

Con las distribuciones centradas estremeciendo páginas de poco contenido, aquellas que cargan consigo más sustancia conseguirán también un rejuvenecimiento con una distribución de contenido dividido. El contenido dividido separa la pantalla en secciones anchas, distintas del estilo de Pinterest. La apariencia de cada diferente sección puede variar significativamente, no siendo necesario seguir un único tono estético. Esto brinda a los diseñadores un gran espacio para la creatividad sin amenazar la claridad de jerarquías del contenido.

Registro de Nueva Cuenta

Encontrarán este patrón en cualquier sitio web donde intenten registrarse. Puede ser un formulario para completar o un botón que permite usar una cuenta de red social para registrarse. Los asistentes de formularios “multi-pasos” son también efectivos debido a que “picotean” los campos requeridos, reduciendo la fricción e incentivando a los usuarios a fluir a través de todo el proceso.

Largos Desplazamientos

Colocar todo el contenido importante en la mitad superior de la pantalla es ahora un mito bien conocido. Además, casi todos estamos acostumbrados ya a los largos desplazamientos gracias a los dispositivos móviles. La técnica funciona especialmente bien para sitios que quieren encantar a los usuarios a través de contenido estilo cuentos narrativos, y es posible aún simular un sitio multi-páginas mediante saltos en el desplazamiento hacia otras secciones.

Distribución en Tarjetas (Cards)

Iniciado por Pinterest, las tarjetas están donde quiera en la Web debido a que presentan información en trozos pequeños, perfectos para su exploración. Cada tarjeta representa un concepto unificado. Debido a que actúan como “contenedores de contenido”, su forma rectangular las hace más fáciles de reorganizar para diferentes puntos de quiebre en dispositivos.

Imágenes “Héroe” de Alta Calidad

Como la visión es el sentido humano más poderoso, las imágenes de alta definición son unas de las formas más rápidas de captar la atención del usuario. Intenten agregar una o dos imágenes al fondo; puede ser una atractiva foto sencilla ajustada a toda la página o una serie de fotos que cuentan la historia de la marca.

Gracias a los avances en ancho de banda y compresión de datos, los usuarios no volverán a sufrir de lentos tiempos de carga. Una distribución común que encontrarán es el uso de una imagen “héroe” al inicio del desplazamiento, seguida lo mismo por secciones zigzagueantes o una estructura basada en tarjetas.

Animaciones Enriquecidas

Las animaciones están siendo cada vez más usadas para mejorar los contenidos narrativos del sitio, resultando en una experiencia más interactiva y entretenida.

Sin embargo, no pueden simplemente pegar una animación en cualquier lado; consideren cuidadosamente si con ello agregan elementos y personalidad a la historia del sitio, sean capaces de justificar el uso de cada animación en términos de beneficio para el usuario - “Se ve bonito” no califica. Las animaciones pueden ser pensadas en términos de dos grupos:

Animaciones a gran escala: Usadas como herramienta de interacción primaria para tener más impacto en los usuarios e incluyen efectos como desplazamiento “parallax” y notificaciones tipo “pop-up”.

Animaciones a pequeña escala: Incluyen “spinners” o animaciones giratorias, herramientas de “mouseover” y barras tipo “Cargando”, y no requieren ninguna acción del usuario. A continuación, 7 de las más populares técnicas de animación:

1. Animaciones “Cargando”: Simples y evitar agregar sonido, y deberían seguir la personalidad y estilo visual del sitio.
2. Navegación y menús (no desplazables).
3. Animaciones “hover” o “mouseover”: Los usuarios inseguros acerca de la función de una característica del sitio, tienden a pasar automáticamente el puntero del “mouse” sobre el área para obtener una respuesta visual instantánea.
4. Galerías y presentación con diapositivas: Fantásticas para sitios de fotografías, exhibición de productos y portafolios.
5. Animación en movimiento o “Motion”: Es una herramienta perfecta para captar la atención del usuario. Pueden además ayudar con la jerarquía visual. Este tipo de animación puede contribuir con brindar mayor interés e intriga a los formularios, botones de acción y enlaces de menú.
6. Desplazamiento: El desplazamiento suave o fluido se basa en la animación y brinda más control al usuario, quien puede determinar el ritmo de como se desarrolla la animación.
7. Animaciones/ videos de fondo de pantalla: Un simple fondo de pantalla animado puede agregar visibilidad a un sitio, pero debe ser usado con moderación o podría convertirse en una gran distracción para el usuario. La clave es trabajar sobre secciones individuales o crear un movimiento sutil para toda una imagen.

Microinteracciones

Las microinteracciones suceden todas a nuestro alrededor, desde silenciar la alarma en el teléfono celular hasta el “Me Gusta” a esa imagen del gato en Facebook. Cada una de ellas hecha sin pensarlo dos veces. Es muy probable que hayan comenzado el día con una interacción. Al apagar la alarma del teléfono celular, se conectaron con una interfaz de usuario en un momento particular. Y muchas otras más de estas microinteracciones son horneadas dentro de las aplicaciones y dispositivos que utilizamos.

Las microinteracciones tienden a hacer, o ayudan a realizar, diferentes cosas:

• Comunicar un estatus o un pequeño comentario.
• Ver el resultado de una acción.
• Completar una tarea individual, aislada.
• Ayudar al usuario en la manipulación de algo.
• Prevenir al usuario sobre un error.

Las microinteracciones son una parte vital de cualquier aplicación. Querrán asegurarse que estas interacciones sucedan de manera casi invisible. No se lancen por la borda y manténganlas sencillas. Consideren cada detalle con cuidado y den un sentido humano a cada interacción, crear un texto conversacional y no robótico.

Diseño Casi-Plano

Antes del diseño web casi-plano o semi-plano, tuvimos el diseño plano. La idea detrás de este último era una mirada despojada de toda carga visual, utilizando colores vivos, formas simples y tipografía sencilla. El ejmplo mejor conocido fue la interfaz de Windows 8 – al cual no le fue muy bien, desafortunadamente.

Así que para eliminar los problemas del diseño plano, manteniendo sus mejores cualidades, los diseñadores idearon el diseño casi-plano. Aquí se otorga a algunos elementos profundidad y dimensión para balancear el caracter plano de los otros elementos. Gmail es la mejor demostración del diseño casi-plano.

Ilustraciones Raras y Peculiares

Pocos elementos de diseño agregan personalidad al sitio mejor que las ilustraciones hechas a mano. Estas le dan este toque peculiar y amigable a la marca, y no pueden ser fácilmente replicadas por la competencia. Tanto si se es creativo, un negocio que desea apelar a los creativos o simplemente una marca que dista mucho de las palabras aburrido y ordinario, esto es algo que debería agregar a su sitio.

Plano No Irá a Ningún Lado por el Momento

El diseño plano ha existido durante un tiempo y es compatible con otras tendencias tales como el minimalismo y el diseño web adaptativo. De cara al futuro, es probable que veamos las siguientes tendencias de diseño plano en la vanguardia:

• Largas sombras: Brindan más profundidad a los diseños planos.
• Esquemas de colores vibrantes, sitios web super saturados.
• Tipografía sencilla: Los tipos de letras sencillas ayudan a garantizar que los textos permanezcan legibles y leíbles en el diseño plano.
• Botones "Fantasma": Estos permiten funcionalidad sin distracción de la experiencia de usuario y son representados en ocasiones como enlaces vinculables con bordes externos que cambian cuando el usuario sobrepasa el puntero del “mouse”.
• Minimalismo, diseño orientado al usuario: Reducir la cantidad de elementos para crear una interfaz de usuario fresca y despejada. En cuanto a diseño web, a menudo, menos es más. Incluso los más tecnológicos y financieramente privilegiados visitantes saben apreciar un sitio que no está sobrecargado de imágenes o que no utiliza mucho ancho de banda. No quiere decir que el sitio tenga que ser aburrido, solo tiene que reducirse a las cosas esenciales y trabajar el diseño a partir de allí. Si tienen que agregar elementos extras, tales como navegación lateral y submenús, pueden ocultarlos y permitir a los visitantes que los descubran por sí mismos.

Mejor Uso de la Tipografía

Tipografía no es solamente el arte de diseñar letras. Hecho correctamente, puede respirar vida al contexto del texto, mejorar al resto de los elementos de diseño del sitio y ayudar a la marca a sobresalir. Hecho incorrectamente, podría convertirse en una enorme falla para lo que de otra forma sería un sitio perfecto.

Es posible descargar tipos de letras gratuitamente por toda la Web. Sin embargo, una tipografía personalizada creada por un diseñador profesional es mejor para dar énfasis a la singularidad de la marca. Además, un conocimiento básico sobre como hacer que la tipografía funcione ayuda a mantenerse en sintonía con el diseñador.

Narración Interactiva

Cuando presentamos una pregunta intrigante al visitante del sitio, prendemos el interruptor de la curiosidad en su cerebro y lo conducimos a seguir un vínculo u otro, luego otro y luego otro. Para cuando el visitante haya terminado, ya habremos terminado la historia y lo habremos convertido en un nuevo admirador o cliente consumidor.

Esto es posible porque, por un lado, los seres humanos amamos las historias. Nos encanta escuchar sobre – e imaginarnos a nosotros mismos como – personajes que son arrojados hacia conflictos y de alguna manera hayan la solución para resolverlos. Nos encanta que nos pregunten “¿Qué pasa a continuación?” y una vez que tenemos la respuesta, hacemos de nuevo la misma pregunta. Al terminar la historia nos sentimos o bien satisfechos o bien queriendo más. Nuestro trabajo como desarrolladores es hacerlos querer más.

Conclusiones

No sigan las tendencias solo porque sean la moda del momento. Las tendencias representan técnicas populares por buena razón, pero asegúrense de que sean lo mejor para sus usuarios. Por ejemplo, a una tienda virtual probablemente no le haría ningún bien un sitio tipo página única con desplazamiento infinito. Se espera que cada vez más diseñadores se muevan en la dirección de la experiencia de usuario y los datos, y se alejen de lo visceral, las opiniones y de poner toda clase de bombos y platillos en un sitio web simplemente porque pueden ó porque esté de moda.