Un pronóstico de las tendencias de diseño web para 2016

Dónde han estado las tendencias de diseño web

El diseño web para 2015 vio muchos refinamientos de las tendencias de 2014.

Los últimos años vieron tendencias como:

• Mínimo
• Departamento
• Deslizadores de vídeo
• vídeo de fondo
• Animación CSS
• Pergamino largo
• Imágenes de héroes
• Menús de hamburguesas
• Sensible
• Móvil primero
• Boletines emergentes
• Marcos front-end

Muchas de estas tendencias seguirán perfeccionándose. Algunos serán reemplazados por mejores alternativas. Otros, como el video de fondo, se utilizarán con moderación.

Hacia dónde se dirigen las tendencias de diseño web

Las tendencias de diseño web de 2016 probablemente podrían resumirse en dos letras: U y X. Bien, y tal vez también una palabra más: móvil. Las tendencias seguirán las mejores prácticas tanto para UX como para plataformas móviles. La experiencia de usuario y los dispositivos móviles han estado a la vista en los últimos años, pero ahora están al frente y en el centro y son el principal enfoque impulsor del diseño de sitios web con una interfaz de usuario ordenada.

Este año verá aún más refinamiento y estandarización de las tendencias actuales. Veremos que los conceptos pasan de ser un ideal al estándar. De nuevo a la norma.

Diseño de materiales

Material Design es una alternativa al diseño plano que recupera algunos elementos gráficos agradables. Es un conjunto de estándares de diseño de Google que separa elementos utilizando el concepto de capas que se encuentra en el software de edición de imágenes. Puede apilar y quitar elementos según sea necesario. Incluso tiene animaciones integradas que normalmente tendrían que crearse manualmente.

Es un lenguaje de diseño con un conjunto específico de pautas que elimina las conjeturas. Los resultados se ven iguales de una plataforma a otra. Dado que estos estándares son establecidos por Google, es seguro que tendrán un amplio apoyo.

Sin embargo, es posible que adherirse a pautas estrictas obstaculice la creatividad. Veo esto como un desafío para mejorar la creatividad dentro de las pautas.

En comparación con el diseño plano

El diseño de materiales es diferente del diseño plano. El diseño plano es una base de diseño para presentar la interfaz de usuario y los elementos gráficos. Simplemente reduce las imágenes a lo básico y elimina las imágenes que intentan imitar el mundo real con diseños como esquinas redondeadas, texturas, sombras, etc. Minimiza todas las cosas llamativas que distraen de la historia y reduce la cantidad de información con la que los lectores tienen que lidiar. Tiene colores sólidos, bordes nítidos y líneas finas.

El diseño plano se escala bien y es fácil de leer en dispositivos móviles. Es práctico y funciona bien. Se carga rápido. El problema es que la apariencia es secundaria. Limita la cantidad de colores que puede usar y, a veces, puede parecer genérico.

El diseño plano no desaparecerá. En realidad, es compatible con Material Design, además de ser receptivo y mínimo. Habrá un enfoque en apagar lo que no es necesario para que puedan concentrarse en lo que es. La tendencia será encontrar ese equilibrio perfecto entre los dos. Plano no tiene por qué significar aburrido.

El diseño de materiales se basa en 3D. Es una mejor opción para aquellos que quieren un diseño visual elegante. El diseño de materiales te devuelve algunos de los elementos de diseño. No está obligado a tener solo colores sólidos o no tener animación.

El diseño de materiales se enfoca primero en los dispositivos móviles, ya que más consumidores también usan teléfonos inteligentes y tabletas como sus dispositivos principales. Agiliza el sitio web y lo acelera. Espere que el diseño de materiales se convierta en el estándar en el diseño web.

Tipografía

Las resoluciones aumentadas y los diseños receptivos permiten mejorar la tipografía, por lo que esa es una de las tendencias de diseño web que simplemente debemos incluir aquí. La tipografía puede ser más colorida y destacar. Puede hacer una declaración. Dos tendencias que he visto con la tipografía son el uso de serifas y la escritura a mano. Cada uno tiene usos específicos.

