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

Autor: Max Camuñas

Fecha: 29/05/2018
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.

Aquí te muestro una serie de ideas, consejos y ejemplos para diseñar páginas web creativas y sitios web con gancho.

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:

Herramientas donde crear paletas de colores para diseño 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:

Elementos que puedes usar en tu sitio web para darle personalidad

#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.

Elementos que puedes usar en tu sitio web para darle personalidad
luciairureta.com

#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.

Elementos que puedes usar en tu sitio web para darle personalidad
city-confidential.com

#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.

Elementos que puedes usar en tu sitio web para darle personalidad
alemarpsicologos.es

#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.

Elementos que puedes usar en tu sitio web para darle personalidad
Elementos que puedes usar en tu sitio web para darle personalidad

#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.

Elementos que puedes usar en tu sitio web para darle personalidad
negociosenlared.es

#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:

Elementos que puedes usar en tu sitio web para darle personalidad
talkingspanishonline.com
Elementos que puedes usar en tu sitio web para darle personalidad
sensaciondulce.com/portfolio
Elementos que puedes usar en tu sitio web para darle personalidad
maxcf.es/masterclass

#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:

Elementos que puedes usar en tu sitio web para darle personalidad

#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:

Elementos que puedes usar en tu sitio web para darle personalidad
talkingspanishonline.com/pricing

#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:

Elementos que puedes usar en tu sitio web para darle personalidad

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.

Elementos que puedes usar en tu sitio web para darle personalidad

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:

Elementos que puedes usar en tu sitio web para darle personalidad
tramandoviajes.com
Elementos que puedes usar en tu sitio web para darle personalidad
hoyreka.com

#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:

Elementos que puedes usar en tu sitio web para que tenga gancho
sensaciondulce.com
Elementos que puedes usar en tu sitio web para que tenga gancho
republicacoconut.com

#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.

Elementos que puedes usar en tu sitio web para que tenga gancho
iconos personalizados: talkingspanishonline.com
Elementos que puedes usar en tu sitio web para que tenga gancho
iconos plantilla Divi: negociosenlared.es

#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:

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

#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:

Elementos que puedes usar en tu sitio web para que tenga gancho
tradeventures.es

#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.

Elementos que puedes usar en tu sitio web para que tenga gancho
pekebikers.com

#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:

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

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

Summary
Elementos que puedes usar en tu sitio web para que tenga gancho
Article Name
Elementos que puedes usar en tu sitio web para que tenga gancho
Description
En este artículo te muestro una serie de elementos de diseño que puedes utilizar para darle personalidad a tu sitio web y que tu página tengo gancho.
Author
Publisher Name
Max Camuñas
Publisher Logo

2 Comentarios

  1. Javi

    Hola Max

    Un artículo muy clarificador. Había cosas en las que no me había parado a pensar.

    Tengo una pregunta que no sé si podrás responderme.

    Hace tiempo que me gustaría usar en mi blog el aspecto de blogs como éste: roadtrippers.com/trips/21189603

    Si observas, tiene un diseño «modular» en el que cada artículo es como una carta y cuando eliges varios lugares te confecciona automáticamente una ruta.

    No sé si eso se hace con una plantilla (theme) o con un plugin.

    Algo así utilizan también en sitios como guiadejapon.es o japan-guide.com

    Gracias

    Responder
    • Max Camuñas

      Hola Javi,

      He revisado las tres páginas que mencionas y veo que ninguna está montada en WordPress.

      Imagino que, al ser algo muy específico, serán sitios creados por programadores.

      Saludos

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!