Diseños de cuadrícula en sitios de portafolio de WordPress: consejos y ejemplos de diseño

La estructura más común de cualquier sitio de portafolio de WordPress es la cuadrícula. Muestra un puñado de trabajos a la vez para que el espectador pueda escanear rápidamente y elegir cualquier cosa que le llame la atención.

Pero, ¿qué hace que un diseño de cuadrícula sea sólido para una cartera? ¿Y qué debe considerar al lanzar su propio sitio de cartera?

En esta publicación, compartiré algunos consejos y sugerencias sobre los mejores diseños de diseño de cuadrícula para las carteras de WordPress.

Diseños de rejilla ajustada

Cuando usa una cuadrícula, es aconsejable mantener el diseño ajustado. De esta manera, los elementos están muy cerca unos de otros para navegar rápidamente y animar a los usuarios a interactuar con el contenido.

La estructura de cuadrícula generalmente difiere según el tipo de contenido del portafolio. Es posible que deba aumentar o disminuir el relleno según sus fotos y el diseño. Por ejemplo, las obras de arte pueden verse borrosas cuando están juntas, por lo que los portafolios de arte digital se benefician del espacio adicional.

Pero un diseñador puede mantener su trabajo cerca porque las capturas de pantalla aún son fáciles de distinguir, incluso desde la distancia. Puedes ver un buen ejemplo en el tema Ink para WordPress.

Esto no utiliza absolutamente ningún relleno entre ninguno de los elementos de la cuadrícula. Estos bloques cuadrados se alinean estrechamente para que el usuario vea todo a la vez.

También utiliza miniaturas más pequeñas para que llamen la atención rápidamente. Realmente me gusta este estilo y es un favorito personal porque deja una fuerte impresión. Observe cómo cada foto es claramente visible en contraste con todas las demás.

Si tiene un trabajo que puede beneficiarse de este estilo, consulte el tema Ink. Es una manera fácil de crear este tipo de cuadrículas de cartera sin codificar una desde cero.

Pero una buena alternativa es Bramble, que tiene un poco más de espacio entre cada pieza.

Este tema de WordPress viene con múltiples diseños de cartera para que puedas elegir qué estilo te gusta más. Algunos diseños de cartera tienen miniaturas más juntas, otros tienen mucho relleno entre los elementos de una cuadrícula.

Pero lo primero a considerar es la parálisis por análisis. Esto ocurre cuando se presentan demasiadas opciones que pueden hacer que alguien se sienta incapaz de elegir ninguna de ellas.

Siempre que las entradas de su cartera se sientan únicas y tengan suficiente espacio (o falta de espacio) para valerse por sí mismas, obtendrá muchos clics. ¿Y no es ese el objetivo de una cartera?

Rejillas de mampostería

No mucha gente sabe acerca de las rejillas de mampostería, pero existen desde hace mucho tiempo.

Por lo general, utilizan JavaScript para organizar elementos en una cuadrícula en función de diferentes alturas verticales. Entonces, en lugar de agregar miniaturas perfectas en píxeles, todas del mismo tamaño, puede agregar diferentes elementos de cartera en diferentes tamaños y aun así hacer que encajen.

El tema Weston WordPress tiene esta característica en su página de portafolio de fotografía minimalista. Esto, naturalmente, se dirige a los fotógrafos que desean publicar su trabajo en línea, y la cuadrícula de mampostería es una opción adecuada para la fotografía de altura variable.

Cada foto encuentra su camino naturalmente en la cuadrícula ocupando la cantidad justa de espacio. Por lo general, puede personalizar el número exacto de columnas y la altura de las columnas, pero recuerde que diferirá según el tamaño del dispositivo.

Si le gustan los diseños de pantalla completa, eche un vistazo al tema Notio. Utiliza un diseño de cuadrícula de mampostería con miniaturas ajustadas y efectos de animación personalizados.

Observe que las cuadrículas de estos dos temas también varían en cuanto a su consistencia. Uno tiene espacios en blanco adicionales entre las imágenes, mientras que el otro tiene miniaturas alineadas entre sí.

Los diseños de cuadrícula siguen un puñado de tendencias y es su elección seguir las que más le gusten.

Detalles de desplazamiento: ¿Sí o no?