• Las gracias ayudan a mejorar la legibilidad. Se eliminaron anteriormente debido a pantallas de menor resolución y tamaño de pantalla. Las resoluciones y tamaños de pantalla son cada vez más grandes. Además, los diseños de diseño son más limpios y dejan espacio para fuentes más elegantes. Espere ver serifas más a menudo dentro del contenido mismo.
• La escritura a mano es más personal. Si se hace correctamente, es bonito y le da un toque especial a un sitio web. Al igual que las serifas, el desafío es mantener el estilo legible y legible en pantallas pequeñas. La escritura a mano se utilizará principalmente en logotipos, encabezados, títulos de publicaciones, menús, tarjetas de presentación, etc.

Una cosa a considerar es que más usuarios consumen contenido en dispositivos móviles. Desafortunadamente, los dispositivos de gama baja, como Fire HD 10, muestran resoluciones más bajas. Esto se nota más en pantallas más grandes porque tienen una menor densidad de píxeles debido a que tienen la misma resolución que sus contrapartes más pequeñas. Una solución es mostrar tipografía basada en la resolución de la pantalla. Esto significa que las serifas y la escritura a mano se mostrarían en dispositivos móviles para pantallas de alta resolución, mientras que las pantallas con resoluciones más bajas podrían recibir una fuente que sea más adecuada para su resolución. Por supuesto, se deben tener en cuenta las velocidades del servidor y el tiempo de carga.

Experiencia de usuario móvil

No solo la tipografía se volverá más adecuada para las pantallas y resoluciones móviles, sino que la navegación, los formularios, las imágenes y las características específicas de los dispositivos móviles (como el GPS) tendrán el enfoque del diseño. El uso de imágenes cambiará algo. Cuando se hayan usado imágenes para efectos y texto, se usarán CSS y fuentes elegantes para efectos y texto para texto. Esto reduce los tiempos de carga de la página y la carga del servidor.

Los eventos táctiles son cada vez más prominentes. Más sitios están usando complementos para manejar eventos como tocar y deslizar. Esto hace que los sitios web no solo respondan al tamaño de la pantalla, sino también al tipo de pantalla, el tamaño del dedo, la cantidad de presión utilizada, etc. Los botones y campos deben ser lo suficientemente grandes y tener suficiente distancia entre ellos para que no se golpeen accidentalmente. . Lo que nos lleva a los diseños móviles.

Diseños móviles

Reglas de minimalismo para dispositivos móviles. Algunos elementos del escritorio se pueden ocultar cuando el sitio se ve en un dispositivo móvil. Otros elementos se ajustarán o modificarán según el tamaño y el tipo de pantalla. Esto permite que el mensaje se ajuste a la pantalla. Elimina los elementos menos importantes y ajústalo a la pantalla sin perder el mensaje.

Las presentaciones de diapositivas, las imágenes, los botones, los elementos, los menús, etc., deben desarrollarse pensando en los dispositivos móviles. Afortunadamente, Material Design recupera elementos visuales para que los sitios no tengan que verse simples en dispositivos móviles. Además, puede renderizar una imagen a un tamaño o resolución diferente según el tamaño de la pantalla. Esto acelerará la carga de la página y las imágenes se verán muy bien en los dispositivos móviles.

Más imágenes, menos texto

Los consumidores tienden a mirar más las imágenes y los videos y menos el texto. Esto crea un acto de equilibrio entre SEO y UX. Los motores de búsqueda prefieren el texto que pueden indexar. Esto moverá el contenido rico en texto a las subpáginas y el contenido rico en imágenes a la página de inicio. Si se requiere texto para la página de inicio, intente colocarlo debajo de las imágenes. Diríjase primero a los usuarios y luego a los motores de búsqueda.

Los navegadores son cada vez más rápidos en la representación de imágenes. Esto significa que las imágenes pueden ser más grandes con resoluciones más altas que antes. Espere un mayor énfasis en imágenes y obras de arte de mayor calidad.

Azulejos reemplazados con tarjetas

Vimos muchos diseños basados ​​en mosaicos en 2015. Pinterest hizo (o ayudó a hacer) popular el diseño. Las tarjetas llevan el diseño a un nivel más profundo al agregar funcionalidad e interactividad. Pueden proporcionar más información utilizando efectos de desplazamiento, volteando las tarjetas, expandiéndolas y más. Son un excelente elemento de diseño que pone el foco en las imágenes y ofrecen una forma útil y ayudan a que el contenido sea fácil de ver de un vistazo. Básicamente, crean diseños de cuadrícula mientras minimizan el contenido.

