Disseny i programació web - Ideamatic Digital Experiences

Dmente

admin on 06/06/2024

Client

Dmente

Any de creació

2024

Àmbits del projecte

Lloc web

dmenteloc.com

Dmente és una empresa especialitzada en la cerca i gestió de localitzacions per a rodatges en produccions de cinema, sèries de televisió i publicitat. Amb una àmplia experiència en el sector audiovisual, Dmente es va proposar renovar la seva presència en línia per projectar una imatge més professional i atractiva davant dels seus clients actuals i potencials.

La pàgina web anterior, creada internament per l’empresa, presentava importants deficiències tant en el disseny com en l’usabilitat, cosa que no reflectia adequadament la qualitat del seu treball ni la seva trajectòria.

El projecte va començar amb la reestructuració completa del lloc web, dissenyant una nova arquitectura de continguts que facilités la navegació i destaqués clarament els serveis que ofereix Dmente.

L’enfocament principal va ser organitzar la informació de manera que els visitants poguessin explorar fàcilment els tipus de localitzacions i conèixer els projectes audiovisuals en què l’empresa havia participat, com ara pel·lícules, sèries i campanyes publicitàries. Per a això, es va crear un arbre de continguts que dividia els diferents serveis de manera clara i destacava les imatges de les localitzacions, acompanyades d’informació sobre els rodatges en què havien col·laborat.

Pel que fa al disseny visual, es va optar per un estil minimalista i elegant, basat en una paleta monocromàtica en blanc i negre, que oferís un contrast marcat, permetent que les fotografies de les localitzacions, presentades en gran format, fossin les veritables protagonistes del web. L’ús de blocs visuals ordenats va contribuir a crear una sensació d’ordre i professionalitat, reforçant alhora l’objectiu de presentar Dmente com un actor fiable i experimentat dins del sector audiovisual.

Finalment, es va redissenyar la icònica imatge dels micos amb càmeres, una representació que el client ja utilitzava i amb la qual volia continuar. La nova il·lustració va mantenir la idea original, però amb un enfocament més estilitzat i adaptat a l’estètica general del web. La nova imatge, a mode de grafiti, per reflectir el dinamisme de Dmente a través del que podria ser una localització.

Detall disseny web pàgina interior Dmente

A més a més del disseny web es va abordar la creació del logotip, ja que l’empresa no comptava amb una identitat visual definida.

Seguint l’estètica global del lloc web, vam desenvolupar una proposta de logotip que combinés simplicitat i caràcter.

Vam jugar amb la “D” del nom, col·locant-la al principi com a únic símbol, eliminant l’espai buit i ressaltant-ne la forma exterior. També vam ajustar l’espai entre les lletres “D” i “mente” per crear una sensació d’equilibri visual mantenint una separació uniforme entre totes les lletres. Això va donar al logotip un aspecte sòlid i minimalista.

El disseny del logotip no complementava únicament l’estil de la web, sinó que també reforçava la identitat visual de la marca.

Transformit

admin on 05/05/2024

Client

European Forest Institute (EFI)

Any de creació

2024

Àmbits del projecte

Disseny web a mida

Lloc web

transformforests.eu

Transformit és una iniciativa de l’European Forest Institute centrada en la gestió forestal sostenible, la preservació de la biodiversitat i la promoció dels serveis ecosistèmics. El seu objectiu principal és protegir els boscos europeus mitjançant enfocaments innovadors i col·laboratius que fomentin la conservació de la natura.

La nostra tasca consistia a dissenyar una pàgina web que reflectís la rellevància d’aquests valors i que servís com a plataforma efectiva per comunicar les accions i resultats del projecte.

Ens vam basar en la identitat corporativa existent i en la idea central del logotip, que evocava la imatge d’un vitrall, on diversos elements s’entrellacen a través de línies que connecten i defineixen les formes. Aquesta metàfora visual va inspirar el concepte de disseny, on les imatges del web es presenten a través de marges i formes, imitant l’efecte d’un vitrall. Aquest plantejament no només és visualment atractiu, sinó que també aporta coherència amb la identitat gràfica del projecte.

