6 plugins para modernizar el diseño de tu WordPress

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:

• Diseño Gráfico, Tendencias 2016 de David Carreño
• Tendencias en diseño web para 2016 (con ejemplos) de Cristina Rodríguez
• 10 Tendencias en Diseño Web para 2016 + Ejemplos de David Arenzana
• 16 tendencias de diseño gráfico y web para 2016 de Ernesto Olivares
• 4 Tendencias de diseño web para 2016 de LanceTalent
• Tendencias de diseño gráfico en la web para el 2016 de Miguel Bielsa
• Web Design Trends 2016: The Definitive Guide por UXPin (en inglés)

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.

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

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.

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

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.

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.

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