12 de las tendencias más calientes de diseño web de WordPress en 2020

En medio de la ostentación, el glamour y los metros de gasa en los desfiles de la Semana de la Moda – ya sea en Milán, París, o la Gran Manzana – dos cosas son ciertas:

1. El editor de Vogue llevará gafas de sol en el interior.
2. Ciertos diseños se elevarán a la cima, creando una cosecha abundante de tendencias frescas para la próxima temporada.

La pasarela de WordPress no es diferente. Bueno, a excepción de la parte del editor de Vogue.

Para mantener su sitio en la vanguardia del desarrollo y diseño web, usted necesita entender lo que es popular en la comunidad de WordPress. Y lo que es más importante, necesitas entender por qué algunas tendencias se vuelven, bueno, de moda.

Aunque pueda parecerlo, lo que es popular rara vez es arbitrario. Al entender cuándo y por qué implementar elementos de diseño básicos, estarás mejor equipado para crear un sitio de WordPress que sea hermoso, moderno y funcional.

Comencemos echando un vistazo a las 12 tendencias más interesantes en el diseño web actual. A continuación, le mostraremos cómo se pueden implementar en su propio sitio web de WordPress.

Constructores de sitios web

Incluso con miles de temas disponibles, puede ser un reto crear un diseño de sitio web que sea realmente propio. Sin embargo, este paradigma está cambiando lentamente, ya que el diseño web se está democratizando.

Esto es, en parte, el resultado de un aumento de la popularidad de los constructores de sitios web. Éstos utilizan una interfaz WYSIWYG (What You See Is What You Get) que permite a todos los usuarios personalizar rápidamente el aspecto de sus páginas web. Los creadores de sitios web reducen el umbral para el diseño web, dando incluso a los usuarios sin experiencia la capacidad de crear sitios llamativos y únicos – rápidamente.

Para mantenerse al día con los competidores, WordPress se está centrando más en este tipo de funcionalidad. Hay constructores WYSIWYG populares creados explícitamente para WordPress que han existido por un tiempo, como Beaver Builder y Elementor.

WordPress se metió en el acto en 2018 con el lanzamiento a gran escala del Editor de bloques. Este editor fue lanzado recientemente como parte del núcleo de WordPress. Reemplaza al editor basado en TinyMCE que durante mucho tiempo había sido nativo del CMS.

Inspirado en otros constructores WYSIWYG, el Editor de bloques cuenta con una interfaz de arrastrar y soltar que permite personalizar libremente diferentes áreas de un post o página. No es estrictamente un constructor de páginas – no permite personalizar temas, por ejemplo – pero está influenciado por la naturaleza fácil de usar y dinámica de las interfaces de los constructores.

Este cambio impactó en la experiencia de WordPress, y el proyecto fue controvertido. Aun así, parece claro que los constructores de páginas son el camino del futuro, y es probable que los veamos evolucionar y crecer aún más en los próximos años.

El minimalismo evolucionó

El diseño plano ha sido popular desde hace un tiempo, y no parece ir a ninguna parte. Este tipo de diseño minimalista se centra en la simplicidad, mientras que el uso de colores planos, la claridad, y un montón de espacio en blanco.

Esto no sólo pone el foco en mostrar su contenido, sino que también asegura que su sitio se carga rápidamente y se ve bien en todos los dispositivos. Este tipo de minimalismo se puede ver en el tema Arnold, que está dirigido a los creativos y hace un excelente uso del espacio en blanco para dejar que el texto y las imágenes brillen.

Esta tendencia puede ser un pilar, pero eso no significa que se esté quedando anticuada. De hecho, los diseños han evolucionado para incorporar gradientes, sombras e imágenes en mayor medida. Esto crea una mayor sensación de profundidad en la página y puede dar lugar a algunos diseños llamativos.

Un ejemplo perfecto de este efecto es Hue, que hace uso de fuentes grandes y claras y esquemas de colores degradados para crear estilos memorables.

El uso de fotografías y vídeos grandes y llamativos también está creciendo en popularidad, ya que las conexiones de Internet más rápidas son cada vez más comunes. Temas como Kalium se aprovechan de ello, combinando un diseño general minimalista con cabeceras de ancho completo.

