Elementos que puedes usar en tu sitio web para que tenga gancho

Diseñar una página web puede resultar más o menos sencillo. Compras una plantilla, le pones tus fotos, colores y tipografías, añades tus textos y a funcionar. Pero, si quieres que tu sitio web tenga gancho y personalidad, la cosa cambia.

A diario me encuentro páginas que tiene un diseño correcto, cargan rápido y están bien montados, pero  no tienen gancho.

Es decir, tu sitio web debe transmitir tu personalidad y valores, tu forma de trabajar, tu profesionalidad, y eso, queridx amigx, no es tarea fácil.

Por ese motivo, yo me centro mucho en buscar la identidad y elementos que hacen diferente a cada cliente, para transmitirlo en su web.

No es un ejercicio sencillo, para nada, pero creo que los resultados merecen la pena.

Materiales para que tu sitio web tenga gancho y personalidad

Diseñar una web con gancho no es un proceso automático ni es como apretar un botón.

Requiere de un ejercicio de investigación y descubrimiento de los valores e identidad de cada proyecto, pero sí que hay una serie de elementos que debes tener en cuenta.

A continuación, voy a enumerar una serie de recursos que debes trabajar para que tu sitio web tenga gancho y personalidad.

#1 Paleta de colores

Junto al logotipo, la paleta de colores es lo primero que diseño, porque es uno de los elementos que más influyen en el hecho de darle identidad a un sitio web.

Como siempre digo cuando hablo de este tema, mi consejo es tener un color principal y dos o tres complementarios.

Aquí puedes ver, por ejemplo, la paleta de colores de mi web:

Y aquí tienes un ejemplo de cómo la utilizado en una de mis landing pages de servicios. En concreto en la página de Diseño Web Alicante:

#2 Tipografías

Al igual que los colores, las tipografías son otro de los recursos que ayudan a darle personalidad a un sitio web.

Si quieres crear combinaciones profesionales de tipografías para web, echa un vistazo a este artículo en el que hablo a fondo de este tema.

Mi consejo en este sentido es que tengas utilices una combinación de dos tipografías (tres como mucho): una para el cuerpo de texto, otra para los títulos y otra para los botones y llamadas a la acción, por ejemplo.

Como ejemplo, puedes ver la web de Lucía Irureta, en la que han hecho un trabajo de diseño extraordinario, especialmente con la elección y combinación de tipografías.

#3 Fotografías

Las fotografías son el mejor material gráfico con el que captar la atención del usuario que visita tu sitio web.

Y por supuesto, una mala elección de las fotografías pueden arruinar el diseño web o que parezca anticuado.

En ese sentido, siempre recomiendo trabajar con un fotógrafo profesional para conseguir unos resultados espectaculares.

Solo tienes que contarle qué quieres transmitir con tus fotografías y cuál será el mensaje de tu web, y él se encargará de hacerlo realidad.

Esto mismo fue lo que hice yo con Charo Guijarro cuando rediseñé mi página y no puedo estar más satisfecho con el resultado:

Si estás empezando y no te puedes permitir esa inversión (o no quieres contratar a un fotógrafo profesional), siempre puedes recurrir a bancos de imágenes.

#4 Copys

Con los textos sucede un poco lo mismo que con las fotografías. Unos buenos copys son garantía de éxito en un sitio web.

Sin ninguna duda, te recomiendo trabajar con un Copywriter.

Cuéntale qué quieres transmitir en tu página, cuáles son tus valores, y él se encargará de darle forma a tu propuesta de valor, algo fundamental en un sitio web.

Así lo hice yo cuando rediseñé mi web y ahora los textos de mis páginas inicio, sobre mí y servicios me representan al 100%.

Por mucho que tú sepas redactar textos (yo sé hacerlo, por supuesto), nadie mejor que un Copywriter para hacer que tu página brille.

#5 Maquetación del contenido

Por último, quiero hablar de otro de los puntos fundamentales para conseguir una página con gancho: la maquetación del contenido.

Diseñar y maquetar páginas de forma creativa requiere de lo que a mí me gusta llamar "la magia del diseñador", y esa magia se tiene o no se tiene.

Puedes utilizar el mejor maquetador visual para WordPress del mundo, pero si no tienes esa chispa, es difícil conseguir un diseño con personalidad 🙁

15 recursos de diseño para darle personalidad a tu sitio web

En este apartado te voy a mostrar una serie de recursos de diseño (con ejemplos reales) que puedes utilizar en tu sitio web para darle esa identidad y personalidad que tanto te caracteriza.

Intentaré que sean diseños que he hecho yo, pero en otros casos recurriré a páginas que me inspiran.

#1 Ilustraciones

El primer recurso que quiero mencionar y que creo que da un montón de personalidad a un sitio web son las ilustraciones, personalizadas por supuesto.

Son un tipo material que no están demasiado extendido en diseño web (otros que voy a mencionar son más habituales).

Para conseguir un resultado espectacular, necesitas trabajar con un diseñador gráfico, que se encargue de trasmitir tu estilo en las ilustraciones.

Aquí puedes el ejemplo de City Confidential, en cuyo sitio web me parece que han hecho un trabajo de diseño y combinación de ilustraciones maravilloso.

#2 Vectores

