Tendencias de diseño web de 2022 para inspirar su próximo proyecto de sitio web

Publicado: 2022-06-30

¿Hay algo malo con DEMASIADO de moda?

Veo que muchos diseñadores de sitios web pierden el rumbo: se sienten atraídos por el diseño 'súper elegante', a expensas de que sus sitios web sean utilizables y funcionales.

“La mayoría de los diseñadores viven en algún tipo de realidad alternativa, creando cosas innecesarias para los demás. Luego se convierten en tendencias”. – Usuario de flujo web Blazej

Hoy vamos a repasar 3 tendencias para 2022: eso no te hará sacrificar la usabilidad de tu proyecto de sitio web, pero te ayudará a elevarlo al siguiente nivel.

Tabla de contenido

Tendencia de diseño web 2022 n.º 1: recortes de sujetos con fondos coloridos

Haga que esta tendencia de sitios web de 2022 funcione para usted:

  • El uso de una aplicación de "creador de formas" como ShapeDivider.app puede ayudarlo a crear estas formas naturales si desea un buen atajo.
  • Elegir la imagen perfecta será más importante para estos, ya que es fácil volverse demasiado 'foto de archivo' con muchas de las imágenes en Internet con fondos blancos.

Tendencias en sitios web para 2022: fondos coloridos y recortes

Recortes en diseño web - Tendencia de diseño de sitios web 2022

Tendencia de diseño web 2022 n.º 2: trabajo monocromático

Haga que esta tendencia de sitios web de 2022 funcione para usted:
  • ¡ Elegir otro color además del blanco y negro puede hacer que el diseño DESTAQUE!
  • ¡Tener menos colores con los que trabajar, en realidad hace que diseñar este tipo de sitios web sea más fácil!
  • Haz que el color funcione para ti, úsalo para los botones clave y las cosas que quieras llamar la atención.

Blanco y negro más azul - tendencia de color 2022 - monocromático

Tendencias de diseño de sitios web 2022 - Monocromo más uno (tendencias de diseño amarillo)

Tendencias de diseño de sitios web monocromáticos 2022

Tendencia de diseño web 2022 n.º 3: elementos de diseño fantasma

Haga que esta tendencia de diseño web de 2022 funcione para usted:

  • Mezcle un elemento que no necesariamente quiera que sobresalga como un pulgar dolorido.
  • Cree una estética de gama alta utilizando este aspecto más sutil.

Elementos de diseño fantasma: tendencias de diseño web para 2022

Años anteriores de tendencias de sitios web

Nos encantan los sitios web hermosos, enfocados en la experiencia del usuario y construidos de una manera elegante Y atemporal. La clave es... no estar DEMASIADO a la moda de una manera que pase de moda antes de que puedas decir "animación de paralaje".

  • No salte sobre cada nueva tendencia.
  • Esté atento a lo que es elegante Y efectivo.
  • Cada una de las tendencias presentadas a continuación tendrá un pequeño extracto de por qué es elegante, y una separada sobre por qué, o si, es efectiva.

Las tres principales tendencias de diseño web de 2020

Tipografía grande - Tendencias de diseño web 2020

1. Tipografía grande

¿Por qué es elegante? En un mundo en el que todo el mundo está metiendo tanto texto en sus diseños como sea posible para satisfacer a 200 partes interesadas... si puede reducirlo a un mensaje clave que sea súper breve y lo haga enorme, usted gana.

¿Es efectivo?: ¡Es muy efectivo porque la gente sabe en qué concentrarse! El problema de que cada parte del texto tenga el mismo tamaño o solo pequeñas variaciones entre sí, por supuesto, es que no está claro cuál es la parte más importante.

Imágenes de héroes más pequeños, formas orgánicas

2. Héroe más pequeño, imágenes de héroe más impactantes

¿Por qué es elegante? ¿Qué tan glorioso es no tapar tus bellas imágenes? A la gente le encanta esto porque se siente cohesivo y es menos probable que experimente problemas con las capas que son difíciles (ejemplos en el siguiente elemento).

