Consejos para diseƱar pƔginas web creativas
Consejos para diseƱar pƔginas web creativas

Consejos para diseƱar pƔginas web creativas: ideas + ejemplos

01/08/2020

Shutterstock HelenStock

01/08/2020
Tiempo lectura:

Shutterstock HelenStock

¿EstÔs pensando en lanzar un proyecto y necesitas diseñar una pÔgina web? ¿Tienes ya un sitio web y quieres hacer un rediseño para darle un lavado de cara? Si estÔs en cualquiera de estas dos situaciones, en este post te traigo varios consejos, ideas y ejemplos para diseñar pÔginas web creativas.

Tener una pÔgina web creativa -o con gancho, como a mí me gusta llamarle- es fundamental por varios motivos. Por un lado, necesitas sorprender al usuario que llega a tu sitio y no te conoce (la primera impresión cuenta mucho en el mundo digital); y por otro lado, para diferenciarte de tus competidores y destacar con un diseño innovador.

5 pasos para diseƱar pƔginas web creativas


Ahora que conoces la importancia de tener una pƔgina web creativa, te voy a contar cuƔles son los elementos claves para conseguir que asƭ sea:

#1 Branding

El branding es lo primero que hay que crear, antes incluso de empezar con el diseño y maquetación de la web.

En ese sentido, debes establecer las tipografĆ­as, colores, efectos y estilos que tendrĆ” tu marca, ya que forman parte de su identidad visual, que serĆ” la que te permita reflejar tus valores a nivel creativo y la imagen que los usuarios recuerden.

En esta primera fase, tambiƩn debes diseƱar tu logotipo, asƭ como sus diferentes usos y variaciones (en blanco y negro, en tamaƱos reducidos, etc).

Todos este universo creativo debe quedar recogido en un manual de marca, donde quede delimitada toda tu identidad visual.

#2 Paleta de colores

Una vez has creado tu branding, es el momento de trasladarlo a la web, para lo cual debes coger tu identidad visual y adaptarla a la web.

Es el momento de definir la paleta de colores que tendrƔ tu pƔgina web, a partir de los colores principales que han quedado establecidos en el manual de marca.

Para que te hagas una idea, te dejo un ejemplo de mi propia web:

diseƱar pƔginas web creativas: paleta de colores
los colores de mi marca 
diseƱar pƔginas web creativas: paleta de colores
la paleta de colores de mi web

#3 FotografĆ­as y vĆ­deos

El material multimedia juega un papel muy importante a la hora de diseƱar pƔginas web creativas. Recursos como fotografƭas, vƭdeos o vectores son necesarios a la hora de dar forma a tu sitio y maquetar su contenido.

Para las fotos, te recomiendo contratar a un fotógrafo para que te haga una sesión profesional y personalizada. Si no cuentas con los suficientes recursos, puedes recurrir a imÔgenes de banco, aunque el resultado nunca es el mismo. Una web con imÔgenes propias tiene mucha mÔs calidad que una con imÔgenes de banco.

En el caso de los vƭdeos, sucede un poco lo mismo. Lo ideal es contratar a un editor profesional, pero, si no tienes recursos, tambiƩn puedes recurrir a bancos de vƭdeos.

Por último, para las ilustraciones y vectores existen numerosas plataformas donde puedes descargarlas (Freepik y Shutterstock son las que yo utilizo). Si necesitas diseños exclusivos y personalizados, lo mejor es que contrates a un ilustrador o a un diseñador grÔfico.

#4 Textos

Ahora que ya tienes toda la parte visual, es el momento de pasar a los textos, un elemento FUNDAMENTAL a la hora de crear una pƔgina web. Suele parecer que es algo sin importancia, pero la tienen, y mucha. Unos malos textos pueden arruinar toda la web.

Por ese motivo, te recomiendo contratar a un copywriter para que redacte los textos de las diferentes pƔginas y secciones de tu web.

Si tienes conocimientos de copywriting, adelante, puedes hacerlos tĆŗ mismo; pero si no es el caso, contratar a un profesional es la mejor inversión a la hora de diseƱar una web. Ɖl se encargarĆ” de elaborar los textos teniendo en cuenta tĆ©cnicas de persuasión y tambiĆ©n teniendo en cuenta tu estrategia de SEO (keywords).

#5 Diseño y maquetación

Y ahora que ya tienes preparado todo el material, ya puedes empezar con el proceso de creación y maquetación para conseguir una pÔgina web creativa.

A nivel de diseƱo, existen multidisciplinar de formatos (one page, blog, pantalla dividida, etc) y tendencias en diseƱo web.

