Wildcard Project

Creación y diseño web para Wilcard Project, una iniciativa del European Forest Institute enfocada en la autorrecuperación de ecosistemas degradados y dañados.

Cliente

European Forest Institute (EFI)

Año de creación

Wilcard Project es un proyecto del European Forest Institute que se centra en la regeneración natural de ecosistemas afectados, promoviendo la restauración de la biodiversidad y el equilibrio de los entornos forestales. El diseño del sitio web debía transmitir esta visión de renovación y conexión con el medio ambiente, manteniendo una coherencia con la identidad corporativa del proyecto.

Desde el inicio del proyecto, optamos por un enfoque visual que evocaba los ecosistemas forestales mediante el uso de un collage que simbolizaba la diversidad y complejidad de los bosques. Para materializar este concepto, seleccionamos cuidadosamente una combinación de fotografías, texturas y formas de color que representaban la riqueza de los paisajes naturales. Estos elementos gráficos se utilizaron de forma consistente en toda la web, creando una estética visual dinámica y coherente que reflejaba la esencia del proyecto.

Los colores corporativos de Wilcard Project sirvieron como base para el diseño, aunque tuvimos libertad creativa para desarrollar elementos gráficos adicionales. Esta libertad nos permitió explorar combinaciones atrevidas de texturas y colores, reforzando el carácter único del proyecto. de la naturaleza, junto con formas orgánicas y tonos terrosos, se integraron para dar vida al concepto de regeneración y crecimiento natural.

Uno de los recursos destacados del sitio web fue la integración de vídeos como fondos visuales, delimitados por trazos de color que actuaban como marcos. Esto aportó dinamismo a la experiencia del usuario, haciendo la página más inmersiva y resaltando los elementos visuales clave del proyecto. Los vídeos mostraban de forma viva el ecosistema en proceso de regeneración, alineándose perfectamente con la misión del Wilcard Project.

Wildcard Project pàgina inici
Wildcard Project pàgina interior
Wildcard Project pàgina interior

Otro aspecto distintivo del diseño fue el uso de collages e infografías, que permitieron comunicar visualmente los conceptos clave sobre la restauración de ecosistemas. Para garantizar la coherencia visual, unificamos los collages con colores consistentes, formas redondeadas y líneas suaves. Esta combinación ayudó a mantener una armonía visual a lo largo del sitio web, creando una experiencia gráfica atractiva y fluida para los usuarios.

El resultado final es una página web que combina creatividad, funcionalidad y una fuerte identidad visual, ofreciendo una plataforma que no sólo comunica la misión del Wilcard Project, sino que también inspira a los visitantes a comprender la importancia de la regeneración de ecosistemas dañados.

Clínica Dental Oriol Cantó

Clínica Dental Oriol Cantó

Diseño y desarrollo del nuevo sitio web de la Clínica Dental Oriol Cantó, moderno, accesible y alineado con su identidad corporativa para mejorar la experiencia del usuario y reforzar su presencia digital.

Cliente

Clínica Dental Oriol Cantó

Año de creación

Ámbitos del proyecto

El proyecto del nuevo sitio web de la Clínica Dental Oriol Cantó se desarrolló partiendo de su identidad corporativa, respetando los elementos gráficos esenciales y adaptándolos a un entorno digital moderno y accesible. El objetivo principal fue crear una experiencia de usuario clara y fluida, con un diseño que transmitiera profesionalidad y cercanía, a la vez que optimizara la legibilidad y la navegabilidad del sitio web.

La estructura del sitio se definió siguiendo los prototipos iniciales, pero durante el proceso de diseño se introdujeron mejoras para optimizar la experiencia de usuario. Se trabajó con una composición ordenada y limpia, donde las formas rectangulares del símbolo del logotipo se trasladaron a varios elementos gráficos, como los botones y las fotografías, reforzando así la coherencia visual y la identidad de la clínica.

Uno de los aspectos clave del proyecto fue la selección tipográfica. La tipografía del logotipo de la clínica es Klavika Basic, una fuente con un carácter fuerte y moderno que se mantuvo para los encabezados. Sin embargo, debido a su menor legibilidad en cuerpos de texto pequeños, se optó por Aktiv Grotesk como tipografía secundaria para los textos del sitio web. Esta elección permitió mejorar la lectura y garantizar una experiencia óptima para todos los usuarios.