¿Es efectivo? Ciertamente puede serlo; el punto crucial es que las imágenes sean buenas y realmente ayuden a las personas a imaginarse beneficiándose de su producto o servicio. Sin buenas imágenes, esto puede parecer de mal gusto.

Elementos en capas: texto compensado, tendencias de diseño 2020

3. Elementos en capas

¿Por qué es elegante? Al igual que en la moda, las capas intencionales son ingeniosas: se sienten intencionales y, por lo tanto, pueden verse muy bien.

¿Es efectivo?: Esto realmente depende del artículo específico. Realmente NO puede ser efectivo si no tiene la fotografía correcta, los elementos de apoyo correctos, la superposición correcta para el contraste o la tipografía correcta (funciona mejor con fuentes más pesadas). Tenga cuidado de no abusar de esto, y utilícelo cuando tienes elementos sólidos que funcionan juntos y 'tienes control sobre ellos'. A menudo, un cliente puede intercambiar una imagen que ahora no funciona, por lo que es importante que se haga con los componentes correctos cuando sabe que no cambiarán con frecuencia.

Otras menciones de honor:

Tipografía vertical : utilizada para elementos de la interfaz de usuario, puede dar una sensación más intencional en los diseños.

Recortes de formas orgánicas : el ejemplo anterior de Pops Diabetes también utiliza esta tendencia.

10% de compensación de imágenes : también el elemento de Schaefco anterior presenta esto:

Recortes tipográficos : he visto algunos ejemplos increíbles de esto. Una gran letra en negrita está recortada del espacio en blanco y, a veces, tiene un video detrás, lo que le da un efecto de capas realmente genial.

Video en cada página : si está haciendo videos regularmente, ¿por qué no hacer uno para cada uno de sus servicios clave e incluirlos para aumentar el "tiempo en el sitio"? Excelente para SEO, y excelente para los usuarios que no tienen ganas de leer. (Pista: la mayoría de nosotros preferiríamos ver un video).

Animaciones complementarias ligeras : las animaciones atraen la atención, especialmente si se mueven un poco, pero asegúrese de atraer la atención de las personas hacia lo correcto. O asegúrese de que las animaciones sean realmente buenas o tengan un estilo que realmente complemente su marca.

Más fuentes Serif: ¡las fuentes Serif son más fáciles de leer! ¡Estoy feliz de ver que las serifas regresan en 2020 y más allá!

Otros diseñadores abordan las tendencias de diseño web de 2020 (con colaboración colectiva).

Los servicios de diseño web en los últimos tiempos se enfocan en brindar la mejor experiencia a los usuarios en el momento en que navegan por el sitio web. Por lo tanto, se vuelve muy importante por parte de los desarrolladores asegurarse de que funcionen en consecuencia.
Entonces, aquí hay una lista de las 17 principales tendencias de diseño web y UI para el año 2020.

1. Minimalismo abierto y colorido
Hoy en día, si todavía estás pensando en un diseño minimalista con fondos en blanco y negro, esos días se han ido. El minimalismo abierto y colorido es la última tendencia que brinda una sensación cohesiva y llamativa a los diseños web.

2. Compatible con dispositivos móviles
Con el uso cada vez mayor de dispositivos móviles, los diseñadores deben asegurarse de que el sitio web sea compatible con dispositivos móviles para que cada uno de los usuarios pueda ver el sitio web a través de sus dispositivos móviles con facilidad. Aquí es exactamente donde un servicio de diseño web receptivo viene al rescate.

3. Encabezados de gran tamaño
Los encabezados y titulares de gran tamaño se han vuelto extremadamente comunes en los últimos tiempos para atraer la atención de los lectores, ya que tienen mucho menos tiempo para pasar en el sitio web. Por lo tanto, los titulares están tan creados que captan la atención de los lectores.

4. Colores vibrantes, degradados desafiantes y fondos oscuros
Los sitios web de hoy se enfocan en brindar la mejor experiencia de usuario y, por lo tanto, los servicios de diseño web se enfocan particularmente en lo mismo. El uso de degradados más complejos junto con una fantástica interpretación de colores con un fondo oscuro se ha vuelto más común en el año 2019. Una combinación clásica de los tres es la tendencia.

