11 tendencias de diseño de sitios web que debes conocer

El sitio web de su empresa es la base de operaciones para todo lo que hace en línea. Todo su trabajo en las redes sociales, su marketing por correo electrónico, sus publicaciones de invitados, todo debería volver a su sitio.

Debido a que su sitio web es tan crítico para su éxito de marketing, tiene sentido mantenerse al día con las tendencias que lo afectan. Hablamos mucho sobre las tendencias de optimización de motores de búsqueda y las mejores prácticas. Esos son ciertamente importantes, pero la apariencia de su sitio para los visitantes también es importante. Lo fácil que es navegar y usar su sitio es aún más importante.

Las mejores prácticas de diseño de sitios web cambian de vez en cuando, y las formas en que las personas esperan que su sitio se vea y se comporte también cambian. Incluso si no está planeando un rediseño en este momento, es bueno conocer las tendencias actuales. De esa manera, podrá saber cuándo su sitio ha pasado de ser "suficientemente bueno" a necesitar realmente un rediseño.

Estas 11 tendencias van desde enfoques de diseño amplios hasta características de diseño más pequeñas. Muchos de ellos se superponen o se complementan entre sí. No es necesario, y tal vez no debería, implementarlos todos, pero es bueno reconocerlos cuando los ve.

1. Móvil

Esta es una tendencia de diseño tan grande que afecta a todas las demás tendencias que mencionaré aquí. La búsqueda móvil ahora ha superado la búsqueda de escritorio. Eso tiene implicaciones importantes no solo para el diseño, sino también para el contenido e incluso para los tipos de software que definen el diseño y el contenido.

2. Minimalismo

Hay muchas razones por las que esto es más que una simple moda de diseño. Primero, sus visitantes están abrumados y distraídos. Reducir sus opciones con un diseño súper limpio enfoca su atención. Y los hace más propensos a tomar medidas.

El minimalismo también funciona bien con dispositivos móviles. Ayuda a que la interfaz encaje más fácilmente en una pantalla pequeña. También debería hacer que su sitio se descargue más rápido.

El Nielsen Norman Group realizó recientemente una excelente encuesta de 112 sitios web minimalistas. Descubrieron que las características definitorias eran:

• diseño plano
• esquemas de color limitados
• pocos elementos de la interfaz de usuario
• uso del espacio negativo
• tipografía dramática
• diseños de cuadrícula

Este sitio a continuación implementa muchos de esos elementos minimalistas. También tenga en cuenta que la flecha en el lado izquierdo es un elemento de diseño que aparece en muchos sitios recientemente diseñados.

3. Diseño responsivo y contenido adaptativo

Creo que al menos todos hemos oído hablar del diseño receptivo. Si no está seguro de lo que es, el diseño receptivo es cómo codificar y diseñar una página web para que se vea bien en todos los dispositivos. Si su sitio web no está utilizando un diseño receptivo en este momento, debería serlo.

Pero también hay algo llamado contenido adaptable. Básicamente, se trata de hacer que el texto, las imágenes y otros activos de contenido se ajusten a diferentes dispositivos. Eso generalmente significa la longitud del texto y el tamaño de la imagen, pero también hay otras opciones.

Todos hemos hablado y escrito mucho sobre el diseño receptivo, pero creo que solo estamos comenzando a avanzar hacia la creación de contenido adaptable. Una de las ideas más importantes en el diseño web actual es no crear un diseño primero y luego hacer que el contenido encaje en él. En cambio, tomas el contenido que tienes y creas un diseño que lo complemente.

4. Diseño plano

Casi todos deberíais saber qué es el diseño plano. Si no lo hace, es hora de aprender. Aquí hay un ejemplo:

¿Te das cuenta de que las imágenes, los iconos y los elementos de navegación no intentan parecer tridimensionales? ¿Y cómo no hay sombras paralelas y muy pocas gradaciones de color o grises? Esos son todos los sellos distintivos del diseño plano.

Pero eso no significa que no puedas tener una fotografía. Este es otro ejemplo de un sitio que se considera que tiene un diseño plano.