La línia gràfica del web es defineix per un estil minimalista, amb grans blocs de color que contrasten amb imatges impactants, creant un equilibri entre claredat i modernitat. Els gràfics de línies simples s’integren amb aquests elements visuals, reforçant l’estètica neta i actual. Aquest enfocament permet que els valors principals del projecte, com la sostenibilitat i la conservació dels ecosistemes, siguin el focus d’atenció.

En conjunt, el web no només transmet la importància de la conservació forestal, sinó que també es converteix en una eina de comunicació eficaç per als esforços del projecte Transformit.

A més, per a la pàgina d’inici vam crear una animació on diferents elements gràfics es desplacen, reforçant la idea de moviment i transformació en la gestió forestal. Aquesta animació no sols aporta dinamisme al lloc, sinó que també captura l’esperit innovador del projecte Transformit.

També vam integrar un mapa dinàmic que mostra les diferents zones dels “Living Labs”, àrees específiques on es duen a terme accions concretes per a la conservació de la biodiversitat i el desenvolupament de pràctiques forestals sostenibles. Aquest mapa permet als usuaris interactuar amb les diferents regions i obtenir informació detallada sobre els treballs que es realitzen a cadascuna.

El resultat final va ser un lloc web que combina una experiència visual atractiva amb una navegació intuïtiva, facilitant la difusió dels esforços del projecte Transformit.

Wildcard Project

admin on 04/04/2024

Client

European Forest Institute (EFI)

Any de creació

2024

Àmbits del projecte

Disseny web a mida Il·lustració i dibuix

Lloc web

wildcard-project.eu

Wilcard Project és un projecte de l’European Forest Institute que se centra en la regeneració natural d’ecosistemes afectats, promovent la restauració de la biodiversitat i l’equilibri dels entorns forestals. El disseny del lloc web havia de transmetre aquesta visió de renovació i connexió amb el medi ambient, tot mantenint una coherència amb la identitat corporativa del projecte.

Des de l’inici del projecte, vam optar per un enfocament visual que evocava els ecosistemes forestals mitjançant l’ús d’un collage que simbolitzava la diversitat i complexitat dels boscos. Per materialitzar aquest concepte, vam seleccionar amb cura una combinació de fotografies, textures i formes de color que representaven la riquesa dels paisatges naturals. Aquests elements gràfics es van utilitzar de manera consistent a tot el web, creant una estètica visual dinàmica i coherent que reflectia l’essència del projecte.

Els colors corporatius del Wilcard Project van servir com a base per al disseny, tot i que vam tenir llibertat creativa per desenvolupar elements gràfics addicionals. Aquesta llibertat ens va permetre explorar combinacions atrevides de textures i colors, reforçant el caràcter únic del projecte. Les imatges de la natura, juntament amb formes orgàniques i tons terrosos, es van integrar per donar vida al concepte de regeneració i creixement natural.

Un dels recursos destacats del lloc web va ser la integració de vídeos com a fons visuals, delimitats per traços de color que actuaven com a marcs. Això va aportar dinamisme a l’experiència de l’usuari, fent la pàgina més immersiva i ressaltant els elements visuals clau del projecte. Els vídeos mostraven de manera viva l’ecosistema en procés de regeneració, alineant-se perfectament amb la missió del Wilcard Project.

Un altre aspecte distintiu del disseny va ser l’ús de collages i infografies, que van permetre comunicar visualment els conceptes clau sobre la restauració d’ecosistemes. Per garantir la coherència visual, vam unificar els collages amb colors consistents, formes arrodonides i línies suaus. Aquesta combinació va ajudar a mantenir una harmonia visual al llarg del lloc web, creant una experiència gràfica atractiva i fluida per als usuaris.

El resultat final és una pàgina web que combina creativitat, funcionalitat i una forta identitat visual, oferint una plataforma que no només comunica la missió del Wilcard Project, sinó que també inspira els visitants a comprendre la importància de la regeneració d’ecosistemes danyats.

Verificat

admin on 19/02/2024

Client

Associació Verificat

Any de creació

2024

Àmbits del projecte

Disseny web a mida Estratègia web

Lloc web

verificat.cat

