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