5. Velocidad de carga del sitio web
Los clientes de hoy en día siempre tienen prisa y, por lo tanto, los usuarios simplemente se saltan un sitio web de carga lenta. Por lo tanto, la velocidad de carga del sitio web debe ser mucho mayor, que es exactamente lo que se ha convertido en la última tendencia para mejorar la experiencia del usuario.

6. Animaciones e ilustraciones de siguiente nivel
Los usuarios siempre esperan algo nuevo en todo momento. Esto se puede lograr fácilmente con las animaciones, así como con las ilustraciones del siguiente nivel, que es exactamente la razón por la que se han convertido en la última tendencia.

7. Cuadrículas CSS
Las cuadrículas CSS siguen siendo una de las tendencias de diseño web más populares que juegan un papel vital para hacer que el diseño web sea mucho más fácil. En los últimos tiempos, es una combinación de algunas herramientas nuevas con funciones existentes. El CSS moderno de hoy ofrece un nivel completamente nuevo de capacidad de respuesta, interacción y visualización de datos.

8. Esquemas de color que son claros y oscuros
Para crear algo emocionante para los usuarios, el uso de esquemas de colores claros y oscuros es demasiado bueno. Esto crea una impresión positiva en los usuarios, por lo tanto, es beneficioso.

9. Experiencias 3D inmersivas
Las imágenes y los gráficos en 3D son, sin duda, demasiado buenos para los servicios de diseño web, por lo que se pueden crear diseños web atractivos que llamen la atención de los usuarios. Las experiencias inmersivas en 3D dan vida a su sitio web y ofrecen excelentes experiencias a los usuarios.

10. Brutalismo El brutalismo es otra tendencia importante que está en aumento, lo cual es bastante evidente por el hecho de que más marcas prefieren hacer uso de conceptos audaces, descarnados y descarados para abrazar su lado rebelde interior.

11. Elementos voladores y flotantes
Para captar la atención de los usuarios, las imágenes voladoras y flotantes son extremadamente efectivas.

12. Formas orgánicas y geométricas
El uso de formas geométricas y orgánicas para los servicios de diseño web ha tomado su lugar con bastante solidez en algún lugar entre los diseños planos y las cuadrículas rotas.

13. Cosas superpuestas
El efecto de superposición es sin duda una de las tendencias más candentes del año 2020. Las cosas superpuestas generan interés visual en algunos tipos específicos de contenido. Este concepto es un gran truco para despertar los intereses de las personas, pero debe hacerse con cuidado con los servicios de diseño web.

14. Vídeo aumentado
La adición de más videos le da más vida al sitio web y tiene la capacidad de captar la atención de casi todos como ninguna otra forma de medios. Sin duda, esta es una tendencia de 2020 y continuará durante mucho tiempo.

15. Diseños asimétricos y cuadrículas rotas
Los diseños asimétricos del sitio web junto con el uso de cuadrículas rotas en el momento del diseño web se han vuelto más comunes hoy en día.

16. Realidad Aumentada
Las interfaces de solo pantalla no son suficientes para el mundo actual y los usuarios quieren que las interacciones físicas tengan lugar en el mundo real. Aquí es donde los diseñadores web tienen que pensar en algo nuevo para ofrecer la función de realidad aumentada.

17. Microinteracciones
La importancia de las microinteracciones no se puede descuidar a ningún precio. Estos son geniales para crear eventos bastante atractivos, por lo que aumentarán en el año 2020.
Ahora, cuando conozca las principales tendencias de diseño web y UI para 2020, no pierda más tiempo e incorpórelas en su sitio web para brindarles a los usuarios experiencias fantásticas.

Ejemplos de tendencias comunes de diseño web mal utilizadas

¿Cómo se determina si una tendencia se utiliza mal? Empatía e intuición. Consulte su grillo pepe interior. ¿Te gustaría que alguien te hiciera esto con su sitio web? Si la respuesta es no, tal vez debería renunciar a las cincuenta ventanas emergentes a pesar de que 'tiene tantas suscripciones a boletines informativos' que puede enviarlas como spam por el resto de su vida.

