Mi proceso de trabajo: diseño web en Squarespace para Ale Cantú Coach

En un post anterior te hablé de la identidad que desarrollé para el rebranding de Ale Cantú Coach. Hoy te quiero hablar del proceso de rediseño de su web, a partir de la nueva identidad de marca.

Una de las razones de Ale para contratarme fue que ella tenía ya tenía su web en Squarespace, y yo me especializo en esta plataforma. Como muchas emprendedoras, Ale había creado su web por su cuenta, una opción perfectamente viable cuando estás empezando y no puedes permitirte una gran inversión. Squarespace, además, te lo pone muy fácil, porque su interfaz para construir webs es muy amigable para el usuario.

Su sitio tenía lo básico y estaba presentable, pero Ale llegó a un punto en el que necesitaba algo mucho más profesional… necesitaba una web que reflejara su nuevo branding y que trabajara para su negocio ayudándole a conseguir más clientes.

Aquí te cuento, paso a paso, cómo fue el proceso de diseño e implementación de su web.

separador.png

las etapas del proceso de diseño web en Squarespace

El proceso de diseño web lo divido en tres etapas, que garantizan un trabajo cuidado, desde el concepto hasta la implementación en Squarespace.

primera etapa: definir los objetivos de la web

Al igual que a la hora de diseñar un branding nuevo, cuando diseño una web comienzo siempre haciendo un cuestionario a mi cliente (aunque en el caso de Ale, lo hice todo en el primer cuestionario, porque ella me contrató el paquete completo de branding + web). Este es el momento de hablar de cuestiones como:

  • los gustos del cliente (algo que trato de tener en cuenta siempre no sea contraproducente para el resultado),
  • las funcionalidades que quiere o necesita incluir en su web (un sidebar o barra lateral para el blog, por ejemplo),
  • su estrategia de promoción online (a tener en cuenta a la hora de diseñar las portadas de los posts, por ejemplo), sus principales fuentes de tráfico, y un largo etcétera.

Esta parte del proceso quizás parezca como una demora innecesaria en el proceso de diseño, pero es vital: mediante la información que obtengo con este cuestionario, y que después discuto con el cliente para afinar mejor, es que se crea una base sólida y con fundamento para poder diseñar una web estratégica.

Esto es importante porque una web bonita pero que no haya sido diseñada con una estrategia detrás, no va a servir de mucho. Una web, de cualquier tipo, tiene dos funciones fundamentales:

  1. Por una parte, debe reforzar el mensaje de la marca, comunicar sus valores y conectar con su audiencia.
  2. Por otra, debe servir para cumplir objetivos concretos (como obtener suscriptores), que van a ser parte, a su vez, del camino que un visitante debe seguir para llegar al objetivo final: convertirse en cliente. 

Ninguna de estas dos cosas se improvisa, es algo que se diseña con mucho cuidado, y que parte de una buena estrategia de marca desde lo conceptual... y si quieres comprender un poco mejor esto, te recomiendo este post de Marta Falcón, en donde ella lo explica mucho mejor que yo.

 El Moodboard del rebranding de  Ale sirvió también para guiar el estilo visual de su web.

Pero volviendo al caso de Ale... a partir del cuestionario definimos varias cosas. Entre ellas que la web debía comunicar toda la energía y confianza de Ale como coach (valores que eran parte de su branding),  y necesitaba incluir llamadas a la acción para que los visitantes hicieran una de tres cosas: que se suscribieran a su newsletter, que reservaran una sesión gratuita, o que contrataran uno de sus servicios de coaching.

Además de los objetivos de la web, en esta fase suelo trabajar en un Moodboard para definir el estilo visual del sitio. En el caso de Ale esto no fue necesario porque el branding visual ya estaba pautado cuando diseñamos su identidad. 

 

etapa de maquetación: diseñando la web

Tomando los elementos del cuestionario como punto de partida, la siguiente fase consiste en empezar a trabajar en el diseño web como tal… pero todavía no en Squarespace. Antes de implementar el sitio en la plataforma, hago un trabajo de maquetción offline de toda la web, lo que permite eliminar cualquier tipo de improvisación en Squarespace, y hacer cambios al diseño más fácilmente para irlo ajustando.

home-Ale-Cantu.jpg

Uno de los retos para el diseño con el sitio de Ale es que tenía mucho copy, por lo que fue necesario ir dividiendo el texto en secciones más pequeñas, que permitieran una mejor lectura. A su vez, estas secciones se fueron alternando entre estáticas y con efecto parallax, para darle dinamismo a las páginas (aquí tienes una captura de la primera parte de la página de inicio, aunque se ve mucho mejor la interacción de todos los elementos si vas a la web de Ale, y ves el sitio funcionando en vivo). Además de facilitar la lectura del sitio con el uso de tipografías y gráficos, hay botones y llamadas a la acción bien visibles para los objetivos que se habían definido para la web.

En el caso del trabajo con Ale,el proceso de maquetación pasó por diferentes revisiones en las que revisamos el diseño varias veces para limar todos los detalles hasta conseguir lo que ella quería para su web. Siempre incluyo varias revisiones en esta etapa del proyecto, porque cuando la maquetación es lo más exacta posible a como va a lucir el sitio web una vez implementado, el proceso de construir el sitio como tal en Squarespace es mucho más eficiente.  

Como ves, es fundamental mantener comunicación constante con el cliente mientras dura el proceso de trabajo. Como conté en esta publicación en Instagram, mi intención es que trabajar conmigo en un rediseño (sea de una marca o de una web) sea como un viaje, en el que nos embarcamos tanto tú como clienta como yo, en el que quiero que constantemente veas avances y sepas en todo momento en qué punto está el trabajo, cuándo verás lo correspondiente a la fase actual, y cuándo debemos empezar a trabajar en la siguiente etapa. Quiero que como clienta mía te sientas acompañada y segura del trabajo todo el tiempo.

Pero bueno… una vez que damos por terminada esta fase del proyecto con el diseño final definido, es que pasamos a implementarlo en Squarespace, y a construir el sitio web desde cero.

etapa final: construyendo la web en Squarespace

Como he comentado, el hecho de que Squarespace trabaje con plantillas no quiere decir, para nada, que el diseño de una web se haga como el diseño de la plantilla. Hay ciertas cosas que hay que respetar, pero son fundamentalmente de funciones… y casi todo se puede modificar con código para lograr el resultado que estamos buscando.

Así que en la fase de implementación, cada página de la web empieza en blanco completamente, y poco a poco la voy construyendo para conseguir una web a imagen y semejanza de la que habíamos definido en la maquetación.

En el caso de la web de Ale, tuve varios retos:

  • Por una parte, habíamos diseñado un prefooter para el cajetín de suscripción a su lista de correo, y la plantilla que escogimos en Squarespace (Brine, y que actualmente recomiendo por encima de cualquier otra) no trae esta función, así que tuve que ponerme creativa para darle solución a esto.
  • Por otro lado, el sitio de Ale es bilingüe (español e inglés), y Squarespace no tiene una opción nativa para activar una web de estas características. Esto era algo que ella ya tenía activado en su web anterior, pero con un código muy pesado que hacía muy lenta la carga del sitio... y esto es malo para el SEO y para la experiencia de usuario. Así que tuve que buscar un método sencillo, que no llevara un montón de código, y que fuera efectivo. Después de investigar un poco, encontré  una opción tan simple como elegante, y el asunto quedó resuelto.
  • También en el diseño original habíamos creado unas imágenes voladas en los bordes, es decir, con partes de la imagen fuera de la pantalla. Algunas de estas imágenes iban bien con el efecto parallax, pero otras debían ser completamente estáticas, y en estos casos fue necesario también aplicar un poco código para conseguir colocarlas al borde la página.

El sitio en general tiene implementado más código para otros detalles (para cargar la tipografía de énfasis que habíamos escogido en el branding, Serendipity, que al no ser de Google Fonts ni de Typekit no está incluida en Squarespace; para cambiarle el estilo a los formularios; algunos ajustes a la vista móvil, entre otras cosas.

La implementación del sitio en Squarespace también tuvo varias revisiones, para cambios y ajustes finales y para garantizar que Ale quedaba conforme con su nueva web. Para la entrega final del sitio hago siempre una videollamada de una hora para explicar todos los detalles y aclarar todas las dudas que el cliente pueda tener en ese punto. Y además, doy dos semanas de soporte prioritario por correo, para atender cualquier cosilla que surja.

 

separador
 

¿TE GUSTÓ EL POST?

COMPÁRTELO EN REDES SOCIALES Y AYÚDAME A DIFUNDIRLO... ¡GRACIAS!