Verificat és un mitjà digital dedicat a la verificació de notícies, un aspecte crucial en l’era de la informació, on la proliferació de notícies falses i la desinformació exigeixen un treball rigorós i especialitzat. L’objectiu del projecte era modernitzar la seva plataforma en línia per millorar-ne la usabilitat, l’adaptabilitat i destacar més eficaçment la seva tasca en l’àmbit de la verificació de la informació.

El projecte es va desenvolupar en dues fases diferenciades:

En la primera fase, ens vam centrar en la migració completa del lloc web. Verificat comptava amb un web creat amb Expression Engine, i el principal repte va ser transferir tota la informació i estructura al sistema WordPress. Aquest procés va incloure l’exportació de tots els articles, assegurant-nos que cadascun mantingués les seves categories originals per preservar l’organització del contingut. A més, es van crear noves plantilles adaptades per a les diferents tipologies de pàgines.

Un cop el web va ser importat a WordPress, vam passar a la segona fase, que consistia en implementar el nou disseny. L’objectiu era optimitzar l’estructura de navegació i reorganitzar el contingut per millorar l’experiència de l’usuari. Es va crear un nou arbre de continguts que permetia una navegació més fluida i destacava clarament el treball de Verificat. La nova estructura no només facilitava la cerca d’informació, sinó que també posava èmfasi en les àrees clau de Verificat.

Pel que fa al disseny, vam respectar la imatge corporativa bàsica existent, però vam introduir millores significatives en termes d’usabilitat i adaptació al format digital. Una de les principals modificacions va ser el canvi de tipografia, escollint-ne una més adequada per a l’entorn web, la qual cosa va millorar tant la llegibilitat com l’estètica general del lloc. El disseny va seguir una línia simple i funcional, alineada amb els valors de claredat i precisió que defineixen Verificat. Es va prioritzar una estructura neta, que permetés una ràpida identificació de les seccions de contingut i facilités l’accés als articles verificats.

Per a la maquetació, vam utilitzar Gutenberg, l’editor visual natiu de WordPress, la qual cosa va permetre la creació d’un sistema modular flexible. Vam desenvolupar diversos mòduls reutilitzables per a les diferents pàgines, amb l’objectiu de facilitar a l’equip de Verificat la creació de noves pàgines i seccions en el futur, sense necessitat d’assistència tècnica externa. Aquest enfocament modular els proporciona una autonomia més gran per gestionar i actualitzar el contingut a mesura que el seu treball evoluciona.

El resultat final va ser una pàgina web moderna, intuïtiva i fàcil de gestionar, que no només va millorar la presentació de la informació, sinó que també va reforçar la identitat i la missió de Verificat com a referent en la verificació de notícies.

Santacreu Design

admin on 02/02/2024

Client

Santacreu Design

Any de creació

2024

Àmbits del projecte

Disseny web a mida

Lloc web

santacreudesign.com

Santacreu Design és un estudi d’interiorisme amb seu a Barcelona, reconegut pel seu enfocament en la creació d’espais elegants i funcionals per a clíniques dentals, òptiques i oficines. La primera versió de la seva pàgina web la vam desenvolupar l’any 2015, i tot i que en aquell moment complia les expectatives, especialment en termes de disseny i SEO, amb el temps va sorgir la necessitat d’una actualització per adaptar-se a un format més modern i funcional. L’objectiu del nou disseny era aprofitar els avantatges tècnics de WordPress, utilitzant l’editor Gutenberg, alhora que s’alineava l’estètica del web amb la nova identitat corporativa de l’estudi.

Amb el canvi d’identitat de marca, el disseny del web havia de reflectir una imatge renovada, amb un estil més contemporani. Es va triar una nova paleta de colors, inspirada en tons terrosos, per aportar una sensació càlida i sofisticada que s’ajustava a l’esperit dels projectes de Santacreu Design. Pel que fa a l’estil visual, vam optar per un enfocament minimalista, amb fotografies dels projectes organitzades en estructures de columnes, donant més protagonisme a les imatges i permetent que els detalls del treball de l’estudi fossin els principals elements visuals.

