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.
[ctt title=»Diseñar una web no se trata sólo de colocar tus colores, tipografías y logo en una plantilla wordpress» tweet=»Diseñar una web no se trata sólo de colocar tus colores, tipografías y logo en una plantilla wordpress http://ctt.ec/9385M+ via @esti_lop #diseñoweb» coverup=»btzxe»]
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.
[ctt title=»Al diseñar tu web necesitas saber qué es lo que tu cliente ideal espera ver y qué es lo que tú quieres transmitir.» tweet=»Al diseñar tu web necesitas saber qué es lo que tu cliente ideal espera ver y qué es lo que tú quieres transmitir http://ctt.ec/9385M+ via @esti_lop #diseñoweb» coverup=»9385M»]
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.
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.
Miss 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.
¿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.
[ctt title=»Trabaja con un profesional con el que conectes y sepas además que trabaja de manera seria.» tweet=»Trabaja con un profesional con el que conectes y sepas además que trabaja de manera seria. http://ctt.ec/9385M+ via @esti_lop #diseñoweb» coverup=»7OdjS»]
¿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.
Una vez más gracias por entender mi idea y plasmar mi yo en la web. Gracias
Gracias a ti por confiar en mi para este trabajo, un placer haber podido crear algo tan bello juntas 🙂
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,
¡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!
Si, claro que me has ayudado!!!! Mil gracias!!!