5. Diseño de cuadrícula

Esta tendencia fue generada principalmente por Pinterest, aunque un enfoque de cuadrícula para el diseño en cualquier medio ha existido durante décadas. A veces llamado "Pinteresty" o "tarjetas", el enfoque de diseño de cuadrícula puede ser una forma elegante de ofrecer una variedad de opciones. Es bueno para las páginas de lista de productos, las páginas de lista de libros electrónicos y documentos técnicos y, a menudo, incluso como diseño de página de inicio.

Así es como estamos considerando usar el diseño de cuadrícula en la página de inicio del blog Act-On:

6. Imágenes y videos de fondo

Estoy seguro de que has visto estos. Están en todas partes... son una de las tendencias de diseño que hacen que algunos diseñadores digan que todos los sitios comienzan a parecerse. Pero estos pueden ser tan omnipresentes por una razón: hacen que las personas se vean más largas de lo que lo harían de otra manera.

Si el video se mueve de la manera correcta, o si la imagen se recorta correctamente, puede atraer la atención hacia un área determinada de la página. Me gusta en un cuadro de suscripción. Vea la página de inicio de PeopleHr como un ejemplo de un fondo de video que atrae su vista hacia el formulario de suscripción.

Entonces, ¿es mejor usar una imagen o un video, o una imagen grande y un montón de imágenes más pequeñas? En realidad, no parece importar mucho, al menos según una prueba que hizo Huge Inc. Vieron tasas de desplazamiento suprimidas solo cuando se usó una imagen animada:

Una cosa a tener en cuenta sobre las imágenes de fondo... a menudo usan superposiciones de texto en letra blanca oculta. Mientras que a los diseñadores les encantan las letras "inversas" o "noqueadas", a los especialistas en conversión ya las personas de respuesta directa no les gusta.

El tipo inverso que es más que un título corto o un eslogan es difícil de leer. También suprime gravemente la comprensión de lectura, como descubrió un editor australiano cuando realizó una prueba.

Se trata de todo el tipo inverso que desee tener:

7. Desplazamiento infinito

Esto es tan ampliamente utilizado que ya casi no es una tendencia. Es una convención estándar de diseño web. Eso no siempre es bueno. A decir verdad, no me gusta mucho el desplazamiento infinito. Es porque a medida que me desplazo, la página salta, por lo que no veo toda la información, solo veo segmentos de ella. Cuando busco algo en una página de desplazamiento, tengo que desplazarme hacia arriba y hacia abajo, poco a poco, con mucho cuidado. Se necesita mucho esfuerzo para asegurarse de que no me perdí nada cuando el pergamino infinito decide omitir.

Termina No estoy solo en mi frustración. El Grupo Nielsen Norman publicó recientemente un artículo que resume el problema:

El desplazamiento sin fin evita que las personas tengan que prestar atención a la mecánica de la paginación en las tareas de navegación, pero no es una buena opción para los sitios web que admiten tareas de búsqueda orientadas a objetivos.

Me desplazo como una tarea de búsqueda orientada a objetivos. El desplazamiento infinito lo hace difícil.

8. Contenido interactivo

Hemos recorrido un largo camino desde el "folleto" de hace una década, pero muchos sitios no han llegado tan lejos como podrían.

Existen razones comerciales para adoptar el contenido interactivo. En primer lugar, aumenta el tiempo en el sitio. En el caso de encuestas y cuestionarios, también puede brindarle información valiosa sobre su audiencia.

Esta es una tendencia que vale la pena seguir. Si está bien implementado, agregar contenido interactivo podría brindarle un buen aumento en los ingresos y otras métricas clave.

El mejor contenido interactivo para los especialistas en marketing B2B pueden ser las calculadoras y las herramientas de autoevaluación. Estos son ideales para las últimas etapas del proceso de compra. Pueden ayudar a los prospectos a determinar qué servicio es apropiado para ellos e incluso darles una estimación aproximada del costo.