Además, se trabajó con un cuerpo de texto central de 24 píxeles, un tamaño superior al estándar, pensado para favorecer la legibilidad y garantizar una accesibilidad óptima. Este detalle fue especialmente relevante, teniendo en cuenta el compromiso de la clínica con la atención a personas con necesidades especiales. Esto permitió asegurar que el sitio web cumpliera con los requisitos de accesibilidad AA.

El cromatismo del sitio web se basó en los colores corporativos de la clínica, manteniendo el azul y el gris oscuro como tonos principales. No obstante, para evitar que el diseño resultara demasiado aséptico o frío, se incorporó una gama de tonalidades más cálidas. Esta combinación no solo añadió variedad y equilibrio al diseño, sino que también reforzó la sensación de cercanía y confort, valores esenciales en el ámbito de la atención sanitaria.

Oriol Cantó
Oriol Cantó
Oriol Cantó
Oriol Cantó

El resultado final fue un sitio web moderno, dinámico y visualmente atractivo, alineado con los valores y la identidad de la Clínica Dental Oriol Cantó. El uso de una estructura clara, una tipografía optimizada y una paleta cromática equilibrada permitió mejorar significativamente la experiencia de usuario y garantizar un acceso fácil e intuitivo a toda la información.

Este proyecto supuso una actualización importante en la presencia digital de la clínica, dotándola de un sitio web funcional y alineado con sus necesidades actuales, manteniendo su esencia y reforzando su imagen de profesionalidad y cercanía.

Verificat

Diseño y programación de la web de Verificat, un diario online especializado en la verificación de noticias.

Cliente

Associació Verificat

Año de creación

Sitio web

verificat.cat

Verificat es un medio digital dedicado a la verificación de noticias, aspecto crucial en la era de la información, donde la proliferación de noticias falsas y la desinformación exigen un trabajo riguroso y especializado. El objetivo del proyecto era modernizar su plataforma online para mejorar su usabilidad, adaptabilidad y destacar más eficazmente su tarea en el ámbito de la verificación de la información.

El proyecto se desarrolló en dos fases diferenciadas:

En la primera fase, nos centramos en la migración completa del sitio web. Verificat contaba con una web creada con Expression Engine, y el principal reto fue transferir toda la información y estructura al sistema WordPress. Este proceso incluyó la exportación de todos los artículos, asegurándonos que cada uno mantuviera sus categorías originales para preservar la organización del contenido. Además, se crearon nuevas plantillas adaptadas para las distintas tipologías de páginas.

Una vez que la web fue importada a WordPress, pasamos a la segunda fase, que consistía en implementar el nuevo diseño. El objetivo era optimizar la estructura de navegación y reorganizar su contenido para mejorar la experiencia del usuario. Se creó un nuevo árbol de contenidos que permitía una navegación más fluida y destacaba claramente el trabajo de Verificat. La nueva estructura no sólo facilitaba la búsqueda de información, sino que también ponía énfasis en las áreas clave de Verificat.

Web Verificat pàgina inici
Web Verificat pàgina interior
Web Verificat pàgina de notícia
Web Verificat pàgina de l'equip

Por lo que respecta al diseño, respetamos la imagen corporativa básica existente, pero introdujimos mejoras significativas en términos de usabilidad y adaptación al formato digital. Una de las principales modificaciones fue el cambio de tipografía, escogiendo una más adecuada para el entorno web, lo que mejoró tanto la legibilidad como la estética general del sitio. El diseño siguió una línea simple y funcional, alineada con los valores de claridad y precisión que definen a Verificat. Se priorizó una estructura limpia, que permitiera una rápida identificación de las secciones de contenido y facilitara el acceso a los artículos verificados.

Para la maquetación, utilizamos Gutenberg, el editor visual nativo de WordPress, lo que permitió la creación de un sistema modular flexible. Desarrollamos varios módulos reutilizables para las distintas páginas, con el objetivo de facilitar al equipo de Verificat la creación de nuevas páginas y secciones en el futuro, sin necesidad de asistencia técnica externa. Este enfoque modular les proporciona una mayor autonomía para gestionar y actualizar el contenido a medida que su trabajo evoluciona.