Al utilizar este enfoque de diseño «menos es más», puedes crear sitios web que destaquen. Además, puede ayudar a mejorar la velocidad de carga de su sitio y facilitar a los visitantes la búsqueda de la información que necesitan.

Colores de alta saturación y vibrantes

Los días de «puedes tener el color que quieras, siempre que sea negro» han quedado atrás. Hoy en día, los colores llamativos y las combinaciones contrastadas son habituales. Las personas tienen reacciones muy viscerales al color, por lo que su elección de esquema de color puede afectar significativamente a cómo percibimos una marca o sitio web. De hecho, según Buffer, el 90% de nuestra evaluación cuando se trata de productos se hace basándose únicamente en el color.

Es lógico que el uso de una combinación llamativa de colores sea una manera perfecta de hacer que su sitio web destaque. Los diseñadores de WordPress tampoco se han dormido en esta tendencia. Muchos temas se centran en el color.

Por ejemplo, el tema Skin le permite elegir dos colores, y creará un esquema de degradado para su sitio. También puede crear sus propios degradados y añadir patrones y texturas.

Otra tendencia que se está volviendo más popular últimamente es el uso de contrastes fuertes. El uso de colores contrastados le da a su sitio un ambiente divertido y artístico, y también puede ayudar con la accesibilidad.

Un tema que logra esto muy bien es Piñata, con sus esquemas de colores vibrantes que también son totalmente personalizables.

Es increíble lo que un uso creativo del color puede hacer para que un diseño de otra manera simple salte de la página. Como puedes ver con el tema Piñata, mantener un esquema de color consistente en todo tu sitio, incluso en tus imágenes, puede convertirlo en algo inolvidable.

Diseños asimétricos y rotos

El minimalismo y los diseños planos están muy bien, pero a veces quieres lo contrario de un aspecto limpio y ordenado. Los diseñadores están empezando a superar los límites creando cuadrículas deliberadamente rotas y diseños asimétricos.

Un tema que logra esto muy bien es Albert. Utiliza imágenes deslizantes, elementos superpuestos y un aspecto deliberadamente retorcido que llama la atención y obliga a prestar atención.

Otra variación de esta tendencia es el tema Overlap, que utiliza elementos superpuestos y un diseño de cuadrícula rota para crear un aspecto único.

Este tipo de diseño es difícil de conseguir. Requiere que se mantenga una fina línea entre ser visualmente atractivo y mantener su sitio utilizable y libre de obstáculos. Aunque el contenido se distribuya por la página de forma poco convencional, todo debe ser claramente visible y posible de leer de un vistazo.

Después de todo, no se quiere acabar con un sitio elegante que nadie entienda cómo utilizar.

CSS Grids

La diseñadora web Hui Jing Chen describió las cuadrículas CSS como «la web que por fin obtiene su licencia de conducir». En su opinión, el diseño web se ha ceñido a los estándares de impresión durante demasiado tiempo, y considera que las cuadrículas CSS son un gran paso para salir de esta limitación autoimpuesta. Entonces, ¿qué es exactamente una cuadrícula CSS?

En resumen, es un tipo de cuadrícula responsiva que cambia dinámicamente dependiendo de dónde se muestre. Probablemente te hayas encontrado con este tipo de diseño más a menudo en los dispositivos móviles. Los elementos de la página se encogen y reorganizan en función del tamaño de la ventana. Lo mismo se puede hacer en los navegadores estándar, donde el diseño de la página cambia en tiempo real a medida que cambia el tamaño de la ventana.

Es una apuesta justa que los diseños de cuadrícula CSS seguirán siendo más populares. Algunos temas de WordPress ya están haciendo uso de ellos, incluyendo el tema Kuhn, que puedes ver en acción arriba. ¿Notas cómo las imágenes, el texto y las columnas cambian en tiempo real a medida que la ventana crece y se reduce?

Esto está muy lejos de los diseños estáticos inspirados en la impresión.

Diseños amigables con los móviles

Hablando de diseños responsivos, hablemos de los dispositivos móviles. En 2016, el número de usuarios de internet en dispositivos móviles superó por primera vez al número de usuarios de escritorio. Esto supuso un punto de inflexión en el uso de la web y dejó claro que la creación de sitios con capacidad de respuesta en dispositivos móviles es más crítica que nunca.