Muchos portafolios incluyen detalles de desplazamiento que aparecen sobre la miniatura mientras se desplaza. Este efecto generalmente no se transmite a los dispositivos móviles, pero definitivamente es una tendencia común para los sitios de cartera de escritorio con miniaturas grandes.

Cada miniatura debe vincularse a la página del elemento de la cartera interna, o al menos abrir una galería de imágenes relacionadas con esa pieza. Las miniaturas no deben constituir todo el portafolio.

Pero agregar detalles puede generar más clics y hacer que las personas profundicen más en el sitio. El tema Create WordPress utiliza un efecto de animación personalizado mientras se desplaza para llamar la atención sobre los detalles del desplazamiento.

Cuando el cursor se desplace sobre cualquier elemento de la cartera, encontrará dos datos importantes:

• El nombre/título del artículo de la cartera
• La categoría del artículo

A veces, estos pequeños detalles pueden mejorar radicalmente la experiencia del usuario. Si alguien está buscando cierto trabajo de diseño gráfico, puede navegar por categoría y ver los títulos antes de hacer clic.

Pero otras veces estos detalles pueden ser innecesariamente detallados y pueden ocupar demasiado espacio. Es por eso que algunos diseñadores se saltan estos detalles, como los que encontrarás en el tema Gather de WordPress.

Solo miniaturas simples con efectos de desplazamiento simples. Agradable a la vista y todos los detalles se encuentran debajo de las miniaturas para que no obstruyan la imagen.

Esta tendencia no tiene una respuesta "correcta" clara. Los detalles de desplazamiento funcionan muy bien para algunos, pero para otros esta función puede ser una fuente de molestias menores.

Encuentre lo que se ve mejor en su sitio y mida según su propio gusto. Pero ya sea que los detalles aparezcan al pasar el mouse sobre la miniatura o debajo de la miniatura, intente agregarlos en algún lugar de la página.

Llama la atención con fotos convincentes

Cada diseño de cuadrícula utiliza miniaturas para captar la atención. Estas miniaturas generalmente venden parte de su trabajo al alentar a las personas a hacer clic y leer más.

Su trabajo puede ser arte digital, diseño web, diseño de íconos, arquitectura UX o cualquier otra cosa con atractivo visual. Pero el punto es que absolutamente necesitas un atractivo visual para vender. Y eso viene de fotos convincentes.

El tema minimalista de WordPress Mellow utiliza una variedad de fotos, cada una con diferentes estilos. Estas no son fotos de proyectos "verdaderas", ya que en su mayoría son marcadores de posición. Pero ofrecen un claro ejemplo de cómo vender al visitante desde la primera página.

Sugiero navegar por otros sitios de portafolios para ver qué están usando otros diseñadores para sus imágenes de galería.

Vea lo que puede usar para su propio sitio y qué tipo de trabajo podría llamar la atención. ¿Qué muestra mejor tu conjunto de habilidades? ¿Qué parte de cada proyecto es visualmente más atractiva o ayuda a vender su trabajo a otros?

Nuevamente, esta es una pregunta muy abierta, pero querrá probar muchas estrategias diferentes. Por lo general, encuentro que las fotos de primeros planos atraen mucha atención, especialmente en forma de miniatura. Puede ver una combinación de estos ejemplos con el tema de Beckett en la página del portafolio.

En un diseño de cuadrícula, solo tiene tanto espacio para cada proyecto. ¡Haz que ese espacio cuente!

Si sabe exactamente qué tan grandes deben ser sus miniaturas, entonces ya tiene una gran ventaja. Esto le permite recortar muchas miniaturas diferentes en Photoshop para ver qué composiciones le gustan más para los elementos de su cartera.

Avanzando

Los diseños de cuadrícula son bastante simples y muchos temas de cartera de WordPress vienen con ellos de forma predeterminada. Pero un diseño de cuadrícula no ofrecerá mucho sin un trabajo de diseño espectacular para mostrar.

Espero que esta publicación ofrezca valiosos consejos para diseñadores y creativos que lanzan sus propios portafolios. Los diseños de cuadrícula son más comunes en las carteras, por lo que los visitantes los estarán esperando. Al aplicar estas tendencias (o usar estos temas), puede captar más atención e, idealmente, atraer más trabajo del cliente con el tiempo.