Captura de pantalla de web Paoletti.com

Un solo vistazo. Quizás sólo tres segundos. Esto es más que suficiente para que cualquiera evalúe tu web la primera vez que aterriza en ella. En tan poco tiempo, y únicamente viendo la apariencia de tu web, esa persona ya tiene una opinión formada sobre tu empresa. Y lo peor de todo es que será muy difícil que tengas una segunda oportunidad para que esta primera impresión cambie ?.

Está claro que el diseño de tu web es más crítico de lo que puede parecer en un principio. Y por ese motivo es importante dedicarle cierto mimo a este tema.

Para conseguir un gran diseño tienes la opción de usar o comprar un tema ya predefinido que venga con todas las funcionalidades ya incorporadas, o puedes optar por hacerlo a medida (será más caro, pero con un mejor resultado).

Escojas una opción u otra, aquí te comento 6 plugins que pueden serte útiles para modernizar el diseño de tu WordPress.

Tendencias de diseño en 2016

Pero veamos antes cuales son las tendencias de diseño que más se llevan este año. Aquí tienes algunos artículos de expertos que han publicado sobre este tema:

Visto esto, me gustaría destacar algunas de las técnicas de diseño mencionadas en los artículos anteriores que creo que son más relevantes:

  1. Cards (en castellano tarjetas o cartas): la idea es que toda la información relevante de un tema se muestra en un sólo contenedor (usado en Pinterest, Facebook, Google Plus, etc.).
  2. Colores más vibrantes: uso de diferentes matices y gradientes para ayudar a distinguir el contenido.
  3. Parallax (desplazamiento suave o scrolling): no es ninguna novedad pero ayuda a contar historias y potenciar el contenido.
  4. Animaciones: el objetivo ya no es simplemente impresionar a los usuarios, sino entretenerlos.
  5. El menú hamburguesa: tiene sus detractores pero no hay duda de que es una función fácilmente reconocible de uso generalizado.
  6. Diseño minimalista, Flat Design & Material Design: hace más de dos años que Google presentó el Material Design como evolución del diseño Flat. Inspirado en la tinta y el papel, incorpora efectos de profundidad, sombras, transiciones y animaciones al conocido diseño minimalista.

A continuación te comento algún plugin que nos puede ayudar a aplicar las técnicas mencionadas anteriormente.

Plugins para cada tendencia

1. Cards

La efectividad del uso de cartas o tarjetas es indiscutible. Y por ese motivo se usa en una gran mayoría de blogs o webs para destacar lo más relevante de la misma.

Imagen de WPrincipiante
Captura de WPrincipiante destacando las últimas entradas publicadas en forma de Cards

Los principales beneficios son:

  • Son intuitivas y fáciles de entender sin explicación adicional.
  • Permite organizar gran cantidad de información de forma más digerible.
  • Es más fácil de compartir en redes sociales.
  • Son perfectos para diseños responsive ya que las cards o tarjetas se pueden reorganizar fácilmente.

Masonry Layout

Masonry Layout
Plugin Masonry Layout

Este plugin te permite realizar diseños de estilo Masonry (en castellano, albañilería) que se diferencia del estilo Grids (cuadrícula en que todas las tarjetas tienen las filas y columnas de tamaño fijo). En Masonry cada tarjeta se adapta a su contenido. Te permite crear diseños en los que estructures la información de tu blog, revista o incluso e-commerce con tarjetas de forma parecida a Pinterest.

2. Colores más vibrantes

Los colores ayudan a distinguir un contenido y resultan muy estimulantes. Quizás la tendencia que más gusta es la técnica del duotono.

Duotono

Tradicionalmente, el duotono se refiere a utilizar un esquema de colores de solo dos colores. Puede haber sombras en un mismo color, pero sólo dos colores contrastados.

Gif mostrando alternativas de duotonos de la imagen de Geoffrey de Spotify

Este tipo de diseño lo hemos visto en campañas de Spotify, Adidas, Lois y otros.

TwotoneFX

Para aplicar el efecto de dos tonos puedes usar el plugin TwotoneFX. Te permite seleccionar los dos colores que quieres usar en cualquier imagen de tu librería, seleccionar el color de origen y el color final, aplicarlo a la imagen y automáticamente ya la tienes con sólo dos colores.

Usando Twotone FX
Modificando una imagen con Twotone FX

Más fácil, imposible.

3. Efecto Parallax

Supongo que a estas alturas no hace falta decir que se usa en una gran mayoría de webs.

Los principales beneficios son:

  • Funciona especialmente bien con dispositivos móviles: las pantallas más pequeñas tienen más movimiento en sentido vertical y es un formato muy adecuado para controles táctiles.
  • Simplifica la navegación,
  • El desplazamiento infinito añade un elemento de sorpresa a la experiencia.

Parallax Scroll

Plugin Parallax Scroll
Plugin Parallax Scroll