Narración dinámica

La narración dinámica funciona contando una historia a través de gráficos con soporte textual. Esta es una de las tendencias de diseño web que ha tenido popularidad durante algunos años. Guía a los visitantes a través de un proceso de pensamiento o una línea de tiempo. Puede mostrar los beneficios de un producto o servicio, la historia de una organización o cualquier cosa que desee que sus visitantes sepan sobre usted o su empresa. Puede ser un video o una presentación que esté automatizado o uno que puedan recorrer ellos mismos haciendo clic o desplazándose.

Esto requiere un alto nivel de habilidad gráfica y debe hacerse con cuidado y habilidad para que se vea bien. Requiere guiones gráficos, conocer el mensaje de su sitio web y cómo transmitir ese mensaje. Debe resaltar los beneficios y características de la manera más sucinta posible con el equilibrio adecuado entre gráficos y texto. Demasiado de cualquiera puede resultar en una UX desenfocada, abrumadora o ambas.

Mayor enfoque en los comentarios sociales

WordPress tiene un gran sistema de comentarios, pero más lectores tienden a dejar comentarios dentro de las redes sociales que en los propios sitios web. Para capturar comentarios sociales, la tendencia sigue avanzando hacia más sitios web que utilizan sistemas de comentarios sociales en lugar del sistema de comentarios integrado de WordPress. Esto garantiza que los visitantes puedan comentar usando sus cuentas sociales y/o que cualquier mención en las redes sociales se recoja y se muestre directamente en su sitio.

Mayor enfoque en el contenido, menos enfoque en los anuncios

En los últimos años, los lectores se han vuelto ciegos a los anuncios dentro de las barras laterales. Las páginas de inicio han pasado de ser un banner para el contenido y los anuncios a ser una página de destino llamativa con excelentes imágenes. Contienen más imágenes que texto y los anuncios se han trasladado al contenido en sí. Esto requiere un gran diseño para dejarles espacio, lo que nos lleva a…

Mayor enfoque en los diseños de artículos

Hemos visto complementos de construcción de arrastrar y soltar que nos permiten crear páginas de inicio, pero también existe la necesidad de un diseño de diseño dentro de las publicaciones mismas. Los sistemas que permiten el diseño de diseño de publicaciones serán populares, ya que los usuarios pueden crear diseños con áreas de widgets y colocar módulos, dando a sus sitios una apariencia mucho más elegante.

Herramientas de diseño

Hay algunas herramientas interesantes para ayudar a los diseñadores a crear prototipos de sitios web y diseños de diseño que han aterrizado en la escena recientemente o que se proyecta lanzar este año. Aquí hay algunos que espero sean populares en 2016.

Proyecto Adobe Cometa

Adobe Project Comet llega este año. Es una aplicación multiplataforma para diseñar la UX de principio a fin. Tiene herramientas para wireframing, diseño visual, diseño de interacción, creación de prototipos y más. Puede obtener una vista previa en cualquier dispositivo. Funciona con Photoshop e Illustrator, y se puede ampliar a través de complementos creados por la comunidad. Esta será la herramienta de desarrollo a seguir.

Bosquejo

Sketch es una aplicación para Mac que muchos usan en lugar de Photoshop. Tiene un ambiente de trabajo agradable y fue diseñado específicamente para diseñadores web y móviles. Tiene características como estilos de capa, efectos de texto, herramientas para crear elementos vectoriales y más.

Pensamientos finales

Estas son solo algunas de las tendencias de diseño web que se volverán más prominentes a lo largo de 2016. Por supuesto, la tendencia popular no siempre es la mejor opción, pero son buenas herramientas para tener a la espera en caso de que las necesite. Además, este proceso de encontrar formas de sobresalir entre la multitud puede ayudar a impulsar una tendencia.

Tu turno. ¿Estás de acuerdo con estas tendencias? ¿Qué tendencias de diseño web has notado que omití? ¿Tienes algo que añadir? Háganos saber en los comentarios a continuación.

Imagen en miniatura del artículo por Graphicworld / shutterstock.com