¿Funciona? Felicitaciones, convirtió a 5 personas más y enojó a otras 40, arruinando la percepción de su marca y haciendo que reconsideren volver a hacer clic en su contenido de autocomplacencia nuevamente. Así que sí, lo adivinaste, mi ejemplo número uno de una tendencia de diseño web mal utilizada es:

Ventanas emergentes invasivas

Las ventanas emergentes invasivas y las que no sabes cómo cerrar o que te obligan a responder una pregunta ridícula son horribles.

¿Qué preferirías hacer? ¿Danos tu correo electrónico? Mata a tu mejor amigo

Cómo hacerlo mejor: regala algo de valor cuando alguien se va

En lugar de intentar empujar a alguien a su lista de correo electrónico, jale. Si me estás dando algo de valor, no me molesta que me pongas una gran ventana emergente en la cara, de hecho, podría estar un poco intrigado. Lo que es importante tener en cuenta es que el contenido es la variable. No desempolve un papel blanco de mierda, construya algo grandioso , trabaje con un equipo para construir algo grandioso, lo que sea que tenga que hacer y luego conviértalo en la pieza central. Combínalo con una ventana emergente de "intención de salida" y no obligues a nadie a tomar una decisión; siempre proporciona formas claras de corregir la ventana emergente.

Tendencias de diseño web: ventanas emergentes

Scroll infinito

No necesitamos una llamada a la acción clara al final o un hermoso pie de página con una navegación bien pensada.

Malos ejemplos de Infinite Scroll

Tal vez este sea un ejemplo de mi cínico cerebro de anciano porque ni siquiera puedo manejar cuando Twitter cambia de estrellas a corazones, pero si estamos aplicando la regla de oro aquí, odio terminar un artículo y que alguien más tome una decisión al respecto. qué artículo quiero leer a continuación. Tomar la decisión por ellos puede ser agradable con los videos de facebook y youtube porque bueno, es un video y de todos modos me estoy quedando sin nada, pero para el contenido que tienes que leer, lo siento, no creo que lo hagas. una decisión sobre mis preferencias basada con precisión en un artículo o contenido que terminé.

Voy a advertir esto con el hecho de que los sitios de tipo galería / tipo Pinterest en los que está navegando por una variedad de elementos parecen tener algún beneficio para este tipo de navegación, pero puede estar limitado a las redes sociales. El resto de nosotros necesitamos la satisfacción de una conclusión y más navegación.

Diseño de pie de página bien diseñado con llamado a la acción: próximos pasos

Cómo hacerlo mejor: piense en lo que una persona querría hacer después de leer, escriba esta categoría o tipo de contenido en el sitio.

Cada tipo de contenido en el sitio puede tener un tipo de pie de página previo con otros artículos similares, elementos de navegación e, idealmente, un par de próximos pasos claros adaptados a lo que acaban de terminar. Por mucho que odie la fuente 'Langosta' en el ejemplo anterior (Mensajes de inicio), creo que Jared pensó largo y tendido sobre lo que podría interesar a las personas después de que terminaron de leer una página de contenido y las compartió de una manera visual que es claro y sencillo. Ojalá otros pies de página tuvieran tanta suerte. Lo admito, tengo un fetiche de pie de página.

3. Parallax que distrae dolorosamente y no agrega valor excepto por un milisegundo de oooh-ahhh.

Sitio web de ejemplo de paralaje incorrecto

Esta organización artística y cultural tiene movimiento, tiene profundidad, pero ¿tiene significado? No puedo imaginar cómo los círculos en la parte posterior agregan algún elemento útil, excepto que en un momento era original o aún no se había hecho mucho. Es decir, un truco, pero bueno, ganaron un premio en el sitio... así que el sitio debe ser bueno, ¿no?

El movimiento y la profundidad pueden ser excelentes cuando se implementan con buen gusto, desafortunadamente, una gran cantidad de personas se apresuraron a implementar el paralaje sin mucha intención reflexiva sobre cómo realmente ayudaría a los visitantes y agregaría valor. Los diseños grandes y espaciosos son hermosos, pero si está tratando de llegar al meollo del contenido de un sitio web y realmente aprender sobre cómo o por qué le gustaría trabajar con una empresa o comprar un producto, los sitios largos de parallax pierden el punto.

