{"id":40861,"date":"2021-10-15T15:10:02","date_gmt":"2021-10-15T15:10:02","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tendencias-en-diseno-web-2022\/"},"modified":"2026-04-21T07:23:40","modified_gmt":"2026-04-21T07:23:40","slug":"tendencies-disseny-web-2022","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/ca\/blog\/tendencies-disseny-web-2022\/","title":{"rendered":"Tend\u00e8ncies en disseny web 2022"},"content":{"rendered":"

Benvinguts al nostre rep\u00e0s anual de les tend\u00e8ncies en disseny web 2022<\/strong>, un dels grans fonaments de la creaci\u00f3 i desenvolupament de p\u00e0gines web.<\/strong> Aqu\u00ed comencem un viatge per algunes de les tend\u00e8ncies que marcaran el disseny web aquest 2022<\/strong>.<\/p>\n

No esperis trobar un resum de les tend\u00e8ncies<\/strong> a la primera l\u00ednia: no siguis mandr\u00f3s i dedica una estona a llegir i assimilar els conceptes que hem preparat perqu\u00e8 et serveixin d\u2019inspiraci\u00f3 i guia creativa.<\/p>\n

A la nova edici\u00f3 analitzem les tend\u00e8ncies de disseny web 2026<\/a> que definiran el futur visual d\u2019Internet.<\/h6>\n

Anirem desgranant una a una les tend\u00e8ncies en disseny web 2022<\/strong>: t\u2019explicar\u00e9 les seves particularitats, et donar\u00e9 consells clau per aplicar-les, veurem quin resultat pots aconseguir i, per acabar, cada tend\u00e8ncia<\/strong> es tanca amb tres exemples reals amb imatges, algun v\u00eddeo i l\u2019enlla\u00e7 per veure la web<\/strong> en directe.<\/p>\n

Totes les webs que veurem s\u00f3n reals i ja estan publicades, aix\u00ed que parlem de dissenys molt avan\u00e7ats<\/strong> on ja s\u2019han aplicat tend\u00e8ncies que marcaran el pr\u00f2xim any.<\/p>\n

[superfeatured]10346[\/superfeatured]<\/p>\n

[nlform]<\/p>\n

Posts d\u2019anys anteriors que et poden interessar:\u00a0Tend\u00e8ncies en disseny web 2021<\/a>\u00a0–\u00a0Tend\u00e8ncies en disseny web 2020<\/a>\u00a0– Tend\u00e8ncies en disseny web 2019<\/a> –\u00a0Tend\u00e8ncies en disseny web 2018<\/a> – Tend\u00e8ncies en disseny web 2016<\/a><\/p>\n

Tend\u00e8ncies en disseny web 2022<\/h2>\n

Custom cursor i interacci\u00f3<\/h3>\n

Com i quan aplicar-ho<\/h4>\n

Aplica aquesta tend\u00e8ncia en webs que:<\/p>\n

    \n
  1. Vagin dirigides a tot tipus de p\u00fablic<\/li>\n
  2. Vulguin mostrar el potencial de l\u2019empresa<\/li>\n
  3. Busquin aquest extra de personalitzaci\u00f3 per destacar-se<\/li>\n<\/ol>\n

    Recorda:<\/strong><\/p>\n

    Cada projecte t\u00e9 les seves pr\u00f2pies necessitats<\/p>\n

    El disseny i el desenvolupament han de ser impecables, sense perdre flu\u00efdesa<\/p>\n

    Cal plantejar aquesta opci\u00f3 des de l\u2019inici i anticipar possibles problemes<\/p>\n

    Webs que incorporen la tend\u00e8ncia<\/h4>\n

    AWDAGENCY by\u00a0<\/strong>AWDAGENCY d\u2019It\u00e0lia<\/strong><\/p>\n

    \"tendencias-diseno-web-2022-awd-agency-01\" \"tendencias-diseno-web-2022-awd-agency-02\" \"tendencias-diseno-web-2022-awd-agency-03\"<\/p>\n

    Enlla\u00e7 a la web<\/a><\/p>\n

    En aquest exemple veiem una aplicaci\u00f3 impecable del cursor personalitzat i la seva interacci\u00f3 amb els elements de la p\u00e0gina.<\/p>\n

     <\/p>\n

    LJCOM by 148-agency from France<\/strong><\/p>\n

    \"tendencias-diseno-web-ljcom-02\" \"tendencias-diseno-web-ljcom-04\" \"\" \"tendencias-diseno-web-ljcom-01\"<\/p>\n

    Enlla\u00e7 a la web<\/a><\/p>\n

    Una altra web que figura entre les millors de l\u2019any<\/strong> i que ja incorpora el cursor personalitzat i la interacci\u00f3 entre el cursor i els elements de la p\u00e0gina.<\/p>\n

     <\/p>\n

    BEHORDE by Nextpage from Ukraine and Alex Seagull<\/strong><\/p>\n

    \"tendencias-diseno-web-behorde-01\" \"tendencias-diseno-web-behorde-02\" \"tendencias-diseno-web-behorde-03\" \"tendencias-diseno-web-behorde-04\"<\/p>\n

    Enlla\u00e7 a la web<\/a><\/p>\n

    I per acabar, un exemple de cursor interactiu molt m\u00e9s subtil i elegant, que reacciona de manera atractiva quan passa per sobre dels elements clau del disseny web<\/strong>.<\/p>\n

    <\/h3>\n

    Animacions amb Overflow<\/h3>\n

    Com i quan aplicar-ho<\/h4>\n

    Aplica aquesta tend\u00e8ncia en webs que:<\/p>\n

      \n
    1. Disposin d\u2019una hero home potent<\/li>\n
    2. Donin protagonisme a la tipografia<\/li>\n
    3. Vulguin mostrar el contingut de manera din\u00e0mica<\/li>\n<\/ol>\n

      Recorda:<\/strong><\/p>\n

        \n
      1. El desenvolupament ha de ser perfecte per mantenir la flu\u00efdesa<\/li>\n
      2. Nom\u00e9s apte per a maquetadors professionals<\/li>\n
      3. Ha d\u2019aportar valor real al projecte<\/li>\n<\/ol>\n

        Webs que incorporen la tend\u00e8ncia<\/h4>\n

        AVANTT TYPEFACE by Creative Nights from Czech Republic<\/strong><\/p>\n

        \"tendencias-diseno-web-avant-typeface-01\" \"tendencias-diseno-web-avant-typeface-02\"<\/p>\n