Este plugin te permite añadir el efecto de parallax con shortcodes de forma elegante. Te permite tener headers, páginas y tipos de entrada personalizados con un fondo parallax.

4. Animaciones

Las estamos viendo en webs, proyectos y portafolios modernos que incluyen experiencias «storytelling». Incluso lo utiliza el rey del diseño, Apple.

Encontramos todo tipo de animaciones: lentas y suaves, transiciones al cargar páginas, movimientos sutiles, desvanecimientos, zoom de animaciones, tipografía en movimiento, etc. Y para quien le apasione este tema quizá le interese leer en inglés The ultimate guide to Web animation de Ezequiel Bruni.

La animación atrae la atención a aquellos elementos específicos que están en movimiento.

Animate It

Este plugin permite darle movimiento a una página, a una entrada o a un widget. Incluye más de cincuenta efectos distintos (bouncing, fading, flipping y pulsating entre otros).

https://www.youtube.com/watch?v=Np_t43pfrh4

5. El menú hamburguesa

El menú hamburguesa es utilizado principalmente en revistas o periódicos (The New York Times, El Pais, etc.) con muchas secciones, pero también lo encontrarás en e-commerces.

Captura de pantalla del The New York Times
Captura de pantalla del The New York Times

La gran ventaja es que, precisamente en webs con muchas secciones no estás obligado a mostrar todo el menú en la página principal. Sólo lo muestras cuando el lector hace clic en el menú. Los menús hamburguesa son de uso obligado para apps móviles. Y si necesitas inspirarte sobre alternativas de diseño de menús, la entrada 30+ grandes ejemplos de menús de navegación te puede servir de inspiración.

Responsive Menu

Con el plugin Responsive Menu tienes hasta 70 opciones personalizables de menús para que consigas que tu menú se vea como más te guste.

6. Diseño minimalista

Como máxima expresión del minimalismo surgió el flat design, un diseño basado en colores planos e imágenes sencillas.

Captura de la web de Flatomedia.com
Captura de la web de Flatomedia.com

Pero dentro del intento de mejorarlo y empezar a añadir pequeñas sombras y degradados a los diseños, Google desarrollo el Material Design.

Materializer

El plugin Materializer es una librería de componentes de Material Design. Ofrece más de 20 shortcodes para que se inserten cards, iconos de carga, diversos botones y otros elementos útiles tanto en páginas o como entradas.

Y hasta aquí, los 6 plugins. Ahora, ¡ya puedes animarte a modernizar tu web! No tienes excusa para no hacerlo.

Y para ser coherentes con lo que predicamos, también estamos trabajando para presentarte pronto un nuevo diseño de nuestra web. Como remarcaba al principio de esta entrada, ¡sólo tendrás una oportunidad para causar una buena primera impresión!

Imagen destacada: captura de pantalla de web Paolettiguitars.com, con Honorable Mention de Awwwards.com

12 respuestas a «6 plugins para modernizar el diseño de tu WordPress»

  1. Avatar de Antonio Pulido

    Buen articulo, conseguí un plugins que buscaba desde hace días.

  2. Avatar de Ruth Raventós

    Gracias Antonio por tu comentario.

    Teniendo en cuenta que hay más de 45.875 plugins disponibles en el directorio de WordPress, es difícil encontrar lo que uno busca… 😉

  3. Avatar de Yesid Parra
    Yesid Parra

    Queriendo saber que eran algunas cosas, buscando sus nombres y los plugins y tu me ayudaste con ello, que buen resumen…muchas gracias, te seguire.

    1. Avatar de Ruth Raventós

      Gracias Yesid por tu comentario y me alegro de que te haya podido ser útil. Esperamos tenerte a menudo por aquí ?

  4. Avatar de Paulo Guerrero

    Hola Ruth buen articulo Saludos desde Venezuela…

  5. Avatar de Pontxo Hierbas

    Podrías decirme como se llama el plugin para las cards? justo estoy buscando uno así para colocar en mi sitio web.
    Saludos, muy buen artículo

    1. Avatar de Ruth Raventós

      Gracias Pontxo por leernos y tu comentario.
      Tal y como te comento en la entrada, uno de los posibles plugins para las cards es el Mansory Layout, https://wordpress.org/plugins/wp-masonry-layout/ . Pero si buscas cards en el Directorio de WordPress, encontrarás más alternativas.

      Un saludo.

  6. Avatar de Paula
    Paula

    Excelente artículo. Mil gracias, muy útil, ✌?

    1. Avatar de Ruth Raventós

      Gracias Paula por el comentario y me alegro de que te haya sido útil. Un saludo ?

  7. Avatar de Helmer
    Helmer

    Excelente post, de maravillas…Gracias Dra Ruth.

    1. Avatar de Ruth Raventós

      Gracias a ti por leernos y me alegro de que te haya podido ser útil.

      Un saludo,

      Ruth

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.