{"id":2141,"date":"2026-02-13T19:03:42","date_gmt":"2026-02-13T19:03:42","guid":{"rendered":"https:\/\/neonoova.com\/manual-destil-web-la-base-dun-disseny-coherent-i-professional\/"},"modified":"2026-08-21T11:33:34","modified_gmt":"2026-08-21T11:33:34","slug":"manual-destil-web-la-base-dun-disseny-coherent-i-professional","status":"publish","type":"post","link":"https:\/\/neonoova.com\/ca\/manual-destil-web-la-base-dun-disseny-coherent-i-professional\/","title":{"rendered":"Manual d&#8217;estil web: la base d&#8217;un disseny coherent i professional"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Un <strong>manual d&#8217;estil web<\/strong> \u00e9s un document que defineix les regles visuals, estructurals i tonals que un lloc web ha de seguir per mantenir una <a href=\"https:\/\/neonoova.com\/ca\/disseny-grafic\/identitat-corporativa\/\" data-type=\"diseno-grafico\" data-id=\"234\">identitat coherent<\/a> a totes les seves p\u00e0gines. El seu objectiu \u00e9s alinear disseny, contingut i desenvolupament, de manera que qualsevol persona que cre\u00ef o actualitzi el lloc web s\u00e0piga exactament com fer-ho sense trencar l&#8217;est\u00e8tica ni l&#8217;experi\u00e8ncia d&#8217;usuari. <\/p>\n\n<p class=\"wp-block-paragraph\">Disposar d&#8217;un manual d&#8217;estil web ben definit \u00e9s clau per a les marques que volen escalar la seva pres\u00e8ncia digital, mantenir la coher\u00e8ncia entre diferents projectes i treballar amb equips interns o externs sense perdre el control de la identitat.<\/p>\n        <div class=\"doflex docolumn banner-contacto-blog\">\n            <div class=\"doflex docolumn gap20 columna-banner\">\n               <div class=\"doflex dospace gap20\"><img decoding=\"async\" src=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/06\/bot.webp\" alt=\"neonoova bot\">\n\t\t\t\t<p class=\"text24-24 negrita\">Disseny web personalitzat professional. Oblida&#039;t dels llocs web sense \u00e0nima <\/p>\n\t\t\t\t<\/div>\n                <button class=\"home-slider-cuadricula-button text18-21 abrir-popup-contacto\" type=\"button\">\n                    Contacta&#039;ns\n                    <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <mask id=\"path-1-inside-1_40_843\" fill=\"white\">\n                            <path d=\"M30 15L15 30L10 25L16.4619 18.5371H3.53711L0 15L3.53711 11.4629H16.4619L10 5L15 0L30 15Z\"\/>\n                        <\/mask>\n                        <path d=\"M30 15L30.7071 15.7071C31.0976 15.3166 31.0976 14.6834 30.7071 14.2929L30 15ZM15 30L14.2929 30.7071C14.6834 31.0976 15.3166 31.0976 15.7071 30.7071L15 30ZM10 25L9.29284 24.2929C8.90237 24.6835 8.90239 25.3166 9.29289 25.7071L10 25ZM16.4619 18.5371L17.1691 19.2442C17.455 18.9582 17.5406 18.528 17.3858 18.1544C17.231 17.7807 16.8664 17.5371 16.4619 17.5371V18.5371ZM3.53711 18.5371L2.83 19.2442C3.01754 19.4318 3.27189 19.5371 3.53711 19.5371V18.5371ZM0 15L-0.707107 14.2929C-1.09763 14.6834 -1.09763 15.3166 -0.707107 15.7071L0 15ZM3.53711 11.4629V10.4629C3.27189 10.4629 3.01754 10.5682 2.83 10.7558L3.53711 11.4629ZM16.4619 11.4629V12.4629C16.8664 12.4629 17.231 12.2193 17.3858 11.8456C17.5406 11.472 17.455 11.0418 17.1691 10.7558L16.4619 11.4629ZM10 5L9.29289 4.29289C8.90239 4.6834 8.90237 5.31652 9.29284 5.70705L10 5ZM15 0L15.7071 -0.707107C15.3166 -1.09763 14.6834 -1.09763 14.2929 -0.707107L15 0ZM30 15L29.2929 14.2929L14.2929 29.2929L15 30L15.7071 30.7071L30.7071 15.7071L30 15ZM15 30L15.7071 29.2929L10.7071 24.2929L10 25L9.29289 25.7071L14.2929 30.7071L15 30ZM10 25L10.7072 25.7071L17.1691 19.2442L16.4619 18.5371L15.7548 17.8301L9.29284 24.2929L10 25ZM16.4619 18.5371V17.5371H3.53711V18.5371V19.5371H16.4619V18.5371ZM3.53711 18.5371L4.24422 17.83L0.707107 14.2929L0 15L-0.707107 15.7071L2.83 19.2442L3.53711 18.5371ZM0 15L0.707107 15.7071L4.24422 12.17L3.53711 11.4629L2.83 10.7558L-0.707107 14.2929L0 15ZM3.53711 11.4629V12.4629H16.4619V11.4629V10.4629H3.53711V11.4629ZM16.4619 11.4629L17.1691 10.7558L10.7072 4.29295L10 5L9.29284 5.70705L15.7548 12.1699L16.4619 11.4629ZM10 5L10.7071 5.70711L15.7071 0.707107L15 0L14.2929 -0.707107L9.29289 4.29289L10 5ZM15 0L14.2929 0.707107L29.2929 15.7071L30 15L30.7071 14.2929L15.7071 -0.707107L15 0Z\" fill=\"#F5DEFE\" mask=\"url(#path-1-inside-1_40_843)\"\/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n\n<h2 id=\"qu-es-un-manual-de-estilo-web\" class=\"wp-block-heading\">Qu\u00e8 \u00e9s un manual d&#8217;estil web<\/h2>\n\n<p class=\"wp-block-paragraph\">El <strong>manual d&#8217;estil web<\/strong> \u00e9s la traducci\u00f3 digital de la identitat de marca: inclou colors, tipografies, components, to de contingut i patrons d&#8217;interacci\u00f3 espec\u00edficament per a \u00fas a la web. No \u00e9s nom\u00e9s una guia visual; Tamb\u00e9 inclou criteris de disseny, jerarquies, \u00fas d&#8217;imatges, botons, formularis i regles de contingut. <\/p>\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"280\" height=\"400\" src=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/qa1.webp\" alt=\"Home Manual d'Estil Web Elimina el fons\" class=\"wp-image-1208\" srcset=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/qa1.webp 280w, https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/qa1-210x300.webp 210w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"580\" height=\"830\" src=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/qa2.webp\" alt=\"Manual d'Estil Web Eliminar fons\" class=\"wp-image-1209\" srcset=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/qa2.webp 580w, https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/qa2-210x300.webp 210w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">A la pr\u00e0ctica, es converteix en la refer\u00e8ncia per a dissenyadors, desenvolupadors, redactors publicitaris i qualsevol persona implicada en la creaci\u00f3 de noves p\u00e0gines o seccions del lloc.<\/p>\n\n<h2 class=\"wp-block-heading\">Difer\u00e8ncia entre manual de marca i manual d&#8217;estil web<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>El manual de la marca defineix la identitat global: logotip, usos, paleta, tipografies, to general, aplicacions en diferents suports.<\/li>\n\n\n\n<li>El manual d&#8217;estil web trasllada aquests principis a l&#8217;entorn digital: disseny de botons, comportament dels men\u00fas, estils de titulars, mides de text, espaiat, graelles, etc.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Ambd\u00f3s documents han d&#8217;estar alineats, per\u00f2 el manual d&#8217;estil web aprofundeix en qu\u00e8 afecta directament l&#8217;experi\u00e8ncia de navegaci\u00f3 en l\u00ednia.<\/p>\n\n<h2 id=\"por-qu-tu-web-necesita-un-manual-de-estilo\" class=\"wp-block-heading\">Per qu\u00e8 el teu lloc web necessita una guia d&#8217;estil<\/h2>\n\n<p class=\"wp-block-paragraph\">Tenir un <strong>manual d&#8217;estil web<\/strong> no \u00e9s un luxe, \u00e9s una eina operativa que estalvia temps, evita errors i millora la percepci\u00f3 de la marca.<\/p>\n\n<p class=\"wp-block-paragraph\">Entre els seus beneficis:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Coher\u00e8ncia visual: Totes les p\u00e0gines semblen formar part del mateix projecte, independentment de qui les hagi creat.<\/li>\n\n\n\n<li>Estalvi de temps: dissenyadors i desenvolupadors no han d'\u00bbinventar\u00bb estils cada vegada; Nom\u00e9s apliquen el sistema existent.<\/li>\n\n\n\n<li>Millor experi\u00e8ncia d&#8217;usuari: Jerarquies clares, patrons repetits i comportaments previsibles faciliten la navegaci\u00f3.<\/li>\n\n\n\n<li>Escalabilitat: et permet expandir el lloc web (noves seccions, aterratges, microllocs) sense trencar la coher\u00e8ncia.<\/li>\n\n\n\n<li>Integraci\u00f3 d&#8217;equip: ag\u00e8ncies, freelancers i equips interns treballen segons les mateixes normes.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Sense aquesta guia, cada nova p\u00e0gina corre el risc de semblar un petit \u00abexperiment\u00bb visual, cosa que acaba danyant la imatge de la marca.<\/p>\n\n<h2 id=\"elementos-que-debe-incluir-un-manual-de-estilo-web\" class=\"wp-block-heading\">Elements que un manual d&#8217;estil web hauria d&#8217;incloure<\/h2>\n\n<p class=\"wp-block-paragraph\">Tot i que cada projecte pot requerir seccions espec\u00edfiques, un bon manual d&#8217;estil web normalment inclou almenys els seg\u00fcents blocs.<\/p>\n\n<h3 class=\"wp-block-heading\">Identitat visual aplicada a la web<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Logotip: versions permeses, mides m\u00ednimes, marges de seguretat, usos en fons clars i foscos.<\/li>\n\n\n\n<li>Paleta de colors: colors primaris i secundaris, codis hexadecimals\/RGB, usos recomanats (fons, textos, accents, alertes).<\/li>\n\n\n\n<li>Tipografies: tipografia corporativa, alternatives a la web o de sistema, mides, pesos i usos (titulars, cos, botons, notes).<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Sistema tipogr\u00e0fic i jerarquia de continguts<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Estils de titulars (H1, H2, H3, etc.): mida, pes, espaiat entre l\u00ednies, abans i despr\u00e9s.<\/li>\n\n\n\n<li>Par\u00e0grafs i llistes: mida del cos del text, alineaci\u00f3, espaiat entre l\u00ednies i par\u00e0grafs, estils de punts i numeraci\u00f3.<\/li>\n\n\n\n<li>Cites, punts destacats i missatges informatius: Estils espec\u00edfics per destacar informaci\u00f3 clau.<\/li>\n<\/ul>\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"280\" height=\"400\" src=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/G1-Pixel-Perfect.webp\" alt=\"Manual d'estil web de disseny d'icones Pixel Perfect\" class=\"wp-image-1215\" srcset=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/G1-Pixel-Perfect.webp 280w, https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/G1-Pixel-Perfect-210x300.webp 210w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"580\" height=\"830\" src=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/G2-Icon-Set.webp\" alt=\"Manual d'estil del conjunt d'icones web\" class=\"wp-image-1216\" srcset=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/G2-Icon-Set.webp 580w, https:\/\/neonoova.com\/wp-content\/uploads\/2026\/02\/G2-Icon-Set-210x300.webp 210w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<h3 class=\"wp-block-heading\">Components i elements de la interf\u00edcie d&#8217;usuari<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Botons: Tipus (principal, secundari, text), colors, estats (normal, flotant, actiu, desactivat), radis de vora.<\/li>\n\n\n\n<li>Formularis: camps de text, desplegables, botons d&#8217;inter\u00e8s, caselles de selecci\u00f3, missatges d&#8217;error i de confirmaci\u00f3.<\/li>\n\n\n\n<li>Men\u00fas i navegaci\u00f3: Estils de men\u00fa principal, submen\u00fas, navegaci\u00f3 m\u00f2bil, molles de pa.<\/li>\n\n\n\n<li>Cartes i m\u00f2duls de contingut: estructura, ombres o vores, comportament de flotaci\u00f3, usos recomanats.<\/li>\n\n\n\n<li>Alertes i missatges del sistema: informaci\u00f3, advert\u00e8ncia, error, \u00e8xit, cadascun amb els seus colors i estils.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Disseny de la disposici\u00f3 i la graella<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Amplada m\u00e0xima del contingut, marges laterals i espaiat vertical.<\/li>\n\n\n\n<li>Sistema de columnes: quantes columnes s&#8217;utilitzen a l&#8217;escriptori i com s&#8217;adapten a tauletes i m\u00f2bils.<\/li>\n\n\n\n<li>Comportament responsiu: punts de ruptura i canvis clau en cada resoluci\u00f3.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">Imatges, iconografia i recursos gr\u00e0fics<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Estil fotogr\u00e0fic: llum, enquadrament, saturaci\u00f3, \u00fas de filtres, tipus preferits d&#8217;escenes.<\/li>\n\n\n\n<li>Icones: estil (lineal, s\u00f2lid, pla, contorn), mides est\u00e0ndard, color i \u00fas consistent.<\/li>\n\n\n\n<li>Il\u00b7lustracions: si s&#8217;utilitzen, quin estil gr\u00e0fic s&#8217;aplica i en quin context.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">To i estil del contingut<\/h3>\n\n<p class=\"wp-block-paragraph\">Tot i que sovint es deixa per a un manual de contingut, es recomana que el <strong>manual d&#8217;estil web<\/strong> inclogui almenys directrius b\u00e0siques:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Adre\u00e7a: de tu o de tu, m\u00e9s formal o m\u00e9s propera.<\/li>\n\n\n\n<li>Llenguatge: t\u00e8cnic, informatiu, inspirador, corporatiu.<\/li>\n\n\n\n<li>Extensi\u00f3 indicativa per a titulars, subt\u00edtols i blocs de text.<\/li>\n\n\n\n<li>Criteris per als CTAs (crides a l&#8217;acci\u00f3): verbs, longituds, to.<\/li>\n<\/ul>\n        <div class=\"doflex docolumn banner-contacto-blog\">\n            <div class=\"doflex docolumn gap20 columna-banner\">\n               <div class=\"doflex dospace gap20\"><img decoding=\"async\" src=\"https:\/\/neonoova.com\/wp-content\/uploads\/2026\/06\/bot.webp\" alt=\"neonoova bot\">\n\t\t\t\t<p class=\"text24-24 negrita\">Encara dubtes? Sol\u00b7licita una reuni\u00f3 amb el nostre equip de disseny <\/p>\n\t\t\t\t<\/div>\n                <button class=\"home-slider-cuadricula-button text18-21 abrir-popup-contacto\" type=\"button\">\n                    Contacta&#039;ns\n                    <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <mask id=\"path-1-inside-1_40_843\" fill=\"white\">\n                            <path d=\"M30 15L15 30L10 25L16.4619 18.5371H3.53711L0 15L3.53711 11.4629H16.4619L10 5L15 0L30 15Z\"\/>\n                        <\/mask>\n                        <path d=\"M30 15L30.7071 15.7071C31.0976 15.3166 31.0976 14.6834 30.7071 14.2929L30 15ZM15 30L14.2929 30.7071C14.6834 31.0976 15.3166 31.0976 15.7071 30.7071L15 30ZM10 25L9.29284 24.2929C8.90237 24.6835 8.90239 25.3166 9.29289 25.7071L10 25ZM16.4619 18.5371L17.1691 19.2442C17.455 18.9582 17.5406 18.528 17.3858 18.1544C17.231 17.7807 16.8664 17.5371 16.4619 17.5371V18.5371ZM3.53711 18.5371L2.83 19.2442C3.01754 19.4318 3.27189 19.5371 3.53711 19.5371V18.5371ZM0 15L-0.707107 14.2929C-1.09763 14.6834 -1.09763 15.3166 -0.707107 15.7071L0 15ZM3.53711 11.4629V10.4629C3.27189 10.4629 3.01754 10.5682 2.83 10.7558L3.53711 11.4629ZM16.4619 11.4629V12.4629C16.8664 12.4629 17.231 12.2193 17.3858 11.8456C17.5406 11.472 17.455 11.0418 17.1691 10.7558L16.4619 11.4629ZM10 5L9.29289 4.29289C8.90239 4.6834 8.90237 5.31652 9.29284 5.70705L10 5ZM15 0L15.7071 -0.707107C15.3166 -1.09763 14.6834 -1.09763 14.2929 -0.707107L15 0ZM30 15L29.2929 14.2929L14.2929 29.2929L15 30L15.7071 30.7071L30.7071 15.7071L30 15ZM15 30L15.7071 29.2929L10.7071 24.2929L10 25L9.29289 25.7071L14.2929 30.7071L15 30ZM10 25L10.7072 25.7071L17.1691 19.2442L16.4619 18.5371L15.7548 17.8301L9.29284 24.2929L10 25ZM16.4619 18.5371V17.5371H3.53711V18.5371V19.5371H16.4619V18.5371ZM3.53711 18.5371L4.24422 17.83L0.707107 14.2929L0 15L-0.707107 15.7071L2.83 19.2442L3.53711 18.5371ZM0 15L0.707107 15.7071L4.24422 12.17L3.53711 11.4629L2.83 10.7558L-0.707107 14.2929L0 15ZM3.53711 11.4629V12.4629H16.4619V11.4629V10.4629H3.53711V11.4629ZM16.4619 11.4629L17.1691 10.7558L10.7072 4.29295L10 5L9.29284 5.70705L15.7548 12.1699L16.4619 11.4629ZM10 5L10.7071 5.70711L15.7071 0.707107L15 0L14.2929 -0.707107L9.29289 4.29289L10 5ZM15 0L14.2929 0.707107L29.2929 15.7071L30 15L30.7071 14.2929L15.7071 -0.707107L15 0Z\" fill=\"#F5DEFE\" mask=\"url(#path-1-inside-1_40_843)\"\/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n\n<h2 id=\"cmo-se-crea-un-manual-de-estilo-web\" class=\"wp-block-heading\">Com crear un manual d&#8217;estil web<\/h2>\n\n<p class=\"wp-block-paragraph\">El proc\u00e9s de crear un <strong>manual d&#8217;estil web<\/strong> normalment combina an\u00e0lisi de marca, disseny i documentaci\u00f3.<\/p>\n\n<h3 class=\"wp-block-heading\">1. An\u00e0lisi de marca i lloc web actual<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Revisa el manual de la marca existent (si n&#8217;hi ha).<\/li>\n\n\n\n<li>Audita el lloc web actual per identificar inconsist\u00e8ncies, estils duplicats o patrons poc clars.<\/li>\n\n\n\n<li>Defineix objectius: qu\u00e8 vols aconseguir amb la guia i qui l&#8217;utilitzar\u00e0.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">2. Definici\u00f3 del sistema visual<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Tria i ajusta la paleta de colors adequada per al digital (contrastos, accessibilitat).<\/li>\n\n\n\n<li>Defineix les tipografies i els estils tipogr\u00e0fics per a tots els nivells de contingut.<\/li>\n\n\n\n<li>Configura la graella i els espais entre bases.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">3. Disseny de components<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Crea un inventari de components: botons, formularis, cartes, m\u00f2duls especials, men\u00fas, etc.<\/li>\n\n\n\n<li>Dissenya cada component en els seus diferents estats i variants.<\/li>\n\n\n\n<li>Valida la coher\u00e8ncia amb la identitat global de la marca.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">4. Documentaci\u00f3 clara i \u00fatil<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Recull tots els estils en un document estructurat, amb exemples visuals.<\/li>\n\n\n\n<li>Inclou codis de colors, mides, noms de classes o tokens (si s&#8217;utilitza disseny en sistemes).<\/li>\n\n\n\n<li>Acompanya-ho amb captures de pantalla o exemples de maquetes perqu\u00e8 sigui f\u00e0cil d&#8217;entendre fins i tot per a perfils no t\u00e8cnics.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">5. Revisi\u00f3, entrenament i manteniment<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Presenta el manual a les persones que l&#8217;utilitzaran (disseny, desenvolupament, contingut, m\u00e0rqueting).<\/li>\n\n\n\n<li>Resol dubtes i ajusta els detalls segons necessitats reals.<\/li>\n\n\n\n<li>Revisa peri\u00f2dicament el manual per actualitzar-lo quan el lloc web creixi o s&#8217;introdueixin nous components.<\/li>\n<\/ul>\n\n<h2 id=\"manual-de-estilo-web-y-diseo-en-sistemas-design-sy\" class=\"wp-block-heading\">Manual d&#8217;estil web i disseny en sistemes (Sistemes de disseny)<\/h2>\n\n<p class=\"wp-block-paragraph\">En projectes m\u00e9s grans, el <strong>manual d&#8217;estil web<\/strong> pot formar part d&#8217;un sistema de disseny m\u00e9s ampli. En aquest cas, la guia no nom\u00e9s documenta estils, sin\u00f3 tamb\u00e9: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Biblioteques de components reutilitzables (a Figma, Sketch, XD, etc.).<\/li>\n\n\n\n<li>Tokens de disseny (per colors, tipografies, espaiat) compartits amb el desenvolupament.<\/li>\n\n\n\n<li>Principis de disseny: regles generals que guien les decisions (claredat, simplicitat, accessibilitat, etc.).<\/li>\n\n\n\n<li>Documentaci\u00f3 t\u00e8cnica per a frontend: components a React, Vue, Web Components o altres frameworks.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Aix\u00f2 facilita l&#8217;alineaci\u00f3 entre disseny i desenvolupament, redueix errors de desplegament i accelera la creaci\u00f3 de noves interf\u00edcies.<\/p>\n\n<h2 id=\"tabla-contenidos-bsicos-de-un-manual-de-estilo-web\" class=\"wp-block-heading\">Taula: continguts b\u00e0sics d&#8217;un manual d&#8217;estil web<\/h2>\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-left\" data-align=\"left\">Bloc<\/th><th class=\"has-text-align-left\" data-align=\"left\">Contingut principal<\/th><th class=\"has-text-align-left\" data-align=\"left\">Per a qui \u00e9s \u00fatil?<\/th><\/tr><\/thead><tbody><tr><td>Identitat visual aplicada a la web<\/td><td>Logotip, colors, tipografies, usos<\/td><td>Disseny, branding, desenvolupament<\/td><\/tr><tr><td>Tipografia i jerarquia<\/td><td>Estils, par\u00e0grafs, llistes, citacions H1\u2013H6<\/td><td>Disseny, Contingut, SEO<\/td><\/tr><tr><td>Components d&#8217;interf\u00edcie d&#8217;usuari<\/td><td>Botons, formularis, targetes, men\u00fas, alertes<\/td><td>Disseny, desenvolupament<\/td><\/tr><tr><td>Disposici\u00f3 i quadr\u00edcula<\/td><td>Amplades, columnes, espaiats, punts de trencament<\/td><td>Disseny, desenvolupament<\/td><\/tr><tr><td>Imatges i icones<\/td><td>Estil fotogr\u00e0fic, iconografia, il\u00b7lustracions<\/td><td>Disseny, contingut<\/td><\/tr><tr><td>To i estil del text<\/td><td>Veu de marca, adre\u00e7a, CTA, criteris de redacci\u00f3 publicit\u00e0ria<\/td><td>Contingut, m\u00e0rqueting<\/td><\/tr><tr><td>Regles d&#8217;\u00fas i exemples<\/td><td>Bones i males pr\u00e0ctiques, captures, casos reals<\/td><td>Tot l&#8217;equip<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h2 id=\"errores-frecuentes-al-trabajar-sin-manual-de-estil\" class=\"wp-block-heading\">Errors comuns quan es treballa sense un manual d&#8217;estil web<\/h2>\n\n<p class=\"wp-block-paragraph\">Quan un lloc web creix sense una guia clara, sovint sorgeixen problemes que afecten la percepci\u00f3 de professionalitat i la gesti\u00f3 di\u00e0ria:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Colors inconsistents: Botons o fons amb tons lleugerament diferents entre p\u00e0gines.<\/li>\n\n\n\n<li>Canvis de tipografies: mides, espaiat de l\u00ednies i diferents estils segons qui va dissenyar cada secci\u00f3.<\/li>\n\n\n\n<li>Components duplicats: M\u00faltiples estils de botons o targetes que fan el mateix, per\u00f2 tenen un aspecte diferent.<\/li>\n\n\n\n<li>Imatges sense criteri: barreges d&#8217;estils fotogr\u00e0fics, bancs d&#8217;imatges i qualitats desiguals.<\/li>\n\n\n\n<li>Incoher\u00e8ncies de to: p\u00e0gines amb un llenguatge molt formal i d&#8217;altres massa col\u00b7loquials.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">El <strong>manual d&#8217;estil web evita<\/strong> aquests problemes perqu\u00e8 estableix una \u00fanica refer\u00e8ncia per a tot l&#8217;equip.<\/p>\n\n<h2 id=\"cmo-integrar-el-manual-de-estilo-web-en-tu-flujo-d\" class=\"wp-block-heading\">Com integrar el manual d&#8217;estil web al teu flux de treball<\/h2>\n\n<p class=\"wp-block-paragraph\">El manual d&#8217;estil \u00e9s in\u00fatil si es queda en un PDF oblidat. Per ser realment \u00fatil, \u00e9s recomanable integrar-lo en la teva vida di\u00e0ria: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>Enlla\u00e7a&#8217;l des d&#8217;eines internes (gestors de projectes, intranet, etc.).<\/li>\n\n\n\n<li>Utilitza&#8217;l com a base per a plantilles de p\u00e0gina i components al CMS.<\/li>\n\n\n\n<li>Revisa els nous dissenys i desenvolupaments segons la guia abans d&#8217;aprovar-los.<\/li>\n\n\n\n<li>Actualitza&#8217;l quan s&#8217;afegeixin noves seccions o s&#8217;introdueixi un redisseny parcial.<\/li>\n\n\n\n<li>Formar els nous membres de l&#8217;equip utilitzant el manual com a document base.<\/li>\n<\/ul>\n\n<h2 id=\"faq-sobre-manual-de-estilo-web\" class=\"wp-block-heading\">Preguntes freq\u00fcents sobre el manual d&#8217;estil web<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Un manual d&#8217;estil web \u00e9s un document que defineix les regles visuals, estructurals i tonals que un lloc web ha de seguir per mantenir una identitat coherent a totes les seves p\u00e0gines. El seu objectiu \u00e9s alinear disseny, contingut i desenvolupament, de manera que qualsevol persona que cre\u00ef o actualitzi el lloc web s\u00e0piga exactament [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2131,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[46],"tags":[57,58,52,53,51,59],"class_list":["post-2141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-grafic","tag-botiga-online","tag-disseny-ui-ux","tag-disseny-web","tag-identitat-corporativa","tag-lloc-web-corporatiu","tag-lloc-web-personalitzat"],"acf":[],"_links":{"self":[{"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/posts\/2141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/comments?post=2141"}],"version-history":[{"count":3,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/posts\/2141\/revisions"}],"predecessor-version":[{"id":2296,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/posts\/2141\/revisions\/2296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/media\/2131"}],"wp:attachment":[{"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/media?parent=2141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/categories?post=2141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neonoova.com\/ca\/wp-json\/wp\/v2\/tags?post=2141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}