Como consejo, debes elegir un formato o tendencia en función del negocio que tengas y del sitio web que quieras conseguir. AdemÔs, siempre es bueno buscar referencias y ejemplos en otros sitios web que te gusten y te inspiren (tranquilo, todos lo hacemos, ya estÔ todo inventado en Internet).

5 pƔginas web creativas con mucho gancho


Como ya sabes si eres lector habitual de este blog, uno de mis objetivos como profesional es diseƱar pĆ”ginas con gancho.

¿Qué significa para mí diseñar pÔginas con gancho?

Es un concepto que acuƱƩ hace tiempo y con el que me refiero a diseƱos web con mucha personalidad, es decir, pƔginas que reflejan perfectamente los valores de su marca o autor, con elementos que las hacen diferentes al resto de webs que puedes encontrar en internet.

Se diferencian principalmente por sus colores, tipografƭas, imƔgenes, estilo o forma de presentar el contenido.

De fotocopias estƔ lleno internet y por eso quiero que mis diseƱos tengan gancho y mucha personalidad ?

Como ejemplo puedes ver mi propia pƔgina de inicio.

diseƱar pƔginas web creativas: Max CamuƱas

AdemƔs, para que acabes de entender el concepto, te dejo 5 pƔginas web creativas y con mucho gancho de compaƱeros del sector del marketing y el diseƱo.

#1 Susana Torralbo

Susana Torralbo es una publicista inquieta, amante de la fotografía y de los colores vivos. En mi opinión, tiene una de las marcas personales mÔs originales que he visto en mucho tiempo.

Su pƔgina web es una gran fiesta de colores y alegrƭa, en la que te invita a ponerle una chispa de creatividad a tu marca.

El diseƱo de su web es un ejemplo imprescindible para entender mi concepto de pĆ”gina web con gancho y tengo que decir que me quedarĆ­a a vivir en ella ?

Consejos para diseƱar pƔginas web creativas: Susana Torralbo

#2 Elena Sacoe

Elena Sacoe es otra de las profesionales cuya marca personal mƔs me gustan. Es una periodista amante del copywriting y las redes sociales.

Su propuesta de valor es la comunicación con chispa para conseguir que tu marca encuentre su manera propia de comunicar.

Te invito a pasarte por su web para que compruebes lo que es un diseƱo con gancho šŸ™‚

Consejos para diseƱar pƔginas web creativas: Elena Sacoe

#3 LucĆ­a Irureta

Lucía Irureta es una diseñadora cuyos trabajos siempre me han inspirado un montón. EstÔ centrada en ayudar a emprendedores y pymes a construir una imagen de marca que aporte valor a sus productos y servicios.

Es especialista en branding, identidad visual y marketing digital, una combinación muy top. AdemÔs, dirige su propio estudio creativo.

Si buscas inspiración para crear una marca y una pÔgina web creativa, pÔsate por su pÔgina y échale un vistazo a sus trabajos.

diseƱar pƔginas web creativas: Lucƭa Irureta

#4 Laura Ribas

Laura Ribas es especialista en estrategia de marketing y mentalidad. Si buscas invertir tiempo para optimizar tu negocio de la manera mƔs efectiva, sus programas son muy interesantes.

En el caso de su pƔgina web (tanto la actual como versiones anteriores), tiene muy bien trabajada todas las partes que he mencionado arriba (branding, fotos, vƭdeos, textos y diseƱo).

Es un perfecto ejemplo de pƔgina web creativa y con mucho gancho.

diseƱar pƔginas web creativas: Laura Ribas

#5 Oink my God

Oink my God es una agencia de marketing online y comunicación 2.0 ubicada en Barcelona que sigo desde hace años (y tengo el placer de conocer en persona).

Recientemente han rediseƱado su web y han hecho un rebranding de su marca, y el resultado es un diseƱo con mucho gancho y una pƔgina muy top.

PÔsate a echarle un vistazo si estÔs buscando inspiración para crear pÔginas web creativas:

diseƱar pƔginas web creativas: Oink my God

Espero que a partir de ahora no tengas problemas para encontrar recursos a la hora de diseñar pÔginas web creativas y que estos consejos y ejemplos te sirvan para encontrar grandes dosis de inspiración.

Recuerda que si necesitas cualquier tipo de ayuda con tu pƔgina, puedes echarle un vistazo a mi servicio de diseƱo web.

”Comparte este hilo!

Summary
šŸŽØ DiseƱar pĆ”ginas web creativas [ideas + ejemplos + consejos]
Article Name
šŸŽØ DiseƱar pĆ”ginas web creativas [ideas + ejemplos + consejos]
Description
Si vas a lanzar un proyecto o necesitas rediseƱar tu pƔgina, te cuento varios consejos, ideas y ejemplos para diseƱar pƔginas web creativas.
Author
Publisher Name
Max CamuƱas
Publisher Logo