El resultado final fue una página web moderna, intuitiva y fácil de gestionar, que no sólo mejoró la presentación de la información, sino que también reforzó la identidad y misión de Verificat como referente en la verificación de noticias.

Santacreu Design

Diseño y creación de la web para el estudio de interiorismo barcelonés Santacreu Design.

Cliente

Santacreu Design

Año de creación

Ámbitos del proyecto

Santacreu Design es un estudio de interiorismo con sede en Barcelona, ​​reconocido por su enfoque en la creación de espacios elegantes y funcionales para clínicas dentales, ópticas y oficinas. La primera versión de su página web la desarrollamos en 2015, y aunque en ese momento cumplía las expectativas, especialmente en términos de diseño y SEO, con el tiempo surgió la necesidad de una actualización para adaptarse a un formato más moderno y funcional. El objetivo del nuevo diseño era aprovechar las ventajas técnicas de WordPress, utilizando el editor Gutenberg, al tiempo que se alineaba la estética de la web con la nueva identidad corporativa del estudio.

Con el cambio de identidad de marca, el diseño de la web debía reflejar una imagen renovada, con un estilo más contemporáneo. Se eligió una nueva paleta de colores, inspirada en tonos pardos, para aportar una sensación cálida y sofisticada que se ajustaba al espíritu de los proyectos de Santacreu Design. En cuanto al estilo visual, optamos por un enfoque minimalista, con fotografías de los proyectos organizadas en estructuras de columnas, dando mayor protagonismo a las imágenes y permitiendo que los detalles del trabajo del estudio fueran los principales elementos visuales.

La actualización de la web también incluyó una nueva presentación de los proyectos del estudio. Se aumentó el tamaño de las imágenes, mejorando tanto su calidad como su impacto visual, lo que permitió a los visitantes apreciar mejor los detalles y acabados de los proyectos de interiorismo, reforzando la percepción de calidad y profesionalidad que caracteriza a Santacreu Design .

Web Santacreu Design pàgina inici
Web Santacreu Design pàgina interior
Web Santacreu Design pàgina interior

Otra mejora clave fue la optimización del sistema de búsqueda de proyectos. Se reestructuró la manera de organizar los proyectos, agrupándolos por categorías para realizar la navegación más intuitiva y accesible. que les interesaban, al tiempo que brindaba al cliente una herramienta eficaz para mostrar su cartera de manera clara y categorizada, mejorando la usabilidad general del sitio.

En conjunto, el nuevo diseño de la web de Santacreu Design no sólo logró una actualización visual coherente con la nueva identidad de la marca, sino que también mejoró significativamente la experiencia de usuario y la funcionalidad del sitio.

Hachazuela

Diseño y desarrollo del nuevo sitio web de Hachazuela, un ecommerce especializado en piezas de madera hechas a mano. El proyecto incluye un restyling del logotipo, una nueva identidad tipográfica y una interfaz funcional y elegante para optimizar la experiencia de compra.

Cliente

Hachazuela

Año de creación

Sitio web

hachazuela.com

El proyecto para Hachazuela supuso una renovación integral de su identidad digital, comenzando con un restyling del logotipo y continuando con el diseño de un nuevo ecommerce pensado para mejorar la experiencia del usuario y facilitar el proceso de compra. El objetivo principal fue lograr un equilibrio entre originalidad y funcionalidad, destacando la personalidad del taller sin comprometer la usabilidad del sitio web.

El diseño del sitio web se desarrolló a partir de una paleta de colores cálida y neutra, creando un entorno visual atractivo pero sin distracciones innecesarias. Se priorizó un enfoque claro y limpio, donde la navegación intuitiva y la facilidad de uso fueran elementos clave para mejorar la experiencia de compra.

Para la tipografía del sitio, se seleccionaron dos fuentes que aportan personalidad y legibilidad. Para los encabezados y textos destacados se utilizó Queens Condensed Light, una tipografía display elegante y con gran presencia visual, cuyo formato condensado se adapta perfectamente a la versión móvil. Como complemento para el cuerpo del texto, se eligió Brown Pro, una tipografía de palo seco ligeramente condensada que garantiza una lectura cómoda y fluida tanto en mayúsculas como en minúsculas. El equilibrio entre estas dos fuentes permitió conseguir una jerarquía tipográfica clara y efectiva.

