Branding y diseño editorial para pequeños negocios.

5 pasos para crear una página web con estilo CHIC

 

 ¿Buscas el modo de distinguir tu marca pero no sabes cómo hacerlo?

¿Estás pensando en hacerte tu web pero quieres ser capaz de plasmar lo que tienes en tú mente?

 

Pues en este post quiero ayudarte a descubrir los aspectos clave para que consigas lucir una web muy CHIC para tu negocio.

 

¿QUE ES UNA PÀGINA WEB CHIC?

 

CREAR UNA PAGINA WEB CHIC

 

Para saber a qué me refiero con una web chic, primero hay que tener claro que es chic. Me encantan las palabras cortas que comunican un concepto tan amplio y subjetivo. A todos nos gusta la economía lingüística. Decir mucho con una sola palabra.

Chic es un concepto estético que mayormente ha sido aplicado a la moda y decoración. Significa elegante, distinguido y que sigue la moda. También designa elegancia acompañada de buen gusto y gracia.

No obstante aunque sea algo que surgió de la moda hoy en día también se aplica a la decoración. Lo que me ha llevado a escribir este post, es precisamente  llevar esta atmósfera gráfica a cualquier creación. De hecho de eso se trata. Observar, Innovar, mezclar y probar es lo que conduce a un diseño especial y único.

 

 

Pero, ¿qué es lo que hace que un diseño se muestre con todos estos atributos? y lo más importante, ¿Cómo puedes aplicarlo al diseño de tu web?

 

Empecemos por esos atributos más importantes a tener en cuenta

 

LOS 10 BÁSICOS DE UN ESTILO CHIC

Estos son elementos a los que debemos prestar atención para adecuar el estilo que buscamos.

  1. Color aplicando la Regla 60-30-10
  2. Espacios en blanco
  3. Contraste sutil
  4. Tipografía moderna
  5. Fotografía lifestyle
  6. Disposición de secciones
  7. Orden de los elementos
  8. Detalles que atraen la mirada, pinceladas con el color acento lo conseguirá junto con el contraste
  9. Fondos para crear contraste sutil
  10. Formularios de suscriptores en color de acento

Una vez sabemos en qué elementos del diseño debemos centrarnos sólo queda llevarlo a la práctica.

 

Veamos los 5 pasos para conseguir una web chic

 

1. Elige los colores de tu marca.

Doy por hecho que tu marca ya está definida mínimamente. Si no lo has hecho es como empezar la casa por el tejado. Si es tu caso invitó a hacer uso totalmente gratis de mi VÍDEO-CONSULTA GRÁFICA de 30min.

Una vez definida tu marca los colores sencillamente serán los de tu marca. Mi recomendación es que para la web no elijas más de 3. Elije 4 si quieres aplicar la regla 60-30-10. Consiste en elegir el color dominante y aplicarlo en un 60% del diseño, un color secundario que contrasta y equilibra en un 30% y un 10% lo reservaremos para el color de acentos. Aquí te muestro un ejemplo hacer un boceto ejemplo de. Web chic.

Para decidir cuáles son los colores más acertados de entre todos los de tu marca, enfócate en las emociones y aspectos positivos que quieres transmitir a tus potenciales clientes. Si no lo tienes este tema muy claro en breve podrás descargarte una completa guía “Color es emoción” . En ella encontrarás el significado de los colores atendiendo a la psicología y teoría del color. Suscríbete a mi Newsletter para enterarte cuando vea la luz.

 

2. Moodboard Web  estilo CHIC

crear una pagina web ChicEste paso la mayoría pasa por el, sin más pena que gloria. Para hacer tu boceto web te recomiendo que primero navegues por Internet y visites algunas páginas a modo de inspiración.