17 Comentarios

  1. RaMGoN

    Genial Max, la verdad es que no conocƭa que existiera la pƔgina de CSS que mencionas y tiene muy buena pinta.

    Le voy a echar un vistazo a ver. Muchas gracias.

    Responder
    • Max CamuƱas

      Hola RaMGoN šŸ™‚

      Tiene grandes recursos, ya verƔs como te gusta.

      ”Gracias por pasarte!

      Responder
  2. Yoany

    Hola Max, he estado buscando un articulo que publicaste de Divi sobre agregar las otras redes sociales y no lo encuentro, podrĆ­as compartirme el enlace

    Muchas gracias

    Responder
  3. Viktoria

    Hola Max, la pĆ”gina CCS Author me ha parecido muy molona con la cantidad recursos que tiene. Te importarĆ­a dejarme alguna pista de como puedo subir los elementos descargados a mi web si la tengo hecha con un tema de Template Monster templatemonster.com/es Es que no soy tan buena en la programación como tu, pero se me da muy bien seguir las reglas šŸ˜‰ Gracias y un saludo.

    Responder
    • Max CamuƱas

      Hola Viktoria,

      En realidad yo tampoco soy programador, sino diseƱador web, pero me manejo con el código šŸ˜€

      CCS Author lo utilizo para buscar ideas, no he llegado a descargar su material, es decir, me quedo con las ideas que me gustan y las incorporo a mis diseƱos.

      Siento no poder indicarte cómo subirlo a tu pĆ”gina šŸ™

      Saludos!

      Responder
  4. Viktoria

    Hola Max, entendido. Gracias de todos modos, ya me buscare la solución šŸ˜‰ Un saludo y muchos Ć©xitos!

    Responder
  5. Carlos marquez

    Buen dĆ­a.

    Como puedo copear o migrar a mi wp una pagina ya diseƱada, solo la pagina no el tema, que sea compatible con visual composer ya que las ideas se me terminaron y he encontrado algunas gratuitas libres de html pero no se como integrarlas a mi wp.

    Responder
  6. Susana Torralbo

    Muchas gracias, Max, por incluirme en tu post y por lo que dices de mi web. ”Me has sacado los colores!

    Responder
    • Max CamuƱas

      Hola Susana šŸ™‚

      No podĆ­as faltar en un post asĆ­, sin ninguna duda.

      Tu web es de lo mejor que he visto en mucho tiempo por varios motivos, en especial para mĆ­ por personalidad y gancho.

      Me alegra verte por aquĆ­ ā¤ļøļø

      Un abrazo!

      Responder
  7. Eli

    Hola, Max:

    Gracias, gracias y gracias por incluirme como ejemplo. Para mĆ­ es un honor estar tan bien acompaƱada en tu post šŸ˜‰

    Un abrazo.

    Responder
    • Max CamuƱas

      Hola Eli,

      ”No podías faltar!

      Tu web es un gran ejemplo diseƱo con gancho, me inspira mucho šŸ™‚

      ”Otro abrazo para ti!

      Responder
  8. Alejandro

    tienes consejo para la plantilla de generate press con elementor?

    Responder
    • Max CamuƱas

      Hola Alejandro,

      He probado alguna vez Elementor, pero la plantilla / maquetador que uso y recomiendo siempre es Divi.

      AquĆ­ tienes toda la info sobre Divi. Incluso puedes probar su editor visual!

      Saludos

      Responder
  9. Chusa

    Hola Max, tu blog es verdaderamente interesante. Soy redactora creativa pero me gustaría que me propusieras alguna pÔgina actual sobre educación.
    Gracias y sigue asĆ­, compartiendo tus conocimientos.

    Responder
  10. Venta Sociedades

    Gran post!! y el blog es una pasada. Estamos montando varias web.s y aplicaremos lo que dices.

    Responder
  11. VIES

    Gran trabajo. El blog es una preciosidad la verdad. Gracias por los consejos šŸ™‚

    Responder

Enviar un comentario

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

[Información BÔsica sobre Protección de Datos] Responsable: MÔximo Camuñas FernÔndez. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: PodrÔs ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarÔs información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

¿Necesitas una pÔgina web, blog, landing o tienda online?
”PIDE TU
PRESUPUESTO!
masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guĆ­a

PARA DISEƑAR LOGOTIPOS MEMORABLES

GUƍA para diseƱar logotipos memorables