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

Portada: shutterstock por HelenStock

Tiempo de lectura:

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

Āæ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.

Summary
šŸŽØ CĆ³mo diseƱar pĆ”ginas web creativas [ideas + ejemplos + consejos]
Article Name
šŸŽØ CĆ³mo 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

15 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

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.

DiseƱa
tu web

DiseƱa
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

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