Antes de decidirte por una plantilla:

  1. Crea una carpeta en tu escritorio llamada “Moodboard web”. ¡Después a navegar!
  2. Márcate un número y un tiempo para esta tarea si no quieres eternizarte días y días en ello.
  3. Comienza a hacer capturas:
  • Haz una captura de las home que te gusten y analiza porqué te gusta.
  • Haz una captura de los banners, botones y formularios.
  • Pon atención a la página “Sobre mi” después de la home es la más visitada, así que es un buen sitio para mostrar tu lado más CHIC.
  • Cuando tengas todas las capturas móntalas en un tablero de inspiración o moodboard. Aquí te dejo una plantilla para tu Moodboard Web Chic. para que puedas insertarla. He utilizado Canva para que te sea más fácil el montaje. Canva es un programa de diseño hecho para no diseñadores, es muy intuitiva y tiene infinidad de posibilidades. Si no la conoces te vendrá muy bien.
  • Extrae o elige tu paleta de color 2-3 colores. Respeta tu Branding y aplica tus colores de marca. Todos los colores se pueden adaptar a un estilo chic.

Antes de editar el archivo que te facilito crea una copia, pues si editas algo sobre ella ya no podrás disponer del archivo original. Para montar el Moodboar sólo tienes que subir las capturas a Canva y arrastrar en la Inerface desde la carpera “Moodboard web”, y después arrastrar de nuevo al Moodboard.

  • Cuando lo tengas montado, verás que confluyen elementos que se parecen, colores y detalles. No lo recargues y deja sólo aquello que verdaderamente te llena. Si dudas en algo elimínalo directamente. Nada de dudas.
  • Ahora ya con el moodboard montado limpio y ordenado puedes hacer un boceto. (En los atributos orden y disposición de elementos web te explico cómo plasmarlo en tu boceto).
  • Por último selecciona e incorpora la tipografía que mejor vaya con tu idea, a ser posible tu tipografía corporativa. Si no sabes que tipografía usa una web, puedes utilizar la extensión de Chrome “WhatFont”. Es súper útil.

 

crear una pagina web 3. Boceto Web

La imagen que ves es mi boceto llevado a Canva. Es sólo un ejemplo y me inspirado en una agencia de viajes que realiza retiros solo para mujeres emprendedoras.

Siempre realizo este proceso con todas las webs que diseño y desarrollo porque me gusta ir con foco y claridad inicialmente, aunque luego realice cambios hay menos riesgo de entrar en bucle. Este boceto es lo que tendré delante al Crear la Web en WordPress junto con mi moodboard Web.

  • Momento de bocetar con lápiz y papel. Con tu moodboard delante comienza a esbozar los elementos de la home.
  • Menú y el color que llevará.
  • Portada home (la imagen que responda a un estilo chic y acorde a tu temática de negocio) Si tienes imágenes profesionales mejor que mejor, pero tendrán que tener el estilo que buscas claro.

Siempre puedes optar por retocar puntualmente alguna foto y obtener una gama monocromática llevándola escala de grises en Photoshop, y si no controlas el programa pues en Canva u otros. Ten en cuenta siempre que este retoque funcione y sea cohesivo con toda la web.

  • Ahora comienza a colocar las secciones con sus espacios para las imágenes y muy poco texto.
  • Puedes incorporar bloques con fondo de color para hacer visualmente divisible cada sección.
  • Coloca los botones y llamadas a la acción alineados con los elementos colindantes.
  • Busca un lugar apropiado y alineado con tu estrategia de Marketing para colocar el formulario de suscripción o de contacto.

 

4. Elegir la plantilla para wordpress

  • Este es un momento delicado por lo que mi recomendación es, que si después de mirar y perderte entre las miles de plantillas que existen no logras decidirte. No pierdas más tiempo ni te marees, pide consejo a un Profesional que te oriente. Aprovecha mi VIDEO CONSULTA GRÁFICA A COSTE CERO. Evitarás gastarte dinero en una plantilla que después puede que no sea todo lo customizable que necesitas.
  • Si has localizado tu plantilla perfecta. Es momento de customizar. En este punto puedes hacerlo tú o, si no tienes ni idea de WordPress puedes entrar en mi VIDEO-CONSULTA GRÁFICA para orientarte de como tienes que hacerlo. También puedes mirar en YouTube montón de tutoriales para aprender. Recomendable cuando tienes tiempo y paciencia.
  • Otra opción es que un diseñador te la personalice. Si quieres puedo ayudarte en esta labor. Podemos mirarlo y te quitas de historias. Además como ya has hecho un gran trabajo de exploración previa te saldrá muy bien de precio y en un mes tendrás tu web lista, optimizada y funcional.
  • Yo compro mis plantillas en Themeforest.

 