El uso de vectores en diseño web se ha extendido en los últimos años gracias a que plataformas como Freepik o Shutterstock los han puesto al alcance de los diseñadores.

A pesar de que se han generalizado, si se utilizan y combinan correctamente, son un recurso con el que aportar personalidad a un sitio web.

Como ejemplo, puedes ver uno de mis últimas páginas diseñadas, donde he utilizado distintos vectores para presentar cada uno de los servicios que ofrece esta clínica psicológica.

#3 Líneas

Las líneas son un recurso de diseño que también ayudan a formar la identidad de un sitio web.

Sirven tanto para enfatizar partes que se quieren destacar como para separar diferentes elementos.

Aquí puedes ver un ejemplo de estos dos casos, uno de mi propia web y otro de la página de un cliente.

#04 Separadores

Los separadores o divisores son una de las tendencias actuales en diseño web.

Sirven para separar diferentes elementos y bloques en la maquetación de una página, y con ellos se otorga dinamismo al sitio web.

#05 Cuadros

Los cuadros o diseños con formato modular son otro de las modas actuales en diseño web.

Con ellos puedes separar diferentes bloques del diseño o mostrar un contenido en formato grid (rejilla).

Te dejo varios ejemplos tanto de mi web como de mis clientes:

#06 Efectos CSS

Si controlas un poco de código, también puedes crear modernos efectos con CSS para darle dinamismo a tu sitio web.

Si lo tuyo no es el código, no te preocupes, la mayoría de plantillas ya incorporan este tipo de efectos.

Te dejo un ejemplo del último efecto CSS para Divi que he creado:

#07 Tablas

Las tablas son un recurso que sirven para ordenar la información del sitio web y algunos ejemplos habituales son:

• Mostrar una tabla de precios.
• Listar diferentes productos / servicios.
• Ofrecer un servicio con diferentes modalidades.
• Enumerar las características de un producto o servicio de forma limpia y ordenada.

Aquí puedes ver un ejemplo de tabla de precios:

#08 Llamadas a la acción y textos destacados

Otro recurso que debes utilizar tanto para crear una identidad en tu sitio web como para captar la atención del usuario son las llamadas a la acción y los textos destacados.

Con las llamadas a la acción (CTA) debes guiar al usuario hasta la parte de tu web que quieres que llegue: una landing, un formulario, una página específica...

Aquí te dejo un par de ejemplos:

Aquí puedes ver una de mis páginas de servicios. Con un texto destacado dejo claro a la persona que visita la página qué le estoy ofreciendo y además incluyo una CTA que conduce a un formulario.

En este caso, este texto destacado sirve de presentación de los autores de la web en la cabecera de su página de inicio.

#09 Degradados

Los degradados son un efecto muy chulo y una de las últimas modas en diseño web.

Si se saben combinar, se pueden crear efectos muy modernos y llamativos.

A mí particularmente me gustan mucho y, por lo tanto, suelo usarlos en mis diseños.

Algún ejemplo:

#10 Fondos

Un recurso muy actual en diseño web es el uso de imágenes y vídeos a modo de fondo en elementos que se quieren destacar.

Este tipo de bloques suelen tener ancho completo y aportan gran frescura al diseño.

A continuación, te muestro dos ejemplos, uno con imagen y otro con vídeo:

#11 Iconos

Otro recurso muy dinámico y habitual a la hora de diseñar un sitio web son los iconos, que pueden ser de dos tipos:

• Personalizados.
• Los que trae por defecto la plantilla de tu web.

Te muestro un par de ejemplos, uno con los iconos que incluye el tema Divi y otros personalizados.

#12 Columnas

La maquetación del contenido en columnas también es una técnica muy actual y que aporta dinamismo al sitio web.

Se pueden combinar texto e imágenes (o texto y vídeos) para conseguir un resultado similar al de este ejemplo:

#13 Listados

Para mostrar o enumerar diferentes servicios, modalidades, características o funcionalidades el mejor recurso es el uso de de listados.

Estos te permiten aportar gran cantidad de información de forma dinámica y ordenada.

Aquí puedes ver un ejemplo de diferentes servicios y subservicios a modo de listado y organizados por temáticas con iconos:

#14 Pestañas

Si tu objetivo es mostrar información de forma organizada y / o categorizada, una muy buena opción son las pestañas.

Estas te permiten, mostrar tus posts por categorías / etiquetas o en el ejemplo de un blog de viajes mostrar los artículos por destinos / países.

#15 Animaciones

Por último, quiero hablar de uno de los recursos que más me gustan para el diseño de un sitio web.

Las animaciones ofrecen gran dinamismo en la maquetación de un contenido web, pero hay que tener cuidado para no abusar de ellas y marear al usuario.

Es decir, son un recurso muy moderno, pero hay que saber usarlas correctamente.

Si en tu web también utilizas Divi, te cuento cómo son sus animaciones, tipos y cómo añadirlas a tu diseño.

Aquí te muestro un ejemplo de contenido animado en uno de mis últimos diseños:

Estos son los materiales, recursos y ejemplos que puedes utilizar en tu sitio web para que tenga gancho y enamore a tus lectores y clientes.

Espero que te sirvan de inspiración y recuerda que no se trata de usarlos todos, sino de saber cuándo utilizar cada uno y sobre todo conjugarlos bien 🙂

Portada: shutterstock