Cómo hacerlo mejor: implemente sutilmente para agregar algo de profundidad y utilícelo con moderación de una manera que agregue un poco de intriga a los productos cuando sea apropiado.

A estas alturas, quizás muchos de ustedes hayan visto el artículo sobre caída de nieve del New York Times que se publicó en 2012. El artículo usa paralaje y video de una manera que fue casi cautivadora porque era muy progresista en ese momento.

Caída de nieve - Parallax sutil

¿Claves que hacen que este sitio funcione tan bien?

  • Fuerte énfasis en el contenido: los elementos tipográficos están muy bien pensados ​​y son legibles
  • Los tratamientos de título dan una jerarquía clara
  • Todo esto se combina bastante bien, por lo que el aspecto de paralaje no es el centro del escenario, sino una pieza sutil agradable para una imagen más grande.

Así es exactamente como se puede usar el paralaje con buen gusto en 2016, sin parecer un truco.

Tendencias de diseño web de 2019

Los diseñadores web no son diferentes a los diseñadores de moda, en el sentido de que deben estar constantemente atentos cuando se trata de escuchar cuáles serán las últimas tendencias para el próximo año en diseño web.

Un diseñador web inteligente no solo tiene en cuenta la imagen de la marca al crear el diseño de un sitio, sino también la usabilidad para el usuario. Debido a esto, cada año los diseñadores eliminan los detalles de diseño que no les gustan a los usuarios y amplían los que sí les gustan a los usuarios.

Este año no es diferente, y aquí hay una lista de las principales tendencias que debe buscar en el diseño web para 2019.

Fondos de vídeo

Probablemente haya visto una cantidad decente de sitios web que incorporan fondos de video grandes para atraer al usuario. Los fondos de video son una excelente manera de darle al usuario una mirada interna a su negocio.

sitios web con fondos de video para atraer al usuario

Visite el sitio web de la empresa de desarrollo inmobiliario Ditto , que destaca sus desarrollos residenciales con personas que pasan sus días, ofreciendo al usuario la posibilidad de ver el interior de las unidades de una manera atractiva.

Tendencia de diseño de sitios web 2019

También trabajamos con Deneen Pottery para ayudar a implementar un video en su fondo, que presenta imágenes reales de su cerámica hecha a mano.

Fondos de partículas

Para las empresas que aún desean incorporar movimiento en sus sitios web, los fondos de partículas son una excelente alternativa a los fondos de video, especialmente si le preocupa el tiempo de carga con un video de fondo más grande. Estas animaciones son javascript que crean un movimiento natural y atractivo como parte del fondo.

sitio web heystack

Heystack usó un fondo de partículas intrincado para su sitio y esperamos que más diseñadores hagan lo mismo.

Diseños asimétricos

Los aspectos únicos y distintivos del diseño web asimétrico lo hacen atractivo en términos de diferenciar su sitio de los demás. En contraste con el estilo minimalista que ha sido popular durante algunos años, los diseños asimétricos son más llamativos pero aún se ven igual de limpios y profesionales cuando se hacen bien.

diseño web asimétrico

Recientemente lanzamos este sitio web para Sostenible 9, que presenta formas superpuestas y, si bien tiene una apariencia de equilibrio, ciertamente hay elementos asimétricos que le agregan profundidad.

tipografía en negrita

Elegir la tipografía adecuada puede marcar la diferencia entre tener una tasa de rebote baja en lugar de una alta. Elegir una tipografía en negrita, especialmente en un tamaño de fuente grande, realmente puede captar la atención del usuario de su sitio.

tipografía en negrita en diseño web

tipografía en negrita en diseño web

Estas dos páginas de inicio de sitios web, creadas por un diseñador web en Dribble, ejemplifican perfectamente la naturaleza simple y moderna de la tipografía en negrita.

Animaciones integradas

Las animaciones integradas son exactamente como suenan: animaciones que se colocan en todo el sitio web para agregar una sensación adicional de vivacidad, movimiento y compromiso al sitio web. Como habrás notado, el movimiento es un gran tema a tener en cuenta en el diseño web para este próximo año.

animación integrada en diseño web