5. Personaliza tu plantilla

  • Comienza por crear las páginas de una en una y con orden. Crea tantas como pestañas llevará el menú y solo con el titulo básico, después y airás centrándote en el SEO.  Si no sabes nada de SEO te dejo este link para por si mas adelante lo necesitas mis clases individualizadas por Zoom “SEO FÁCIL PARA WEB Y BLOG”
  • Monta el menú en Función de tu boceto.
  • Monta las secciones del boceto. Yo utilizo Visual Composer o Elementor para ello. Son dos plugin de pago pero muy prácticos e intuitivos. Utiliza sólo uno y comprueba que tu plantilla lo lleve incorporado para no pagar a lo tonto.
  • Crea los bloques de texto. Te recomiendo que si aún no los tienes redactados utilices Loren Ipsum para que puedas ir viendo como quedan en conjunto todo el diseño.
  • Aplica la tipografía seleccionada y coloca los titulares también. Cortos pero que lleven al corazón de tu cliente. En mayúsculas o minúsculas lo decides tu según el tono, estilo de tu marca y el color del titular si es que es distinto a negro o gris oscuro.
  • Deja espacios entre bloques pero no mucho para que en la versión móvil no quede demasiado separado todo.
  • Personaliza el Footer y no pongas muchas cosas en él. El Footer casi no es utilizado por el usuario.
  • No mezcles estilos gráficos distintos. Por ejemplo, si aplicas un borde con línea fina para delimitar algún elemento, después no utilices esa misma línea con distintos grosores o px (píxeles). Sigue la misma línea en toda la web. Por esto es tan importante elegir bien la plantilla.
  • Evita los Sliders y el efecto paralax porque para algunas personas está comprobado que agudiza los dolores de cabeza, migrañas y otras molestias oculares. Además distraen y tu web debe cautivar sin maquillajes adicionales. Es mi opinión eh.
  • Asegúrate de que cada elemento que coloques este justificando el estilo Chic que buscas. No te desconectes de la idea y en siempre tu moodboard y tu boceto al lado.
  • En cuanto a los formularios de suscripción es una buena oportunidad para aplicar 3 aspectos importantes:
  1.  Aplica la sencillez cuántos menos campos a completar por el usuario mejor.
  2. Que sea sencillo no significa que no puedas aplicar la personalización respecto al color, tipografía y posición del formulario. Rescata aquellos formularios que te hayan gustado por su estilo más CHIC y llévalo a tu propio proyecto.
  3. No te olvides de tu estrategia de Marketing para elegir su lugar.
  • Finalmente te recomiendo la herramienta extensión de Chrome (Full page Screen Capture). Te permite realizar una panorámica general de cada página. De este modo puedes ver el resultado en su conjunto y cambiar aquellas secciones que no terminan de encajar.

 

En fin, espero haberte inspirado y aclarado tu mente lo suficiente como para poder comenzar. Pero sobre todo ¡disfruta del proceso!

Hay trabajo por hacer, sigue ordenadamente estos humildes consejos y si tienes ciertos conocimientos sobre WordPress podrás crear una bonita web muy CHIC partiendo desde un orden mental.

Si por el contrario no dispones de tiempo ni de conocimientos suficientes para realizar todos estos consejos, puedes hacer uso de mi  VIDEO-CONSULTA GRÁFICA SIN COSTE . También puedes suscribirte a mi Newsletter para seguir inspirándote, aprendiendo y aplicando cuando te sientas segura.

Nos vemos muy pronto en el siguiente post.
Haz uso de la cajita de comentarios si quieres dejar tu opinión, pregunta o simplemente para decir hola.

Beso grande😊
Marian

Post A Comment