• inicio
  • sobre mi
  • Formación
  • Servicios de diseño
  • Mentoría de Marca Personal
  • Portfolio
  • Blog
  • #WLW
  • Contacto
Estibaliz López

Cómo trasladar la identidad visual de tu branding a tu web

por Esti | Abr 5, 2016 | Diseño web | 5 Comentarios

Hoy me gustaría hablarte sobre el proceso que puedes seguir para trasladar la identidad visual de tu branding a tu web y quiero usar como ejemplo la web de mi amiga Sandra de Miss Agenda Limón, en la que he estado trabajando últimamente.

Pero no me gustaría empezar el artículo de hoy sin aclarar algo que me parece importante y que a veces no se aprecia en el trabajo del diseñador; y es que cuando hablamos de transferir o crear una identidad visual para una web, no se trata sólo de colocar tus colores, tipografías y logo en una plantilla wordpress o blogger. Un diseñador tiene que hacer un buen trabajo de campo previo: Hay que analizar, estudiar, pensar, programar y actuar para conseguir los mejores resultados de la web que se va a diseñar, por eso el diseño web requiere tiempo y cuidado minucioso.

Diseñar una web no se trata sólo de colocar tus colores, tipografías y logo en una plantilla wordpress. #diseñoweb #diseñowordpress Clic para tuitear

Y dicho esto, te cuento el proceso que hemos seguido Sandra y yo con la nueva web de Miss Agenda Limón.

1. Definir el objetivo de la web

A la hora de trasladar la identidad de tu marca a la web lo que tienes que tener claro es: qué es lo que tú quieres transmitir, pero sobre todo qué es lo que tu a tu cliente ideal le va a impactar.

En el caso de Miss Agenda Limón teníamos claro que al tratarse de una web sobre fotografía todo tenía que ser muy visual, teníamos que lanzarnos a trabajar el diseño emocional de la web. 

Al diseñar tu web necesitas saber qué es lo que tu cliente ideal espera ver y qué es lo que tú quieres transmitir. #clienteideal Clic para tuitear

2. Crear el contenido: visual y copywriting

Como te comentaba, lo importante para la web de Sandra era impactar visualmente. Suerte que ella es una gran fotógrafa especializada en imágenes de stock y las fotografías que ha creado para su web son una gozada, así que era imposible no crear un emocionante relato visual en su pagina de inicio.

Para ello nos centramos en grande imágenes de bodegones limoneros y efectos parallax para crear sorpresa e intriga en el visitante.

 

diseño web de miss agenda limon por estibaliz lopez

3. Un sketch antes de seguir

Con el contenido ya en la mano, podemos crear un primer esbozo de lo que sería nuestra web, por que ya sabemos los tamaños exactos de los textos.

Hay diseñadores que suelen hacer dos o incluso tres niveles de bocetaje. Yo por mi parte suelo trabajar con 2: un primero cuando aún no tengo el contenido escrito, pero sí el visual donde el cliente y yo nos hacemos una idea general de por dónde va a ir el diseño y un segundo montaje al tener todo el contenido, con medidas exactas y donde definitivamente podemos encajar los contenidos para más tarde trasladar el diseño a la web.

Extra: 2 factores de diseño que no puedes olvidar

 

Legibilidad

Recuerda combinar tipografías legibles, que el contraste entre ellas (ya sea de mayor o menos medida) transmita información al visitante sobre el tipo de persona y negocio al que ha llegado.

Equilibrio

Busca que los espacios no estén ni demasiado sobrecargados ni demasiado vacios, en el equilibrio está la clave para no perder el foco del visitante y que tu branding sea coherente.

Y dicho todo esto, sólo me queda dejaros con la entrevista que le he hecho a Sandra, una de mis valientes emprendedoras, para que nos hable de su proyecto.

Sandra, cuéntanos un poco sobre Miss Agenda Limón.

 

sandra de miss agenda limónMiss Agenda Limón nace de la unión de 3 cosas: pasión por la fotografía + saber que mucha gente puede conseguir hacer fotos geniales pero no lo sabe + y mi amor por la enseñanza.

Desde bien pequeña, (recuerdo mi primera cámara que fue un regalo de la comunión, esas de «racarraca» para pasar el carrete), y siempre iba con ella a todas partes. Mi padre que es amante de la fotografía me metió el gusanillo por saber más sobre este mundo, y con el tiempo me he ido formando hasta lo que se hoy.

Además he notado que hay carencia en la blogosfera de una cosa: Muchas personas hacen trabajos geniales, ya sean recetas, artesanía, papelería… lo que sea, y luego hacen una foto sin cuidar 4 detalles sencillos y tiran al traste todo lo conseguido. El lector se queda con esa imagen, esa foto sin gracia.

Mi objetivo es enseñar a esas personas a hacer fotos lindas de su trabajo y que las fotos por si solas vendan.

¿En qué momento decidiste que querías dar el paso y cambiar de Blogger a WordPress?

 

