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

Share This