() translation by (you can also view the original English article)
Vamos a ensuciarnos las manos con algo de diseño formado por bloques, en inglés, "masonry layout". Descubriremos en qué consiste, por qué es eficaz para algunas grandes marcas, por qué deberías considerar incorporarlo a tu propia web, y qué temas WordPress te pueden ayudar a conseguir un diseño de página con el estilo al cual a partir de ahora no referiremos como estilo masonry.
Primera pregunta: ¿Qué es "Masonry Grid"?
Una retícula formada por bloques o masonry grid, es un diseño de página que contiene elementos de distintos tamaños. Su nombre fue acuñado por Dave DeSandro, creador de la librería JavaScript Masonry publicada en 2019. En el sitio web de Masonry, este tipo de retícula se describe como "si un albañil dispusiese piedras en un muro". Ya sabes, algo como esto:
Pero en lugar de piedras y ladrillos, colocas todos tus brillantes trabajos, tus proyectos, tus fotos o lo que sea:
¿Por qué funciona tan bien este tipo de diseño?
Las retículas estilo masonry resultan familiares y esta organización del contenido es muy aprehensible para los usuarios ("user-friendly"). El contenido se puede organizar bajo ciertos criterios o categorías, de esta forma es muy fácil navegar, filtrar y ver el contenido sin que resulte aburrido.
Es un formato habitual en la plataforma de blogging Tumblr. Aquí tienes un ejemplo de Coca-Cola, una de las grandes maracas que usa un diseño estilo masonry grid en Tumblr:
La red social empleada como recurso de inspiración Pinterest también usa un diseño en forma de retícula para organizar el gran volumen de contenido. Aquí tienes un ejemplo del perfil de Rayt en Pinterest, que cuenta con casi seis millones de seguidores:
Por qué este diseño funciona tan bien en webs de portafolios
Los diseños tipo masonry grid son especialmente útiles para webs con portafolios personales. Si eres un diseñador o un artista, esta es una buena fórmula para exponer tus proyectos y proporcionar una presentación visual de los trabajos que hayas realizado. Si eres un escritor, puedes usar este tipo de retícula para presentar historias o publicar trabajo. Si eres un fotógrafo, mostrar tus fotografías y crear una galería en la que se pueda hacer una búsqueda según el tipo de fotografía es algo muy útil. Yo he creado sitios WordPress con retículas masonry para presentar y comentar mis proyectos paralelos, diseños de newsletters, planificaciones de eventos, y mucho más.
Siguientes pasos: Selecciona el tema WordPress adecuado
Aunque tanto Tumblr como Pinterest tienen un estilo de retícula masonry, no son la opción más indicada para para exponer tu portafolio; su naturaleza como plataforma social y de blogging lo complica y añade elementos que están fuera de tu control. Sin embargo, al un sitio con WordPress para crear y mostrar tu portafolio tendrás todo bajo tu control, desde tu propio dominio (por ej. tunombre.com) hasta las elecciones relativas a los formatos y estilos. Además, usar WordPress te proporciona la libertad de crear un sitio web tan sencillo o complicado como quieras.
Envato tiene el marketplace online con mayor cantidad de plantillas WordPress. Aquí tienes una selección de 20 temas WordPress con excelentes diseños de página con retículas masonry:
1. KON/CEPT
Este tema WordPress creado por el diseñador KrownThemes ya cuenta con alrededor de 5.000 ventas, y está pensado para webs que se centran en la presentación de portafolios. Cuenta con cuatro estilos para el menú de navegación, un page builder, y una retícula modular. Está preparado para visualizarse perfectamente en dispositivos retina (responsive), y su código es limpio.
2. Mug
La mejor opción para "profesionales creativos que amen el diseño con estilo de retículas y minimalista". Viene con plugins compatibles con Dribbble y Twitter, lo cual lo convierte en un tema ideal para diseñadores.
3. Hempstead
Existen muchas cosas de las que enamorarse en este tema: los diseños espaciados de sus muestras de ejemplo, las tipografías serif redondeadas, la inclusión del plugin Visual Composer, los mapas interactivos, el código optimizado para el SEO, la diáfana página de inicio, etc.
4. Mone
Su cabecera ocupando todo el ancho de la pantalla y su formato para las entradas del blog, lo convierten en un tema especialmente indicado para escritores y para aquellos que necesiten algo más orientado a la palabra escrita. El menú en forma de columna a la izquierda es un detalle excepcional.
5. Stag
Creado por el diseñador DeliciousThemes, este tema viene con distintos diseños de página a modo de muestra, de manera que puedas imaginarte todas las posibilidades, de forma que no tendrás que dedicarle tú mismo mucho tiempo a la labor de diseño, además es muy fácil intercambiar entre distintas apariencias de tu sitio. Viene con los plugins Visual Composer, Slider Revolution y el addon Templatera. En la imagen puedes ver la demo “Typed Hero Text”.
6. Hygge
Hygge es un concepto danés que transmite confort y calidez, así es como quieres que se sientan los usuarios en tu web, ¿no?
7. North
Este llamativo tema, North, esta creado pensando en las agencias y los freelancers. Funciona en todos los principales navegadores y es super fácil personalizarlo.
8. Joker
Este es uno de los temas para fotografía mejor valorados de nuestro marketplace. Tiene albums estilo masonry y páginas para galerías, además también dispone de diseños de página que ocupan todo el ancho de pantalla.
9. Kabuto
Creado por el diseñador web de élite Onioneye, este tema WordPress es sencillo y directo. Una elección acertada si ya tienes tu propio logotipo o deseas un diseño atemporal.
10. Grido
Este diseño reticular combina el tamaño de los cuadros de la retícula, el resultado es un diseño de página complejo, pero sin aspecto caótico.
11. Onliest
En su paquete incluye los plugins Visual Composer, Revolution Slider y archivos PSD, lo que lo convierte en un tema estupendo para aquellos con un poco más experiencia sobre código (¡aunque no es un requisito!). El equipo que lo ha diseñado tiene una gran valoración en lo que respecta a su soporte postventa.
12. Yorke
¿El minimalismo y los amplios espacios en blanco no son lo tuyo? York es audaz y vistoso, y está diseñado para dejar crear un impacto duradero. Además, a fecha de este artículo, está en oferta.
13. Huntington
El tema presenta un diseño en forma de retícula con un menú de navegación alineado a la izquierda. Este menú hace que sea muy sencillo navegar a través de toda la página, y los botones de redes sociales aparecen bien destacados.
14. Werkstatt
Werkstatt es un tema para WordPress que aparece clasificado en muchas categorías ya que se adapta a sitios web con múltiples necesidades. Tiene un sencillo portafolio de estilo masonry, pero si quieres cambiar, existen varios ejemplos de muestra increíbles, y también otros diseños alternativos para el propio sitio.
15. Pofo
Destacamos en nuestra selección este tema por su singular tipografía. Incluye además los diseños necesarios para crear una tienda con WooCommerce y el plugin Yoast SEO.
16. Haar
Hemos guardado una de las mejores opciones para el final, Haar es un tema bello y creativo tema con multitud de distintos diseños y ejemplos de muestra para las páginas. Está creado por el autor de élite Edge-theme, y aunque todavía no ha vendido mucho, sin duda es una elección excepcional. Me encanta la forma en la que los sitios web a modo de muestra exponen ilustraciones e imágens en duotonos o tritonos.
¡Adelante, crea una retícula masonry!
¿Quieres ver más temas para WordPress? Encuentra más temas creativos para portafolios en nuestro marketplace.