L’actualització del web també va incloure una nova presentació dels projectes de l’estudi. Es va augmentar la mida de les imatges, millorant-ne tant la qualitat com l’impacte visual, cosa que va permetre als visitants apreciar millor els detalls i acabats dels projectes d’interiorisme, reforçant la percepció de qualitat i professionalitat que caracteritza Santacreu Design.

Una altra millora clau va ser l’optimització del sistema de cerca de projectes. Es va reestructurar la manera d’organitzar els projectes, agrupant-los per categories per fer la navegació més intuïtiva i accessible. Això permetia als usuaris trobar més fàcilment els projectes que els interessaven, i alhora brindava al client una eina eficaç per mostrar la seva cartera de manera clara i categoritzada, millorant la usabilitat general del lloc.

En conjunt, el nou disseny del web de Santacreu Design no només va aconseguir una actualització visual coherent amb la nova identitat de la marca, sinó que també va millorar significativament l’experiència d’usuari i la funcionalitat del lloc.

ICC Spain

admin on 23/11/2023

Client

Comité Español Cámara de Comercio Internacional

Any de creació

2023

Àmbits del projecte

Disseny web a mida eCommerce

Lloc web

iccspain.org

El projecte per a la Cambra de Comerç Internacional ICC Espanya implicava la creació d’una plataforma web moderna i funcional, que reflectís la importància i el prestigi de la institució. La Cambra de Comerç Internacional és una xarxa global, i la versió espanyola necessitava una pàgina que no només complís amb els seus estàndards corporatius internacionals, sinó que també oferís funcionalitats específiques per als seus usuaris, com ara sistemes de cerca avançada, una botiga en línia i una zona privada.

En el procés de disseny i creació del nou web, vam plantejar des del començament tant el disseny visual com l’estructura dels continguts, assegurant una navegació clara i organitzada. L’objectiu era que la pàgina web servís com una eina de treball per als usuaris i membres de la Cambra, facilitant l’accés a la informació, la compra de recursos i la gestió del perfil d’usuari.

Pel disseny del web ens vam basar en la imatge corporativa d’ICC Espanya, seguint les pautes de colors i formats utilitzats en altres webs internacionals de les Cambres de Comerç. No obstant això, no ens vam limitar a replicar aquests elements, sinó que els vam adaptar i enriquir. Un dels elements distintius va ser l’ús de les línies en arc del logotip d’ICC Espanya com a base per desenvolupar diversos blocs del web. Aquestes línies es van integrar de manera creativa a la composició de la pàgina, aportant dinamisme i coherència visual. A més, vam incorporar imatges combinades amb blocs de contingut, cosa que va ajudar a estructurar la informació de manera clara i atractiva.

Una de les principals característiques del web és el sistema de cerca avançada, que permet als usuaris fer consultes sobre diverses temàtiques relacionades amb el comerç internacional i els serveis que ofereix la Cambra. Aquest sistema facilita la navegació i l’accés a informació rellevant, millorant l’experiència d’usuari.

A més, vam desenvolupar una botiga en línia integrada al web, on es poden comprar llibres i altres recursos relacionats amb el comerç i la normativa internacional. La botiga disposa d’un catàleg fàcilment navegable, cosa que permet als usuaris trobar i adquirir els productes de manera ràpida i senzilla.

El web també compta amb una zona privada per a usuaris, on els membres poden registrar-se, gestionar el seu perfil i accedir a contingut exclusiu. Aquesta àrea privada es va dissenyar amb un especial enfocament en la seguretat i facilitat d’ús, garantint que els usuaris poguessin navegar sense complicacions i fer gestions de manera autònoma.

Per últim, vam incloure un apartat d’esdeveniments, on els usuaris poden consultar informació sobre seminaris, conferències i altres activitats organitzades per la Cambra de Comerç. Aquest apartat compta amb un sistema de filtratge que permet cercar esdeveniments segons temàtiques, dates o altres criteris, millorant així l’accessibilitat i organització de la informació.

En conjunt, el disseny i desenvolupament del web de la Cambra de Comerç Internacional ICC Espanya va proporcionar una plataforma moderna, funcional i alineada amb els estàndards internacionals, oferint alhora eines avançades per millorar l’experiència dels usuaris i facilitar-ne les interaccions amb la institució.

Flors Lloveras

admin on 10/10/2023

Client

Flors Lloveras

Any de creació

2023

Àmbits del projecte

Disseny web a mida eCommerce Il·lustració i dibuix

Lloc web

florslloveras.com

Flors Lloveras és una floristeria amb una llarga tradició a Barcelona, coneguda per l’atenció al detall i la qualitat de les seves composicions florals. L’objectiu del projecte era crear una nova pàgina web que reflectís l’estil únic de la floristeria i, alhora, integrar la botiga en línia ja existent, millorant tant la seva funcionalitat com la seva aparença. El disseny havia de transmetre la delicadesa i bellesa de les flors, al mateix temps que proporcionava una experiència d’usuari intuïtiva i eficient.

Un dels elements clau del disseny va ser la incorporació d’una sèrie de dibuixos a llapis de detalls florals, que actuaven com a fil conductor al llarg de totes les pàgines del web. Aquests dibuixos, que evocaven la delicadesa i naturalitat de les flors, funcionaven com a elements decoratius i unificadors del disseny, aportant una identitat visual coherent i distintiva. Al costat d’aquests dibuixos, es van crear collages amb fotos seleccionades acuradament, que capturaven l’essència del treball artesanal de Flors Lloveras. Aquestes imatges no només mostraven els productes, sinó que també transmetien l’ambient i la dedicació de la floristeria, connectant emocionalment amb els usuaris.

Pel que fa als colors, es va adaptar la paleta corporativa de la floristeria, mantenint una coherència visual que respectés la seva identitat de marca. Es van combinar tons suaus i naturals per crear un disseny harmònic i elegant, en sintonia amb l’estil de Flors Lloveras.

El projecte presentava un repte particular: la floristeria ja comptava amb una botiga en línia que els propietaris volien mantenir. La nostra tasca va consistir en adaptar la botiga al nou disseny, garantint que el canvi estètic no afectés ni el funcionament ni l’experiència de l’usuari. A més, vam dur a terme una revisió global del funcionament de l’eCommerce per assegurar que estigués actualitzada i funcionant de manera òptima, tant en termes de rendiment tècnic com d’usabilitat.

El resultat va ser una pàgina web que combina un disseny elegant i emotiu amb una botiga en línia completament funcional. Aquesta solució va permetre a Flors Lloveras mantenir la seva presència digital actualitzada, oferint als seus clients una plataforma atractiva i fàcil d’usar per a la compra dels seus productes. La combinació d’elements gràfics, fotografies cuidades i una estructura intuïtiva de la botiga va destacar el treball artesanal i la dedicació d’aquesta floristeria.

Bioregions

admin on 04/07/2023

Client

European Forest Institute (EFI)

Any de creació

2023

Àmbits del projecte

Disseny web a mida

Lloc web

bioregions.efi.int

El projecte Bioregions promou la bioeconomia circular als boscos europeus, amb un enfocament innovador per a la gestió sostenible dels recursos forestals. El web original del client ja estava desenvolupat amb WordPress, però presentava problemes d’organització del contingut i de presentació de la informació segons els seus desitjos. Per aquesta raó, es va decidir refer completament el lloc web, mantenint WordPress com a base, però utilitzant l’editor Gutenberg, que permet una major autonomia en la gestió de continguts per part del client.

El nou disseny va ser una oportunitat perfecta per crear una imatge fresca i millor alineada amb els valors del projecte. Ens vam inspirar en el logotip de Bioregions, on es representa una fulla amb línies i punts arrodonits als vèrtexs. Aquestes formes es van convertir en l’eix visual del nou disseny, amb línies fines que creixien i es ramificaven, generant elements decoratius com fulles i punts. Aquestes figures es van integrar harmònicament al llarg de les pàgines, aportant dinamisme i creant una identitat visual coherent amb la temàtica de la bioeconomia i la sostenibilitat.

El disseny no es va limitar només a l’estètica, sinó que també va millorar la funcionalitat del web. Els elements gràfics es van combinar amb cura amb les imatges i els textos, creant composicions visuals que destacaven per la seva elegància i la capacitat de transmetre els missatges clau del projecte. Cada pàgina va adquirir una identitat pròpia, però mantenint una coherència visual que reflectia els objectius i valors de Bioregions.

Aquest enfocament va permetre crear un lloc web no només atractiu visualment, sinó també molt més funcional i fàcil de gestionar per al client, millorant significativament l’experiència d’usuari i la presentació dels continguts.

MARQuitectura

admin on 23/06/2023

Client

MARQuitectura

Any de creació

2023

Àmbits del projecte

Disseny web a mida Identitat corporativa

Lloc web

marq-sostenible.com

MARQuitectura és un estudi d’arquitectura amb seu a Barcelona, especialitzat en projectes d’arquitectura sostenible, compromès amb l’eficiència energètica i l’ús responsable dels recursos. Tot i la seva sòlida trajectòria en el sector, l’estudi necessitava renovar la seva pàgina web, que havia quedat obsoleta tant en disseny com en funcionalitat.

L’antic web no reflectia adequadament la qualitat i la visió de MARQuitectura. La navegació era confusa, ja que els continguts estaven separats entre la pàgina principal i un blog extern, fet que complicava l’experiència d’usuari i no transmetia una identitat visual coherent.

El projecte es va centrar en el disseny integral del lloc web, posant èmfasi en destacar visualment els projectes de l’estudi amb un enfocament net i modern. Es va apostar per donar protagonisme a imatges de gran format, aprofitant la galeria fotogràfica d’alta qualitat dels projectes destacats de MARQuitectura. Aquestes imatges es van combinar amb elements visuals sobris, com caixes de colors neutres, que harmonitzaven amb la paleta corporativa de l’estudi, respectant sempre la seva identitat visual.

A més del desenvolupament web, el projecte va incloure el redisseny del logotip. Basant-se en el concepte original, es van fer ajustaments per modernitzar-lo i donar-li un aspecte més suau i accessible. Les línies es van estilitzar cap a formes arrodonides i més amigables, mentre que la tipografia es va actualitzar per reflectir una imatge contemporània i professional.

Aquest nou web no només va millorar l’aspecte visual de la marca, sinó que també va simplificar la navegació i va reforçar la coherència de la identitat de MARQuitectura.

Tuber Label

admin on 20/06/2023

Client

Jasten Fröjen

Any de creació

2023

Àmbits del projecte

Disseny web a mida

Lloc web

tuberlabel.es

El projecte de Tuber Label va tenir com a objectiu desenvolupar una pàgina web que representés la implementació d’eines tecnològiques per al sector tofoner a Espanya. Ja comptàvem amb la imatge corporativa i el logotip proporcionats per l’agència Jasten Fröjen. Aquest logotip incloïa una trama que simulava les formes laberíntiques de les tòfones, i vam decidir expandir aquesta idea en el disseny visual del web. Inspirant-nos en aquestes formes, vam crear una sèrie de figures relacionades amb el món de la tòfona, que van aportar una identitat visual coherent i única al projecte.

Per al disseny del web, vam mantenir els colors corporatius establerts, amb el negre com a color de fons principal. Aquest fons fosc va permetre que la trama i les figures destacaren de manera elegant i cridanera. L’ús del negre no només va aportar un toc de sofisticació, sinó que també va reforçar la connexió visual amb les formes orgàniques de les tòfones, creant una estètica sòlida i coherent amb la marca.

Les figures dissenyades, basades en la trama del logotip, es van utilitzar de manera estratègica a les capçaleres del web, integrant-se de forma natural en el disseny general. Aquestes figures, que incloïen elements com un gos tofoner, una pala i referències al menjar gurmet, van reforçar la connexió visual amb el món de la tòfona, assegurant que la web reflectís clarament l’especialització del sector.

Aquest enfocament visual, combinat amb una estructura funcional, va aconseguir transmetre l’essència del negoci de Tuber Label, així com la seva connexió amb la natura i el treball artesanal entorn de la tòfona. La combinació d’un disseny acurat i l’ús estratègic d’elements visuals va fer que la web fos no només informativa i funcional, sinó també altament representativa de la identitat del projecte.