Ya hemos hablado antes de cómo optimizar tu sitio de WordPress para usuarios móviles.

Una forma de hacerlo es descargando el plugin WPtouch, que creará un tema móvil basado en tu sitio web que podrás personalizar a tu gusto. Este plugin está recomendado por Google y se encarga de que tu tema móvil cumpla con los estándares del buscador (aunque hay que tener en cuenta que sus críticas son un poco dispares).

También puedes utilizar el plugin Jetpack para crear rápidamente un tema móvil para tu sitio.

Otro plugin que da mucha importancia a la compatibilidad entre dispositivos es Elementor. Esta herramienta multiuso te permite establecer anchos dinámicos y configurar elementos individuales de la página en función del dispositivo de visualización.

Este constructor de páginas se puede utilizar con cualquier tema. También puede ver su sitio emulado en teléfonos, tabletas y ordenadores de sobremesa, por lo que puede asegurarse de que se verá muy bien independientemente de cómo se vea.

Microinteracciones

El diseño tiene que ver con los detalles. La tendencia creciente de las microinteracciones se centra en esos pequeños detalles y se ha hecho cada vez más popular en los últimos años. Como su nombre indica, este concepto se refiere a la forma en que los elementos del sitio responden a las pequeñas interacciones de diversas maneras.

Un ejemplo de este concepto en acción es cuando se reproduce una breve animación si se hace clic o se pasa por encima de un icono. Probablemente te hayas encontrado con esto, como con los emojis de reacción de Facebook.

Las microinteracciones dan a tu sitio una sensación viva y táctil. ¡Hacen que parezca que estás interactuando realmente con la página, en lugar de quedarte mirando un muro estático de información.

Puedes añadir un efecto similar a tu propio sitio con el plugin Animate It! Este plugin le permite añadir animaciones a casi cualquier contenido, incluyendo imágenes y texto. También puede determinar cuándo se activará la animación, decidir cuántas veces se repetirá y establecer un punto de inicio y de salida.

Eche un vistazo al siguiente ejemplo, en el que la imagen está configurada para realizar una animación «pop» cuando el cursor pasa por encima.

Sin embargo, las microinteracciones no son sólo para animaciones e imágenes. Esta técnica también puede permitirte utilizar el texto de formas interesantes.

Por ejemplo, algunas páginas te dan la opción de resaltar el texto y luego compartirlo en las redes sociales. Puedes añadir esta función a tu propio sitio con el plugin Highlight and Share, que es compatible con redes populares como Facebook, Pinterest y LinkedIn.

Estos son sólo algunos ejemplos de cómo puedes utilizar las microinteracciones para hacer que tu sitio se sienta más vivo y receptivo.

Líneas inclinadas y diagonales

Hacer que tu sitio se vea desviado puede no sonar como la mejor idea, pero en realidad es una de las tendencias de diseño de más rápido crecimiento. Las líneas inclinadas y los cortes diagonales no sólo dan a su sitio una sensación de modernidad, sino que también ayudan a guiar el ojo hacia abajo en la página. Esto funciona especialmente bien en los diseños de una sola página, separando cada sección de una manera visualmente agradable.

Varios temas de WordPress le permiten implementar un aspecto inclinado en su sitio.

Por ejemplo, echa un vistazo al tema Flamingo, que te permite crear un diseño único con separadores diagonales. Los resultados son innegablemente llamativos, y la capacidad de personalización del tema le permite ser creativo con el diseño final.

Otra forma de diseño inclinado viene del tema Upward. Esta opción utiliza un diseño más tradicional, basado en la cuadrícula, pero implementa líneas inclinadas para un aspecto inusual y elegante. También es totalmente personalizable, con muchas opciones.

Como puede ver, el uso de un diseño poco convencional puede hacer que su sitio sea realmente expresivo. También es una buena manera de separar el contenido de forma clara y dirigir la atención de tus visitantes a los elementos más esenciales.

Fuentes grandes y en negrita

La tipografía es el arte de procesar e imprimir tipos. En otras palabras, es una forma de convertir las palabras en piezas de arte. Al utilizar estilos de letra grandes, puede establecer instantáneamente el tono de su sitio con un encabezado elegante. El texto de gran tamaño también garantizará que el mensaje se transmita incluso en una pantalla más pequeña.

