¿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:
#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.
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 ?
#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 š
#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.
#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.
#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:
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!
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.
Hola RaMGoN š
Tiene grandes recursos, ya verƔs como te gusta.
”Gracias por pasarte!
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
Hola Yoany,
AquĆ lo tienes š
Efectos CSS para personalizar tu web o blog con Divi
Saludos
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.
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!
Hola Max, entendido. Gracias de todos modos, ya me buscare la solución š Un saludo y muchos Ć©xitos!
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.
Muchas gracias, Max, por incluirme en tu post y por lo que dices de mi web. ”Me has sacado los colores!
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!
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.
Hola Eli,
Ā”No podĆas faltar!
Tu web es un gran ejemplo diseƱo con gancho, me inspira mucho š
”Otro abrazo para ti!
tienes consejo para la plantilla de generate press con elementor?
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
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.
Gran post!! y el blog es una pasada. Estamos montando varias web.s y aplicaremos lo que dices.
Gran trabajo. El blog es una preciosidad la verdad. Gracias por los consejos š