La Calculadora de ROI de optimización de sitios web de ClickZ es un hermoso ejemplo de contenido interactivo:

9. Movimiento

Esta es la tendencia hermana del contenido interactivo. El movimiento toma muchas formas, la más obvia es el video. Otro ejemplo serían los gifs animados que ves en algunos blogs. Si bien algunos de estos pueden ser demasiado atrevidos para un blog B2B, es bueno estirarse un poco de vez en cuando. Especialmente si el gif animado lleva un punto a casa de una manera que las palabras, o incluso una imagen estática, nunca podrían. Solo úsalos con algo de habilidad. Desea un efecto tan elegante como un cinemagraph, no algo así como un letrero de neón intermitente de una licorería.

vía GIPHY

o

vía GIPHY

10. Fotografía e ilustraciones personalizadas

Hay muchas voces en el mundo del diseño que critican las fotos de archivo. No estoy seguro de que sean tan malos como dicen algunas personas, pero definitivamente existen riesgos al usar fotografías de archivo. Primero, otras personas podrían usar las mismas fotos que tú. Y segundo, se ha demostrado que las fotos de personas reales obtienen conversiones más altas. ¿Por qué? Porque son más creíbles.

Una idea paralela a esto son las ilustraciones personalizadas. Estos pueden hacer mucho para que su sitio se vea original. Uno de los grandes problemas con muchas de estas tendencias de diseño es que han sido adoptadas casi demasiado. Muchos sitios comienzan a tener el mismo aspecto, o al menos como si estuvieran usando la misma plantilla, con solo intercambiar texto e imágenes. Los sitios dibujados a mano cambian esto. También lo hacen las fuentes personalizadas.

11. Navegación oculta

Este es otro resultado de la influencia que los dispositivos móviles están teniendo en todo el diseño web. Estos menús de navegación ocultos parecen un pequeño icono hasta que pasas el mouse sobre ellos o haces clic en ellos. Luego aparecen y muestran su contenido.

Algunos sitios, como el de Act-On, utilizan la navegación oculta de manera receptiva. Si alguien ve el sitio en un dispositivo móvil o tiene una ventana de navegador de escritorio estrecha, verá la navegación colapsada:

Si hacen clic en las tres barras, verán la navegación dispuesta como si fuera una barra lateral:

Si la ventana de su navegador es lo suficientemente amplia, verán la navegación completa:

Hay otra tendencia relacionada con esto: la navegación anclada. Esto se refiere a una barra de navegación que lo sigue a medida que se desplaza hacia abajo en la página. Las superposiciones son un ejemplo de navegación anclada. Esos botones de redes sociales que lo siguen a medida que se desplaza hacia abajo en una publicación de blog también están anclados.

De nuevo a usted

Esas son las principales tendencias en diseño web en este momento. Pero el diseño evoluciona y el diseño web evoluciona rápidamente. Si está pensando en rediseñar su sitio web, o simplemente está recolectando ideas hasta que esté listo para un rediseño, asegúrese de seguir las tendencias de diseño web que respaldan la usabilidad y las conversiones. Concéntrese siempre en sus usuarios: sus clientes y prospectos. El hecho de que un elemento de diseño esté de moda no significa necesariamente que sea bueno para los negocios.

Y como dijo Steve Jobs: “ El diseño no es solo lo que parece. El diseño es cómo funciona .”

Una última cosa.

El diseño evoluciona y el diseño web evoluciona rápidamente. Si está pensando en rediseñar su sitio web, o simplemente está recolectando ideas hasta que esté listo para un rediseño, asegúrese de seguir las tendencias de diseño web que respaldan la usabilidad y las conversiones, y lea el libro electrónico de Act-On, Convierta su sitio web en un cliente potencial. Generation Machine, para asegurarse de no perder oportunidades de generar clientes potenciales a medida que cambia el diseño de su sitio web.

Y lo más importante, concéntrese siempre en sus usuarios: sus clientes actuales y potenciales. El hecho de que un elemento de diseño esté de moda no significa necesariamente que sea bueno para los negocios.