Antes de abordar las herramientas y técnicas que hacen posible la elaboración de diseños especiales en WordPress -nos referimos a los llamados «constructores de páginas» o page builders-, conviene conocer y tener muy en cuenta las tendencias más significativas en el ámbito del diseño web contemporáneo. Con tal propósito, enunciaremos a continuación algunos principios que se han impuesto durante los últimos años. Siempre que podamos, los ilustraremos con ejemplos significativos.
1. Tendencias del diseño web actual
Son muchas las tendencias que pueden advertirse en el diseño web moderno, así que vamos a centrarnos en aquellas que consideramos más importantes:
1. Diseño orientado a dispositivos móviles. Ya en noviembre de 2016, Google anunció que había decidido orientar los motores de búsqueda según el principio de «llos móviles primero», lo cual significa en la práctica que cualquier sitio que no tenga una buena respuesta en dispositivos móviles sufrirá una severa penalización por parte de dicho buscador. Por tanto, es esencial que todos los sitios web se orienten desde su inicio a este principio. Afortunadamente, todos los temas de la familia Genesis presentan un comportamiento excelente en dispositivos móviles. Para comprobar si un sitio web está adecuadamente diseñado según este principio, se puede utilizar la página de prueba de optimización para móviles de Google. o un servicio específico, como poro ejemplo Am I Responsive?
2. Diseño basado en «una sola página». Los sitios que corresponden a este principio de diseño son muy fáciles de identificar, porque su estructura se compone de una serie de bloques horizontales, claramente marcados y diferenciados (aunque con algunos elementos de diseño y contenido comunes, como pueden ser las gamas de colores, la tipografía, o incluso las distintas secuencias de una historia), que contienen la información esencial. Son adecuados para sitios web con poco contenido, y que buscan concentrar toda la información esencial en una página de impacto. En estos dos enlaces se pueden encontrar muchos ejemplos de este tipo de diseño web: One Page Mania y One Page Love.
3. Diseño basado en una o varias «páginas de aterrizaje» o landing pages, que son páginas especiales diseñadas para conseguir algún tipo de objetivo específico, normalmente a través de la interacción con los visitantes: una suscripción, una venta, una acción medible y verificable, etc. En el artículo Páginas web: 10 landing pages geniales, pueden verse unos cuantos diseños de páginas web basadas en este concepto.
4. Diseño basado en una imagen potente, que ocupa toda la anchura de la página. Muchos sitios web modernos están basados en este tipo de elementos gráficos, denominados hero images (‘imágenes héroe’, a falta de una mejor traducción). En el artículo Exploring the Hero Image Trend in Web Design pueden verse distintas técnicas para utilizar las imágenes «hero» en un sitio web; también recomendamos la lectura del artículo 25 Examples of Super Wide Website Designs, que propone muchos ejemplos de esta técnica. En algunos casos, la imagen puede ser sustituida por un vídeo que se ejecuta a pantalla completa; un buen ejemplo de su uso es el sitio de Imagely, empresa desarrolladora del celebérrimo plugin NextGEN Gallery.
5. Diseño basado en paletas de colores vibrantes y arriesgadas. La importancia del color, tanto desde el punto de vista puramente estético como psicológico, es crucial en todos los ámbitos de la expresión artística. y el diseño web no podía ser menos. En este ámbito las variantes son múltiples: colores muy saturados, contrastes fuertes, gradientes y degradados, juegos de color en dos tonos, etc. Se pueden ver diseños muy inspiradores en Best Colorful Websites. Véase también el magnífico catálogo de paletas cromáticas compilado en Trendy Web Color Palettes and Material Design Color Schemes & Tools.
6. Diseño con una presencia destacada de la tipografía. Los tipos novedosos (a menudo con rasgos de letras manuscrita), los grandes tamaños de letra, las tipografías con mucho impacto visual y un marcado carácter expresivo, constituyen una tendencia reiterada en el diseño web contemporáneo. Véanse, por ejemplo, los ejemplos que se mencionan en estas dos referencias: Typography is the new black. Trends in web design y How to Use Handwritten Typography in Website Design.
7. Diseño minimalista (el principio de «menos es más» como concepto básico), con una gran presencia de espacios vacíos, márgenes generosos, predominio de los tonos claros y del color blanco y, en general, apariencias limpias, escuetas y muy depuradas. Algunos ejemplos característicos de este principio de diseño pueden verse en Best Minimal Websites y Best Minimalist Websites.
8. Diseño caracterizado por los efectos de animación, en elementos como los logotipos, los menús de navegación, la acción de pasar el ratón por encima de botones u otros elementos que provocan una llamada a la acción, la acción de desplazamiento por la página (el denominado scroll), etc. Dentro de los efectos de animación pueden incluirse también otras técnicas muy utilizadas en la actualidad, como el uso de vídeos de fondo, los efectos cinemáticos, los GIFs animados o el denominado efecto Parallax. Hay muchos ejemplos disponibles de este tipo de creaciones en Best Animation Websites, Best examples of video in Web design, Best Parallax websites,
9. Diseños basados en microinteracciones, es decir, en gestos y acciones de los usuarios que están vinculados a tareas habituales sobre los elementos de un sitio web. Un uso creativo, original o innovador de estas interacciones puede dar lugar a efectos muy llamativos y sorprendentes. Para más información sobre este concepto, recomendamos la lectura del artículo Micro-interacciones, la diferencia está en los detalles, la consulta de los ejemplos propuestos en 8 Steps to Amazing Microinteraction Design y la recopilación de Best Gestures and Interaction Websites.
10. Diseños basados en ilustraciones y gráficos personalizados, a menudo con un toque «retro», ‘»vintage», o «hecho a mano». Este tipo de diseños se han puesto muy de moda, sobre todo en ámbitos específicos, como los productos y servicios con sellos «ecológicos», la restauración, determinados segmentos del comercio electrónico, etc. Véanse las siguientes recopilaciones: Best Illustrative websites o Best Retro Websites.
Estos no son, ni mucho menos, los únicos principios de diseño web que conviene tener en cuenta. Los profesores y profesoras que deseen replantearse el aspecto de sus sitios web, o que deseen comenzar a diseñar un nuevo sitio, pueden buscar conceptos, ejemplos y fuentes de inspiración en los siguientes artículos, de los que hemos entresacado las diez tendencias que acabamos de exponer:
- 7 WordPress and Web Design Trends to Watch in 2018.
- 9 cutting-edge web design trends for 2018.
- 9 Web Design Trends to Watch For in 2018.
- 10 WordPress Design Trends to Rule 2018 and Beyond.
- 15 Web Design Trends in 2018 (+1 Bonus).
- 19 web design trends for 2018.
- The Top WordPress Trends for 2018.
- WordPress Web Design Trends 2018 – What to Expect in the New Year.
- WordPress Design Trends To Follow in 2018.
- WordPress Web Design Trends You Need to Know for 2018.
2. El framework Genesis y las modernas tendencias del diseño web
Algunos de los principios y tendencias que acabamos de explicar están bien representados en aspectos distintivos del framework Genesis, como por ejemplo la preferencia por el minimalismo, la importancia de la tipografía, o los diseños tipo landing page. De entre los temas disponibles en el catálogo de StudioPress, muchos de los publicados en los dos últimos años representan de manera muy visible las tendencias ya mencionadas. Citamos a continuación algunos de los más llamativos: