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

Tuber Label

Desarrollo y diseño de la página web de Tuber Label para la implementación de herramientas para el sector trufero.

Cliente

Jasten Fröjen

Año de creación

Ámbitos del proyecto

Sitio web

tuberlabel.es

El proyecto de Tuber Label tuvo como objetivo desarrollar una página web que representara la implementación de herramientas tecnológicas para el sector trufero en España. Ya contábamos con la imagen corporativa y el logotipo proporcionados por la agencia Jasten Fröjen. Este logo incluía una trama que simulaba las formas laberínticas de las trufas, y decidimos expandir esta idea en el diseño visual de la web. Inspirándonos en estas formas, creamos una serie de figuras relacionadas con el mundo de la trufa, que aportaron una identidad visual coherente y única al proyecto.

Para el diseño de la web, mantuvimos los colores corporativos establecidos con el negro como color de fondo principal. Este fondo oscuro permitió que la trama y las figuras destacaran de forma elegante y llamativa. El uso del negro no sólo aportó un toque de sofisticación, sino que también reforzó la conexión visual con las formas orgánicas de las trufas, creando una estética sólida y coherente con la marca.

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

Las figuras diseñadas, basadas en la trama del logotipo, se utilizaron de forma estratégica en las cabeceras de la web, integrándose de forma natural en el diseño general. Estas figuras, que incluían elementos como un perro trufero, una pala y referencias a la comida gourmet, reforzaron la conexión visual con el mundo de la trufa, asegurando que la web reflejara claramente la especialización del sector.

Este enfoque visual, combinado con una estructura funcional, logró transmitir la esencia del negocio de Tuber Label, así como su conexión con la naturaleza y el trabajo artesanal en torno a la trufa. La combinación de un diseño esmerado y el uso estratégico de elementos visuales hizo que la web fuera no sólo informativa y funcional, sino también altamente representativa de la identidad del proyecto.

Eufore

Creación de la página web para The European Forest Research and Innovation Ecosystem.

Cliente

European Forest Institute (EFI)

Año de creación

Ámbitos del proyecto

Sitio web

eufore.eu

El proyecto Eufore (The European Forest Research and Innovation Ecosystem) tiene como objetivo crear un entorno sostenible, transnacional y cocreativo para definir, implementar y evaluar una hoja de ruta de investigación e innovación (I+i) centrada en las cadenas de valor forestal en Europa. El desafío era diseñar una página web que no sólo reflejara estos objetivos, sino que también transmitiera visualmente la conexión entre la investigación, la innovación y la sostenibilidad en el ámbito forestal europeo.

El diseño de la web partió del logo existente del proyecto, que presentaba un patrón de árboles repetidos con un degradado de colores que iba del naranja al azul, pasando por tonos de amarillo y verde. Estos colores y patrones se convirtieron en la base del desarrollo visual del sitio. Se utilizaron las figuras del logotipo de forma creativa, integrando imágenes de bosques como fondo, lo que reforzó la conexión visual con la temática forestal.

Además, creamos dibujos con líneas que representaban a personas y entornos, simbolizando la interacción entre los seres humanos y los ecosistemas. Estos dibujos pusieron de manifiesto el enfoque cocreativo y colaborativo del proyecto, añadiendo una capa de significado visual que complementaba la temática de sostenibilidad e innovación en los bosques europeos.

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

Los patrones con fotos y líneas se utilizaron de forma estratégica en las cabeceras de la web, dando a cada sección una identidad única pero cohesiva. También se incorporaron a las infografías y gráficos a lo largo del sitio, reforzando la identidad visual de Eufore y facilitando la presentación de información técnica de forma clara y atractiva.

Gracias a este diseño, la página web no sólo se convirtió en una plataforma informativa sobre los objetivos de investigación y desarrollo del proyecto, sino también en una herramienta visualmente atractiva que conectaba a los usuarios con la esencia de los ecosistemas forestales europeos y los esfuerzos por preservarlos e innovar en su gestión.

Energiehaus

Diseño y desarrollo web e imagen corporativa de Energiehaus.

Cliente

Energiehaus

Año de creación

La nueva web de Energiehaus, un estudio barcelonés de arquitectura y consultoría especializado en arquitectura sostenible y construcción bajo los estándares de Casa Pasiva (Passivhaus), supuso un desafío para nosotros. El nuevo sitio necesitaba integrar una plataforma corporativa con varios servicios, un Showroom, la sección Showpass, una tienda online para la venta de cursos, un área de eventos y un blog, exigiendo un desarrollo integral que cubriera tanto la creación de la imagen corporativa como el diseño y desarrollo de la web.

El proyecto comenzó con la creación de prototipos o wireframes para estructurar las páginas de forma clara y funcional. La navegación intuitiva era una prioridad, permitiendo a los usuarios acceder fácilmente al amplio abanico de servicios que ofrece Energiehaus. Cada sección, desde la tienda online hasta el blog, se diseñó con una identidad visual propia, pero manteniendo una coherencia general con la imagen de marca.

El cliente se decantó por un diseño basado en collages que combinaban figuras naturales como árboles y otros elementos ambientales con fotografías recortadas en blanco y negro. Este enfoque estético distintivo reforzaba el mensaje de sostenibilidad, al tiempo que mantenía una imagen elegante y moderna. Diseñamos también una serie de infografías e iconos que seguían esta línea gráfica para comunicar visualmente los servicios de Energiehaus de forma clara y atractiva.

Pàgina d'inici detall
Pàgina interior Energiehaus
Pàgina d'inici detall Energiehaus
Pàgina interior Energiehaus

Ejemplos de collages que se realizaron para las cabeceras y elementos de la web.

Paralelamente, desarrollamos un nuevo logotipo inspirado en el concepto de Casa Pasiva, donde la energía externa envuelve y beneficia al interior de una construcción. El logotipo utilizaba un icono de una casa, representando este flujo de energía de forma simple pero poderosa. El contraste entre el color negro del logotipo y el amarillo intenso que le rodeaba reforzaba la identidad visual de la marca, simbolizando la energía que rodea y protege, un elemento clave en la filosofía de Energiehaus.

El resultado final fue una página web dinámica, estéticamente atractiva y altamente funcional que capturó perfectamente los valores de innovación, sostenibilidad y eficiencia energética de Energiehaus, consolidando su presencia online y mejorando la comunicación de su experiencia en arquitectura sostenible .

Logo Energiehaus

Holisoils

Desarrollo web y diseño para el proyecto Holisoils, para la gestión holística, modelización y seguimiento de suelos forestales europeos.

Cliente

European Forest Institute (EFI)

Año de creación

Ámbitos del proyecto

Sitio web

holisoils.eu

La web del proyecto Holisoils, dedicada a la gestión de los suelos de los bosques europeos, se desarrolló siguiendo la línea de la imagen corporativa que ya tenían establecida. El logotipo del proyecto, que simboliza una impronta digital con líneas circulares, fue una inspiración clave para el diseño visual de la web. Utilizamos estas líneas y perfiles de las hojas como elementos gráficos para dar cohesión visual a la página y reforzar la conexión con la naturaleza y los suelos forestales.

El diseño web sigue un estilo minimalista, con grandes blogs de color que se combinan con imágenes visuales potentes. Estos bloques se contraponen a elementos gráficos de líneas simples, creando un equilibrio entre el impacto visual y la simplicidad, por lo que la información se presenta de forma clara y atractiva para los usuarios.

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

Además, se desarrolló una línea de iconos específicos para representar los diferentes aspectos del proyecto, así como una serie de fichas detalladas de los diferentes Test Sites (sitios de prueba). Estas fichas se integraron en un mapa interactivo que permitía a los usuarios explorar las distintas zonas de estudio, ofreciendo una experiencia dinámica e informativa. También se incluyeron cajas de información dedicadas a los Toolkits, herramientas prácticas que facilitan la comprensión y aplicación de los conocimientos derivados del proyecto.

Con este diseño, la web de Holisoils logra combinar una estética visual limpia y moderna con una estructura funcional que facilita el acceso a la información clave sobre la gestión de los suelos forestales europeos, consiguiendo así una plataforma útil y atractiva para todos sus usuarios .

Informa Forest

Diseño y desarrollo web del proyecto Informa Forest para la difusión de conocimientos sobre la Gestión Forestal Sostenible.

Cliente

European Forest Institute (EFI)

Año de creación

Ámbitos del proyecto

Sitio web

informa-forests.eu

El proyecto Informa Forest tiene como objetivo proporcionar conocimientos que permitan desarrollar prácticas de Gestión Forestal Sostenible. Por este motivo, diseñamos y desarrollamos una web que no sólo fuera funcional, sino también visualmente atractiva, alineada con su imagen corporativa.

A partir del logo original, que consistía en círculos que crecían de forma radial, creamos una imagen coherente para la web, utilizando estos círculos como elementos visuales clave. Estos círculos se utilizaron tanto para mostrar información como fotografías y textos destacados, dentro de un diseño que transmite una sensación de ingravidez, como si estos elementos estuvieran flotando. Las sombras de varios colores y pequeños puntos de color que rodeaban a los círculos aportaban dinamismo al diseño, mientras que el fondo gris suave resaltaba estos elementos gráficos, creando un contraste elegante y sutil.

pàgina d'inici Informa Forest
pàgina interior Informa Forest
pàgina interior Informa Forest

En esta web se diseñaron una serie de animaciones específicas, incluyendo una infografía interactiva que explicaba los objetivos generales del proyecto. Esta infografía seguía un patrón de crecimiento radial, con la información que emergía de un círculo central, representando visualmente el crecimiento y difusión del conocimiento. Además, la página inicial cuenta con una animación dinámica en la que varios mensajes de texto aparecen dentro de un círculo, reforzando la coherencia visual del proyecto.

Se diseñaron cabeceras personalizadas para cada sección de la web, asegurando que cada página tuviera una identidad propia, pero dentro del mismo estilo visual, manteniendo una imagen global armónica y coherente.