Diseño web a medida en Squarespace para Mínima, estudio de arquitectura ecológica

En este post te traigo un estudio de caso del proyecto que trabajé en 2022 para Estudio Mínima.

Vamos a ver:

• En qué situación estaba el estudio cuando empezamos.

• El proceso de diseño completo: desde la estrategia hasta el diseño y la optimización SEO de la web.

• Y cuáles fueron los principales resultados a menos de un mes de publicada la web.

Tabla de contenidos

---

Cliente:

Mínima, estudio de arquitectura ecológica en Madrid.

Servicio:

Branding esencial + diseño web a medida + plantillas para Instagram

El proyecto de diseño

Cuando Estudio Mínima me contactó no tenían web ni branding, así que trabajamos en un proyecto integral que incluyó diseñar la identidad de marca, la presencia en Instagram, y el sitio web del estudio. El objetivo era que el diseño de identidad y la presencia online (Instagram + web) conectara con el público objetivo de Estudio Mínima, para comunicar sus valores de marca, mejorar su visibilidad y posicionamiento online, así como el proceso de contratación y posterior reserva de estancias en Casa Mínima.

En este estudio de caso nos vamos a centrar en el trabajo de estrategia, el diseño de identidad visual (branding) y el diseño de la web.

La fase de investigación y estrategia

Antes de empezar la fase de diseño (tanto de identidad como web) hicimos un trabajo de estrategia que incluyó:

• Refinar la misión de Mínima y su personalidad de marca.

• Definir bien su cliente ideal (con diferentes avatares de cliente en función de los diferentes momentos en que pueden entrar en contacto con Mínima).

• El análisis del viaje del cliente en la web con los diferentes canales de tráfico que iban a trabajar.

• Definir objetivos de conversión de la web, y el mapa del sitio y la navegación (o sea, la arquitectura de información de la web).

La estrategia la trabajamos endoscopia partes: primero con la revisión y discusión de un cuestionario extenso que el cliente debe completar, y posteriormente con toda esa información yo preparo un documento de estrategia de marca y web. Este documento será la guía que orientará todas las decisiones de diseño que se tomen, para garantizar que están todas alineadas entre sí, y que se corresponden con los objetivos fijados.

En la estrategia de Mínima, definimos objetivos de branding y de conversión:

• Por un lado, el objetivo de branding era generar credibilidad y diferenciación frente a otros estudios de arquitectura ecológica en Madrid, con una identidad visual cuidada y alineada con la personalidad de Mínima.

• Por otra parte, el principal objetivo de conversión de la web era conseguir que los posibles clientes se pusieran en contacto con el estudio, por medio de un formulario de contacto, para solicitar una llamada de valoración. Como objetivo secundario trabajamos la suscripción a una lista de correo, para ir creando poco a poco una lista de interesados en el tema de la arquitectura ecológica.

El diseño de identidad visual

Una vez terminada la fase de investigación y estrategia del proyecto, pasamos a la fase de diseño. Y, en esta fase, lo primero es diseñar la identidad visual de la marca.

En este proyecto trabajamos un branding esencial, que puedo incluir en proyectos de diseño web que lo requieran, y que consiste en:

• Curar una selección de tipografías para la marca.

• Definir la paleta de colores.

• Seleccionar elementos gráficos adicionales (en el caso de Mínima, añadimos ilustraciones, pero pueden ser también iconos o patterns).

• Definir el estilo visual de las fotografías a utilizar.

• Crear un logotipo (es decir, un logo estrictamente tipográfico) con sus correspondientes submarcas (monogramas, etc.).

Ver tamaño completo

Este formato de branding es ideal para marcas de servicios, en las que el peso fundamental de la identidad visual recae en los colores, las tipografías y el conjunto del diseño como tal, y menos en el logo (como sería el caso de una marca de productos, por ejemplo).  

En el caso de Mínima, como su nombre indica, era importante crear una identidad visual que comunicara su esencia minimalista. En estos casos la atención a la tipografía gana todavía más relevancia, así que exploramos varias opciones buscando una que fuera mínima, legible y moderna, pero también con un toque de carácter que le aportara un poco de personalidad y un look distintivo.

Al final nos decantamos por tipografías de tipo palo seco para el logo, otra para los encabezados, y otra para el cuerpo de texto, que se complementan muy bien entre sí y le aportan variedad visual a la marca, sin abrumar y sin hacerla pesada. La paleta tipográfica la complementamos con una paleta de colores en tonos orgánicos, que se sintiera natural y coherente con la paleta de las fotografías que usaríamos en la web. Por último, integramos ilustraciones hechas a mano para aportar un toque humano y de calidez.

Este enfoque minimalista y orgánico se reflejó en la web y también en las plantillas de Instagram, que siguieron el mismo estilo general: minimalista, esencial y natural.

Diseño y desarrollo de la web en Squarespace

Partiendo del branding creado y los objetivos definidos en la fase de estrategia para la web, pasamos a la fase de diseño y desarrollo: exploramos dos opciones de layout, una más libre y fluida, y otra más convencional, de las cuales el cliente prefirió esta última. En general, trabajamos un layout minimalista y esencial, enfocado en una llamada a la acción específica (que contactaran con ellos por medio del formulario).

Para apoyar la idea de calma y tranquilidad, limitamos mucho las animaciones en el sitio, dejándolas solo en algunas microinteracciones, como cuando se interactúa con un botón o enlace, o en las imágenes de las galerías de proyectos.

Para darle peso en la web al objetivo de generar confianza y posicionamiento de marca para Estudio Mínima, creamos una sección de proyectos en la web, donde se muestran algunos de los trabajos más representativos del estudio. En esta sección se incluyen detalles de cada proyecto, como la ubicación, el tipo de construcción, el uso previsto y una galería de imágenes. También añadimos una sección de testimonios de clientes del estudio.

Otro aspecto importante en el diseño de la web fue el trabajo en la optimización SEO implícitamente en el proceso de diseño, teniendo siempre en cuenta que los títulos y subtítulos del sitio respondieran a una jerarquía favorable al SEO, y usando palabras clave (definidas en la fase de estrategia) que permitieran posicionar la página en buscadores para ciertos términos. Además, una vez publicada la web, la indexamos en Google y Bing, para garantizar que empezara a aparecer rápido en los resultados de búsquedas. Posteriormente, el cliente siguió perfeccionando su estrategia SEO  con un especialista , pero la optimización esencial para empezar a posicionarse en Google estaba hecha como parte del servicio de  diseño web a medida .

Ver tamaño completo

Ver tamaño completo

Resultados tangibles del diseño web

Como resultado del trabajo realizado, y en el primer mes de publicada la web:

• Empezaron a recibir tráfico cualificado que estaba buscando las palabras clave que nos interesaban, gracias al trabajo de contenido y de optimización SEO.

• Recibieron su primer formulario de contacto a través de la web, con un volumen de tráfico bastante pequeño aún (recordemos que la web no llevaba ni un mes de publicada), lo que nos indica que el trabajo de diseño estratégico para conseguir la conversión del tráfico cualificado estaba funcionando.

Conclusión

Espero que este estudio de caso haya gustado, y te ayude a comprender mejor cómo un buen trabajo de estrategia puede guiar el trabajo de diseño, y conseguir resultados a corto plazo, que es justo lo que hago con mi servicio de diseño web en Squarespace.

Si solo nos hubiéramos centrado en que la web fuera bonita, hubiéramos conseguido solo eso, pero más nada. Y al final, el objetivo de una web no es estar de bonita, sino ayudarte a avanzar y crecer con tu negocio: es una herramienta de marketing y ventas, si se trabaja bien.