30 Species in Pieces, un sitio web que se dedica a educar a las personas sobre los animales en peligro de extinción, utiliza animaciones nítidas y atractivas en su diseño web simple para darle vida.

Gradientes dinámicos

Como hemos señalado antes, los degradados de color están comenzando a reaparecer. Los degradados permiten la personalización con los colores de su sitio web para crear algo que realmente represente su marca.

degradados de color en diseño web Apple usó degradado para el color de su fuente para mantener el tema de sus nuevos anuncios de iPhone X.

Tendencias de diseño web subestimadas de 2018

Cada año, las tendencias de diseño web cambian constantemente, por lo que lo que parecía 'moderno' hace unos años puede no ser la mejor opción hoy. Por lo tanto, es importante que todos los dueños de negocios se mantengan actualizados con las últimas tendencias de diseño web para vender su negocio y mantener la atención de los visitantes. Siga leyendo para descubrir seis de las mayores tendencias de diseño web subestimadas de 2018.

Diseños de cuadrícula rota

Muchos sitios web usan cuadrículas para garantizar que haya una estructura detrás del texto, las imágenes y los botones de navegación. Las cuadrículas no solo proporcionan una guía para los diseñadores, sino que también ayudan a los visitantes a navegar fácilmente por el sitio web. Sin embargo, este año se vio que el diseño de cuadrícula típico se rompió. En lugar de seguir una regla definida, se presentó la oportunidad de hacer algo diferente con el diseño web. Los desarrolladores se han movido hacia diseños de cuadrícula rota que son menos restrictivos. Los diseños de cuadrícula rota permiten que el texto y las imágenes se desplacen dentro y fuera de la página con mayor libertad. Cuando los elementos se superponen, esto crea un diseño web armonioso que fluye naturalmente para el visitante. Los diseños de cuadrícula rota también se pueden lograr mediante el uso de capas, posicionamiento inusual y toques sutiles que hacen que la página sea más atractiva.

Diseños de cuadrícula rota

2. Chatbots

Cada vez más diseñadores web están comenzando a implementar el uso de chatbots en sitios web. Los chatbots se ven comúnmente en sitios web comerciales ubicados en la parte inferior derecha de la pantalla. La pequeña ventana emergente brinda a los visitantes la oportunidad de hablar con alguien de la empresa u obtener ayuda automática con cualquier consulta. Agregar una ventana de chat a su diseño web significa que cualquier visitante con una pregunta puede obtener una respuesta inmediata. Algunas empresas tienen problemas para tener un miembro del personal disponible para chatear. Sin embargo, es posible programar su chatbot para que responda las preguntas más comunes y brinde detalles sobre cómo comunicarse con la empresa si no sabe la respuesta a una pregunta.

Ilustraciones personalizadas

En el pasado, las imágenes de diseño web consistían principalmente en tomas de productos, GIF y fotografías editoriales que enfatizaban las características, la funcionalidad y las dimensiones humanas del producto. En 2018, hubo un ligero alejamiento de esto, con ilustraciones que ahora dominan el mercado. Los desarrolladores han descubierto que las ilustraciones son más atractivas y atractivas. Tienen un mensaje claro y enfocado que se adapta a la marca. Las ilustraciones normalmente se completan con combinaciones de colores no tradicionales que experimentan con varios contrastes, creando tensión pero también manteniendo la legibilidad del diseño web.

Transiciones de página

Cada vez que se interrumpe la experiencia de un usuario, existe una alta probabilidad de que abandone el sitio web. Esto también puede suceder cuando cambian de una página a otra. Algunos sitios web tardan demasiado en cargarse, mientras que otros sacan al usuario del contexto en el que se encontraba antes de que se abriera la nueva página. Por lo tanto, es esencial que cada diseño web tenga transiciones suaves y eficientes entre páginas. Este año, cada vez más sitios web están introduciendo transiciones de página cohesivas para sus visitantes. En lugar de navegar a una nueva página, los visitantes pueden ver información diferente en la misma página. Estas transiciones de página más suaves pueden mejorar la experiencia del usuario y aumentar el compromiso con su marca.

Brutalismo