La arquitectura del sitio web se diseñó con una página de inicio de gran impacto visual, que captara la atención del usuario y transmitiera los valores del taller. En el resto del sitio, se priorizó la limpieza, la importancia de los espacios en blanco y una navegación eficiente, garantizando que los productos se encontraran fácilmente y que el proceso de compra se realizara de manera rápida y sin fricciones.

Hachazuela
Hachazuela
Hachazuela
Hachazuela

Para el logotipo, se trabajó a partir de la tipografía display Arsenica Variable, adaptando algunas de sus características para lograr una identidad más singular. Las ondulaciones en las barras horizontales, que recuerdan sutilmente las vetas de la madera, sirvieron como punto de partida para reforzar el vínculo con la artesanía de Hachazuela, diferenciándolo claramente del que se mostraba previamente en la web.

El resultado final fue un ecommerce atractivo, con una fuerte personalidad gráfica y una experiencia de usuario optimizada, convirtiendo el nuevo sitio web de Hachazuela en una plataforma funcional, intuitiva y alineada con la calidad y la artesanía de sus productos.

Fundación iSocial

Fundación iSocial

Diseño y desarrollo del nuevo sitio web y ecommerce de la Fundación iSocial, con una estética renovada y alineada con su identidad corporativa para mejorar la experiencia de usuario y facilitar la inscripción a los cursos de forma virtual.

Cliente

Fundación iSocial

Año de creación

Ámbitos del proyecto

Sitio web

isocial.cat

El nuevo sitio web de la Fundación iSocial es la culminación de una relación que comenzó en 2018 con el diseño y desarrollo de su primer sitio web, una colaboración que ha ido creciendo y evolucionando para adaptarse a las necesidades cambiantes de la entidad.

Este proceso de actualización ha estado marcado por la expansión de su actividad y la creación de su campus de formación, un espacio pensado para los profesionales y organizaciones de servicios sociales que quieren afrontar de manera creativa e innovadora los retos de transformación del sector. El nuevo sitio web integra este campus con un ecommerce que facilita la inscripción a los cursos de forma ágil y completamente virtual.

Más allá de la actualización visual, el proyecto supuso una mejora significativa en la navegación, el contraste tipográfico y la presentación de la información, con el objetivo de simplificar la interacción del usuario y asegurar un acceso rápido e intuitivo a los recursos y contenidos de la Fundación.

Fundació iSocial
Fundació iSocial
Fundació iSocial
Fundació iSocial
Fundació iSocial

El resultado final es un sitio web moderno y accesible con un ecommerce integrado, alineado con la identidad corporativa de la Fundación iSocial. Un diseño tipográfico claro, una paleta cromática equilibrada y una estructura simplificada permiten una experiencia de usuario óptima y una presentación clara de los servicios formativos, mejorando significativamente la presencia digital de la Fundación y facilitando el acceso a los cursos y recursos de manera rápida y eficiente.

ICC Spain

Diseño y desarrollo de la página web de la Cámara de Comercio Internacional ICC España.

Cliente

Comité Español Cámara de Comercio Internacional

Año de creación

Ámbitos del proyecto

Sitio web

iccspain.org

El proyecto para la Cámara de Comercio Internacional ICC España implicaba la creación de una plataforma web moderna y funcional, que reflejara la importancia y el prestigio de la institución. La Cámara de Comercio Internacional es una red global, y la versión española necesitaba una página que no sólo cumpliera con sus estándares corporativos internacionales, sino que también ofreciera funcionalidades específicas para sus usuarios, como sistemas de búsqueda avanzada, una tienda online y una zona privada.

En el proceso de diseño y creación de la nueva web, planteamos desde el principio tanto el diseño visual como la estructura de los contenidos, asegurando una navegación clara y organizada. El objetivo era que la página web sirviera como una herramienta de trabajo para los usuarios y miembros de la Cámara, facilitando el acceso a la información, la compra de recursos y la gestión del perfil de usuario.

