Projecte Fanzine<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Helvetica+Neue:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" \/>\n \n<\/head>\n<body>\n\n \n <nav>\n <a href=\"#hero\" class=\"nav-logo\">Pro<span><\/span>ject<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#hero\">Idea<\/a><\/li>\n <li><a href=\"#referents\">Referents<\/a><\/li>\n <li><a href=\"#proces\">Proc\u00e9s<\/a><\/li>\n <li><a href=\"#fanzine\">Fanzine<\/a><\/li>\n <li><a href=\"#video\">V\u00eddeo<\/a><\/li>\n <li><a href=\"#conclusions\">Conclusions<\/a><\/li>\n <\/ul>\n <\/nav>\n\n \n<section id=\"hero\">\n\n <div class=\"hero-content reveal\">\n\n <div class=\"section-label\">\n 01 \u2014 Idea\n <\/div>\n\n <h1 class=\"hero-title\">\n sobre<br><em>rodes<\/em>\n <\/h1>\n\n <span class=\"gold-line\"><\/span>\n\n <p class=\"hero-desc\">\n Aquest fanzine interactiu mostra la meva traject\u00f2ria en el hockey i tot el que aquest esport representa per mi: esfor\u00e7, entrenaments, emocions i experi\u00e8ncies.\n <\/p>\n\n <a href=\"#fanzine\" class=\"hero-cta\">\n Veure el Fanzine\n <\/a>\n\n\n\n\n\n\n<div class=\"idea-map\">\n\n <div class=\"idea-map-title\">\n Mapa d'idees\n <\/div>\n\n <div class=\"idea-nodes\">\n\n \n <button \n class=\"idea-node\" \n onclick=\"openPopup('tipografiaPopup')\"\n >\n Tipografia\n <\/button>\n\n \n <button \n class=\"idea-node\" \n onclick=\"openPopup('colorPopup')\"\n >\n Color\n <\/button>\n\n <\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n\n\n<div class=\"hero-image reveal\">\n\n <img decoding=\"async\" \n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/imagen-principal-web.jpg\" \n alt=\"Imatge principal del projecte\"\n class=\"hero-main-img\"\n >\n\n<\/div>\n\n<\/section>\n\n\n\n\n\n\n<div class=\"idea-popup-overlay\" id=\"tipografiaPopup\">\n\n <div class=\"idea-popup\">\n\n <button \n class=\"popup-close\"\n onclick=\"closePopup('tipografiaPopup')\"\n >\n \u00d7\n <\/button>\n\n <h3>Tipografia<\/h3>\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/tipografias.jpg\"\n alt=\"Tipografies\"\n class=\"popup-image\"\n >\n\n <\/div>\n\n<\/div>\n\n\n\n\n\n\n<div class=\"idea-popup-overlay\" id=\"colorPopup\">\n\n <div class=\"idea-popup color-popup\">\n\n <button \n class=\"popup-close\"\n onclick=\"closePopup('colorPopup')\"\n >\n \u00d7\n <\/button>\n\n <h3>Color<\/h3>\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Paleta-de-colores.jpg\"\n alt=\"Paleta de colors\"\n class=\"popup-image color-image\"\n >\n\n <\/div>\n\n<\/div>\n\n\n\n\n\n<script>\n\n\/* ABRIR POPUP *\/\nfunction openPopup(id) {\n\n document.getElementById(id).classList.add(\"active\");\n\n}\n\n\/* CERRAR POPUP *\/\nfunction closePopup(id) {\n\n document.getElementById(id).classList.remove(\"active\");\n\n}\n\n\/* CERRAR HACIENDO CLICK FUERA *\/\nwindow.addEventListener(\"click\", function(e) {\n\n document.querySelectorAll(\".idea-popup-overlay\").forEach(function(popup) {\n\n if (e.target === popup) {\n\n popup.classList.remove(\"active\");\n\n }\n\n });\n\n});\n\n<\/script>\n\n\n \n<section id=\"referents\">\n\n <div class=\"section-label reveal\">\n 02 \u2014 Referents\n <\/div>\n\n <h2 class=\"big-title reveal\">\n Referents<br>Visuals\n <\/h2>\n\n <span class=\"gold-line reveal\"><\/span>\n\n\n\n\n\n <div class=\"ref-grid\">\n\n \n <div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/referencia.jpg\"\n alt=\"Pinterest\"\n class=\"ref-image\"\n >\n\n <span class=\"ref-num\">01<\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n <a href=\"#\" target=\"_blank\">\n Portada hockey\n <\/a>\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inspirat en aquesta portada per fer la del meu fanzine\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n<div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ref-2-web.jpg\"\n alt=\"Google\"\n class=\"ref-image\"\n >\n\n <span class=\"ref-num\">\n 02\n <\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n\n <a href=\"#\" target=\"_blank\">\n Cartell hockey \n <\/a>\n\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inspirat per fer la p\u00e0gina 4-5 del meu fanzine\n <\/p>\n\n <\/div>\n\n<\/div>\n\n\n\n\n\n \n<div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/color-selectivo-ref-3-web.webp\"\n alt=\"Behance\"\n class=\"ref-image ref-03-image\"\n >\n\n <span class=\"ref-num\">\n 03\n <\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n\n <a href=\"#\" target=\"_blank\">\n selective color\n <\/a>\n\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inspirat en aquesta t\u00e8cnica de edici\u00f3 per destar en les fotografies del fanzine\n <\/p>\n\n <\/div>\n\n<\/div>\n\n\n\n \n<div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ref-4-web.jpg\"\n alt=\"Revistes\"\n class=\"ref-image\"\n >\n\n <span class=\"ref-num\">\n 04\n <\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n\n <a href=\"#\" target=\"_blank\">\n Trofeus\n <\/a>\n\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inpirat en la composici\u00f3 d'aquest cartell per fer una p\u00e0gina semblant en el meu fanzine\n <\/p>\n\n <\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"proces\">\n\n <div class=\"section-label reveal\">\n 03 \u2014 Proc\u00e9s de treball\n <\/div>\n\n <h2 class=\"big-title reveal\" style=\"color:var(--white);\">\n Evoluci\u00f3<br>del Projecte\n <\/h2>\n\n <span class=\"gold-line reveal\"><\/span>\n\n\n\n\n\n \n <div class=\"proces-tabs reveal\">\n\n <button class=\"tab-btn active\" onclick=\"switchTab('wire')\">\n Wireframes\n <\/button>\n\n <button class=\"tab-btn\" onclick=\"switchTab('mock')\">\n Mockups\n <\/button>\n\n <button class=\"tab-btn\" onclick=\"switchTab('guio')\">\n Gui\u00f3 d'Interacci\u00f3\n <\/button>\n\n <button class=\"tab-btn\" onclick=\"switchTab('final')\">\n Versi\u00f3 Final\n <\/button>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panels\">\n\n \n <div class=\"tab-panel active\" id=\"tab-wire\">\n\n <div class=\"panel-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/wireframe-proces.jpg\"\n alt=\"Wireframes\"\n class=\"proces-image\"\n >\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Wireframes<\/h3>\n\n <p>\n Al principi els wireframes estaven molt sobrecarregats i transmetien una sensaci\u00f3 massa est\u00e0tica que no m\u2019agradava. Per aix\u00f2 vaig simplificar la composici\u00f3, donant m\u00e9s protagonisme a les imatges i creant un disseny m\u00e9s net, fotogr\u00e0fic i amb m\u00e9s sensaci\u00f3 de moviment.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panel\" id=\"tab-mock\">\n\n <div class=\"panel-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/mockup-proces.jpg\"\n alt=\"Mockups\"\n class=\"proces-image\"\n >\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Mockups<\/h3>\n\n <p>\n Al principi el mockup estava massa sobrecarregat de colors i no m\u2019agradava com es veia, ja que tampoc mantenia el mateix estil gr\u00e0fic que la portada. Per aix\u00f2 vaig decidir simplificar-lo, utilitzant menys color i destacant nom\u00e9s els detalls grocs i negres, fusionant-los amb el fons blanc per aconseguir un disseny m\u00e9s net i coherent.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panel\" id=\"tab-guio\">\n\n <div class=\"panel-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/gui-interactiu-proces.jpg\"\n alt=\"Gui\u00f3\"\n class=\"proces-image\"\n >\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Gui\u00f3 d'Interacci\u00f3<\/h3>\n\n <p>\n Aquest \u00e9s un exemple del tipus d\u2019interaccions presents al projecte, pensades per fer la lectura m\u00e9s din\u00e0mica i visual. Elements com les fletxes, el v\u00eddeo o les imatges ajuden a crear una experi\u00e8ncia m\u00e9s interactiva i amb m\u00e9s moviment.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panel\" id=\"tab-final\">\n\n <div class=\"panel-img final-video\">\n\n <video\n class=\"proces-video\"\n autoplay\n muted\n loop\n playsinline\n controls\n >\n\n <source\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/video-animacion-1.mp4\"\n type=\"video\/mp4\"\n >\n\n <\/video>\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Versi\u00f3 Final<\/h3>\n\n <p>\n Aquest \u00e9s un exemple de la versi\u00f3 final del projecte, on es pot veure la combinaci\u00f3 entre composici\u00f3, imatges i moviment mantenint una est\u00e8tica neta, din\u00e0mica i coherent.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/section>\n\n \n\n \n<section id=\"fanzine\">\n\n <div class=\"fanzine-cover reveal\">\n\n <div class=\"fanzine-cover-img\">\n\n <img decoding=\"async\" \n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada-para-la-web.jpg\"\n alt=\"Portada del Fanzine\"\n class=\"fanzine-image\"\n >\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n <div class=\"fanzine-info reveal\">\n\n <div class=\"section-label\">\n 04 \u2014 Fanzine\n <\/div>\n\n <h2 class=\"big-title\">\n El<br>Fanzine\n <\/h2>\n\n <span class=\"gold-line\"><\/span>\n\n <p>\n Accedeix al fanzine complet. Una biografia explicant la meva experiencia en el hockey y tot el meu recorregut coma jugador\n <\/p>\n\n\n\n\n\n <a \n href=\"https:\/\/indd.adobe.com\/view\/0efaebcb-63fa-4cf2-b959-426ea1d3d16c\"\n class=\"btn-primary\"\n target=\"_blank\"\n >\n\n Obrir Fanzine\n\n <svg \n width=\"16\" \n height=\"16\" \n viewBox=\"0 0 24 24\" \n fill=\"none\" \n stroke=\"currentColor\" \n stroke-width=\"2.5\"\n >\n\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n <polyline points=\"12 5 19 12 12 19\"\/>\n\n <\/svg>\n\n <\/a>\n\n <\/div>\n\n<\/section>\n\n\n \n<section id=\"video\">\n\n <div class=\"section-label reveal\">\n 05 \u2014 V\u00eddeo Tour\n <\/div>\n\n <h2 class=\"big-title reveal\">\n VIDEOTOUR<br>del Fanzine\n <\/h2>\n\n <span class=\"gold-line reveal\"><\/span>\n\n\n\n\n\n <div class=\"video-wrapper reveal\">\n\n <iframe\n src=\"https:\/\/www.youtube.com\/embed\/f_Ovd1zp_2Q\"\n title=\"Videotour del Fanzine\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n style=\"\n width:100%;\n height:100%;\n border:none;\n border-radius:10px;\n \"\n ><\/iframe>\n\n <\/div>\n\n<\/section>\n\n \n <section id=\"conclusions\">\n <div class=\"section-label reveal\">06 \u2014 Conclusions<\/div>\n <h2 class=\"big-title reveal\">Reflexi\u00f3<br>Final<\/h2>\n <span class=\"gold-line reveal\"><\/span>\n\n <div class=\"conclusions-grid\">\n\n <div class=\"conclusion-card reveal\">\n \n <h3>Reflexi\u00f3<\/h3>\n <p>Aquest projecte m'ha ajudat a conectar la meva pasi\u00f3 per el hockey amb el disseny interaciu, a part durant el proces he apr\u00e9s a simplificar el contingut y donar m\u00e9s importancia a les imatges y a crear una estetica coherent i din\u00e0mica Estic satisfet amb el resultat final perque considero que he aconseguit transmetre el moviment, l'energia i l'identitat del hockey.<\/p>\n <\/div>\n\n <\/div>\n <\/section>\n\n <script>\n \/* \u2500\u2500 TAB SWITCHER \u2500\u2500 *\/\n function switchTab(id) {\n document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));\n document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n document.getElementById('tab-' + id).classList.add('active');\n event.currentTarget.classList.add('active');\n }\n\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n observer.unobserve(e.target);\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n <\/script>\n \n <script>\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 POPUPS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* ABRIR POPUP *\/\nfunction openPopup(id) {\n\n document.getElementById(id).classList.add(\"active\");\n\n}\n\n\/* CERRAR POPUP *\/\nfunction closePopup(id) {\n\n document.getElementById(id).classList.remove(\"active\");\n\n}\n\n\/* CERRAR HACIENDO CLICK FUERA *\/\nwindow.addEventListener(\"click\", function(e) {\n\n document.querySelectorAll(\".idea-popup-overlay\").forEach(function(popup) {\n\n if (e.target === popup) {\n\n popup.classList.remove(\"active\");\n\n }\n\n });\n\n});\n\n\n\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TAB SWITCHER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\nfunction switchTab(id) {\n\n document.querySelectorAll('.tab-panel').forEach(p => \n p.classList.remove('active')\n );\n\n document.querySelectorAll('.tab-btn').forEach(b => \n b.classList.remove('active')\n );\n\n document.getElementById('tab-' + id).classList.add('active');\n\n event.currentTarget.classList.add('active');\n\n}\n\n\n\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCROLL REVEAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\nconst observer = new IntersectionObserver((entries) => {\n\n entries.forEach(e => {\n\n if (e.isIntersecting) {\n\n e.target.classList.add('visible');\n\n observer.unobserve(e.target);\n\n }\n\n });\n\n}, { threshold: 0.1 });\n\ndocument.querySelectorAll('.reveal').forEach(el => \n observer.observe(el)\n);\n\n\n\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAV ACTIVO SEG\u00daN SECCI\u00d3N \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n\n const sections = document.querySelectorAll(\"section\");\n\n const navLinks = document.querySelectorAll(\".nav-links a\");\n\n window.addEventListener(\"scroll\", () => {\n\n let current = \"\";\n\n sections.forEach(section => {\n\n const sectionTop = section.offsetTop - 300;\n const sectionHeight = section.offsetHeight;\n\n if (window.scrollY >= sectionTop &&\n window.scrollY < sectionTop + sectionHeight) {\n\n current = section.getAttribute(\"id\");\n\n }\n\n });\n\n navLinks.forEach(link => {\n\n link.classList.remove(\"active\");\n\n if (link.getAttribute(\"href\") === \"#\" + current) {\n\n link.classList.add(\"active\");\n\n }\n\n });\n\n });\n\n});\n\n<\/script>\n \n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Projecte Fanzine Project Idea Referents Proc\u00e9s Fanzine V\u00eddeo Conclusions 01 \u2014 Idea sobrerodes Aquest fanzine interactiu mostra la meva traject\u00f2ria en el hockey i tot el que aquest esport representa per mi: esfor\u00e7, entrenaments, emocions i experi\u00e8ncies. Veure el Fanzine Mapa d’idees Tipografia Color \u00d7 Tipografia \u00d7 Color 02 \u2014 Referents ReferentsVisuals 01 Portada hockey […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":362,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":551,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/551"}],"wp:attachment":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Projecte Fanzine<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Helvetica+Neue:wght@300;400;500;700&display=swap\" rel=\"stylesheet\" \/>\n \n<\/head>\n<body>\n\n \n <nav>\n <a href=\"#hero\" class=\"nav-logo\">Pro<span><\/span>ject<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#hero\">Idea<\/a><\/li>\n <li><a href=\"#referents\">Referents<\/a><\/li>\n <li><a href=\"#proces\">Proc\u00e9s<\/a><\/li>\n <li><a href=\"#fanzine\">Fanzine<\/a><\/li>\n <li><a href=\"#video\">V\u00eddeo<\/a><\/li>\n <li><a href=\"#conclusions\">Conclusions<\/a><\/li>\n <\/ul>\n <\/nav>\n\n \n<section id=\"hero\">\n\n <div class=\"hero-content reveal\">\n\n <div class=\"section-label\">\n 01 \u2014 Idea\n <\/div>\n\n <h1 class=\"hero-title\">\n sobre<br><em>rodes<\/em>\n <\/h1>\n\n <span class=\"gold-line\"><\/span>\n\n <p class=\"hero-desc\">\n Aquest fanzine interactiu mostra la meva traject\u00f2ria en el hockey i tot el que aquest esport representa per mi: esfor\u00e7, entrenaments, emocions i experi\u00e8ncies.\n <\/p>\n\n <a href=\"#fanzine\" class=\"hero-cta\">\n Veure el Fanzine\n <\/a>\n\n\n\n\n\n\n<div class=\"idea-map\">\n\n <div class=\"idea-map-title\">\n Mapa d'idees\n <\/div>\n\n <div class=\"idea-nodes\">\n\n \n <button \n class=\"idea-node\" \n onclick=\"openPopup('tipografiaPopup')\"\n >\n Tipografia\n <\/button>\n\n \n <button \n class=\"idea-node\" \n onclick=\"openPopup('colorPopup')\"\n >\n Color\n <\/button>\n\n <\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n\n\n\n<div class=\"hero-image reveal\">\n\n <img decoding=\"async\" \n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/imagen-principal-web.jpg\" \n alt=\"Imatge principal del projecte\"\n class=\"hero-main-img\"\n >\n\n<\/div>\n\n<\/section>\n\n\n\n\n\n\n<div class=\"idea-popup-overlay\" id=\"tipografiaPopup\">\n\n <div class=\"idea-popup\">\n\n <button \n class=\"popup-close\"\n onclick=\"closePopup('tipografiaPopup')\"\n >\n \u00d7\n <\/button>\n\n <h3>Tipografia<\/h3>\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/tipografias.jpg\"\n alt=\"Tipografies\"\n class=\"popup-image\"\n >\n\n <\/div>\n\n<\/div>\n\n\n\n\n\n\n<div class=\"idea-popup-overlay\" id=\"colorPopup\">\n\n <div class=\"idea-popup color-popup\">\n\n <button \n class=\"popup-close\"\n onclick=\"closePopup('colorPopup')\"\n >\n \u00d7\n <\/button>\n\n <h3>Color<\/h3>\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/Paleta-de-colores.jpg\"\n alt=\"Paleta de colors\"\n class=\"popup-image color-image\"\n >\n\n <\/div>\n\n<\/div>\n\n\n\n\n\n<script>\n\n\/* ABRIR POPUP *\/\nfunction openPopup(id) {\n\n document.getElementById(id).classList.add(\"active\");\n\n}\n\n\/* CERRAR POPUP *\/\nfunction closePopup(id) {\n\n document.getElementById(id).classList.remove(\"active\");\n\n}\n\n\/* CERRAR HACIENDO CLICK FUERA *\/\nwindow.addEventListener(\"click\", function(e) {\n\n document.querySelectorAll(\".idea-popup-overlay\").forEach(function(popup) {\n\n if (e.target === popup) {\n\n popup.classList.remove(\"active\");\n\n }\n\n });\n\n});\n\n<\/script>\n\n\n \n<section id=\"referents\">\n\n <div class=\"section-label reveal\">\n 02 \u2014 Referents\n <\/div>\n\n <h2 class=\"big-title reveal\">\n Referents<br>Visuals\n <\/h2>\n\n <span class=\"gold-line reveal\"><\/span>\n\n\n\n\n\n <div class=\"ref-grid\">\n\n \n <div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/referencia.jpg\"\n alt=\"Pinterest\"\n class=\"ref-image\"\n >\n\n <span class=\"ref-num\">01<\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n <a href=\"#\" target=\"_blank\">\n Portada hockey\n <\/a>\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inspirat en aquesta portada per fer la del meu fanzine\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n<div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ref-2-web.jpg\"\n alt=\"Google\"\n class=\"ref-image\"\n >\n\n <span class=\"ref-num\">\n 02\n <\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n\n <a href=\"#\" target=\"_blank\">\n Cartell hockey \n <\/a>\n\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inspirat per fer la p\u00e0gina 4-5 del meu fanzine\n <\/p>\n\n <\/div>\n\n<\/div>\n\n\n\n\n\n \n<div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/color-selectivo-ref-3-web.webp\"\n alt=\"Behance\"\n class=\"ref-image ref-03-image\"\n >\n\n <span class=\"ref-num\">\n 03\n <\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n\n <a href=\"#\" target=\"_blank\">\n selective color\n <\/a>\n\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inspirat en aquesta t\u00e8cnica de edici\u00f3 per destar en les fotografies del fanzine\n <\/p>\n\n <\/div>\n\n<\/div>\n\n\n\n \n<div class=\"ref-card reveal\">\n\n <div class=\"ref-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/ref-4-web.jpg\"\n alt=\"Revistes\"\n class=\"ref-image\"\n >\n\n <span class=\"ref-num\">\n 04\n <\/span>\n\n <\/div>\n\n <div class=\"ref-body\">\n\n <div class=\"ref-name\">\n\n <a href=\"#\" target=\"_blank\">\n Trofeus\n <\/a>\n\n <\/div>\n\n <p class=\"ref-desc\">\n M'he inpirat en la composici\u00f3 d'aquest cartell per fer una p\u00e0gina semblant en el meu fanzine\n <\/p>\n\n <\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<section id=\"proces\">\n\n <div class=\"section-label reveal\">\n 03 \u2014 Proc\u00e9s de treball\n <\/div>\n\n <h2 class=\"big-title reveal\" style=\"color:var(--white);\">\n Evoluci\u00f3<br>del Projecte\n <\/h2>\n\n <span class=\"gold-line reveal\"><\/span>\n\n\n\n\n\n \n <div class=\"proces-tabs reveal\">\n\n <button class=\"tab-btn active\" onclick=\"switchTab('wire')\">\n Wireframes\n <\/button>\n\n <button class=\"tab-btn\" onclick=\"switchTab('mock')\">\n Mockups\n <\/button>\n\n <button class=\"tab-btn\" onclick=\"switchTab('guio')\">\n Gui\u00f3 d'Interacci\u00f3\n <\/button>\n\n <button class=\"tab-btn\" onclick=\"switchTab('final')\">\n Versi\u00f3 Final\n <\/button>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panels\">\n\n \n <div class=\"tab-panel active\" id=\"tab-wire\">\n\n <div class=\"panel-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/wireframe-proces.jpg\"\n alt=\"Wireframes\"\n class=\"proces-image\"\n >\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Wireframes<\/h3>\n\n <p>\n Al principi els wireframes estaven molt sobrecarregats i transmetien una sensaci\u00f3 massa est\u00e0tica que no m\u2019agradava. Per aix\u00f2 vaig simplificar la composici\u00f3, donant m\u00e9s protagonisme a les imatges i creant un disseny m\u00e9s net, fotogr\u00e0fic i amb m\u00e9s sensaci\u00f3 de moviment.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panel\" id=\"tab-mock\">\n\n <div class=\"panel-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/mockup-proces.jpg\"\n alt=\"Mockups\"\n class=\"proces-image\"\n >\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Mockups<\/h3>\n\n <p>\n Al principi el mockup estava massa sobrecarregat de colors i no m\u2019agradava com es veia, ja que tampoc mantenia el mateix estil gr\u00e0fic que la portada. Per aix\u00f2 vaig decidir simplificar-lo, utilitzant menys color i destacant nom\u00e9s els detalls grocs i negres, fusionant-los amb el fons blanc per aconseguir un disseny m\u00e9s net i coherent.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panel\" id=\"tab-guio\">\n\n <div class=\"panel-img\">\n\n <img decoding=\"async\"\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/gui-interactiu-proces.jpg\"\n alt=\"Gui\u00f3\"\n class=\"proces-image\"\n >\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Gui\u00f3 d'Interacci\u00f3<\/h3>\n\n <p>\n Aquest \u00e9s un exemple del tipus d\u2019interaccions presents al projecte, pensades per fer la lectura m\u00e9s din\u00e0mica i visual. Elements com les fletxes, el v\u00eddeo o les imatges ajuden a crear una experi\u00e8ncia m\u00e9s interactiva i amb m\u00e9s moviment.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n \n <div class=\"tab-panel\" id=\"tab-final\">\n\n <div class=\"panel-img final-video\">\n\n <video\n class=\"proces-video\"\n autoplay\n muted\n loop\n playsinline\n controls\n >\n\n <source\n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/video-animacion-1.mp4\"\n type=\"video\/mp4\"\n >\n\n <\/video>\n\n <\/div>\n\n <div class=\"panel-text\">\n\n <h3>Versi\u00f3 Final<\/h3>\n\n <p>\n Aquest \u00e9s un exemple de la versi\u00f3 final del projecte, on es pot veure la combinaci\u00f3 entre composici\u00f3, imatges i moviment mantenint una est\u00e8tica neta, din\u00e0mica i coherent.\n <\/p>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n<\/section>\n\n \n\n \n<section id=\"fanzine\">\n\n <div class=\"fanzine-cover reveal\">\n\n <div class=\"fanzine-cover-img\">\n\n <img decoding=\"async\" \n src=\"https:\/\/25014.ooteca.artedra.net\/wp-content\/uploads\/2026\/05\/portada-para-la-web.jpg\"\n alt=\"Portada del Fanzine\"\n class=\"fanzine-image\"\n >\n\n <\/div>\n\n <\/div>\n\n\n\n\n\n <div class=\"fanzine-info reveal\">\n\n <div class=\"section-label\">\n 04 \u2014 Fanzine\n <\/div>\n\n <h2 class=\"big-title\">\n El<br>Fanzine\n <\/h2>\n\n <span class=\"gold-line\"><\/span>\n\n <p>\n Accedeix al fanzine complet. Una biografia explicant la meva experiencia en el hockey y tot el meu recorregut coma jugador\n <\/p>\n\n\n\n\n\n <a \n href=\"https:\/\/indd.adobe.com\/view\/0efaebcb-63fa-4cf2-b959-426ea1d3d16c\"\n class=\"btn-primary\"\n target=\"_blank\"\n >\n\n Obrir Fanzine\n\n <svg \n width=\"16\" \n height=\"16\" \n viewBox=\"0 0 24 24\" \n fill=\"none\" \n stroke=\"currentColor\" \n stroke-width=\"2.5\"\n >\n\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n <polyline points=\"12 5 19 12 12 19\"\/>\n\n <\/svg>\n\n <\/a>\n\n <\/div>\n\n<\/section>\n\n\n \n<section id=\"video\">\n\n <div class=\"section-label reveal\">\n 05 \u2014 V\u00eddeo Tour\n <\/div>\n\n <h2 class=\"big-title reveal\">\n VIDEOTOUR<br>del Fanzine\n <\/h2>\n\n <span class=\"gold-line reveal\"><\/span>\n\n\n\n\n\n <div class=\"video-wrapper reveal\">\n\n <iframe\n src=\"https:\/\/www.youtube.com\/embed\/f_Ovd1zp_2Q\"\n title=\"Videotour del Fanzine\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen\n style=\"\n width:100%;\n height:100%;\n border:none;\n border-radius:10px;\n \"\n ><\/iframe>\n\n <\/div>\n\n<\/section>\n\n \n <section id=\"conclusions\">\n <div class=\"section-label reveal\">06 \u2014 Conclusions<\/div>\n <h2 class=\"big-title reveal\">Reflexi\u00f3<br>Final<\/h2>\n <span class=\"gold-line reveal\"><\/span>\n\n <div class=\"conclusions-grid\">\n\n <div class=\"conclusion-card reveal\">\n \n <h3>Reflexi\u00f3<\/h3>\n <p>Aquest projecte m'ha ajudat a conectar la meva pasi\u00f3 per el hockey amb el disseny interaciu, a part durant el proces he apr\u00e9s a simplificar el contingut y donar m\u00e9s importancia a les imatges y a crear una estetica coherent i din\u00e0mica Estic satisfet amb el resultat final perque considero que he aconseguit transmetre el moviment, l'energia i l'identitat del hockey.<\/p>\n <\/div>\n\n <\/div>\n <\/section>\n\n <script>\n \/* \u2500\u2500 TAB SWITCHER \u2500\u2500 *\/\n function switchTab(id) {\n document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));\n document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\n document.getElementById('tab-' + id).classList.add('active');\n event.currentTarget.classList.add('active');\n }\n\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n observer.unobserve(e.target);\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n <\/script>\n \n <script>\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 POPUPS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* ABRIR POPUP *\/\nfunction openPopup(id) {\n\n document.getElementById(id).classList.add(\"active\");\n\n}\n\n\/* CERRAR POPUP *\/\nfunction closePopup(id) {\n\n document.getElementById(id).classList.remove(\"active\");\n\n}\n\n\/* CERRAR HACIENDO CLICK FUERA *\/\nwindow.addEventListener(\"click\", function(e) {\n\n document.querySelectorAll(\".idea-popup-overlay\").forEach(function(popup) {\n\n if (e.target === popup) {\n\n popup.classList.remove(\"active\");\n\n }\n\n });\n\n});\n\n\n\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TAB SWITCHER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\nfunction switchTab(id) {\n\n document.querySelectorAll('.tab-panel').forEach(p => \n p.classList.remove('active')\n );\n\n document.querySelectorAll('.tab-btn').forEach(b => \n b.classList.remove('active')\n );\n\n document.getElementById('tab-' + id).classList.add('active');\n\n event.currentTarget.classList.add('active');\n\n}\n\n\n\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCROLL REVEAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\nconst observer = new IntersectionObserver((entries) => {\n\n entries.forEach(e => {\n\n if (e.isIntersecting) {\n\n e.target.classList.add('visible');\n\n observer.unobserve(e.target);\n\n }\n\n });\n\n}, { threshold: 0.1 });\n\ndocument.querySelectorAll('.reveal').forEach(el => \n observer.observe(el)\n);\n\n\n\n\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAV ACTIVO SEG\u00daN SECCI\u00d3N \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n\n const sections = document.querySelectorAll(\"section\");\n\n const navLinks = document.querySelectorAll(\".nav-links a\");\n\n window.addEventListener(\"scroll\", () => {\n\n let current = \"\";\n\n sections.forEach(section => {\n\n const sectionTop = section.offsetTop - 300;\n const sectionHeight = section.offsetHeight;\n\n if (window.scrollY >= sectionTop &&\n window.scrollY < sectionTop + sectionHeight) {\n\n current = section.getAttribute(\"id\");\n\n }\n\n });\n\n navLinks.forEach(link => {\n\n link.classList.remove(\"active\");\n\n if (link.getAttribute(\"href\") === \"#\" + current) {\n\n link.classList.add(\"active\");\n\n }\n\n });\n\n });\n\n});\n\n<\/script>\n \n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Projecte Fanzine Project Idea Referents Proc\u00e9s Fanzine V\u00eddeo Conclusions 01 \u2014 Idea sobrerodes Aquest fanzine interactiu mostra la meva traject\u00f2ria en el hockey i tot el que aquest esport representa per mi: esfor\u00e7, entrenaments, emocions i experi\u00e8ncies. Veure el Fanzine Mapa d’idees Tipografia Color \u00d7 Tipografia \u00d7 Color 02 \u2014 Referents ReferentsVisuals 01 Portada hockey […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":362,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":551,"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/551"}],"wp:attachment":[{"href":"https:\/\/25014.ooteca.artedra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}