2018 ha visto un aumento en el uso del brutalismo en el diseño web. El brutalismo está abriendo un espacio donde los desarrolladores y diseñadores pueden hacer lo que quieran, en lugar de lo que deberían hacer. Este estilo de diseño web se inspiró en la arquitectura de la década de 1950 que era simple, rentable y práctica. El diseño web brutalista es crudo y cautivador. El enfoque principal está en el contenido, ya que es importante hacerlo visualmente agradable para el visitante. El diseño web brutalista se manifiesta a través de estructuras expuestas, una sensación de aspereza y procesos reflexivos.

Contenido de vídeo

Este año también ha visto un mayor uso de contenido de video en los sitios web. El video es una excelente manera de transmitir información compleja en un formato visual. El contenido de video no solo hace que los sitios web se vean más modernos, sino que también crea una sensación de arte que una imagen estática simplemente no puede lograr. Los videos son una herramienta poderosa porque pueden integrarse perfectamente en su diseño web y seguir siendo de muy alta calidad, incluso con muchos colores, degradados y detalles. Los videos también se pueden reproducir en bucle para garantizar que los detalles de la copia y los del video permanezcan al unísono. Muchos desarrolladores de sitios web ven que los visitantes permanecen en los sitios web durante más tiempo cuando hay contenido de video presente, y es más probable que los visitantes se registren o opten por sus ofertas de productos y servicios.Desde una perspectiva comercial: ¿qué tendencias para el diseño web en 2017 importan?

  1. Formulario de contacto en cada página
  2. Fuerte llamado a la acción constante en el encabezado
  3. Sobrecargar el diseño con 'factores de confianza' como insignias de organizaciones y testimonios
  4. Tener un video corto para explicar o mostrar su propuesta de valor clave
  5. Diseño muy atractivo con espacios en blanco: considere usar transiciones significativas, sistemas de cuadrícula superpuestos y contenido dividido para dibujar dicotomías

Tendencias de diseño web que mueven la aguja

1. Formulario de contacto en cada página

No lo malinterprete: si su sitio web es un sitio web de generación de prospectos, no querrá que el formulario de contacto sea difícil de encontrar. Si puedes incluirlo en cada página, mucho mejor.

Puede parecer un truco sencillo, pero los mejores 'trucos' lo son.

CTA omnipresente

2. CTA siempre presente: botón de llamada a la acción fuerte y constante

No es necesario que tenga el formulario de contacto para animar a las personas a que se comuniquen con usted, obtener una demostración, obtener una cotización o cualquier acción principal que desee que el cliente realice. En su lugar, puede incluir un botón grande en la parte superior derecha todo el tiempo. Cuando se desplacen, deje el botón de llamada a la acción en la parte superior de la pantalla con un encabezado 'pegajoso' que sigue a los visitantes.

3. Sobrecargar el diseño con factores de confianza como insignias organizacionales y testimonios

Me quedo solo con las cosas más efectivas que conozco y de las que algunos de mi audiencia pueden no haber sido tan conscientes antes. Los factores de confianza lo son todo en el diseño web: son casi todo lo que pienso además de un diseño visual limpio, moderno y estéticamente agradable.

La única forma de lograr que las personas tomen medidas (grandes botones de Llamada a la acción y botones Comprar ahora, etc.) es rodeándolos con estos elementos que explican y los empujan a continuar, porque la CONFIANZA es absolutamente crucial en cualquier transacción.

¿Tienen devoluciones gratis? ¿Tienen envío rápido y gratis? ¿Tienes una garantía? Muestre estas cosas.

Tendencias de diseño web 2017: insignias de factor de confianza

¿Forma parte de un grupo comercial local? Oficina de Mejores Negocios? ¿Tienes un Certificado SSL en tu tienda online?

Agregue una representación visual para estos artículos y considere marcarlos con el estilo de su sitio web para aumentar aún más la confianza.

Uno de los elementos más importantes en la categoría de factores de confianza que tienen la mayoría de las empresas de calidad son las reseñas y testimonios en línea. Sugiero encarecidamente mostrarlos de una manera muy visual y destacada en su sitio. Si se trata de testimonios, lo ideal es que tenga fotos de los propios clientes para dar aún más credibilidad a lo que dijeron sobre su producto o servicio.

