La cantidad de información que tenemos a nuestra disposición hoy en día es absolutamente increíble. En internet se puede aprender a hacer cualquier cosa, literalmente. Y con este panorama a la vista, ¿por qué voy a invertir en un profesional cuando puedo hacerlo yo mismo? Pues hoy os voy a explicar mi opinión mediante el caso del rediseño de mi página web.
Los que tengáis un poco más de experiencia como lectores de este blog habréis notado un gran cambio en la web. No hay que ser ningún lince para darse cuenta: el cambio salta a la vista a leguas. Para los que estéis visitando esta página por primera vez os dejo aquí un ejemplo de la página de inicio de la versión anterior.
Mi antigua web
He de decir que yo ya sabía que mi web no era ninguna maravilla, pero cumplía su función inicial, yo la consideraba digna, y además era DIY (do it yourself) total. Es decir, la había hecho yo de pies a cabeza. Y. sobre todo por eso, le tenía cierto cariño.
Pero también sabía que había mucho, muchísimo margen de mejora. Por eso sentía que había llegado el momento de darle un repaso al diseño. Podría haberlo intentado de nuevo yo mismo. De hecho lo hice: busqué alguna plantilla de Thrive e intenté mejorar el aspecto visual. La captura de pantalla que habéis visto más arriba corresponde a esta versión ya mejorada, antes era… Bueno, mejor no os cuento como era antes.
Pero yo sentía que le seguía faltando algo.
El diseño de una web no es solo una cuestión de estética. Es lo que tu web transmite de tu marca, de tus servicios, de ti al fin y al cabo. Y yo sentía que aquella web no transmitía todo de lo que yo era capaz.
Quizás esto os parece un poco filosófico, etéreo, pero os aseguro que en todo proyecto llega un momento en el que tienes ese tipo de conexión y casi llegas a sentir tu web como una extremidad de tu cuerpo.
[bctt tweet=»Llega un momento en que sientes tu web como una extremidad de tu cuerpo» username=»admonvirtual»]
Por eso decidí ponerme en manos de una profesional del diseño web. Y no de una cualquiera, de una profesional como la copa de un pino: Nora Ferreirós de noradriana.com
Nora ha conseguido cambiar por completo el mensaje que la web transmitía y ahora me siento totalmente identificado con ella. Realmente siento que la web habla de mí, que demuestra de lo que soy capaz. Y obviamente eso es porque me he puesto en manos de una profesional que ha sabido captar de mí cosas que yo no hubiera sabido plasmar ni aunque me hubiera pasado toda la vida leyendo tutoriales y leyendo artículos en internet sobre diseño web.
¿Por qué un profesional sabe captar este tipo de cosas y plasmarlas en su trabajo?
Hagamos una cosa: ya que tenemos por aquí a una, vamos a aprovechar la oportunidad y se lo vamos a preguntar. Dejemos que ella nos cuente un poco como es el proceso de trabajo que sigue una diseñadora web y, ya que estamos, algunos cotilleos de cómo ha sido trabajar conmigo, jeje.
Así que damos la bienvenida a este blog a Nora Ferreirós, profesional en branding y diseño web, responsable del diseño que estás disfrutando ahora mismo.
[bctt tweet=»¿Quién es @noradriana_? La profesional que está detrás del diseño de mi web» username=»admonvirtual»]
Javier AV: Bienvenida a este blog, Nora, que ahora también es un poquito tu casa.
Nora: Muchas gracias, Javier. En realidad estoy muy contenta por esta entrevista. Reconozco que es la primera vez que un cliente me ofrece la oportunidad de explicar de esta manera mi trabajo, ¡y es fantástico! Y, desde luego, siempre siento los proyectos en los que participo como un poquito míos, es parte de mi filosofía, y el tuyo no iba a ser menos.
Javier AV: A ver, para centrarnos un poco: ¿Por qué crees tú que un profesional, del diseño web en tu caso, pero podría ser aplicable a cualquier otro sector, generalmente obtendrá un mejor resultado que un trabajo hecho en plan DIY?
Nora: Hay dos razones básicas. La primera es una buena formación. En mi opinión, que lleves haciendo algo muchos años, no quiere decir necesariamente que lo estés haciendo bien. Una buena formación te da unos cimientos que te permiten comenzar bien. Son el palo que guía al árbol que crece. Pero de nada valen los cimientos si luego no construyes algo bueno encima.
Y aquí llega la segunda razón: experiencia. Un profesional de lo que sea está todo el día a todas horas haciendo y pensando en su trabajo. Me paso todo el día visitando webs, viendo identidades de marca, dándole vueltas a la cabeza sobre cómo desarrollarlas, apuntando ideas, debatiendo con otros profesionales y escuchando necesidades de clientes. También equivocándome y repensando cómo hago las cosas para encontrar la manera correcta. Cada día. Esto te da, con el tiempo, una agilidad y unos recursos mentales que no tiene alguien que no se dedica a ello.
Y no es sólo la repetición y el día a día; es la voluntad y la vocación de fijarse en lo que se puede mejorar, y querer hacerlo. Si tú no aprecias el trabajo que desarrollas, lo harás mil veces, pero tampoco evolucionarás.
La mayoría de la gente piensa que pagan a un profesional, el que sea, por saber pulsar un botón o usar una herramienta. Lo que realmente pagas es el hecho de que ese profesional sepa qué botón o herramienta es el que debe utilizar, cuándo y por qué.
Javier AV: Creo que suele haber mucha confusión con esto, así que aprovecho que estás por aquí para preguntártelo. ¿Qué hace y qué no hace un diseñador web? ¿Cuál es tu límite?
Nora: La confusión más común es entre diseñador web y desarrollador web. En la creación de una web, en realidad, hay multitud de perfiles profesionales: el diseñador de la interfaz, el de experiencia del usuario, el diseñador visual, el maquetador, el desarrollador, el copywriter, el especialista en SEO… No todos los proyectos son igual de grandes y, muchas veces, una sola persona desarrolla varias de estas tareas.
Pero volviendo a tu pregunta: un diseñador web se encarga de desarrollar la estructura para que a los usuarios les resulte intuitiva la navegación, su experiencia en la web sea agradable y entiendan correctamente el mensaje que se les quiere enviar.
Es, por un lado, un trabajo de estudio de la percepción, basado en el orden de lectura, en cómo percibimos las formas y los espacios, y cómo los estructura e interpreta nuestro cerebro.
Es también un estudio de cómo la cultura afecta a cómo codificamos los mensajes que nos llegan. Ahora está muy de moda la psicología del color, por ejemplo. Esto es un tema cultural. Todos estamos condicionados por la cultura que tiene nuestro entorno.
También hay una parte muy importante de conocer al público objetivo: su clase social o nivel económico, sus costumbres, aficiones, preocupaciones… Normalmente el marketing hace la investigación y define la estrategia, y el diseñador le da forma.
El desarrollador se encarga de crear, mediante código, esta estructura, de poner los elementos que el diseñador ha decidido, hacer que funcionen, se muevan, realicen acciones… Hace realidad lo que ha ideado y planificado el diseñador.
Por otro lado, el diseñador web no hace estrategias de marketing. Las sigue. No desarrolla contenidos: les da formato y los jerarquiza. No hace fotografías ni ilustraciones, pero forma parte del proceso para definir las características de estos elementos. No hace SEO pero, bajo las órdenes del especialista pertinente, hace que los elementos gráficos estén optimizados.
[bctt tweet=»Una web es una máquina con muchos engranajes @noradriana_» username=»admonvirtual»]
Javier AV: ¿Crees que la mayoría de webs están hechas por profesionales o la gente tira mucho del “bricolaje web”?
Nora: Sí, definitivamente hay mucho «bricolaje web». Y las razones son diversas. Quiero pensar que la más común es la falta de recursos. En mi propia web puedes encontrar una sección, el banco de tiempo, que habla de este tema. Cuando comenzamos un proyecto, los recursos son los mínimos, y, aunque nos gustaría sacar lo mejor e invertir en profesionales, el dinero es el que es. Realmente esta parte no me preocupa, porque es natural.
Sin embargo, y esto sí es preocupante, hay una gran parte de webs que no están hechas por profesionales porque sus dueños no ven o no entienden el trabajo de un diseñador web. Esto es independiente del dinero que mueva el proyecto. Cuando alguien no comprende el trabajo de un diseñador, no hay mucho que hacer. Es el objetivo que tengo ahora con mi propio blog: explicar qué es el diseño y por qué es necesario.
A veces se hace duro porque esta forma de ver mi trabajo no la tienen sólo personas que no se mueven dentro del mundo de la comunicación o no son emprendedores. Gente con la que trabajo codo con codo o que incluso dice reconocer mi trabajo como profesional, en un momento dado, consideran que es algo que ellos mismos pueden hacer, porque lo ven como una cuestión de gusto, de inspiración o de estética.
Javier AV: ¿Qué mensaje querrías hacer llegar a esos emprendedores que tienen su web hecha por ellos mismos y consideran que invertir en un diseñador es un lujo o algo prescindible?
Nora: Evidentemente, cada uno con su negocio puede hacer lo que quiera. Pero lo que me gustaría que se comprendiera es que el diseño da soluciones técnicas.
Si tú estás vendiendo algo, tener un producto no es suficiente. La niña que monta un mercadillo con sus juguetes viejos también tiene productos. Pero tú quieres decirle a la gente “Soy el mejor, soy profesional, cuido de mi proyecto y velaré por tus necesidades”. Conseguir transmitir este mensaje, que la gente de click a un botón, que se suscriba a tu newsletter, que compre tu curso, que acuda a tu evento, que elija tu tienda en lugar de cualquier otra, que crea lo que le estás diciendo… El diseño no es una cuestión estética. Lo que se suele creer que es “poner mi web bonita”, es hacer que un producto funcione. Lo que llamamos estética es un estudio social y cultural de lo que atrae al público objetivo al que le quieres vender. Y, eso, no te lo da una plantilla.
Si uno se conforma con cualquier cosa con su negocio, es probable que el tipo de público al que llegue sea el que también se conforme con cualquier cosa. Y eso no sale muy rentable al final.
Mi nueva web
Javier AV: Vamos a pasar a hablar de manera más específica del proceso de rediseño de esta web. ¿Qué te encontraste cuando decidiste afrontar el proyecto?
Nora: Fue un proyecto que me entusiasmó desde el principio porque, a diferencia de la mayoría de proyectos que llevo, tú ya sabías qué querías vender, cómo querías venderlo y qué mensaje querías hacer llegar. Simplemente no sabías cómo. Lo cual es más que normal. De esta manera todo es más fácil. Tenías una necesidad clara y concreta, y me pediste una solución. No tuvimos que definir público, objetivos, mensaje, tono… Porque todo eso ya estaba. Incluso el branding. Estaba hecho y era más que adecuado para tu mensaje y tu producto, pero no estaba bien aplicado, nada más.
Javier AV: ¿Cuál ha sido el proceso de rediseño y por qué has hecho lo que ahora podemos ver en la web?
Nora: Como decía, en este caso los contenidos, el mensaje y los objetivos ya estaban. Así que, lo primero que hice, fue definir qué fallaba. ¿Por qué el mensaje no llegaba? Repasé la web identificando estos problemas de comunicación. Después, empecé a barajar las opciones para solucionarlos. La complicación, y lo que suele pasar con las webs DIY, es que no vale con buscar una solución individual a cada problema: hay que solucionarlos todos en conjunto y con coherencia.
En tu caso concreto, lo que he hecho es reestructurar los contenidos para que la lectura fuera más fluida, llamara la atención y mejorara, principalmente, la experiencia del usuario. Ofrecerle textos cortos que se leyeran de manera rápida y que, de un vistazo, entendiera qué ofreces, qué tipo de persona y profesional eres y si tu estilo les va. Es lo que todos hacemos al entrar en una web. Primero, echamos un vistazo por encima a ver si el rollo que desprende va con nosotros y, luego, nos paramos a leer o a investigar más detenidamente.
Para esto he trabajado la legibilidad de los textos, la composición de los elementos para marcar el ritmo de lectura, la elección de iconos y fotografías para guardar la coherencia y la aplicación del branding para que se mantuviera uniforme y agradable para el usuario.
Mi experiencia también me ha permitido explotar mucho más los recursos visuales, que es una cosa que antes no estaba bien trabajado.
Javier AV: ¿Qué herramientas utilizas habitualmente en tu día a día y cuáles has utilizado concretamente para rediseñar administracionvirtual.com?
Nora: Baso mucho mi trabajo en la búsqueda de referentes. Así que para mí, plataformas como Pinterest, Behance o Dribbble, y proyectos como Awwwards o Panda son básicos en mi día a día para sacar ideas constantes.
En la parte más técnica, trabajo con Photoshop y Sketch para realizar, tanto las estructuras iniciales (wireframes) como el diseño visual. Aquí depende un poco de las necesidades del equipo de trabajo.
En casos como el tuyo, utilizo básicamente WordPress si es necesario que yo misma implemente mi diseño. Como comentaba antes, yo no soy desarrolladora web, por eso, manejo plugins que me permitan la composición de las páginas, como Visual Composer o, en este caso, Elementor.
La ventaja de estos plugins es que, después, el cliente puede actualizar de manera sencilla su propia web. También es una desventaja porque, con el tiempo, las webs dejan de parecerse a las que yo entrego. Pero volvemos a lo del principio: no todo el mundo puede invertir en todos los profesionales que necesita una web, así que herramientas como estas, al comienzo de los proyectos, son una gran ayuda. En cualquier caso, siempre recomiendo contar con los servicios de un diseñador y un desarrollador.
Javier AV: Elementor una herramienta espectacular que facilita mucho el trabajo para un novato en el diseño web como yo pero que en las manos de una profesional las posibilidades se multiplican de manera increíble y los resultados son espectaculares.
Javier AV: ¿Qué puntos principales crees que había que mejorar en la versión anterior de la web?
Nora: Los puntos fuertes que había que repensar eran: dejar bien claro qué haces (propuesta de valor), definir, de un vistazo, el tipo de profesional y persona que eres (el tono) y mejorar las llamadas a la acción (lead magnet, suscripción en el blog, contacto).
Comparando las versiones de la web
Javier AV: ¿Te apetece que hagamos una comparativa de algunas páginas en concreto y nos expliques las diferencias y cuáles eran tus objetivos?
Página de inicio
(pinchar en la imagen para ampliar)
Nora: Vamos allá. La Home es la más completa de las páginas, donde se pueden definir problemas que se repiten luego a lo largo de las demás páginas.
Lo primero: la coherencia gráfica. Para dar una sensación de control y de que se tienen claras las cosas, los elementos deben seguir una misma línea. Había un baile de colores, de tipos de botones e iconos y de tamaños de tipografías que hacían parecer inestable la web.
Otro gran problema: la legibilidad. No era fácil definir qué era título y qué no. La lectura en diagonal era complicada. A esto hay que sumarle que, en general, leer requería de un esfuerzo, bien porque el color de la letra y su fondo no eran adecuados (por lo cual había sombras que lo emborronaban todo más), porque las líneas de texto eran demasiado largas o porque los títulos y espacios entre secciones no ayudaban a agrupar los contenidos.
El cambio más clave, y que para mí fue más complejo, era el de la cabecera. Es la zona más importante. Los usuarios llegan y lo primero que ven es lo que hará que decidan quedarse o cerrar la página.
El mensaje era muy interesante, pero no estaba bien jerarquizado. Debe leerse rápido y estar plasmado de manera que no sólo el texto te diga cosas: también el ritmo y el contexto. Por eso una imagen de libertad, de cielo abierto. Por eso las frases estructuradas por pasos. Cada paso es una idea que cala en la mente del usuario: Quiero libertad > Pero soy esclavo > Tengo que delegar. Tomé los conceptos clave, aquellos que despertarían en el usuario interés, y los destaqué para guiar la lectura del usuario.
“Es verdad, necesito delegar. ¿Y ahora, qué?”
Ahora, usuario, haz mi test.
“Ah, vale, gracias, menos mal, alguien me da una solución”.
Las dos primeras frases hacen identificar al usuario un problema o necesidad que le molestaba pero quizá ni se había dado cuenta que tenía. Y, ahora, de pronto, te necesita. Por eso es tan importante tratar esta parte de una web.
El resto de la página es una cuestión de marcar ritmos: un título que me interesa y puedo leer rápido, y luego el texto que me lo explica. Es así. Como cuando leemos el periódico. Primero titulares y luego me paro en lo que me ha interesado.
Por último, cuidar los pequeños detalles. Si pones demasiado espacio entre elementos o demasiado poco, causa una molestia casi subconsciente en el usuario. No sabe qué es, pero la experiencia no acaba de ser óptima. Con tantísima competencia web, no vale con que la web sea correcta: hace falta una experiencia óptima que empuje al usuario a decirle a otros usuarios “Esta web me ha gustado especialmente, visítala”.
Página Sobre mí
(pinchar en la imagen para ampliar)
Aquí el problema es muy sencillo y salta a la vista: no hay estructura ni jerarquía. Lo que vemos es un montón de texto seguido que no se va a leer nadie. Con suerte te posicionará, pero el que llegue a esta página, saldrá huyendo. No hay ritmo, ni hay posibilidad de hacerse una idea del texto leyendo en diagonal.
Una vez más, la cabecera de la web es importante para que el usuario sepa de qué le van a hablar. Tu proyecto, Javier, es muy personal, tu personalidad es una parte muy importante. Así que tienes que decir alto y claro quién eres: Javier Santos, asistente virtual de administracionvirtual.com. Necesitaba una cabecera que dijera: “Mira qué tío tan majo”. Porque lo eres.
Mediante las secciones logramos hacer un resumen de la información. Títulos e iconos. Luego, el que quiera saber más, ya se parará. Pero de un vistazo ya se sabe qué tipo de persona eres y qué tipo de contenido explicas.
Javier AV: Bueno, tampoco vamos a obligar a Nora a hacernos un análisis detallado de todas y cada una de las páginas de la web. Muchísimas gracias Nora, esto ha sido una auténtica masterclass de diseño web en la que yo he aprendido muchísimo y espero que los lectores también.
Nora: Muchas gracias a ti, javier. Ha sido un placer desarrollar este proyecto contigo. Cuando diseñador y cliente trabajan mano a mano, el resultado siempre es mucho mejor. Si esto sirve a más emprendedores a entender un poco en qué consiste en realidad el diseño web, me quedo más que contenta. Un saludo a todos los lectores. Los invito a preguntarme cualquier duda que se les haya quedado del mundo del diseño.
Javier AV: Estás invitada a pasarte por aquí cuando quieras. Como ya te he dicho antes, esta también es ya tu casa, así que siempre estaré encantado de tenerte por aquí. Es más, se me está ocurriendo una cosa que podemos hacer respecto a un nuevo proyecto que estoy preparando. Te cuento en privado.
Y a ti, lector, espero que te haya resultado interesante ver la visión de una profesional. Que, cuando llegue el momento, te plantees seriamente si merece la pena invertir ese gran esfuerzo por tu parte en cuanto a tiempo y recursos para obtener un resultado seguramente peor que el que podrías conseguir si contratas a un profesional a cambio de una inversión económica. Analiza el coste de oportunidad y toma la mejor decisión para tu proyecto.