Por el diseño de la web nos basamos en la imagen corporativa de ICC España, siguiendo las pautas de colores y formatos utilizados en otras webs internacionales de las Cámaras de Comercio. Sin embargo, no nos limitamos a replicar estos elementos, sino que los adaptamos y enriquecemos. Uno de los elementos distintivos fue el uso de las líneas en arco del logotipo de ICC España como base para desarrollar varios blogs de la web. Estas líneas se integraron de forma creativa en la composición de la página, aportando dinamismo y coherencia visual. Además, incorporamos imágenes combinadas con blogs de contenido, lo que ayudó a estructurar la información de forma clara y atractiva.

Pàgina d'inici web ICC Spain
Pàgina interior web ICC Spain
Pàgina interior web ICC Spain
Pàgina interior web ICC Spain

Una de las principales características de la web es el sistema de búsqueda avanzada, que permite a los usuarios realizar consultas sobre diversas temáticas relacionadas con el comercio internacional y los servicios que ofrece la Cámara. Este sistema facilita la navegación y el acceso a información relevante, mejorando. la experiencia de usuario.

Además, desarrollamos una tienda online integrada en la web, donde se pueden comprar libros y otros recursos relacionados con el comercio y la normativa internacional. La tienda dispone de un catálogo fácilmente navegable, lo que permite a los usuarios encontrar y adquirir los productos de forma rápida y sencilla.

La web también cuenta con una zona privada para usuarios, en la que los miembros pueden registrarse, gestionar su perfil y acceder a contenido exclusivo. Esta área privada se diseñó con un especial enfoque en la seguridad y facilidad de uso, garantizando que los usuarios pudieran navegar sin complicaciones y realizar gestiones de manera autónoma.

Por último, se incluye un apartado de eventos, donde los usuarios pueden consultar información sobre seminarios, conferencias y otras actividades organizadas por la Cámara de Comercio. Este apartado cuenta con un sistema de filtrado que permite buscar eventos según temáticas, fechas u otros criterios, mejorando así la accesibilidad y organización de la información.

En conjunto, el diseño y desarrollo de la web de la Cámara de Comercio Internacional ICC España proporcionó una plataforma moderna, funcional y alineada con los estándares internacionales, ofreciendo a la vez herramientas avanzadas para mejorar la experiencia de los usuarios y facilitar sus interacciones con la institución.

Flors Lloveras

Creación de la web con tienda online para la floristería barcelonesa Flors Lloveras.

Cliente

Flors Lloveras

Año de creación

Sitio web

florslloveras.com

Flors Lloveras es una floristería con una larga tradición en Barcelona, ​​conocida por la atención al detalle y la calidad de sus composiciones florales. El objetivo del proyecto era crear una nueva página web que reflejara el estilo único de la floristería y, a la vez, integrar la tienda online ya existente, mejorando tanto su funcionalidad como su apariencia. experiencia de usuario intuitiva y eficiente.

Uno de los elementos clave del diseño fue la incorporación de una serie de dibujos a lápices de detalles florales, que actuaban como hilo conductor a lo largo de todas las páginas de la web. Estos dibujos, que evocaban la delicadeza y naturalidad de las flores, funcionaban como elementos decorativos y unificadores del diseño, aportando una identidad visual coherente y distintiva. Junto a estos dibujos, se crearon collages con fotos cuidadosamente seleccionadas, que capturaban la esencia del trabajo artesanal de Flores Lloveras. Estas imágenes no sólo mostraban sus productos, sino que también transmitían el ambiente y la dedicación de la floristería, conectando emocionalmente con los usuarios.

En cuanto a los colores, se adaptó la paleta corporativa de la floristería, manteniendo una coherencia visual que respetara su identidad de marca. Se combinaron tonos suaves y naturales para crear un diseño armónico y elegante, en sintonía con el estilo de Flors Lloveras.

Pàgina web Flors Lloveras
Pàgina web Flors Lloveras
Pàgina web Flors Lloveras

El proyecto presentaba un reto particular: la floristería ya contaba con una tienda online que los propietarios querían mantener. Nuestra labor consistió en adaptar la tienda al nuevo diseño, garantizando que el cambio estético no afectara ni al funcionamiento ni a la experiencia del usuario. Además, realizamos una revisión global del funcionamiento del eCommerce para asegurar que estuviera actualizada y funcionando de forma óptima, tanto en términos de rendimiento técnico como de usabilidad.