Tendencias de diseño web: factores de confianza

4. Tener un video para mostrar su propuesta de valor clave

Cuando diseñé DeneenPottery.com por primera vez, trabajé con lo que tenía el cliente: imágenes de sus tazas de alta calidad y un video que estaba un poco escondido en el diseño. Dibujamos este video resaltando un poco mostrando innegablemente la naturaleza hecha a mano de sus tazas y dando a la gente una muestra de su proceso:

5. Diseño muy atractivo con espacios en blanco: considere usar transiciones significativas, sistemas de cuadrícula superpuestos y contenido dividido para dibujar dicotomías

El espacio en blanco es ese encantador elemento de diseño que parece hacer que todo se sienta más "elegante":

Esquema de color 2017 - rosa pálido
En este sitio web, decidí utilizar la apertura natural de la fotografía para crear una sensación de espaciosa decadencia.

Apple entiende los espacios en blanco. No significa que el fondo sea blanco, solo significa un espacio abierto alrededor del tema principal del diseño.

Aquí hay un ejemplo realmente alto del uso de espacios en blanco de Apple en su sitio :

apple-design-web-design-tendencias-espacio en blanco

Transiciones significativas

Google ha utilizado transiciones significativas en su 'Diseño de materiales' durante años, pero cada vez más diseñadores web están utilizando esto para crear una forma efectiva de dar más contexto a la acción que el usuario realiza en el sitio. Observe el estado de desplazamiento en el botón a continuación, la dispersión del color cuando el usuario hace clic en el botón y luego la forma en que la ventana modal/emergente crece después de hacer clic en ella:

Sitio web de diseño de materiales

El uso de material design en este sitio web me permitió hacer que el sitio se sintiera muy interactivo y muy moderno. También ayuda que al usar las convenciones de Material Design, también se asocie sutilmente con el tipo de experiencia del usuario en Google.com y los muchos productos de Google, ya que todos coinciden y usan estas convenciones.

Sistemas de rejilla superpuestos

Los cuadros en el diseño web son tradicionales uno al lado del otro, uno encima del otro, pero muchos diseñadores están utilizando un estilo muy de 2017 llamado sistema de cuadrícula superpuesta o sistema de cuadrícula compensada. Este estilo yuxtapone cajas y fotos una encima de la otra para lograr un efecto más orgánico y fluido.

Tendencias de diseño web 2017: sistemas de cuadrícula superpuestos

Dividir color o dividir imágenes para dibujar una dicotomía

Una dicotomía es la separación de dos cosas, como 'caliente y frío' o 'bien y mal'. Al hacer que dos lados de un sitio web sean súper diferentes entre sí, capta la atención del visitante.

Dicotomías divididas: estilo de tendencia de diseño web 2017

Puede usar esto para extraer los elementos emocionales de la oposición, o los dos lados del cerebro "emocional y lógico", "creativo y orientado a sistemas", o simplemente usarlo para crear un atractivo visual como este diseño de Mateusz Koziorowski. .

hotjar-dicotomy-split-side-web-design-trend-2017

Hagas lo que hagas, no saltes a las tendencias de diseño web de cualquier manera

Asegúrese de considerar sus objetivos comerciales ante todo. Las tendencias de diseño visual no son nada sin considerar lo que harán en cuanto a mover la aguja con sus ingresos.

Un mejor sitio web está a la vuelta de la esquina
Hemos recorrido un largo camino desde que se lanzaron los primeros sitios web. Los diseñadores web son cada vez más detallados, más aventureros y, francamente, mejores. Los próximos años de diseño web se tratarán de ir más allá y probar nuevas ideas atrevidas. Aquí en Hook, nos encanta tomar un sitio antiguo del que te has cansado y convertirlo en algo que realmente encapsule la singularidad de vanguardia de tu marca. Si está buscando crear un nuevo sitio, uno que atraiga a los usuarios y genere más conversiones, comuníquese con Hook Agency hoy mismo para programar una reunión, donde hablaremos sobre cuáles son sus objetivos comerciales y cómo podemos implementar en su nuevo sitio.