El blog nació a finales de septiembre del año pasado, y en diciembre me di cuenta que se me quedaba pequeño blogger si quería meter tema cursos, o banco de imágenes.

Blogger me encanta, no lo puedo negar, pero en mi caso la plataforma WordPress me solventa mucho más todo lo que necesito para llevar a cabo mi emprendimiento.

 

diseño web de miss agenda limon por estibaliz lopez

¿Qué querías transmitir con el diseño de tu nueva web?

 

En general lo que quería transmitir es mi manera de ser y por consiguiente de actuar, ver las cosas, de enseñar…
Uno no puede ser «gris», y luego tener una web de una manera distinta.

Mi forma de ser, quien me conoce sabe que es llana, soy lo que ves, y tú lo que has conseguido con el diseño de Miss Agenda Limón es eso. Algo sencillo, bonito, cercano. Espero que eso sea lo que transmite mi web, :). Tendremos que preguntarle a los lectores, para salir de dudas.

Trabajar con un profesional con el que conectes y sepas además que trabaja de manera sería ha sido la piedra angular de mi proyecto.
Con blogger más o menos supe hacerlo yo, pero cuando quieres lanzar tu emprendimiento, hacerlo de forma seria, tienes que dejarlo en manos de un profesional (o dedicarle todas las horas del mundo…), y yo no quería eso, por eso no me lo pensé, y sabía que tu eras la diseñadora que buscaba para mi web.

Gracias por darme la web de mis sueños. No puedo decir otra cosa.

Trabaja con un profesional con el que conectes y sepas además que trabaja de manera seria. Clic para tuitear

¿Cuales son tus próximos proyectos online?

 

Actualmente tengo un pack de imágenes inéditas muy lindas para que los blogger si quieren algo distinto lo puedan adquirir, y en breve lanzaré un curso muy chulo para aprender a manipular las imágenes que adquieras en mi blog y puedas optimizarlas.

Luego vendrá otro genial, le queda un poquito aún, por lo que me reservo la sorpresa.

Mientras tanto semanalmente en el blog, los martes, como siempre tutoriales sencillos para mejorar en este mundo tan lindo de la fotografía.

¿Algún consejo para las emprendedoras que quieren dar un siguiente paso en su emprendimiento online?

 

Que se dediquen a generan contenido bueno y de calidad, y que los pormenores se lo dejen a los profesionales. Y por supuesto que luchen por sus sueños, que se organicen bien, y que no se rindan.

Mi ultimo consejo, es que todo se lo tomen a bien, disgustos cero. Creo que las cosas cuando te las tomas de manera positiva, siempre salen mejor que si no lo haces. O por lo menos yo soy de pensar así.

Gracias por la entrevista, pero sobre todo gracias por la magia que has hecho con mi idea, plasmada en una web de ensueño, mi web.

¿Qué te ha parecido la nueva web de Miss Agenda Limón? Seguro que Sandra está encantada si pasas a dejarle unas palabras 🙂

Accede a la masterclass con todo mi proceso de branding

Ademas de la masterclass te enviaré varios ejercicios para que apliques a tu marca y mejores tanto su estrategia como identidad visual.

¡Estupendo! En breve recibirás un correo de confirmación para recibir tu roadmap

5 Comentarios

  1. Sandra
    Sandra el 5 abril, 2016 a las 9:08

    Una vez más gracias por entender mi idea y plasmar mi yo en la web. Gracias

    Responder
    • Esti
      Esti el 5 abril, 2016 a las 9:41

      Gracias a ti por confiar en mi para este trabajo, un placer haber podido crear algo tan bello juntas 🙂

      Responder
  2. Daniela
    Daniela el 17 mayo, 2016 a las 7:45

    Hola Estibaliz!
    Enhorabuena por tu trabajo! Te hago una pregunta…. En este caso veo que el logo llevaba amarillo y la web va en ese tono y otro más, pero en el caso de tener logos con 3 colores, la web debería llevar solo esos tres colores para que todo siga una misma línea o no se tiene en cuenta eso?
    Muchas gracias!!!
    Un saludo,

    Responder
    • Esti
      Esti el 17 mayo, 2016 a las 9:20

      ¡Buenas Daniela!

      La web tiene que seguir los mismo patrones de estilo que el diseño de tu marca, si has decidido usar 3 colores en el logo pero te parecen muchos para la web, lo que puedes hacer es que el impacto visual principal sea a dos colores y usar el 3º para potencial las llamadas a la acción como los botones de suscripción, compra, etc… 🙂

      Espero haberte aclarado la duda, ¡un abrazo!

      Responder
      • Daniela
        Daniela el 17 mayo, 2016 a las 9:23

        Si, claro que me has ayudado!!!! Mil gracias!!!

        Responder

Enviar comentario Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

© ESTÍBALIZ LÓPEZ 2012-2019 BRANDING Y DISEÑO WEB
Esta web usa cookies
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.Accept Reject Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are as essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
GUARDAR Y ACEPTAR