Un tema que muestra esto muy bien es Wedding Planner.

Este tema también ilustra otra tendencia actual: la variación de fuentes. En lugar de ceñirse a una o dos opciones similares, el uso conjunto de fuentes serif y sans-serif puede crear un resultado único.

El uso creativo de las fuentes no es sólo para las cabeceras. El tema Retro Portfolio muestra cómo se pueden utilizar varias fuentes diferentes para crear un aspecto de inspiración retro en la propia página.

Lo importante es recordar que la legibilidad sigue siendo importante. Sin embargo, mientras su texto siga siendo legible, debería sentirse libre de experimentar con diferentes estilos, tamaños y ubicaciones de las fuentes.

Ilustraciones personalizadas

Tradicionalmente, la mayoría de los sitios web se han ceñido al uso de fotografías y animaciones junto a su contenido de texto. Sin embargo, esto está cambiando rápidamente. Muchos diseñadores se están dando cuenta de que encargar ilustraciones les permite crear una identidad única y les da más libertad a la hora de crear su marca visual.

Utilizar ilustraciones en el diseño de su sitio web es una forma estupenda de hacerlo más personal y de contar una historia sólo con imágenes. Contratar a un ilustrador con talento también puede ser mucho más barato que encargar a un equipo de fotógrafos cada vez que su sitio necesite una actualización.

A diferencia de la mayoría de las tendencias que hemos cubierto en este artículo, aquí no hay una solución fácil de descargar. El punto clave es que tendrá que encontrar un ilustrador cuyo estilo se adapte a su sitio. También es imprescindible que te asegures de pagarle por su trabajo. El talento cuesta dinero, y nadie quiere trabajar para «exponerse».

Además, hay algunas cosas que debe tener en cuenta al diseñar su sitio en torno a las ilustraciones.

En primer lugar, debe asegurarse de que su tema utiliza un diseño de ancho completo, para que pueda mostrar las imágenes en su mejor momento. Un gran ejemplo es el tema Illustrator, creado especialmente para este tipo de diseño.

Otro tema que vale la pena revisar es TheGem, que tiene un diseño responsivo de ancho completo que se adapta perfectamente a las imágenes grandes. Este tema es muy versátil, con diseños adecuados para tiendas, portafolios y negocios por igual.

Unas pocas ilustraciones bien colocadas pueden hacer mucho para arreglar su sitio. También ayudan a mejorar la narración y darán a tu marca una identidad visual totalmente única.

Modos oscuros

La experiencia del usuario podría ver algunos cambios este año, ya que las interfaces se pasan al lado oscuro. Ya sea para aliviar la fatiga visual o simplemente porque el aspecto se adapta mejor al estilo de su sitio web, vale la pena considerar la adopción de una paleta de colores más oscuros.

Una forma de implementar un poco de humor dentro de su panel de administración de WordPress es con el plugin Dark Mode.

Esta tendencia particular probablemente comenzó con los programadores. La mayoría del software de edición de código viene con un modo oscuro, de nuevo, para ayudar a reducir la fatiga visual. Por ejemplo, Brackets permite al usuario elegir entre temas claros y oscuros.

También puede ver más temas y sitios web que ofrecen a los usuarios del front-end la opción de cambiar a una versión más oscura. Cabe destacar que los modos oscuros tienden a ahorrar el consumo de energía en pantalla, lo que los convierte en una opción más ecológica también.

Un énfasis en la accesibilidad

La creación de sitios web accesibles es una tendencia a la que vale la pena prestar mucha atención. En particular, WordPress ha puesto énfasis en los estándares de codificación accesibles.

Al estilo del código abierto, el equipo de WordPress ha creado una página de información completa sobre todos sus esfuerzos de accesibilidad. También se anima a los miembros de la comunidad y a los usuarios a que se sumen al trabajo. Si estás interesado en saber más, puedes estudiar las más recientes Directrices de Accesibilidad al Contenido en la Web (WCAG).

Tendencias de diseño web de WordPress en 2020

No hay duda: 2020 va a ser un año emocionante para los usuarios de WordPress, y tendrás que trabajar un poco para estar al día con las últimas tendencias de desarrollo web. Los diseñadores nunca duermen, y siempre están ideando nuevas formas de ayudar a que WordPress se vea y funcione mejor.