El resultado fue una página web que combina un diseño elegante y emotivo con una tienda online completamente funcional. Esta solución permitió a Flors Lloveras mantener su presencia digital actualizada, ofreciendo a sus clientes una plataforma atractiva y fácil de usar para la compra de sus productos. La combinación de elementos gráficos, fotografías cuidadas y una estructura intuitiva de la tienda destacó el trabajo artesanal y la dedicación de esta floristería.

Bioregions

Diseño y desarrollo web de Bioregions: bioeconomía circular en los bosques europeos.

Cliente

European Forest Institute (EFI)

Año de creación

Ámbitos del proyecto

Sitio web

bioregions.efi.int

El proyecto Bioregions promueve la bioeconomía circular en los bosques europeos, con un enfoque innovador para la gestión sostenible de los recursos forestales. La web original del cliente ya estaba desarrollada con WordPress, pero presentaba problemas de organización del contenido y de presentación de la información según sus deseos. Por esta razón, se decidió rehacer completamente el sitio web, manteniendo WordPress como base, pero utilizando el editor Gutenberg, que permite una mayor autonomía en la gestión de contenidos por parte del cliente.

El nuevo diseño fue una oportunidad perfecta para crear una imagen fresca y mejor alineada con los valores del proyecto. Nos inspiramos en el logotipo de Bioregions, donde se representa una hoja con líneas y puntos redondeados en los vértices. Estas formas se convirtieron en el eje visual del nuevo diseño, con líneas finas que crecían y ramificaban, generando elementos decorativos como hojas y puntos. Estas figuras se integraron armónicamente a lo largo de las páginas, aportando dinamismo y creando una identidad visual coherente con la temática de la bioeconomía y sostenibilidad.

pàgina d'inici Bioregions
pàgina interior Bioregions
pàgina interior Bioregions

El diseño no se limitó sólo a la estética, sino que también mejoró la funcionalidad de la web. Los elementos gráficos se combinaron cuidadosamente con las imágenes y los textos, creando composiciones visuales que destacaban por su elegancia y la capacidad de transmitir los mensajes clave del proyecto. Cada página adquirió una identidad propia pero manteniendo una coherencia visual que reflejaba los objetivos y valores de Bioregions.

Este enfoque permitió crear un sitio web no sólo atractivo visualmente, sino también mucho más funcional y fácil de manejar para el cliente, mejorando significativamente la experiencia de usuario y la presentación de los contenidos.

MARQuitectura

Diseño y desarrollo de la nueva web del estudio barcelonés de arquitectura sostenible MARQuitectura.

Cliente

MARQuitectura

Año de creación

MARQuitectura es un estudio de arquitectura con sede en Barcelona, ​​especializado en proyectos de arquitectura sostenible, comprometido con la eficiencia energética y el uso responsable de los recursos. Pese a su sólida trayectoria en el sector, el estudio necesitaba renovar su página web, que había quedado obsoleta tanto en diseño como funcionalidad.

La antigua web no reflejaba adecuadamente la calidad y la visión de MARQuitectura. La navegación era confusa, puesto que los contenidos estaban separados entre la página principal y un blog externo, lo que complicaba la experiencia de usuario y no transmitía una identidad visual coherente.

El proyecto se centró en el diseño integral del sitio web, poniendo énfasis en destacar visualmente los proyectos del estudio con un enfoque limpio y moderno. Se apostó por dar protagonismo a imágenes de gran formato, aprovechando la galería fotográfica de alta calidad de los proyectos destacados de MARQuitectura. Estas imágenes se combinaron con elementos visuales sobrios, como cajas de colores neutros, que armonizaban con la paleta corporativa del estudio, respetando siempre su identidad visual.

Pàgina d'inici web Marquitectura
Pàgina interior web Marquitectura
Pàgina interior web Marquitectura

Además del desarrollo web, el proyecto incluyó el rediseño del logotipo. Basándose en el concepto original, se hicieron ajustes para modernizarlo y darle un aspecto más suave y accesible. redondeadas y más amigables, mientras que la tipografía se actualizó para reflejar una imagen contemporánea y profesional.

Esta nueva web no sólo mejoró el aspecto visual de la marca, sino que también simplificó la navegación y reforzó la coherencia de la identidad de MARQuitectura.

Logo Marquitectura